Open In App

Design a Business Agency Website in HTML CSS & JavaScript

Last Updated : 22 Mar, 2024
Comments
Improve
Suggest changes
Like Article
Like
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


Next Article
Design a Business Agency Website in HTML CSS & JavaScript

R
rajveer_joshi78
Improve
Article Tags :

Similar Reads

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