How to create a fully Responsive website using html , css and jquery

Hello reader , In today's blog you will learn how to create a fully responsive website using html , css and jquery .

Below is the view of the website homepage design with the screen size

WHEN YOU OPEN HOMEPAGE FIRST TIME IT LOOK LIKE THIS

Homepage Section View

Services Section View

About Us Section View

Contact Us Section View

WHEN YOU REDUCE SCREEN SIZE TO 726px IT LOOK LIKE THIS

Homepage Section View

Our Services Section View

About Us Section View

Contact Us Section View

WHEN YOU REDUCE SCREEN SIZE TO 398px IT LOOK LIKE THIS

Homepage Section View

Our Services Section View

About Us Section View

Contact Us Section View

Menu View On Click Menu Bar

What is in this website design ?

1. Adjust according to screen size website.

2. Menu Bar animation .

3. Scroll to top on click right bottom arrow up icon.

4. Shrink header on scroll .

5. Menu item slow come in animation.

Technology used in this responsive website

1.HTML.

2.CSS.

3.JQUERY.

HTML - HyperText Markup Language is the language used to describe and define the content of a Web page.

CSS - Cascading Style Sheets are used to style the content of the webpage that add beautiful look to the website.

JQUERY - Jquery is used to for the following animaton .

1. when you scroll the web page it start shrink .

2. when you click on the right bottom arrow up it automatically scroll up .

3.For menu items to come one by one by add css class using jquery .

4. On click middle bar disappear and top & bottom bar cross each other by add and remove css class.

Video Tutorial

Preview of the Full code

HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Homepage || Coding Zone</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


</head>
<body>

   <header>

          <div class="logo">
        
             <img src="logo.jpg">
              
          </div>

          <div class="menu-wrapper">

                <div class="menu">
                    
                     <ul>
                      
                        <li><a href="#Home">Home</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>
                      
                </div>
              
          </div>

          <div id="bar-animation">
                    
            <span></span>

          </div>

   </header>



   <div class="home" id="Home">
  
     <div class="details">
        <h2>I'm <font color="red">Akash</font> Maurya</h2>
        <p>Love to make clean and simple Design.</p>  
        <p>Also love to solve different different problems.</p> 
        <button>Know More About ME</button>
     </div> 

     <img src="profile png.png">

     <div class="Social-media">

        <i class="fab fa-facebook-f"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-linkedin-in"></i>


     </div>

   </div>




   <div class="services" id="Services">

       <h1><font color="#E6E7E8">Our Services</font></h1>  
  
       <div class="card">
 
         <div class="box-1">

            <p class="title"> Backend</p>
            <div class="image">
                <img src="Card1.jpg">
            </div>
            <p class="info"> We work continuously to improve out services and help others with our knowledge</p>

         </div>

         <div class="box-1">

            <p class="title">Frontend</p>
            <div class="image">
                <img src="Card2.jpg">
            </div>
            <p class="info"> We work continuously to improve out services and help others with our knowledge</p>

         </div>

         <div class="box-1 box-algo">

            <p class="title">Algorithems</p>
            <div class="image">
                <img src="Card3.jpg">
            </div>
            <p class="info"> We work continuously to improve out services and help others with our knowledge</p>

         </div>


       </div>


   </div>





   <div class="about" id="About">


    <div class="about-us">

         <h1>About Us</h1>          
         <h2>Front End Developer</h2>
         <p>
             Love to make clean and simple Design.
            I am trying to create awesome design using my existing knowledge.
            I continuously try to improve my knowledge to create eye catching design.
            Photshop for the web brings an advanced design interface.
         </p>

         <button>View More Details</button>
   

    </div>

    <div class="about-image">

            <div class="image-border"></div>

            <img src="profile.jpg">
    </div>

   </div>





   <div class="contact" id="Contact">

       <div class="contact-heading">

           You have any idea or suggestion contact us 

       </div>


       <div class="contact-form">

        
       <div class="input-details">

  
         <h1>Contact Us</h1>

        <div class="input-container">

          <label>Full Name</label>
          <input type="text" placeholder="Full Name">

        </div>

        <div class="input-container">

          <label>Email Address</label>
          <input type="text" placeholder="Email">

        </div>  

     </div>


     <div class="input-message"> 

      <textarea placeholder="write message to us ..." /  >
      <button>Send Message</button>

         
      </div>


    </div>



</div>


    <div class="arrow-top">

        <i class="fas fa-arrow-up"></i>

    </div>

   
</body>
  
</html>

CSS FILE

 
  
  
  
  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Poppins&display=swap');

*{

    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;

    box-sizing: border-box;
}

html{

    scroll-behavior: smooth;
}

body{

  
    font-family: 'Poppins', sans-serif;
}

header{

    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #25274D;
    height: 100px;
    width: 100%;
    position:fixed;
    border-radius: 0 0 20% 10%;
    box-shadow: 0px 1px 2px #E6E7E8;
    transition:  all 0.4s ease-in-out;


}

header .logo{

    height: 60px;
    width: 60px;
    margin-left: 20px;
}

header .logo img{

    width: 100%;
    height: 100%;
    border-radius: 100%;
}

header .menu{

    margin-right: 30px;
}


header .menu ul li{

    display: inline-block;
}

header .menu ul li a{

    color: #E6E7E8;
    padding: 10px 20px;

}

header .menu ul li a:hover{

    background-color: #697184;


}
header #bar-animation{

    position: relative;
    height: 20px;
    width: 20px;
    margin-right: 20px;
    cursor: pointer;
    display: none;


}

header #bar-animation span{


    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 10px;
    background-color: #E6E7E8;
}

header #bar-animation span::before{

    content: '';
    position: absolute;
    height: 2px;
    width: 70%;
    right: 0;
    border-radius: 10px;
    background-color: #E6E7E8;
    margin-top: 50%;
    transform: translateY(-50%);

}

header #bar-animation span::after{

    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 10px;
    background-color: #E6E7E8;
    margin-top: 100%;

}

#bar-animation.active-bar span::before{

    transition: 1s;
    opacity: 0;
}

#bar-animation.active-bar span{

    transition: 1s;
    transform: translateY(13px) rotate(45deg);

}

#bar-animation.active-bar span::after{

    transition: 1s;
    transform: translateY(-20px) rotate(-90deg);  
}

.menu-wrapper.fullMenushow{

    transition: 0.6s;
    left: 0;
}


.home{

    font-family: 'Caveat', cursive;
    position: relative;
    min-height: 100vh;    
    width: 100%;
    background-color:#292929;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #E6E7E8;
   
}

.home .details{

    position: absolute;
    left: 15%;
    font-size: 25px;
}

.home img{

    position: absolute;
    height: 80%;
    bottom: 0;
    right: 5%;
}

.home button{

    background:none;
    border: none;
    outline: none;
    color: #E6E7E8;
    background-color: #25274D;
    padding: 10px 20px;
    cursor: pointer;

}

.home button:hover{

    transition: 0.4s;
    background-color: #1e2042;
    border-radius: 4px;
}

.home .Social-media{

    position: absolute;
    bottom: 20px;
}

.home .Social-media i{

    margin-left: 10px;
    font-size: 20px;
    color: #B1A6A4;
cursor:pointer;
}



.services{

   min-height: 100vh;
    width: 100%;
    background-color: #072C50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.card{

    width: 100%;
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto auto;
}


.box-1{

    position: relative;
    background-color: #050505;
    width: 310px;
    height: 400px;
    border-radius: 10px;
    border: 2px solid #E6E7E8;
    margin: 20px;
    overflow: hidden;
}

.box-1:hover{
    
    transform: translateY(-10px);
    transition: 0.5s all ease-out;
}

.box-1 .title{

    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background-color: #E6E7E8;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
}

.box-1 .image{

    height: 70%;

}

.box-1 img{
    height: 100%;
    width: 100%;
}

.box-1 .info{

    color: #E6E7E8;
    font-size: 15px;
    padding: 10px;
    text-align: center;
}



.about{

    min-height: 100vh;
    width: 100%;
    background-color: #333333;
    display: flex;
    justify-content: space-around;
    align-items: center;
    

}


.about .about-us{

    width: 50%;
    color: #E6E7E8;
    padding: 10px;
}

.about .about-us p{

    font-size: 18px;
}

.about .about-us button{

   background: none;
   border: none;
   outline: none;
   background-color: #E6E7E8;
   padding: 10px 20px;
   font-weight: 1000;
   color: #534d4c;
   margin-top: 20px;
}

.about .image-border{

    position: absolute;
    height: 100%;
    width: 100%;
    border: 5px solid #E6E7E8;
}

.about .about-image{

    position: relative;
    height: 80vh;
    width: 60vh;
    margin-right: 5%;
    
}

.about .about-image img{

    position: absolute;
    height: 100%;
    width: 100%;
    left: 8%;
    bottom: 8%;
    transform: translateZ(100px);

}

.contact{

    min-height: 100vh;
    width: 100%;
    background-color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contact .contact-heading{
 
    color: #E6E7E8;
    font-size: 25px;
    font-weight: 1000;
    margin-bottom: 30px;

}


.contact .contact-form{

    width: 80%;
    display: flex;
    flex-direction: row;
    color: white;
    padding: 60px 20px;
    background-color: #050505;
    border-radius: 5px;
}

.contact .contact-form .input-details{

    display: flex;
    flex-direction: column;
    padding: 30px;
    width: 50%;
}


.contact .contact-form .input-details .input-container{

    margin-top: 20px;
    display: flex;
    flex-direction: column;

}


input[type="text"]{

    background: none;
    border: none;
    outline: none;
    color: #E6E7E8;
    padding: 10px;
    border-bottom: 1px solid #E6E7E8;
}


.contact .contact-form .input-message{

    width: 50%;
    padding: 10px;
    border-left: 1px solid #E6E7E8;
}

.contact .contact-form .input-message textarea{

    width: 100%;
    height: calc(100% - 40px);
    background: none;    
    outline: none;
    border: none;
    resize: none;
    color: #E6E7E8;

}

.contact .contact-form .input-message button{

     width: 100%;
     padding: 10px 20px;
     background-color: #E6E7E8;
     color: #050505;
     font-weight: 800;

}



.shrinkHeader{

    height: 80px;
    border-radius: 0;
}

.arrow-top{

    color: red;
  
}

.fa-arrow-up{

    position: fixed;
    bottom: 2%;
    right: 2%;
    background-color: #E6E7E8;
    padding: 15px;
    border-radius: 100%;
    cursor: pointer;
}


@media(max-width:1048px){

    .services .card .box-1{

        grid-template-columns: 50% 50%;
        width: calc(100% - 40px);

    }

   .services .card .box-algo{

    width: calc(100% - 40px);
   grid-column: 1/3;

   }

   .about .about-us p{

    font-size: 15px;
   }

   .about .about-image{

    height: 60vh;
    width: 40vh;
   }

}

@media(max-width:830px){

    .home img{

        height: 60%;

    }

    .home .details{

        font-size: 20px;
    }


}

@media(max-width:726px){

   header #bar-animation{

    display: block;
   }


   .menu-wrapper{

    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: -150%;
    background-image: linear-gradient(rgba(25, 10, 109, 0.5),rgba(140, 90, 255, 0.5)) , url(profile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  
 
   }
   
   header .menu{

    position: absolute;
    width: 100%;
    margin-top: 100px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);

   }

  




   header .menu ul li{

    position: relative;
    width: 100%;
    
    padding: 10px 20px;
   }

   header .menu ul li a{

    width: 100%;
    
   }

   .menu.startComeWithDelay ul li:nth-child(1){

    animation: 1s comeIn;
    animation-fill-mode: forwards;
   }
   .menu.startComeWithDelay ul li:nth-child(2){

    animation: 2s comeIn;
    animation-fill-mode: forwards;

   }
   .menu.startComeWithDelay ul li:nth-child(3){

    animation: 3s comeIn;
    animation-fill-mode: forwards;
   }
   .menu.startComeWithDelay ul li:nth-child(4){

    animation: 4s comeIn;
    animation-fill-mode: forwards;

   }

   .home img{

    display: none;
   }

   .contact .contact-form{

    flex-direction: column;
   }

   .contact .contact-form .input-details{

      width: 100%;
   }

   .contact .contact-form .input-message{

    width: 100%;
    padding: 30px;
    border: none;

   }

   .contact .contact-form .input-message textarea{
   
    height: 200px;
    background-color: #333333;
    padding: 10px;
  }

}



@media(max-width:600px){

    .services .card{

        display: flex;
        flex-direction: column;

    }

    .about .about-image{

        display: none;
    }

    .about .about-us{

        width: 80%;
    }

    .about h1{

        font-size: 6vw;
    }

    .about h2{
        font-size: 4vw;
    }
    
    .about .about-us p{

        font-size: 3vw;
    }

    .box-1 .title{

        font-size: 4vw;
    }
    .box-1 .info{

        font-size: 3vw;
    }

    .contact .contact-form{

        width: 100%;
    }
    .contact .contact-heading{

        font-size: 4vw;
    }


}


@media(max-width:300px){

    
    .box-1{

        height: 250px;
    }

}


@keyframes comeIn{

    0%{

      left: -150%;
    }
    100%{
      
        left: 0;

    }


}

JQUERY FILE

 
  
  
  
   <script>
      
      $(document).ready(function(){

         $("#bar-animation").click(function(){

             $(this).toggleClass("active-bar");
             $(".menu-wrapper").toggleClass("fullMenushow");
             $(".menu").toggleClass("startComeWithDelay");

         });

         $("li").click(function(){

         
         $(".menu-wrapper").removeClass("fullMenushow");
         $(".menu").toggleClass("startComeWithDelay");
         $("#bar-animation").toggleClass("active-bar");

        });

        $(".arrow-top").on('click',function(){

            $("html,body").animate({scrollTop:0},200);
        });



        $(window).scroll(function(){

              if($(document).scrollTop() > 50){

                $("header").addClass("shrinkHeader");

              }
              else{
                
                $("header").removeClass("shrinkHeader");


              }
         
         
        });

      });

   </script>

Download Full code Click here to download Code

Keep Visiting 😁

Post a Comment

Post a Comment

About Us

Contact Form

How to create a fully Responsive website using html , css and jquery

You might like

Post a Comment

Post a Comment

Contact Form