Open In App

Design a Business Agency Website in HTML CSS & JavaScript

Last Updated : 22 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML 
<!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>
CSS 
@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;
    }
}
Javascript 
$(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:

fosiGIF



Like Article
Suggest improvement
Next
Design a Online Grocery Website in HTML CSS & JavaScript
Share your thoughts in the comments

Similar Reads

Create an Agency Website using React and Tailwind
Menu-Driven program to implement Travel Agency
Design a Online Cake Shop Website in HTML CSS & JavaScript
Design a Online Grocery Website in HTML CSS & JavaScript
Design a School Website in HTML CSS and JavaScript
Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week
Design a Video Calling Website UI Template using HTML and CSS
Design Glassmorphism Website in HTML & CSS
Difference between Responsive Website and Mobile Website
Create a Music Website Template using HTML, CSS & JavaScript
author
rajveer_joshi78
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox