How To Build A Professional About Us Page With HTML,CSS And JS

Discover how to build a professional and modern About Us page using HTML, CSS and JavaScript. This comprehensive tutorial includes full source code and smooth animations support to help you create a visually appealing and responsive page that effectively represents your brand or brand website you will be build.

Table Of Contents

Introduction
Requirement Tools
Skills Needed
Project Setup
HTML Code
Styling with CSS
JavaScript code
Output
Conclusion

Introduction

Welcome to this tutorial building a professional About Us page using HTML, CSS and JavaScript. Whether you are enhancing your personal portfolio or developing a company website. In this project I will create a clean,modern and fully responsive About Us page that showcases the brand of your website or other website you building.

I will cover essential features such as a modern design layout, interactive elements and smooth animations to enhance the user experience. Additional features include a responsive grid or flexbox-based layout, dynamic content loading for better engagement.

This project is ideal for everyone from beginners to experienced developers who want to create professional and user friendly About Us pages for any kind of web project.

Requirement Tools

Code Editor
Recommended: Visual Studio Code(VS Code).
Alternatives: Sublime Text, Notepad++ or Brackets.

Web Browser
Recommended: Google Chrome, Firefox or Microsoft Edge for testing and previewing your page.

Skills Needed

HTML
Understanding of semantic tags.
Ability to structure content cleanly.
CSS
Understanding media queries for responsiveness.
Also CSS transitions or animations.
JavaScript
Basic understanding.

Project Setup

Create new folder by press Ctrl+Shift+N or press right click into screen then click “New” and choose Folder.
rename with name (About Us).
Open with Visual Studio and create inside the folder three files:
1. Index.html
2. style.css and
3. main.js.

Let’s Start Coding

HTML Code

Open the Index.html file and paste the code shown below.

<!DOCTYPE html>
<html lang="en">
  <!--Developed by- Codeweave24-->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Us | CodeWeave24</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Header -->
    <header>
      <div class="container">
        <nav class="navbar">
          <a href="#" class="logo">
            <div class="logo-icon">CW</div>
            <div class="logo-text">Code<span>Weave</span>24</div>
          </a>
          <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <div class="menu-toggle">
            <i class="fas fa-bars"></i>
          </div>
        </nav>
      </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-text fade-in">
            <h1>Crafting Digital Excellence Since 2015</h1>
            <p>
              At CodeWeave24, we blend cutting-edge technology with creative
              design to build digital solutions that drive real business
              results. Our team of experts is passionate about delivering
              exceptional experiences.
            </p>
            <a href="#" class="cta-button fade-in delay-1"
              >Explore Our Work <i class="fas fa-arrow-right"></i
            ></a>
          </div>
          <div class="hero-image scale-in delay-1">
            <img
              src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
              alt="Team Collaboration"
              class="hero-image-main"
            />
            <div class="hero-image-decoration decoration-1"></div>
            <div class="hero-image-decoration decoration-2"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section class="about-section">
      <div class="container">
        <div class="section-title fade-in">
          <h2>Our Story</h2>
          <p>How we became the digital agency you can trust</p>
        </div>
        <div class="about-content">
          <div class="about-image fade-in">
            <img
              src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
              alt="Our Team"
            />
          </div>
          <div class="about-text fade-in delay-1">
            <h3>From Humble Beginnings to Industry Leaders</h3>
            <p>
              Founded in a small apartment with just two developers and a
              designer, CodeWeave24 has grown into a full-service digital agency
              with over 50 talented professionals. Our journey has been marked
              by innovation, dedication, and an unwavering commitment to
              quality.
            </p>
            <p>
              What sets us apart is our unique approach that combines technical
              expertise with creative vision. We don't just build websites and
              apps - we craft digital experiences that resonate with users and
              deliver measurable results.
            </p>
            <div class="features">
              <div class="feature-item fade-in delay-2">
                <div class="feature-icon">
                  <i class="fas fa-code"></i>
                </div>
                <h4>Technical Excellence</h4>
                <p>Cutting-edge solutions built with the latest technologies</p>
              </div>
              <div class="feature-item fade-in delay-3">
                <div class="feature-icon">
                  <i class="fas fa-paint-brush"></i>
                </div>
                <h4>Design Innovation</h4>
                <p>Beautiful interfaces that engage and delight users</p>
              </div>
              <div class="feature-item fade-in delay-4">
                <div class="feature-icon">
                  <i class="fas fa-chart-line"></i>
                </div>
                <h4>Proven Results</h4>
                <p>Data-driven strategies that deliver real business growth</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
      <div class="container">
        <h2 class="fade-in">Ready to Transform Your Digital Presence?</h2>
        <p class="fade-in delay-1">
          Let's create something amazing together. Our team is ready to bring
          your vision to life with innovative solutions tailored to your unique
          needs.
        </p>
        <a href="#" class="cta-button secondary fade-in delay-2"
          >Get Started <i class="fas fa-paper-plane"></i
        ></a>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-column fade-in">
            <h3>CodeWeave24</h3>
            <p>
              We're a passionate team of designers, developers, and strategists
              dedicated to creating digital experiences that make an impact.
            </p>
            <div class="footer-social">
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="footer-column fade-in delay-1">
            <h3>Quick Links</h3>
            <ul class="footer-links">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div class="footer-column fade-in delay-2">
            <h3>Services</h3>
            <ul class="footer-links">
              <li><a href="#">Web Development</a></li>
              <li><a href="#">Mobile App Development</a></li>
              <li><a href="#">UI/UX Design</a></li>
              <li><a href="#">Digital Marketing</a></li>
              <li><a href="#">E-Commerce Solutions</a></li>
              <li><a href="#">SEO Optimization</a></li>
            </ul>
          </div>
          <div class="footer-column fade-in delay-3">
            <h3>Contact Us</h3>
            <p>
              <i class="fas fa-map-marker-alt"></i> fardaha,<br />Borama,
              Somaliland
            </p>
            <p><i class="fas fa-phone"></i> (252) 63-7856190</p>
            <p><i class="fas fa-envelope"></i> hello@codeweave24.com</p>
          </div>
        </div>
        <div class="footer-bottom fade-in delay-4">
          <p>© 2025 CodeWeave24. All Rights Reserved.</p>
        </div>
      </div>
    </footer>
    <script src="main.js"></script>
  </body>
</html>

HTML

Explained

<!DOCTYPE html>
<html lang="en">

Tells the browser this an HTML5 Document and the pae language is English.

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Us | CodeWeave24</title>

<meta charset> ensures proper display of special characters.

<meta viewport> makes the page responsive (works on mobile).

<title> sets the title in the browser tab.

    <link
      rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link 
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

These lines import:
Font Awesome for icons.
Google Fonts (Poppins) for typography.
style.css is your custom stylesheet.

<header>
      <div class="container">
        <nav class="navbar">
          <a href="#" class="logo">
            <div class="logo-icon">CW</div>
            <div class="logo-text">Code<span>Weave</span>24</div>
          </a>
          <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <div class="menu-toggle">
            <i class="fas fa-bars"></i>
          </div>
        </nav>
      </div>
    </header>

The navigation bar with the site logo and links to other pages (Home, About, Services, Contact).

Mobile menu icon (<i class=”fas fa-bars”>) is for responsive toggling.

<section class="hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-text fade-in">
            <h1>Crafting Digital Excellence Since 2015</h1>
            <p>
              At CodeWeave24, we blend cutting-edge technology with creative
              design to build digital solutions that drive real business
              results. Our team of experts is passionate about delivering
              exceptional experiences.
            </p>
            <a href="#" class="cta-button fade-in delay-1"
              >Explore Our Work <i class="fas fa-arrow-right"></i
            ></a>
          </div>
          <div class="hero-image scale-in delay-1">
            <img
              src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
              alt="Team Collaboration"
              class="hero-image-main"
            />
            <div class="hero-image-decoration decoration-1"></div>
            <div class="hero-image-decoration decoration-2"></div>
          </div>
        </div>
      </div>
</section>

This is the main banner area of the page.

It contains:

A catchy headline.
A description.
A call-to-action button: “Explore Our Work”.
A hero image to the right.

Uses animations like fade-in, scale-in, and delays (delay-1).


    <section class="about-section">
      <div class="container">
        <div class="section-title fade-in">
          <h2>Our Story</h2>
          <p>How we became the digital agency you can trust</p>
        </div>
        <div class="about-content">
          <div class="about-image fade-in">
            <img
              src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
              alt="Our Team"
            />
          </div>
          <div class="about-text fade-in delay-1">
            <h3>From Humble Beginnings to Industry Leaders</h3>
            <p>
              Founded in a small apartment with just two developers and a
              designer, CodeWeave24 has grown into a full-service digital agency
              with over 50 talented professionals. Our journey has been marked
              by innovation, dedication, and an unwavering commitment to
              quality.
            </p>
            <p>
              What sets us apart is our unique approach that combines technical
              expertise with creative vision. We don't just build websites and
              apps - we craft digital experiences that resonate with users and
              deliver measurable results.
            </p>
            <div class="features">
              <div class="feature-item fade-in delay-2">
                <div class="feature-icon">
                  <i class="fas fa-code"></i>
                </div>
                <h4>Technical Excellence</h4>
                <p>Cutting-edge solutions built with the latest technologies</p>
              </div>
              <div class="feature-item fade-in delay-3">
                <div class="feature-icon">
                  <i class="fas fa-paint-brush"></i>
                </div>
                <h4>Design Innovation</h4>
                <p>Beautiful interfaces that engage and delight users</p>
              </div>
              <div class="feature-item fade-in delay-4">
                <div class="feature-icon">
                  <i class="fas fa-chart-line"></i>
                </div>
                <h4>Proven Results</h4>
                <p>Data-driven strategies that deliver real business growth</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Tells the story of the company

Headline: “From Humble Beginnings to Industry Leaders”.
A background image of the team.
A paragraph about company history and mission.

Includes 3 feature cards:

Technical Excellence.
Design Innovation.
Proven Results.

Each card has an icon and a brief description.

<section class="cta-section">
      <div class="container">
        <h2 class="fade-in">Ready to Transform Your Digital Presence?</h2>
        <p class="fade-in delay-1">
          Let's create something amazing together. Our team is ready to bring
          your vision to life with innovative solutions tailored to your unique
          needs.
        </p>
        <a href="#" class="cta-button secondary fade-in delay-2"
          >Get Started <i class="fas fa-paper-plane"></i
        ></a>
      </div>
    </section>

Encourages visitors to take action: “Ready to Transform Your Digital Presence?”.

A secondary CTA button: “Get Started”.

    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-column fade-in">
            <h3>CodeWeave24</h3>
            <p>
              We're a passionate team of designers, developers, and strategists
              dedicated to creating digital experiences that make an impact.
            </p>
            <div class="footer-social">
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="footer-column fade-in delay-1">
            <h3>Quick Links</h3>
            <ul class="footer-links">
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div class="footer-column fade-in delay-2">
            <h3>Services</h3>
            <ul class="footer-links">
              <li><a href="#">Web Development</a></li>
              <li><a href="#">Mobile App Development</a></li>
              <li><a href="#">UI/UX Design</a></li>
              <li><a href="#">Digital Marketing</a></li>
              <li><a href="#">E-Commerce Solutions</a></li>
              <li><a href="#">SEO Optimization</a></li>
            </ul>
          </div>
          <div class="footer-column fade-in delay-3">
            <h3>Contact Us</h3>
            <p>
              <i class="fas fa-map-marker-alt"></i> fardaha,<br />Borama,
              Somaliland
            </p>
            <p><i class="fas fa-phone"></i> (252) 63-7856190</p>
            <p><i class="fas fa-envelope"></i> hello@codeweave24.com</p>
          </div>
        </div>
        <div class="footer-bottom fade-in delay-4">
          <p>© 2025 CodeWeave24. All Rights Reserved.</p>
        </div>
      </div>
    </footer>

Split into four columns:

About the company with social media links.
Quick links to other pages.
List of services offered.
Contact info: address, phone number, email.

At the bottom, there’s a copyright:

<p>© 2025 CodeWeave24. All Rights Reserved.</p>

<script src="main.js"></script>

This connects your custom JavaScript file, typically used to:

Toggle mobile menu.
Animate on scroll.

Styling with CSS

We have finished the html part, now let’s start the styling part. Open style.css file and paste the code shown bellow.

 :root {
        --primary: #6c5ce7;
        --primary-dark: #5649c0;
        --secondary: #fd79a8;
        --dark: #2d3436;
        --light: #f5f6fa;
        --gray: #636e72;
        --light-gray: #dfe6e9;
        --success: #00b894;
        --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Poppins', sans-serif;
        line-height: 1.7;
        color: var(--dark);
        background-color: var(--light);
        overflow-x: hidden;
      }

      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }

      /* Header Styles */
      header {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
        position: fixed;
        width: 100%;
        z-index: 1000;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
      }

      .logo {
        display: flex;
        align-items: center;
        text-decoration: none;
      }

      .logo-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(
          135deg,
          var(--primary) 0%,
          var(--secondary) 100%
        );
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        color: white;
        font-weight: 700;
        font-size: 18px;
        transform-style: preserve-3d;
        transform: perspective(500px) rotateY(20deg);
        transition: var(--transition);
      }

      .logo:hover .logo-icon {
        transform: perspective(500px) rotateY(0deg);
        background: linear-gradient(
          135deg,
          var(--secondary) 0%,
          var(--primary) 100%
        );
      }

      .logo-text {
        font-size: 22px;
        font-weight: 700;
        color: var(--dark);
        transition: var(--transition);
      }

      .logo:hover .logo-text {
        color: var(--primary);
      }

      .logo-text span {
        color: var(--primary);
      }

      .nav-links {
        display: flex;
        list-style: none;
      }

      .nav-links li {
        margin-left: 30px;
        position: relative;
      }

      .nav-links a {
        text-decoration: none;
        color: var(--dark);
        font-weight: 500;
        transition: var(--transition);
        position: relative;
      }

      .nav-links a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary);
        transition: var(--transition);
      }

      .nav-links a:hover::after {
        width: 100%;
      }

      .nav-links a:hover {
        color: var(--primary);
      }

      .nav-links .active a {
        color: var(--primary);
      }

      .nav-links .active a::after {
        width: 100%;
      }

      .menu-toggle {
        display: none;
        cursor: pointer;
        font-size: 24px;
        color: var(--dark);
        transition: var(--transition);
      }

      .menu-toggle:hover {
        color: var(--primary);
      }

      /* Hero Section */
      .hero {
        padding: 180px 0 100px;
        position: relative;
        overflow: hidden;
      }

      .hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 800px;
        height: 800px;
        background: radial-gradient(
          circle,
          rgba(108, 92, 231, 0.1) 0%,
          rgba(108, 92, 231, 0) 70%
        );
        z-index: -1;
      }

      .hero-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 50px;
      }

      .hero-text {
        flex: 1;
        min-width: 300px;
      }

      .hero-image {
        flex: 1;
        min-width: 300px;
        position: relative;
      }

      .hero-image-main {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 30px 50px rgba(0, 0, 0, 0.1);
        transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
        transition: var(--transition);
      }

      .hero-image:hover .hero-image-main {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
      }

      .hero-image-decoration {
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 20px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        z-index: -1;
        transition: var(--transition);
      }

      .decoration-1 {
        top: -30px;
        left: -30px;
        background-color: var(--secondary);
        animation: float 6s ease-in-out infinite;
      }

      .decoration-2 {
        bottom: -30px;
        right: -30px;
        background-color: var(--primary);
        animation: float 6s ease-in-out 2s infinite;
      }

      .hero h1 {
        font-size: 3.5rem;
        margin-bottom: 20px;
        line-height: 1.2;
        background: linear-gradient(to right, var(--primary), var(--secondary));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .hero p {
        font-size: 1.1rem;
        margin-bottom: 30px;
        color: var(--gray);
        max-width: 500px;
      }

      .cta-button {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(
          to right,
          var(--primary),
          var(--primary-dark)
        );
        color: white;
        padding: 15px 35px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition);
        box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
        position: relative;
        overflow: hidden;
      }

      .cta-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(108, 92, 231, 0.4);
      }

      .cta-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to right,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: 0.5s;
      }

      .cta-button:hover::before {
        left: 100%;
      }

      .cta-button i {
        margin-left: 10px;
        transition: var(--transition);
      }

      .cta-button:hover i {
        transform: translateX(5px);
      }

      /* About Section */
      .about-section {
        padding: 120px 0;
        position: relative;
      }

      .about-section::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(
          circle,
          rgba(253, 121, 168, 0.1) 0%,
          rgba(253, 121, 168, 0) 70%
        );
        z-index: -1;
      }

      .section-title {
        text-align: center;
        margin-bottom: 80px;
      }

      .section-title h2 {
        font-size: 2.8rem;
        color: var(--dark);
        position: relative;
        display: inline-block;
      }

      .section-title h2::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(to right, var(--primary), var(--secondary));
        border-radius: 2px;
      }

      .section-title p {
        max-width: 600px;
        margin: 20px auto 0;
        color: var(--gray);
      }

      .about-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 60px;
      }

      .about-image {
        flex: 1;
        min-width: 300px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        position: relative;
      }

      .about-image img {
        width: 100%;
        height: auto;
        display: block;
        transition: var(--transition);
      }

      .about-image:hover img {
        transform: scale(1.05);
      }

      .about-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(108, 92, 231, 0.2),
          rgba(253, 121, 168, 0.2)
        );
        opacity: 0;
        transition: var(--transition);
      }

      .about-image:hover::before {
        opacity: 1;
      }

      .about-text {
        flex: 1;
        min-width: 300px;
      }

      .about-text h3 {
        font-size: 2rem;
        margin-bottom: 20px;
        color: var(--dark);
      }

      .about-text p {
        margin-bottom: 20px;
        color: var(--gray);
      }

      .features {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 40px;
      }

      .feature-item {
        flex: 1 1 200px;
        background: white;
        padding: 25px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: var(--transition);
        border: 1px solid var(--light-gray);
      }

      .feature-item:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        border-color: transparent;
      }

      .feature-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(
          to bottom right,
          var(--primary),
          var(--secondary)
        );
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        color: white;
        font-size: 24px;
      }

      .feature-item h4 {
        margin-bottom: 10px;
        color: var(--dark);
        font-size: 1.2rem;
      }

      .feature-item p {
        font-size: 0.9rem;
        color: var(--gray);
      }

      /* CTA Section */
      .cta-section {
        padding: 120px 0;
        background-color: var(--dark);
        color: white;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .cta-section::before {
        content: '';
        position: absolute;
        top: -100px;
        left: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(
          circle,
          rgba(253, 121, 168, 0.1) 0%,
          rgba(253, 121, 168, 0) 70%
        );
      }

      .cta-section h2 {
        font-size: 3rem;
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
      }

      .cta-section p {
        max-width: 700px;
        margin: 0 auto 40px;
        opacity: 0.9;
        position: relative;
        z-index: 1;
      }

      .cta-button.secondary {
        background: linear-gradient(to right, var(--secondary), #fc5c9c);
        box-shadow: 0 10px 20px rgba(253, 121, 168, 0.3);
        position: relative;
        z-index: 1;
      }

      .cta-button.secondary:hover {
        box-shadow: 0 15px 30px rgba(253, 121, 168, 0.4);
      }

      /* Footer */
      footer {
        background-color: #1a252f;
        color: white;
        padding: 80px 0 30px;
        position: relative;
      }

      .footer-content {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-bottom: 60px;
      }

      .footer-column {
        flex: 1 1 250px;
      }

      .footer-column h3 {
        font-size: 1.4rem;
        margin-bottom: 25px;
        position: relative;
        padding-bottom: 15px;
      }

      .footer-column h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background: linear-gradient(to right, var(--primary), var(--secondary));
        border-radius: 3px;
      }

      .footer-column p {
        opacity: 0.8;
        margin-bottom: 20px;
        line-height: 1.8;
      }

      .footer-links {
        list-style: none;
      }

      .footer-links li {
        margin-bottom: 15px;
      }

      .footer-links a {
        color: white;
        opacity: 0.8;
        text-decoration: none;
        transition: var(--transition);
        display: inline-block;
      }

      .footer-links a:hover {
        opacity: 1;
        color: var(--secondary);
        transform: translateX(5px);
      }

      .footer-social {
        display: flex;
        gap: 15px;
        margin-top: 25px;
      }

      .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        transition: var(--transition);
        font-size: 18px;
      }

      .footer-social a:hover {
        background-color: var(--primary);
        transform: translateY(-5px);
      }

      .footer-bottom {
        text-align: center;
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        opacity: 0.7;
        font-size: 0.9rem;
      }

      /* Animations */
      @keyframes float {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-20px);
        }
        100% {
          transform: translateY(0px);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes scaleIn {
        from {
          opacity: 0;
          transform: scale(0.8);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      .fade-in {
        opacity: 0;
        animation: fadeIn 1s ease forwards;
      }

      .scale-in {
        opacity: 0;
        animation: scaleIn 0.8s ease forwards;
      }

      .delay-1 {
        animation-delay: 0.2s;
      }
      .delay-2 {
        animation-delay: 0.4s;
      }
      .delay-3 {
        animation-delay: 0.6s;
      }
      .delay-4 {
        animation-delay: 0.8s;
      }
      .delay-5 {
        animation-delay: 1s;
      }

      /* Responsive Styles */
      @media (max-width: 1200px) {
        .hero h1 {
          font-size: 3rem;
        }

        .section-title h2 {
          font-size: 2.5rem;
        }

        .cta-section h2 {
          font-size: 2.5rem;
        }
      }

      @media (max-width: 992px) {
        .menu-toggle {
          display: block;
        }

        .nav-links {
          position: fixed;
          top: 80px;
          left: -100%;
          width: 100%;
          height: calc(100vh - 80px);
          background-color: white;
          flex-direction: column;
          align-items: center;
          padding: 40px 0;
          transition: var(--transition);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .nav-links.active {
          left: 0;
        }

        .nav-links li {
          margin: 20px 0;
        }

        .hero {
          padding: 150px 0 80px;
        }

        .hero h1 {
          font-size: 2.5rem;
        }

        .section-title h2 {
          font-size: 2.2rem;
        }
      }

      @media (max-width: 768px) {
        .hero-content {
          flex-direction: column;
        }

        .hero-text {
          order: 2;
          text-align: center;
        }

        .hero-image {
          order: 1;
          margin-bottom: 40px;
        }

        .hero h1 {
          font-size: 2.2rem;
        }

        .hero p {
          margin-left: auto;
          margin-right: auto;
        }

        .about-content {
          flex-direction: column;
        }

        .section-title h2 {
          font-size: 2rem;
        }

        .cta-section h2 {
          font-size: 2rem;
        }
      }

      @media (max-width: 576px) {
        .hero {
          padding: 130px 0 60px;
        }

        .hero h1 {
          font-size: 2rem;
        }

        .hero p {
          font-size: 1rem;
        }

        .section-title h2 {
          font-size: 1.8rem;
        }

        .section-title p {
          font-size: 0.9rem;
        }

        .feature-item {
          flex: 1 1 100%;
        }

        .footer-column {
          flex: 1 1 100%;
          margin-bottom: 30px;
        }
      }

CSS

Explained

Good Use of CSS Variables:
Centralized color variables (–primary, —secondary, etc.) make the theme easy to maintain.

Transitions and Animations:
Thoughtfully applied transitions (–transition) and animations like float, fadeIn and scaleIn give the UI a dynamic feel.

Responsive Design:
Breakpoints of responsive at 1200px, 992px and 768px are well targeted and layout changes are clear.

Neat Component Styling:
Each section .hero, .about-section, .cta-section, footer and etc are modular and styled cleanly.

Accessibility-Friendly:
Use of contrast in buttons, hover states and text-shadow effects improves readability and user experience.

JavaScript code

We have finished the html part and css part now let’s start the functionality part. Open main.js file and paste the code shown bellow.

// Mobile Menu Toggle
const menuToggle = document.querySelector('.menu-toggle')
const navLinks = document.querySelector('.nav-links')

menuToggle.addEventListener('click', () => {
  navLinks.classList.toggle('active')
  menuToggle.innerHTML = navLinks.classList.contains('active')
    ? '<i class="fas fa-times"></i>'
    : '<i class="fas fa-bars"></i>'
})

// Close menu when clicking on a link
document.querySelectorAll('.nav-links a').forEach((link) => {
  link.addEventListener('click', () => {
    navLinks.classList.remove('active')
    menuToggle.innerHTML = '<i class="fas fa-bars"></i>'
  })
})

// Scroll animation
const fadeElements = document.querySelectorAll('.fade-in, .scale-in')

const fadeInOnScroll = () => {
  fadeElements.forEach((element) => {
    const elementTop = element.getBoundingClientRect().top
    const windowHeight = window.innerHeight

    if (elementTop < windowHeight - 100) {
      element.style.opacity = '1'
      element.style.transform = 'translateY(0) scale(1)'
    }
  })
}

// Initial check
fadeInOnScroll()

// Check on scroll
window.addEventListener('scroll', fadeInOnScroll)

JavaScript

Explained

const menuToggle = document.querySelector('.menu-toggle')
const navLinks = document.querySelector('.nav-links')

menuToggle selects the button or icon that opens/closes the mobile menu (typically a hamburger icon). navLinks selects the container that holds the navigation links.

menuToggle.addEventListener('click', () => {
  navLinks.classList.toggle('active')
  menuToggle.innerHTML = navLinks.classList.contains('active')
    ? '<i class="fas fa-times"></i>'
    : '<i class="fas fa-bars"></i>'
})

When click the menu toggle:

It toggles the active class on the navigation links.
If active, the menu becomes visible.
If not active, it hides the menu.

It changes the icon:

If the menu is open (active) it shows a “close” (fa-times) icon.
If the menu is closed, it shows a “hamburger” (fa-bars) icon.

document.querySelectorAll('.nav-links a').forEach((link) => {
  link.addEventListener('click', () => {
    navLinks.classList.remove('active')
    menuToggle.innerHTML = '<i class="fas fa-bars"></i>'
  })
})

This part closes the mobile menu when the user clicks any of the navigation links.

It removes the active class from .nav-links (hiding the menu).

It resets the toggle icon back to the hamburger.

This improves user experience by automatically closing the menu when navigating.

const fadeElements = document.querySelectorAll('.fade-in, .scale-in')

This line selects all elements on the page that have either .fade-in or .scale-in classes. These are usually used to animate elements as they appear on scroll.

const fadeInOnScroll = () => {
  fadeElements.forEach((element) => {
    const elementTop = element.getBoundingClientRect().top
    const windowHeight = window.innerHeight

    if (elementTop < windowHeight - 100) {
      element.style.opacity = '1'
      element.style.transform = 'translateY(0) scale(1)'
    }
  })
}

This function:

Loops through each element to check its position on the screen.

If the element is within 100px from the bottom of the screen,it:

Sets opacity: 1 (makes it visible).

Applies transform to move it into place.

This triggers the visual fade and/or scale-in effect as the user scrolls.

fadeInOnScroll()
window.addEventListener('scroll', fadeInOnScroll)

This ensures that:

On page load, any visible elements animate in.
On scroll, elements animate in as they come into view.

Output

Conclusion

This project was not just about adding a mobile menu or some scroll animations it was about making a website that actually feels good to use. Little details like the menu icon switching,links closing the menu automatically and smooth fade ins as you scroll might seem small but they make a big difference in how everything comes together.

It is all about making things look clean, work well on mobile and feel responsive to what the users doing.

If you are learning web development this kind of project is a solid place to start. You get to mix HTML, CSS,and JavaScript in a way that is hands on and fun. And from here there is so much more you can build try customizing the animations, playing with different layouts or connecting it to more features. Keep experimenting and pushing your skills.
The more you build,the better you get.

View Demo

Download source code

HTML AND CSS responsive about page

Introduction

Requirement Tools

Skills Needed

Project Setup

HTML Code

Styling with CSS

JavaScript code

Output

Conclusion

STAY TUNED WITH US

Sign up for our newsletter to receive our posts, special events.

Coding Tutorial

Modern Website Footer Design Using HTML and CSS Only

How to build a professional About us page With HTML,CSS...

3D Digital Clock with Animated Color Transitions

Neo Login & Signup with HTML, CSS & JS: Complete...

How to Create an Animated Clock with HTML, CSS and...

Secure Password Generator using HTML, CSS and JavaScript.

Popular post

How to build a professional About us page With HTML,CSS and JS

Introduction

Requirement Tools

Skills Needed

Project Setup

HTML Code

Styling with CSS

JavaScript code

Output

Conclusion

3D Digital Clock with Animated Color Transitions

Modern Website Footer Design Using HTML and CSS Only

Related Posts

2 comments

Leave a Comment Cancel Reply

STAY TUNED WITH US

Sign up for our newsletter to receive our posts, special events.

Coding Tutorial

Popular post