How to create fully Responsive website using HTML & CSS || spiritual

Hello! Friends, How are you? I hope You are Feel fine. Finally, I will provide a free source code of a Complete fully responsive website. In these projects, we have used only HTML and CSS to create a complete Responsive website. These websites like simple Portfolios. These websites have Navigation Bar, a Simple Home page, and some sections like About, Favourite, Skills, and footer. You can see these websites we create a portfolio for Coder.

You can create more websites like these. But you can remember How to adjust some code in HTML and CSS. To create the website you have to basic knowledge of HTML, CSS, and How the website work. Without HTML & CSS it's not possible to create a static website.

How do I make a fully responsive Website (Portpolio) Using HTML and CSS?

You can see this website. We have created a sticky Navbar at the top of the page, after the Nav Bar I give one background image and decrease the intensity using linear-greadient() code in CSS. Above this Image, We have written some text. Also, I have to Create two buttons for 'Join us & Contact us. Bottom of the background image you can see some Social icons. all of these you can see the below image.

After these page You can see Some more contents like Home, Fvourite , Our Blog and skills. At the end of the website you see simple Footer.

You might also read :

You can watch these video for, how website look likes ?

Responsive website using HTML And CSS | Free Source Code
To copy-paste the given codes of this Responsive website design, first of all, you need to create two files, one is an HTML file and another is a CSS file. You can also download all source code files from the given download button.

Document

HTML CODE:

        <!DOCTYPE html>
        <html lang="en" dir="ltr">
        
        <head>
          <meta charset="utf-8">
          <link rel="stylesheet" href="style.css">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        
        <body>
          <nav>
            <div class="logo">Spiritual_codes</div>
            <input type="checkbox" id="click">
            <label for="click" class="menu-btn">
              <i class="fas fa-bars"></i>
            </label>
            <ul>
              <li><a class="active" href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Feedback</a></li>
            </ul>
          </nav>
        
          <main>
            <div class="content">
              <div class="box">
                <div class="left">
                  <div class="head">
                    <div class="name">
                      Spiritual Codes
                    </div>
                    <div class="skill">
                      <div class="skill">
                        UI/Ux Designer
                      </div>
                    </div>
                    <button>join Us</button>
                    <button>Contact Us</button>
                  </div>
                  <div class="social">
                    <div class="icon">
                      <i class="bi bi-facebook"></i>
                    </div>
                    <div class="icon">
                      <i class="bi bi-twitter"></i>
                    </div>
                    <div class="icon">
                      <i class="bi bi-instagram"></i>
                    </div>
                    <div class="icon">
                      <i class="bi bi-linkedin"></i>
                    </div>
                    <div class="icon">
                      <i class="bi bi-youtube"></i>
                    </div>
                  </div>
        
                </div>
                <div class="imp">
                  <div class="info">
                    <h2>Home</h2>
                    <div class="text">
                      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur odit alias, non atque aliquid rerum
                      id consequatur sequi architecto, eaque error harum. Esse nobis quia dolor corporis cumque tempora quaerat
                      reprehenderit laudantium velit, hic fugiat beatae, distinctio repellat totam facere molestias neque
                      repellendus! Ex commodi excepturi fugit fugiat ad. Tenetur debitis veritatis labore obcaecati, laborum
                      odio corporis aspernatur accusantium cum necessitatibus, sunt quia animi nobis ullam ipsum vitae illum
                      ipsa exercitationem. Maxime, rem incidunt quasi tempore doloribus voluptates aliquid. Accusamus,
                      repudiandae minima! Reprehenderit accusamus ex quia ut maxime eum aperiam dolorem excepturi amet?
                      Aspernatur accusantium eos laboriosam nemo facilis dolore.
                    </div>
                  </div>
                  <div class="info">
                    <h2>Favourite</h2>
                    <ul>
                      <li><i class="bi bi-code"></i><a href="#">Coding</a></li>
                      <li><i class="bi bi-camera"></i><a href="#">Photography</a></li>
                      <li><i class="bi bi-controller"></i><a href="#">Gaming</a></li>
                      <li><i class="bi bi-music-note-beamed"></i><a href="#">Music</a></li>
                    </ul>
                  </div>
                  <div class="info">
                    <h2>Our Blog</h2>
                    <ul>
                      <li><img
                          src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqAcf4594mkEUOw39SQsPkxH3gHkj0hp0R_BPaGjBK7EjMyPEEBEpl1XF4PwBR2UC6eLiuUclnndviSBcKGBuMi_Fmxb1Y93qjDY5KUWy8KIZd_L8jErJrSTZmXGGi68bEF_PBsS_47jg/w640-h360/c+conversion+system.png"
                          alt="images"><a href="#"></a></li>
                      <li><img
                          src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsin24riOYrnOmdWqBdi4PXbdQLXYcq678qwuidc0VQvWnNO7_2yIwWF7BpP8X4__t24PRbDzibtPzaxhgy6-9u6r7RpyLoO5oESC1ujH_-O98T6I5YEJdhMahiIjek9NiDAaTejoiAU/w640-h360/html.png"
                          alt="images"><a href="#"></a></li>
                      <li><img
                          src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQI6Nzy3pL6GTI9ily2SL7jROk3NMKEx1DgTwWc4MDuIiSJe9KC3aeFfjjLBwG8NAMcUQwiI_ZFA34TRJriHvxfAjN0dMETuiPTUqd7fv_A-szYyaBl3B1wKXJ3X9JTYy8FraL3I9VCpE/w640-h360/footer+canva.png"><a
                          href="#"></a></li>
                      <li><img
                          src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDjFeWv1HLJIpOFKQ92Hn6p7e1dgjqqj35YMdMMNoMU0OFaCWyMJuo3Bud40qDtCWp3r9DQVv9DKhB8IvBMlBtP6feQckvnUO2PXzA3KQvzYkXIGVO2moFv2U6XtAPaWZlMnJC7KZ52s/w640-h309/navigation+bar.png"
                          alt="images"><a href="#"></a></li>
                    </ul>
                  </div>
        
                  <div class="info">
                    <h2>Skills</h2>
                    <ul>
                      <li><a href="#">Programming</a></li>
                      <li><a href="#">Web Design</a></li>
                      <li><a href="#">App development</a></li>
                      <li><a href="#">SEO</a></li>
                    </ul>
                  </div>
                  <div class="footer">        
                      <div class="copy">
                        ©Copyright <span><a href="#">Spiritual_codes</a></span> All right Reserved
                      </div> 
                  </div>
                </div>
              </div>
            </div>
          </main>
        </body>
        
        </html>

CSS CODE:

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
        @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.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;
        } 
        
        nav{
          display: flex;
          position: fixed;
          height: 50px;
          width: 100%;
          background: #1b1b1b;
          align-items: center;
          justify-content: space-between;
          padding: 0 50px 0 100px;
          flex-wrap: wrap;
        }
        nav .logo{
          color: #fff;
          font-size: 35px;
          font-weight: 600;
        }
        nav ul{
          display: flex;
          flex-wrap: wrap;
          list-style: none;
        }
        nav ul li{
          margin: 0 5px;
        }
        nav ul li a{
          color: #f2f2f2;
          text-decoration: none;
          font-size: 18px;
          font-weight: 500;
          padding: 8px 15px;
          border-radius: 5px;
          letter-spacing: 1px;
          transition: all 0.3s ease;
        }
        nav ul li a.active,
        nav ul li a:hover{
          color: white;
          background-color: rgba(255, 255, 255, 0.308);
          border-bottom: 2px solid black;
        }
        nav .menu-btn i{
          color: #fff;
          font-size: 22px;
          cursor: pointer;
          display: none;
        }
        input[type="checkbox"]{
          display: none;
        }
        @media (max-width: 1000px){
          nav{
            padding: 0 40px 0 50px;
          }
        }
        @media (max-width: 973px) {
          nav .menu-btn i{
            display: block;
          }
          #click:checked ~ .menu-btn i:before{
            content: "\f00d";
          }
          nav ul{
            position: fixed;
            top: 50px;
            left: -100%;
            background: #111;
            height: 100vh;
            width: 100%;
            text-align: center;
            display: block;
            transition: all 0.3s ease;
          }
          #click:checked ~ ul{
            left: 0;
          }
          nav ul li{
            width: 100%;
            margin: 40px 0;
          }
          nav ul li a{
            width: 100%;
            margin-left: -100%;
            display: block;
            font-size: 20px;
            transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          }
          #click:checked ~ ul li a{
            margin-left: 0px;
          }
          nav ul li a.active,
          nav ul li a:hover{
            background: none;
            color: cyan;
          }
        }
        
        .content{
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100vh;
          background-image:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(2.jpg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          
        }
        
        .box .left{
          height: 100vh;
          width: 100%;
          display: flex;
          flex-direction: column;
        }
        
        .box .left .head{
          position: absolute;
          width: auto;
          height: auto;
          left: 15%;
          top: 50%;
            transform: translateY(-50%);
          font-size: 30px
          border: 2px solid black;
        }
        .box .left .name{
          font-size: 50px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.808);
          
        }
        .box .left .skill{
          font-size: 20px;
          color: white;
        }
        
        .box .left button{
          width: 100px;
          height: 30px;
          border-radius: 10px;
          outline: none;
          margin-top:30px;
          border: none;
          cursor: pointer;
          color: white;
          border-bottom: 2px solid black;
          background-color: rgba(255, 255, 255, 0.308);
          
        }
        .box .left button:hover{
          background-color: rgba(248, 247, 247, 0.664);
          color: black;
        }
        
        .left .social{
          display: flex;
          position: absolute;
          top: 90vh;
          left: 50%;
          transform: translateX(-50%);
        }
        .left .social .icon{
          width: 40px;
          height: 40px;
          display: flex;
          border-radius: 50%;
          cursor: pointer;
          justify-content: center;
          align-items: center;
          margin: 10px;
          color: black;
          background-color: rgba(255, 255, 255, 0.308);
          transition: all 0.6s ease;
        }
        .left .social .icon:hover{
          background-color:black;
          color:white;
        }
        
        .imp{
          width: 100%;
          background-color: rgba(242, 242, 243, 0.952);
        }
        .imp .info{
          max-width: 90%;
          margin: auto;
          padding: 20px;
        }
        .imp .info h2{
          text-align:center;
          width:fit-content;
          padding:20px;
          border-bottom:3px solid red;
          margin:auto;
        }
        .imp .info .text{
          text-align: justify;
          margin-top: 20px;
        }
        .info ul{
          display: flex;
          margin: 30px;
          justify-content: space-between;
          flex-wrap: wrap;
        }
        .info ul li{
          display: flex;
          list-style: none;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
        }
        .info ul li i{
          font-size: 100px;
        }
        .info ul li a{
          text-decoration: none;
          font-size: 20px;
          margin: 0 10px;
          color: black;
          opacity: 0.7;
        }
        
        .info ul img{
          width:200px;
          margin:10px;
          border: 2px solid white;
          
          box-shadow: 0 10px 20px 0 rgb(30 30 30 / 50%);
          
        }
        .info ul li a:hover{
          opacity: 1;
        }
        .footer{
          display: block;
          align-items: center;
          text-align: center;
          height: auto;
          background-color: rgb(192, 183, 183);
        }
        .footer .copy{
          line-height: 40px;
        }
        
        
        
        
        
        
        
        
        
        
        @media screen and (max-width:598px){
          .info ul img{
            width:170px;
            margin:10px;
        
          }
          .info ul li  a{
            font-size: 20px;
          }
        }
        @media screen and (max-width:542px) {
          .info ul{
            display: flex;
            flex-direction: column;
            
          }
          .box .left .head{
            display: block;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
          }
          
          .left .social .icon{
            width: 30px;
          }
          .info ul img{
            width:100%;
            margin:10px;
        
          }
        }

Download

How to create fully Responsive website using HTML & CSS || spiritual_codes

Post a Comment

Contact Form