Design a Business Agency Website in HTML CSS & JavaScript
Last Updated :
22 Mar, 2024
Improve
A business agency website can be used to showcase any kind of business in an attractive and interactive way to the users. It contains different sections that represent the services offered by your business.
Approach:
- The HTML structure includes various sections such as the header, navigation, main content sections (Home, About Us, Services, Contact), and the footer. Each section provides a designated space for presenting relevant information and engaging with visitors.
- Use CSS styles to define the overall layout, typography, and color scheme of our website. It ensures consistency and visual coherence across different sections and elements.
- Now, use JavaScript code to enable smooth scrolling to the respective section clicked in the navbar.
- Add the CDN links of the below dependencies to your HTML document to implement them
Example: This example describes the basic implementation of the Business Agency Website using HTML, CSS, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Business Agency</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo">
<a href="https://www.geeksforgeeks.org/">
<span>Business Agency</span>
</a>
</div>
<ul class="menu">
<li>
<a href="#home" class="menu-btn">
Home
</a>
</li>
<li>
<a href="#about" class="menu-btn">
About
</a>
</li>
<li>
<a href="#services" class="menu-btn">
Services
</a>
</li>
<li>
<a href="#contact" class="menu-btn">
Contact
</a>
</li>
</ul>
<div class="menu-btn">
<span>☰</span>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">
Hello, This is very best
</div>
<div class="text-2">
Business
</div>
<div class="text-3">
Agency
<span class="typing"></span>
</div>
<a href="#about" target="_blank">
Read More
</a>
</div>
</div>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About</h2>
<div class="about-content">
<div class="column left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240304112759/sandals_1_100.png"/>
</div>
<div class="column right">
<div class="text">
Business Agency
<span class="typing-2"></span>
</div>
<p>
GeeksforGeeks is a leading platform that provides
computer science resources and coding challenges
for programmers and technology enthusiasts, along
with interview and exam preparations for upcoming
aspirants. With a strong emphasis on enhancing coding
skills and knowledge, it has become a trusted destination
for over 12 million plus registered users worldwide. The
platform offers a vast collection of tutorials, practice
problems, interview tutorials, articles, and courses, covering
various domains of computer science.
</p>
<p>
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the humble
beginnings of coding to the pinnacle of
expertise. Under their guidance watch your
skills flourish as we lay the foundation and
help you conquer the world of coding.
</p>
<a href=
"https://www.geeksforgeeks.org/top-advertising-agency-softwares/">
More Details
</a>
</div>
</div>
</div>
</section>
<!-- services section start -->
<section class="services" id="services">
<div class="max-width">
<h2 class="title">My Services</h2>
<div class="services-content">
<div class="carousel owl-carousel">
<a class="alink" href="#home">
<div class="card">
<div class="box">
<i class="fas fa-archive"></i>
<div class="text">Web Design</div>
<p>
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the humble
beginnings of coding to the pinnacle of
expertise. Under their guidance watch your
skills flourish as we lay the foundation and
help you conquer the world of coding.
</p>
</div>
</div>
</a>
<div class="card">
<div class="box">
<i class="fas fa-paint-brush"></i>
<div class="text">Digital Marketing</div>
<p>
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the humble
beginnings of coding to the pinnacle of
expertise. Under their guidance watch your
skills flourish as we lay the foundation and
help you conquer the world of coding.
</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">App Desingns</div>
<p>
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the humble
beginnings of coding to the pinnacle of
expertise. Under their guidance watch your
skills flourish as we lay the foundation and
help you conquer the world of coding.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contact me</h2>
<div class="contact-content">
<div class="column left">
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title">.</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">.</div>
</div>
</div>
<div class="row">
<i class="fas fa-phone"></i>
<div class="info">
<div class="head">Phone</div>
<div class="sub-title">.</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title">
.
<p></p>
</div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Message me</div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Name" required />
</div>
<div class="field email">
<input type="email" placeholder="Email" required />
</div>
</div>
<div class="field subject">
<input type="text" placeholder="Subject" required />
</div>
<div class="field textarea">
<textarea name="" id="" cols="30" rows="10"
placeholder="Describe Query.."
required></textarea>
</div>
<div class="button">
<button type="submit"
onclick="alert('Thanks for Submiting')">
Send message
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer section start from here -->
<footer>
<div class="socialIcons">
<a href="#" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="#" target="_blank">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<span>
Created by
<a href="https://www.geeksforgeeks.org/">
GeeksForGeeks
</a>
<i class="fas fa-heart"></i> |
<span class="far fa-copyright"></span>
2024 Business Agency All rights
reserved
</span>
</footer>
<script src="script.js"></script>
</body>
</html>
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
html {
scroll-behavior: smooth;
}
/* nabar styling */
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
background-color: #131212bd;
}
.navbar.sticky {
padding: 15px 0;
background-color: rgb(106, 163, 134);
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
margin: auto 0 auto 40px;
}
.navbar .logo a {
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .logo a span {
color: rgb(74, 159, 103);
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
font-weight: bold;
}
.navbar.sticky .menu li a:hover {
color: #fff;
font-weight: bold;
}
/* menu button styling */
.menu-btn {
color: #fff;
font-size: 23px;
cursor: pointer;
display: none;
}
/* .scroll-up-btn stlying */
.scroll-up-btn {
position: fixed;
right: 30px;
height: 45px;
width: 42px;
background: crimson;
text-align: center;
line-height: 45px;
color: #fff;
opacity: 0;
z-index: 99999;
font-size: 30px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.scroll-up-btn.show {
bottom: 30px;
opacity: 1;
pointer-events: auto;
}
/* home-section styling */
.home {
display: flex;
background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20240304112753/background_100.png');
height: 100vh;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
min-height: 500px;
font-family: "Ubunto", sans-serif;
}
.home .max-width {
margin: auto 0 auto 40px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
.home .home-content a {
display: inline-block;
background: crimson;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
}
.home .home-content a:hover {
color: crimson;
background: none;
}
/* about section styling */
.about .title::after {
content: "Agency ";
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.about .about-content .right .text span {
color: crimson;
}
.about .about-content .right p {
text-align: justify;
}
.about .about-content .right a {
display: inline-block;
background: crimson;
color: #fff;
font-weight: 500;
font-size: 20px;
padding: 10px 30px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
}
.about .about-content .right a:hover {
color: crimson;
background: none;
}
/* services section stylying */
.services,
.teams {
color: #fff;
background: #111;
}
.services .alink {
color: white;
}
.services .title:before,
.teams .title:before {
background: #fff;
}
.services .title:after {
background: #111;
content: "What i provide";
}
.services .services-content .card {
background: #222;
text-align: center;
border-radius: 6px;
padding: 20px 25px;
cursor: pointer;
}
.services .services-content .card:hover {
background: crimson;
}
.services .services-content .card .box {
transition: all 0.3s ease;
}
.services .services-content .card i {
color: crimson;
font-size: 50px;
transition: color 0.3s ease;
}
.services .services-content .card:hover i {
color: #fff;
}
.services .services-content .card:hover .box {
transform: scale(1.05);
}
.services .services-content .card .text {
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px;
}
/* contact section styling */
.contact .title::after {
content: "get in touch";
}
.contact .contact-content .column {
width: calc(50% - 30px);
}
.contact .contact-content .text {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.contact .contact-content .left p {
text-align: justify;
}
.contact .contact-content .left .icons {
margin: 10px 0;
}
.contact .contact-content .left .row {
display: flex;
height: 65px;
align-items: center;
}
.contact .contact-content .left .row .info {
margin-left: 30px;
}
.contact .contact-content .left .row i {
font-size: 25px;
color: crimson;
}
.contact .contact-content .info .head {
font-weight: 500;
}
.contact .contact-content .info .sub-title {
color: #111;
}
.contact .contact-content .row-icons a i {
margin-top: 5px;
font-size: 25px;
color: #fff;
background: crimson;
padding: 10px;
border-radius: 50%;
border: 2px solid crimson;
}
.contact .contact-content .row-icons a:hover i {
cursor: pointer;
background: none;
color: crimson;
}
.contact .right form .fields {
display: flex;
}
.contact .right form .field,
.contact .right form .fields .field {
height: 45px;
width: 100%;
margin-bottom: 15px;
}
.contact .right form .textarea {
height: 80px;
width: 100%;
}
.contact .right form .name {
margin-right: 10px;
}
.contact .right form .email {
margin-right: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea {
height: 100%;
width: 100%;
border: 1px solid lightgray;
border-radius: 6px;
outline: none;
padding: 0 15px;
font-size: 17px;
font-family: 'Poppins', sans-serif;
}
.contact .right form .textarea textarea {
padding-top: 10px;
resize: none;
}
.contact .right form .button {
height: 47px;
width: 170px;
}
.contact .right form .button button {
width: 100%;
height: 100%;
border: 2px solid crimson;
background: crimson;
color: #fff;
font-size: 20px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.contact .right form .button button:hover {
color: crimson;
background: none;
}
/* footer section styling start */
footer {
display: flex;
align-items: center;
justify-content: space-between;
background: #111;
padding: 20px 23px;
color: #fff;
}
.socialIcons {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.socialIcons a {
width: 35px;
margin: 0 5px;
}
footer span a {
color: crimson;
text-decoration: none;
}
footer span a:hover {
text-decoration: underline;
}
/* all similar styling */
section {
padding: 100px 0;
}
section .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: bold;
margin-bottom: 60px;
padding: 20px;
font-family: 'Ubunto', sans-serif;
}
section .title::before {
content: "";
font-weight: bolder;
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #111;
transform: translateX(-50%);
}
section .title::after {
position: absolute;
bottom: -12px;
left: 50%;
font-size: 20px;
color: crimson;
padding: 5px;
background: #fff;
transform: translateX(-50%);
}
.about,
.services,
.skills,
.teams,
.contact,
footer {
font-family: 'Poppins', sans-serif;
}
.about .about-content,
.services .services-content,
.skills .skills-content,
.contact .contact-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
/* carsouel animation stylying start here */
.owl-dots {
text-align: center;
margin-top: 20px;
}
.owl-dot {
height: 13px;
width: 13px;
margin: 0 5px;
outline: none !important;
border-radius: 50%;
border: 2px solid crimson !important;
transition: all 0.3s ease;
}
.owl-dot.active {
width: 35px;
border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover {
background: crimson !important;
}
/* responsive media quries starts */
@media(max-width:1300px) {
.about .about-content .column {
width: 50%;
}
}
@media(max-width:1150px) {
.home .max-width {
margin-left: 0px;
}
.about .about-content .left img {
height: 350px;
width: 350px;
}
.socialIcons {
margin-right: 70px;
}
}
@media(max-width:1000px) {
.max-width {
padding: 0 50px;
}
.menu-btn {
display: block;
z-index: 999;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 50%;
right: -50%;
top: 0;
text-align: center;
background: black;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
right: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.navbar .menu li a:hover {
color: black;
font-size: 33px;
font-weight: bold;
}
.navbar.sticky .menu li a:hover {
color: black;
font-size: 33px;
font-weight: bold;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 35px;
}
.home .home-content a {
font-size: 23px;
padding: 10px 30px;
}
.max-width {
max-width: 800px;
}
.about .about-content .column {
width: 100%;
}
.about .about-content .left {
display: flex;
justify-content: center;
margin: 0 auto 60px;
}
.about .about-content .right {
flex: 100%;
}
.contact .contact-content .column {
width: 100%;
margin-bottom: 35px;
}
.socialIcons {
margin-top: 0;
margin-right: 150px;
}
}
@media(max-width:700px) {
.max-width {
padding: 0 23px;
}
.home .home-content .text-2 {
font-size: 60px;
}
.home .home-content .text-3 {
font-size: 32px;
}
.home .home-content a {
font-size: 20px;
}
}
@media(max-width:500px) {
.home .home-content .text-2 {
font-size: 50px;
}
.home .home-content .text-3 {
font-size: 27px;
}
.socialIcons {
margin-top: 0;
margin-right: 10px;
}
}
@media(max-width:350px) {
.about .title::after,
.services .title::after,
.contact .title::after {
font-size: 15px;
}
}
$(document).ready(function () {
$(window).scroll(function () {
if (this.scrollY > 20) {
$('.navbar').addClass("sticky");
} else {
$('.navbar').removeClass("sticky");
}
if (this.scrollY > 500) {
$('.scroll-up-btn').addClass("show");
} else {
$('.scroll-up-btn').removeClass("show");
}
});
// slide-up-script
$('.scroll-up-btn').click(function () {
$('html').animate({ scrollTop: 0 })
});
// toggle menu / navbar script
$('.menu-btn').click(function () {
$('.navbar .menu').toggleClass("active");
$('.menu-btn span').toggleClass("active");
});
// typing animation
const typed1 = new Typed(".typing", {
strings: ["",],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
// typing animation
const typed2 = new Typed(".typing-2", {
strings: ["",],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
// owl carousel script
$('.carousel').owlCarousel({
margin: 20,
loop: true,
autoplayTime: 2000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 2,
nav: false
},
1000: {
items: 3,
nav: false
}
}
});
});
Output:
