Create Responsive Website Just using HTML and CSS (No JavaScript)
Learn how to make a responsive website just using HTML and CSS without using JavaScript. Easy way to create a responsive website only using HTML and CSS. You will easily make this responsive Website by following my video tutorial, which I have given below.
How To Make a Responsive Website Just using HTML and CSS (No JavaScript)
- 0.0 - 1.45 min : Intro
- 1.45 - 45.38 min: Building Responsive Website only using HTML and CSS.
About This Tutorial
In this tutorial, You will learn how to make a responsive website only using HTML and CSS. You will easily create this website by watching my video tutorial, which I have given above. In the tutorial, First, I show the design, which I will make this tutorial. I make the website structure and design this structure using a CSS stylesheet. I use the checkbox to make navigation responsive, which anyone clicks on this nav button show menu. I hope you like this tutorial. If you have any questions or problems, contact me.
This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, intial-scale=1.0"> <title>Personal Website</title> <!--style-----> <style> body{ font-family:Calibri; } </style> </head> <body> </body> </html>
You can easily make a Pure HTML CSS Website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make a Pure HTML CSS Website like that for your website. So I recommended you watch the how-to-make Pure HTML CSS Website video Tutorial on how can I make this Only using HTML and CSS. This Pure HTML CSS Website is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Pure HTML CSS Website video tutorial on how I make this Website. you can use this on your website without any copyright.
Navigation
➤ Navigation HTML Code have given below.
<section class="main"> <!--navigation--> <nav> <!--logo--> <a href="#" class="logo"> <img src="images/logo.png"/> </a> <!--menu-btn-----------> <input class="menu-btn" type="checkbox" id="menu-btn"/> <label class="menu-icon" for="menu-btn"> <span class="nav-icon"></span> </label> <!--menu--> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Account</a></li> <li><a href="#">Plan</a></li> <li><a href="#">Payment</a></li> <li><a href="#">Notices</a></li> <li><a href="#">Team</a></li> </ul> </nav> </section>
➤ Navigation CSS Code have given below.
body{
margin:0px;
padding: 0px;
font-family: calibri;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.main{
width:100%;
height:100vh;
background-image: url(../images/poduct\ bg.png);
background-size: cover;
background-position: top left;
position: relative;
}
.logo img{
height: 20px;
}
nav{
display: flex;
align-items: center;
justify-content: space-around;
padding: 10px 30px;
background-color:#fff;
box-shadow: 2px 2px 20px rgba(90,118,253,0.13);
z-index: 1;
width:100%;
position: fixed;
left: 0px;
top: 0px;
}
nav ul{
display: flex;
margin:0px;
padding: 0px;
}
nav ul li a{
height:40px;
line-height: 43px;
margin: 8px;
padding: 0px 22px;
display: flex;
font-size: 0.9rem;
text-transform: uppercase;
font-weight: 400;
color:#111;
letter-spacing: 1px;
}
nav ul li a:hover{
background-color: #5a76fd;
color:#fff;
box-shadow: 5px 10px 30px rgba(90,118,253,0.5);
transition: all ease 0.2s;
}
Content
➤ Content HTML Code have given below.
<!--main-content--> <div class="home-content"> <!--text--> <div class="home-text"> <h1>Website Design</h1> <p>Website design collection. You will get all type of website design here. Just select, add to cart, and enjoy you website. I hope you like this website tutorial Pure HTML and CSS.</p> <!--login-btn--> <a href="#" class="main-login">Log in</a> </div> <!--img--> <div class="home-img"> <img src="images/web design.png"/> </div> </div> <!--timing-------------------> <div class="timing"> <!--office-time--> <div class="office-time"> <h3>Office Hours</h3> <p>Monday - Firday <font>8:00 AM - 6:00</font> PM CST</p> </div> <!--office-contact--> <div class="office-number"> <h3>Do you need to call us?<br/>We are here to listen</h3> <p>Call <font>1-234-567-8912</font> During Business Hours.</p> </div> </div> <!--arrow--> <div class="arrow"></div> <span class="scroll">Scroll</span>
➤ Content CSS Code have given below.
.home-content{
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
width:90%;
}
.home-img{
width:500px;
height:400px;
margin:20px;
}
.home-img img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.home-text{
width:500px;
margin:20px;
}
.home-text h1{
font-size: 3.5rem;
line-height: 55px;
color:#22252e;
letter-spacing: 1px;
font-weight: 700;
margin: 0px;
}
.home-text p{
font-size: 1rem;
color:#777474;
}
.main-login{
width:120px;
height:40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #5a76fd;
color:#fff;
box-shadow: 5px 10px 30px rgba(90,118,253,0.5);
text-transform: uppercase;
}
.main-login:hover{
background-color: #5a62fd;
transition: all ease 0.3s;
}
.timing{
position: absolute;
left:20%;
bottom: 10px;
transform: translateX(-20%);
display: flex;
justify-content: space-around;
align-items: center;
}
.office-time,
.office-number{
margin: 0px 20px;
}
.office-time h3,
.office-number h3{
font-weight: 700;
color:#22252e;
font-size: 1.6rem;
margin: 0px;
}
.office-number p,
.office-time p{
color:#777474;
font-size: 1.1rem;
}
.office-time font,
.office-number font{
color:#7b92fd;
font-weight: 700;
}
.arrow{
align-self: end;
width:50%;
border-right: 1px solid #5a76fd;
height: 20%;
margin-bottom:4em ;
position: absolute;
bottom: 5px;
right: 70px;
animation: arrow-animation ease 1.5s;
}
.arrow::after{
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 11px 0px 11px;
border-color: #5a76fd transparent transparent transparent;
right: -0.7em;
bottom: -2px;
}
.scroll{
position: absolute;
bottom: 20px;
right:55px;
font-weight: 600;
}
@keyframes arrow-animation{
0%{
bottom: 70px;
opacity: 0.2;
}
100%{
bottom: 5px;
opacity: 1;
}
}
Services
➤ Services HTML Code have given below.
<!--services-----------------------> <section class="services"> <!--heading-----------> <div class="services-heading"> <h2>Website Services Which We Provided.</h2> <p>This site provides a confidential, discreet and hassle-free resolution and payment of a past due account. Please have the communication letter you have received from us ready as you will need it to log in.</p> </div> <!--box-container-----------------> <div class="box-container"> <!--box-1--------> <div class="box"> <img src="images/login.svg"> <font>Log-In to our secure website</font> <p>To begin the process, please Log-In to our secure system. Everything you need to Log-In is available in the communication letter you have received from us.</p> <!--btn---------> <a href="#">Log In</a> </div> <!--box-2--------> <div class="box"> <img src="images/account view.svg"> <font>View Your Website</font> <p>You will have a chance to review your account for accuracy and update your contact information. Should you find any incorrect information on your account or if you prefer to talk to us directly, please Contact Us.</p> <!--btn---------> <a href="#">View</a> </div> <!--box-3--------> <div class="box"> <img src="images/payment method.svg"> <font>Select Your Plan</font> <p>In addition to the payment in full, we may offer you a discount for making online payments, allow you to schedule payments over time, or have you define the payment terms that best work for your particular situation.</p> <!--btn---------> <a href="#">Select Plan</a> </div> <!--box-4--------> <div class="box"> <img src="images/lock.svg"> <font>Login in secure website</font> <p>You can make secure online payments from the privacy of your home 24/7.</p> <!--btn---------> <a href="#">Log In</a> </div> <!--box-1--------> <div class="box"> <img src="images/document.svg"> <font>Confrim Your Websites</font> <p>When you make payment(s), we will issue you an electronic receipt. You can also log in any time to get the most up-to-date receipt</p> <!--btn---------> <a href="#">View</a> </div> </div> </section>
➤ Services CSS Code have given below.
.services{
background-image:url("../images/poduct\ bg.png");
background-size: 1000px;
background-position: center;
}
.services-heading{
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
.services-heading h2{
line-height: 55px;
font-size: 2.2rem;
color:#22252e;
letter-spacing: 1px;
font-weight: 700;
margin: 0px;
}
.services-heading p{
font-size: 1rem;
color:#777474;
width:50%;
}
.box-container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 20px 30px;
}
.box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:500px;
height: 400px;
text-align: center;
box-shadow: 2px 2px 20px rgba(90,118,253,0.15);
border-radius: 10px;
background-color: #fff;
margin: 20px;
flex-grow: 1;
}
.box img{
height:150px;
margin:10px;
}
.box font{
font-size: 1.5rem;
color: #22252e;
letter-spacing: 1px;
font-weight: 700;
}
.box p{
font-size: 1rem;
color: #777474;
display: block;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-width: 500px;
}
.box a{
width:150px;
height:40px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #5a76fd;
text-transform: uppercase;
margin: auto;
border-radius: 5px;
font-weight: 600;
font-size: 0.9rem;
color:#5a76fd;
margin:0px;
}
.box a:hover{
background-color: #5a76fd;
color:#fff;
box-shadow: 5px 10px 30px rgba(90,118,253,0.5);
transition: all ease 0.3s;
}
Footer
➤ Footer Section HTML Code have given below.
<!--footer-------------> <footer> <a href="#">Going To Internet, Consumer.</a> <p>Copyright (C) 2020 Going To Internet.</p> </footer>
➤ Footer Section CSS Code have given below.
footer{
width:100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 5%;
border-top: 1px solid rgba(167,167,167,0.2);
}
footer a,
footer p{
color:#5e5e5e;
}
Making Responsive
➤ Making Responsive CSS Code have given below.
nav .menu-btn{
display: none;
}
@media(max-width:1100px){
nav{
justify-content: space-between;
height: 65px;
}
.menu{
display: none;
position: absolute;
top: 65px;
left: 0px;
background-color: #fff;
border-bottom: 4px solid #5a76fd;
width:100%;
}
.menu li{
width:100%;
}
nav .menu li a{
width:100%;
height: 40px;
justify-content: center;
align-items: center;
margin:0px;
padding: 25px;
border:1px solid rgba(38,38,38,0.03);
}
nav .menu-icon{
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
nav .menu-icon .nav-icon{
background-color: #333333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width:18px;
}
nav .menu-icon .nav-icon:before,
nav .menu-icon .nav-icon:after{
background: #333333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all ease-out 0.2s;
width:100%;
}
nav .menu-icon .nav-icon:before{
top: 5px;
}
nav .menu-icon .nav-icon:after{
top:-5px;
}
nav .menu-btn:checked ~ .menu-icon .nav-icon{
background: transparent;
}
nav .menu-btn:checked ~ .menu-icon .nav-icon:before{
transform: rotate(-45deg);
top: 0;
}
nav .menu-btn:checked ~ .menu-icon .nav-icon:after{
transform: rotate(45deg);
top: 0;
}
nav .menu-btn{
display: none;
}
nav .menu-btn:checked ~ .menu{
display: block;
}
.home-img{
display: none;
}
.home-text{
width:100%;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
height: 45vh;
background-color: rgba(33,33,33,0.35);
margin: 0px;
}
.home-content{
width:100%;
margin:0px;
position: static;
transform: translate(0px,70px);
background-image: url("../images/bg2.png");
background-repeat: no-repeat;
background-size: cover;
background-position: top right;
box-shadow: 2px 2px 30px rgba(90,118,253,0.15);
}
.home-text h1{
color:#fff;
padding: 0px 20px;
font-size: 2.5rem;
border: 1px solid #fff;
}
.home-text p{
color:rgba(255,255,255,0.85);
margin: 10px 0px 20px 0px;
width:50%;
}
.arrow{
height: 70px;
}
.main{
background-size: 500px;;
}
.timing,.arrow,.scroll{
bottom: 40px;
}
}
@media(max-width:720px){
.home-text p{
width:70%;
text-align: center;
}
.office-number,
.office-time{
flex-grow: 1;
margin: 10px;
}
.office-number h3,
.office-time h3{
font-size: 1rem;
}
.office-time p,
.office-number p{
font-size: 0.8rem;
}
.arrow,.scroll{
display: none;
}
.home-content h1{
font-size: 1.9rem;
padding: 10px 10px;
line-height: 30px;
}
.timing{
width: 100%;
flex-wrap: wrap;
margin: 0px;
padding: 0px 20px;
}
.services-heading{
margin:20px;
}
.services-heading h2{
font-size: 1.7rem;
line-height: 40px;
}
.services-heading p{
width:100%;
}
.box{
width:100%;
margin: 20px 0px !important;
padding: 0px 20px;
flex-grow: 1;
}
.box img{
height: 100px;
width:100%;
object-fit: contain;
}
footer p,a{
font-size: 0.9rem;
text-align: center;
}
footer{
padding: 0px 10px;
}
}
👌
ReplyDeletesir image and source file are not download.
ReplyDeletewhy ? the link is disable .
Same with me
DeleteThis comment has been removed by the author.
ReplyDeleteWebsite design process deals with the visual aspects and user interface of a websites while web developers codes the website according to the requirements of client. Thanks for sharing these insights, great blog. Responsive website designers in Bangalore
ReplyDelete