Join Now

Create Responsive Website Using Html, Css And JavaScript

  • By CodingManish
  • Create Responsive Website Using Html, Css And JavaScript

    In this blog post, we'll guide you through the process of creating your first responsive custom website using HTML, CSS, and JavaScript. Our website will consist of key sections such as Home, Services, Portfolio, About Us, Contact Us, and Footer. Each section will be fully responsive, adapting seamlessly to different screen sizes.

    On smaller devices, a hamburger menu will provide convenient toggling of the menu visibility, ensuring a smooth user experience across all devices.

  • Video Tutorial of Complete Responsive website.
  • HTML Structure (index.html):
      
           
        <!DOCTYPE html>
        <html lang="en">
            <!--https://www.codingmanish.in -->
          <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>Agency Website</title>
            <link
              rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
              integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
              crossorigin="anonymous"
              referrerpolicy="no-referrer"
            />
        
            <link rel="stylesheet" href="style.css" />
          </head>
          <body>
        
        
        <!-- home section starts -->
        <section class="home" id="home">
            <h1>your story begins from here</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatibus.</p>
            <a href="#" class="btn">learn more</a>
          </section>
          <!-- home section ends -->
        
        <!-- header section starts -->
        <header class="header">
            <a href="#" class="logo">agency<span>Website</span></a>
            <a class="menu fas fa-bars"></a>
            <nav class="navbar">
              <a href="#">home</a>
              <a href="#about">about</a>
              <a href="#services">services</a>
              <a href="#works">works</a>
              <a href="#contact">contact</a>
            </nav>
          </header>
          <!-- header section ends -->
        
        
          <!-- about section starts -->
        <section class="about" id="about">
            <div class="box-container">
              <div class="box">
                <h1 class="heading">about us</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet corporis alias itaque sunt
                  aliquid reprehenderit, perferendis quia dolorum laudantium esse autem vel ea ullam quam
                  deleniti sed excepturi maiores illum!
                </p>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet corporis alias itaque sunt
                  aliquid reprehenderit, perferendis quia dolorum laudantium esse autem vel ea ullam quam
                  deleniti sed excepturi maiores illum!
                </p>
              </div>
        
              <div class="box">
                <div class="image">
                  <img src="images/about.jpeg" alt="" />
                </div>
              </div>
            </div>
          </section>
          <!-- about section ends -->
        
        
          <!-- services section starts -->
        <section class="services" id="services">
            <h1 class="heading">our services</h1>
            <div class="box-container">
              <div class="box">
                <img src="images/icon-1.svg" alt="" />
                <h3>branding</h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
                  voluptates ipsum officia repellendus quis perferendis sunt veritatis!
                </p>
              </div>
          
              <div class="box">
                <img src="images/icon-2.svg" alt="" />
                <h3>design</h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
                  voluptates ipsum officia repellendus quis perferendis sunt veritatis!
                </p>
              </div>
          
              <div class="box">
                <img src="images/icon-3.svg" alt="" />
                <h3>development</h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
                  voluptates ipsum officia repellendus quis perferendis sunt veritatis!
                </p>
              </div>
          
              <div class="box">
                <img src="images/icon-4.svg" alt="" />
                <h3>photography</h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
                  voluptates ipsum officia repellendus quis perferendis sunt veritatis!
                </p>
              </div>
          
              <div class="box">
                <img src="images/icon-5.svg" alt="" />
                <h3>support</h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
                  voluptates ipsum officia repellendus quis perferendis sunt veritatis!
                </p>
              </div>
          
              <div class="box">
                <img src="images/icon-6.svg" alt="" />
                <h3>marketing</h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus repellat ipsam neque
                  voluptates ipsum officia repellendus quis perferendis sunt veritatis!
                </p>
              </div>
            </div>
          </section>
          <!-- services section ends -->
        
        
          <!-- works section starts -->
        <section class="works" id="works">
            <h1 class="heading">our works</h1>
            <div class="box-container">
              <div class="box">
                <div class="image">
                  <img src="images/portfolio-1.jpg" alt="" />
                  <div class="content">
                    <h3>project 01</h3>
                  </div>
                </div>
              </div>
          
              <div class="box">
                <div class="image">
                  <img src="images/portfolio-2.jpg" alt="" />
                  <div class="content">
                    <h3>project 02</h3>
                  </div>
                </div>
              </div>
          
              <div class="box">
                <div class="image">
                  <img src="images/portfolio-3.jpg" alt="" />
                  <div class="content">
                    <h3>project 03</h3>
                  </div>
                </div>
              </div>
          
              <div class="box">
                <div class="image">
                  <img src="images/portfolio-4.jpg" alt="" />
                  <div class="content">
                    <h3>project 04</h3>
                  </div>
                </div>
              </div>
          
              <div class="box">
                <div class="image">
                  <img src="images/portfolio-5.jpg" alt="" />
                  <div class="content">
                    <h3>project 05</h3>
                  </div>
                </div>
              </div>
          
              <div class="box">
                <div class="image">
                  <img src="images/portfolio-6.jpg" alt="" />
                  <div class="content">
                    <h3>project 06</h3>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- works section ends -->
        
        
          <!-- contact section starts -->
        <section class="contact" id="contact">
            <h1 class="heading">contact us</h1>
            <div class="box-container">
              <div class="box">
                <h3>address</h3>
                <p>Sydney, Australia 100 Mainstreet Center</p>
                <h3>email</h3>
                <p>simpleemail@gmail.com</p>
                <h3>phone</h3>
                <p>+91 123456789</p>
                <h3>fax</h3>
                <p>(121) 219 2121</p>
              </div>
          
              <form>
                <div class="inputBox">
                  <input type="text" placeholder="your name" />
                  <input type="text" placeholder="your number" />
                </div>
          
                <textarea name="" placeholder="your message" id="" cols="30" rows="10"></textarea>
                <input type="submit" value="send message" class="btn" />
              </form>
            </div>
          </section>
          <!-- contact section ends -->
        
        
          <!-- footer section starts -->
        <section class="footer">
            <a href="#" class="logo">agency<span>Website</span></a>
            <p>
              Lorem ipsum dolor sit amet consectetur <br />
              adipisicing elit. Et maiores sint similique repellat! <br />
              Voluptates tempore voluptatum error, dolor cum quae.
            </p>
            <div class="socials">
              <ion-icon name="logo-google"></ion-icon>
              <ion-icon name="logo-twitter"></ion-icon>
              <ion-icon name="logo-youtube"></ion-icon>
              <ion-icon name="logo-linkedin"></ion-icon>
            </div>
          </section>
          <!-- footer section ends -->
        
        
        
        
        
            <script
              type="module"
              src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
            ></script>
            <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
            <script src="script.js"></script>
          </body>
        </html>
      
      
      
    CSS Styling (style.css):
        
      
        
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;900&display=swap');
    
        * {
          font-family: 'Montserrat', sans-serif;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          outline: none;
          border: none;
          text-decoration: none;
          text-transform: capitalize;
          transition: 0.2s linear;
        }
        
        :root {
          --black: #16161d;
          --white: #fff;
          --light-color: #808080;
          --light-bg: #f5f5f8;
          --google-color: #4285f4;
          --twitter-color: #1da1f2;
          --youtube-color: #ff0000;
          --linkedin-color: #0e76a8;
        }
        
        html {
          font-size: 62.5%;
          overflow-x: hidden;
          scroll-behavior: smooth;
          scroll-padding-top: 6rem;
        }
        
        html::-webkit-scrollbar {
          width: 1rem;
        }
        
        html::-webkit-scrollbar-track {
          background: var(--white);
        }
        
        html::-webkit-scrollbar-thumb {
          background: var(--black);
        }
        
        section {
          padding: 5rem 9%;
        }
        
        .btn {
          color: var(--white);
          font-weight: 400;
          font-size: 1.7rem;
          border: 0.1rem solid var(--white);
          border-radius: 10rem;
          padding: 1.5rem 4rem;
        }
        
        .btn:hover {
          background: var(--black);
          color: var(--white);
        }
        
        .heading {
          font-size: 3.5rem;
          font-weight: 500;
          margin-bottom: 5rem;
          text-align: center;
        }
        /* home */
        .home {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
              url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFnZW5jeXxlbnwwfHwwfHx8MA%3D%3D') no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            text-align: center;
          }
          
          .home h1 {
            font-size: 6rem;
            font-weight: 400;
            margin-bottom: 3rem;
            color: var(--white);
          }
          
          .home p {
            font-size: 1.7rem;
            font-weight: 400;
            margin-bottom: 3rem;
            text-transform: none;
            color: var(--white);
          }
          /* home */
        
        
          /* header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 5rem 9%;
            display: flex;
            align-items: center;
            z-index: 100;
          }
          
          .header.active {
            background: var(--white);
            padding: 3rem 9%;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
          }
          
          .header.active .logo,
          .header.active .navbar a,
          .header.active .menu {
            color: var(--black);
          }
          
          .header .logo {
            margin-right: auto;
            font-size: 2rem;
            color: var(--white);
            font-weight: 700;
          }
          
          .header .logo span {
            font-weight: normal;
          }
          
          .header .navbar a {
            font-size: 1.7rem;
            color: var(--white);
            margin-left: 3rem;
          }
          
          .header .menu {
            font-size: 2rem;
            color: var(--white);
            display: none;
          }
          /* header */
        
          /* about */
        .about .box-container .box .image {
            height: 40rem;
          }
          
          .about .box-container .box .image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .about .box-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
            gap: 2rem;
          }
          
          .about .box-container .box p {
            font-size: 1.7rem;
            line-height: 1.5;
            margin-bottom: 1.5rem;
            color: var(--light-color);
            text-transform: none;
          }
          /* about */
        
        
          /* services */
        .services {
            background: var(--light-bg);
          }
          
          .services .box-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
            gap: 5rem;
          }
          
          .services .box-container .box {
            background: var(--white);
            text-align: center;
            border-radius: 1rem;
            padding: 3rem;
          }
          
          .services .box-container .box img {
            margin-bottom: 2rem;
          }
          
          .services .box-container .box h3 {
            margin-bottom: 2rem;
            font-size: 2rem;
          }
          
          .services .box-container .box p {
            font-size: 1.5rem;
            line-height: 2;
            color: var(--light-color);
          }
          
          .services .box-container .box:hover {
            background: var(--black);
          }
          
          .services .box-container .box:hover h3,
          .services .box-container .box:hover p {
            color: var(--white);
          }
          
          .services .box-container .box:hover img {
            filter: invert(100%);
          }
          /* services */
        
          /* works */
        .works .box-container .box .image {
            height: 30rem;
            overflow: hidden;
            position: relative;
          }
          
          .works .box-container .box .image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .works .box-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
            gap: 5rem;
          }
          
          .works .box-container .box .image .content {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
            background: var(--black);
            color: var(--white);
            font-size: 1.7rem;
            padding: 2rem;
            z-index: 90;
            transform: translateY(100%);
          }
          
          .works .box-container .box:hover .image .content {
            transform: translateY(0);
          }
          /* works */
        
        
          /* contact */
        .contact {
            background: var(--light-bg);
          }
          
          .contact .box-container {
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
          }
          
          .contact .box-container .box {
            width: 30rem;
          }
          
          .contact .box-container .box h3 {
            font-size: 1.7rem;
            margin-bottom: 1rem;
          }
          
          .contact .box-container .box p {
            font-size: 1.5rem;
            color: var(--light-color);
            margin-bottom: 2rem;
          }
          
          .contact .box-container form {
            flex: 1 1 42rem;
          }
          
          .contact .box-container form .inputBox {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
          }
          
          .contact .box-container form .inputBox input {
            width: 49%;
          }
          
          .contact .box-container form .inputBox input,
          .contact .box-container form textarea {
            border-radius: 5rem;
            padding: 1.2rem 1.8rem;
            font-size: 1.5rem;
            color: var(--black);
            margin: 0.7rem 0;
          }
          
          .contact .box-container form textarea {
            width: 100%;
            border-radius: 1rem;
            resize: none;
            height: 25rem;
          }
          
          .contact .box-container form .btn {
            color: var(--black);
            background: var(--white);
            border: 0.1rem solid var(--black);
            margin-top: 1rem;
          }
          
          .contact .box-container form .btn:hover {
            background: var(--black);
            color: var(--white);
          }
          /* contact */
        
        
          /* footer */
        .footer {
            text-align: center;
          }
          
          .footer .logo {
            font-size: 2rem;
            color: var(--black);
            font-weight: 700;
          }
          
          .footer .logo span {
            font-weight: normal;
          }
          
          .footer p {
            margin-top: 2rem;
            margin-bottom: 2rem;
            font-size: 1.7rem;
            color: gray;
          }
          
          .footer .socials ion-icon {
            font-size: 2.5rem;
            color: var(--black);
            background: var(--light-bg);
            border-radius: 50%;
            padding: 1rem;
            margin: 0.5rem;
            cursor: pointer;
          }
          
          .footer .socials ion-icon:nth-child(1) {
            color: var(--google-color);
          }
          
          .footer .socials ion-icon:nth-child(1):hover {
            background: var(--google-color);
            color: var(--white);
          }
          
          .footer .socials ion-icon:nth-child(2) {
            color: var(--twitter-color);
          }
          
          .footer .socials ion-icon:nth-child(2):hover {
            background: var(--twitter-color);
            color: var(--white);
          }
          
          .footer .socials ion-icon:nth-child(3) {
            color: var(--youtube-color);
          }
          
          .footer .socials ion-icon:nth-child(3):hover {
            background: var(--youtube-color);
            color: var(--white);
          }
          
          .footer .socials ion-icon:nth-child(4) {
            color: var(--linkedin-color);
          }
          
          .footer .socials ion-icon:nth-child(4):hover {
            background: var(--linkedin-color);
            color: var(--white);
          }
          /* footer */
        
        
          /* media queries */
        @media (max-width: 1200px) {
            .header {
              padding: 2rem;
            }
          
            .header.active {
              padding: 2rem;
            }
          
            section {
              padding: 3rem 2rem;
            }
          
            .home h1 {
              font-size: 5rem;
            }
          }
          
          @media (max-width: 991px) {
            html {
              font-size: 60%;
            }
          }
          
          @media (max-width: 768px) {
            .header .menu {
              display: block;
            }
          
            .header .navbar {
              position: fixed;
              top: 6.4rem;
              left: 0;
              right: 0;
              background: var(--white);
              display: flex;
              flex-flow: column;
              text-align: center;
              transform: translateX(100%);
            }
          
            header .navbar.show {
              transform: translateX(0);
            }
          
            .header .navbar a {
              color: var(--black);
              margin: 0;
              font-size: 2rem;
              margin: 2rem 0;
            }
          }
          
          @media (max-width: 450px) {
            html {
              font-size: 55%;
            }
          }
        
    
    
      
      
      
    JavaScript (script.js):
      
    
        
        document.onscroll = () => {
          if (window.scrollY > 0) {
            document.querySelector('.header').classList.add('active');
          } else {
            document.querySelector('.header').classList.remove('active');
          }
        };
        
        document.onload = () => {
          if (window.scrollY > 0) {
            document.querySelector('.header').classList.add('active');
          } else {
            document.querySelector('.header').classList.remove('active');
          }
        };
      
      
        const navbar = document.querySelector('.header .navbar');
      const menuButton = document.querySelector('.header .menu');
      
      menuButton.addEventListener('click', () => {
        navbar.classList.toggle('show');
        menuButton.classList.toggle('fa-close');
      });
      
      document.onscroll = () => {
        navbar.classList.remove('show');
        menuButton.classList.remove('fa-close');
      
        if (window.scrollY > 0) {
          document.querySelector('.header').classList.add('active');
        } else {
          document.querySelector('.header').classList.remove('active');
        }
      };
      
      document.onload = () => {
        if (window.scrollY > 0) {
          document.querySelector('.header').classList.add('active');
        } else {
          document.querySelector('.header').classList.remove('active');
        }
      };
      
    
    
      
      

    Download the source code files for this project for free by clicking the Download button.

    Total projects



    Related Projects


  •  Simple Responsive Website Using Html and Css
    12 mins read

    Simple Responsive Website Using Html and Css

    codingmanish

    14 Dec 2023

    Read more


  • ...

    your source for awesome coding projects! Let's dive into the world of code together! 🚀