Join Now

Simple Responsive Website Using Html and Css

  • By CodingManish
  •  Simple Responsive Website Using Html and Css

    In this blog post, we'll guide you through the process of building your responsive custom website using HTML and CSS. Our example website will focus on camping gear, highlighting sellers of essential equipment. However, you can easily adapt the theme to suit any other topic or industry of your choice.

  • Video Tutorial of Complete Responsive website.
  • Key Sections of the Website :

    • Home: Introduces visitors to your website and sets the tone for their browsing experience.
    • Services: Highlights the services or products offered by your business or organization.
    • Portfolio: Showcases examples of your work or projects, providing visitors with visual insights into your capabilities.
    • About Us: Provides background information about your business, team, or organization, helping to build trust and credibility.
    • Contact Us: Offers visitors a convenient way to get in touch with you, whether through a contact form, email, or social media.
    • Footer: Contains additional navigation links, copyright information, and other relevant details.

    HTML Structure (index.html):
      
           
        <!DOCTYPE html>
        <!-- codingmanish - www.codingmanish.in -->
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Camping Website</title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
          </head>
          <body>
        
            <header>
                <nav class="navbar">
                  <h2 class="logo"><a href="#">Traveling Tent</a></h2>
                  <input type="checkbox" id="menu-toggler">
                  <label for="menu-toggler" id="hamburger-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
                      <path d="M0 0h24v24H0z" fill="none"/>
                      <path d="M3 18h18v-2H3v2zm0-5h18V11H3v2zm0-7v2h18V6H3z"/>
                    </svg>
                  </label>
                  <ul class="all-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                  </ul>
                </nav>
              </header>
          
              <section class="homepage" id="home">
                <div class="content">
                  <div class="text">
                    <h1>Gear Up for Adventure</h1>
                    <p>
                     Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda corporis aperiam odit. <br> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                  </div>
                  <a href="#services">Services</a>
                </div>
              </section>
          
              <section class="services" id="services">
                <h2>Our Services</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
                <ul class="cards">
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2FtcGluZ3xlbnwwfHwwfHx8MA%3D%3D" alt="img">
                    <h3>Tents</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, vel.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1537905569824-f89f14cceb68?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FtcGluZ3xlbnwwfHwwfHx8MA%3D%3D" alt="img">
                    <h3>Sleeping Bags</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, vel.</p>
                  </li>
                  <li class="card">
                    <img src="https://plus.unsplash.com/premium_photo-1676140621026-5c10ec3a875f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y2FtcGluZ3xlbnwwfHwwfHx8MA%3D%3D" alt="img">
                    <h3>Camp Stoves</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, vel.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1496545672447-f699b503d270?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGNhbXBpbmd8ZW58MHx8MHx8fDA%3D" alt="img">
                    <h3>Backpacks</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, vel.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1601134917279-ef70a0a90f18?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGNhbXBpbmd8ZW58MHx8MHx8fDA%3D" alt="img">
                    <h3>Camp Chairs</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, vel.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1529385101576-4e03aae38ffc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzR8fGNhbXBpbmd8ZW58MHx8MHx8fDA%3D" alt="img">
                    <h3>Camp Lights</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, vel.</p>
                  </li>
                </ul>
              </section>
        
              <section class="portfolio" id="portfolio">
                <h2>Our Portfolio</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, vel.</p>
                <ul class="cards">
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2FtcGluZ3xlbnwwfHwwfHx8MA%3D%3D" alt="img">
                    <h3>Mountain Hiking</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eveniet fugit.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1537905569824-f89f14cceb68?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FtcGluZ3xlbnwwfHwwfHx8MA%3D%3D" alt="img">
                    <h3>Lakeside Camping</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eveniet fugit.</p>
                  </li>
                  <li class="card">
                    <img src="https://plus.unsplash.com/premium_photo-1676140621026-5c10ec3a875f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y2FtcGluZ3xlbnwwfHwwfHx8MA%3D%3D" alt="img">
                    <h3>Beach Camping</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eveniet fugit.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1496545672447-f699b503d270?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGNhbXBpbmd8ZW58MHx8MHx8fDA%3D" alt="img">
                    <h3>Forest Exploration</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eveniet fugit.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1601134917279-ef70a0a90f18?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGNhbXBpbmd8ZW58MHx8MHx8fDA%3D" alt="img">
                    <h3>RV Camping</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eveniet fugit.</p>
                  </li>
                  <li class="card">
                    <img src="https://images.unsplash.com/photo-1529385101576-4e03aae38ffc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzR8fGNhbXBpbmd8ZW58MHx8MHx8fDA%3D" alt="img">
                    <h3>Desert Camping</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eveniet fugit.</p>
                  </li>
                </ul>
              </section>
          
              <section class="about" id="about">
                <h2>About Us</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                <div class="row company-info">
                  <h3>Our Story</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur pariatur accusantium id delectus fuga voluptate cumque, adipisci non velit nostrum, excepturi magnam, vitae et rerum.</p>
                </div>
                <div class="row mission-vision">
                  <h3>Our Mission</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quia similique ullam? Officiis aliquid quibusdam provident neque mollitia, corporis voluptates et aperiam obcaecati iusto, incidunt odit suscipit delectus dolorum! Odit reiciendis quam aut repellat perspiciatis.</p>
                  <h3>Our Vision</h3>
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat quisquam assumenda ea culpa! Autem ex dolorum totam incidunt dolorem cum, laudantium ratione ipsam esse. Vero voluptas possimus minima cumque ut, impedit necessitatibus aliquam, eos sed recusandae explicabo!</p>
                </div>
                <div class="row team">
                  <h3>Our Team</h3>
                  <ul>
                    <li>Jane Smith - Founder and CEO</li>
                    <li>John Doe - Gear Specialist</li>
                  </ul>
                </div>
              </section>
          
              <section class="contact" id="contact">
                <h2>Contact Us</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                <div class="row">
                  <div class="col information">
                    <div class="contact-details">
                      <p><i class="fas fa-map-marker-alt"></i> 123 Rajkot,Gujarat,98765</p>
                      <p><i class="fas fa-envelope"></i> info@traveling.com</p>
                      <p><i class="fas fa-phone"></i> (142) 452-7310</p>
                      <p><i class="fas fa-clock"></i> Monday - Friday: 4:00 AM - 6:00 PM</p>
                      <p><i class="fas fa-clock"></i> Saturday: 9:00 AM - 5:00 PM</p>
                      <p><i class="fas fa-clock"></i> Sunday: Closed</p>
                      <p><i class="fas fa-globe"></i> www.codingmanish.in</p>
                    </div>          
                  </div>
                  <div class="col form">
                    <form>
                      <input type="text" placeholder="Name*" required>
                      <input type="email" placeholder="Email*" required>
                      <textarea placeholder="Message*" required></textarea>
                      <button id="submit" type="submit">Send Message</button>
                    </form>
                  </div>
                </div>
              </section>
          
              <footer>
                <div>
                  <span>Copyright © 2023 All Rights Reserved</span>
                  <span class="link">
                      <a href="#">Home</a>
                      <a href="#contact">Contact</a>
                  </span>
                </div>
              </footer>
        
        
        
          </body>
        </html>
        
    
      
      
      
    CSS Styling (style.css):
        
      
        
       
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
    
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Poppins", sans-serif;
        }
        
        html {
          scroll-behavior: smooth;
        }
        
        body {
          background: #f2f2f2;
        }
        
        header {
          position: fixed;
          top: 0;
          left: 0;
          z-index: 5;
          width: 100%;
          display: flex;
          justify-content: center;
          background: #111b1d;
        }
        
        .navbar {
          display: flex;
          padding: 0 10px;
          max-width: 1200px;
          width: 100%;
          align-items: center;
          justify-content: space-between;
        }
        
        .navbar input#menu-toggler {
          display: none;
        }
        
        .navbar #hamburger-btn {
          cursor: pointer;
          display: none;
        }
        
        .navbar .all-links {
          display: flex;
          align-items: center;
        }
        
        .navbar .all-links li {
          position: relative;
          list-style: none;
        }
        
        .navbar .logo a {
          display: flex;
          align-items: center;
          margin-left: 0;
        }
        
        header a, footer a {
          margin-left: 40px;
          text-decoration: none;
          color: #3edde9;
          height: 100%;
          padding: 20px 0;
          display: inline-block;
        }
        
        header a:hover, footer a:hover {
          color: #38e016;
        }
        
        .homepage {
          height: 100vh;
          width: 100%;
          position: relative;
          background: url("main.jpg");
          background-position: center 65%;
          background-size: cover;
          background-attachment: fixed;
        }
        
        .homepage::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
        }
        
        .homepage .content {
          display: flex;
          height: 85%;
          z-index: 3;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
        
        .homepage .content h1 {
          font-size: 60px;
          font-weight: 700;
          margin-bottom: 10px;
        }
        
        .homepage .content .text {
          margin-bottom: 50px;
          color: #fff;
          font-size: 20px;
          text-align: center;
          text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        }
        
        .content a {
          color: #000;
          display: block;
          text-transform: uppercase;
          font-size: 18px;
          margin: 0 10px;
          padding: 10px 30px;
          border-radius: 5px;
          background: #fff;
          border: 2px solid #fff;
          transition: 0.4s ease;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
          text-decoration: none;
        }
        
        .content a:hover {
          color: #fff;
          background: rgba(255,255,255,0.3);
        }
        
        section {
          display: flex;
          align-items: center;
          flex-direction: column;
          padding: 80px 0 0;
        }
        
        section h2 {
          font-size: 2rem;
        }
        
        section > p {
          text-align: center;
        }
        
        section .cards {
          display: flex;
          flex-wrap: wrap;
          max-width: 1200px;
          margin-top: 50px;
          padding: 0 10px;
          justify-content: space-between;
        }
        
        section.about {
          margin: 0 auto;
          max-width: 1200px;
        }
        
        .about .company-info {
          margin-top: 30px;
        }
        
        .about h3 {
          margin: 30px 0 10px;
        }
        
        .about .team {
          text-align: left;
          width: 100%;
        }
        
        .about .team ul {
          padding-left: 20px;
        }
        
        section .cards .card {
          background: #fff;
          padding: 40px 15px;
          list-style: none;
          border-radius: 5px;
          box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.04);
          margin-bottom: 40px;
          width: calc(100% / 3 - 30px);
          text-align: center;
        }
        
        .portfolio .cards .card {
          padding: 0 0 20px;
        }
        
        .services .card img {
          width: 120px;
          height: 120px;
          margin-bottom: 20px;
          border-radius: 100%;
          object-fit: cover;
        }
        
        .portfolio .card img {
          width: 100%;
          padding-bottom: 10px;
          aspect-ratio: 16 / 9;
          object-fit: cover;
          border-radius: 7px;
        }
        
        .cards .card p {
          padding: 0 15px;
          margin-top: 5px;
        }
        
        .about .row {
          padding: 0 10px;
        }
        
        .contact .row {
          margin: 60px 0 90px;
          display: flex;
          max-width: 1200px;
          width: 100%;
          align-items: center;
          justify-content: space-between;
        }
        
        .contact .row .col {
          padding: 0 10px;
          width: calc(100% / 2 - 50px);
        }
        
        .contact .col p {
          margin-bottom: 10px;
        }
        
        .contact .col p i {
          color: #7a7a7a;
          margin-right: 10px;
        }
        
        .contact form input {
          height: 45px;
          margin-bottom: 20px;
          padding: 10px;
          width: 100%;
          font-size: 16px;
          outline: none;
          border: 1px solid #bfbfbf;
        }
        
        .contact form textarea {
          padding: 10px;
          width: 100%;
          font-size: 16px;
          height: 150px;
          outline: none;
          resize: vertical;
          border: 1px solid #bfbfbf;
        }
        
        .contact form button {
          margin-top: 10px;
          padding: 10px 20px;
          font-size: 17px;
          color: #fff;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          background: #333;
          transition: 0.2s ease;
        }
        
        .contact form button:hover {
          background: #525252;
        }
        
        footer {
          width: 100%;
          display: flex;
          justify-content: center;
          background: #000;
          padding: 20px 0;
        }
        
        footer div {
          padding: 0 10px;
          max-width: 1200px;
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        
        footer span {
          color: #fff;
        }
        
        footer a {
          padding: 0;
        }
        
        @media screen and (max-width: 860px) {
          .navbar .all-links {
            position: fixed;
            left: -100%;
            width: 300px;
            display: block;
            height: 100vh;
            top: 75px;
            background: #333;
            transition: left 0.3s ease;
          }
        
          .navbar #menu-toggler:checked~.all-links {
            left: 0;
          }
        
          .navbar .all-links li {
            font-size: 18px;
          }
        
          .navbar #hamburger-btn {
            display: block;
          }
        
          section > p {
            text-align: center;
          }
        
          section .cards .card {
            width: calc(100% / 2 - 15px);
            margin-bottom: 30px;
          }
        
          .homepage .content h1 {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 10px;
          }
        
          .homepage .content .text {
            font-size: 17px;
          }
        
          .content a {
            font-size: 17px;
            padding: 9px 20px;
          }
        
          .contact .row {
            flex-direction: column;
          }
        
          .contact .row .col {
            width: 100%;
          }
        
          .contact .row .col:last-child {
            margin-top: 40px;
          }
        
          footer a {
            height: 0;
          }
        }
        
        @media screen and (max-width: 560px) {
          section .cards .card {
            width: 100%;
            margin-bottom: 30px;
          }
        }
        
    
      
      
      

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

    Total projects



    Related Projects




  • ...

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