How To Create A Complete Responsive Website Template using HTML

byPosted at
How To Create A Complete Responsive Website Template using HTML

Complete Responsive Website

Learn How To Make A Fully Responsive Website Template Using HTML, CSS, And JavaScript. Easy Way To Create Responsive Website Using HTML, CSS, and JS. You will create this website template by following the video tutorial or following these steps, which I have given below.

HostGator Web Hosting

How To Make A Complete Responsive Website Template using HTML.

  1. 0.0 - 1.30 min : Intro
  2. 1.30 - 72.0min: Build a Complete Website HTML



About This Tutorial

In this tutorial, I will teach you how to make a complete responsive website With Responsive Slider using HTML, CSS, And JavaScript. It is easy to build. This website depends on six sections: Main, Services, Team, Contact, Plan, and footer section. You will easily create this site by following my video tutorial or By following the steps which I give above in the post. If you Have Any Questions or Any Problem about this tutorial, Contact me.

Follow These Steps:-

1) Open any code editor like Notepad++.
2) Create HTML, CSS, And Javascript files and put in your project folder which you create. I recommended you to create separate folders for CSS File And JS File.
3) Link the CSS and JS File With HTML File.
4) Copy the HTML code, which I gave below, and paste in the HTML which you create.

HTML 

<!--doctype html-->
<html>
<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>Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/lightslider.css"/>
<!--Jquery-->
<script type="text/javascript" src="js/JQuery3.3.1.js"></script>
<script type="text/javascript" src="js/lightslider.js"></script>
<!--using FontAwesome-->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>

<body>
<section class="main">
<nav>
<!--logo-------------------->
<div class="menu-left">
<img class="logo" src="images/logo.png">
<a href="#">Going to internet</a>
<a href="#">Website design</a>
</div>
<!--sign-in----------------------------->
<a href="#" class="sign-in">Sign In</a>
</nav>
<!--slider------------->
<ul id="autoWidth" class="cs-hidden">
		<!--1------------------------------>
  <li class="item-a">
	  <div class="box box-img01">
	  <div class="slide-details">
	  <p>Design</p>
	  <p>Graphic Designing</p>
	  </div>
	 <div class="user user-img01"></div>
	  </div>
	</li>
	<!--2------------------------------>
<li class="item-b">
	<div class="box box-img02">
	<div class="slide-details">
	  <p>Design</p>
	  <p>Graphic Designing</p>
	  </div>
	 <div class="user user-img02"></div>
	</div>
	</li>
	<!--3------------------------------>
<li class="item-c">
	<div class="box box-img03">
	<div class="slide-details">
	  <p>Design</p>
	  <p>Graphic Designing</p>
	  </div>
	 <div class="user user-img03"></div>
	</div></li>
	<!--4------------------------------>
<li class="item-d">
	<div class="box box-img04">
	<div class="slide-details">
	  <p>Design</p>
	  <p>Graphic Designing</p>
	  </div>
	 <div class="user user-img04"></div>
	</div></li>
	<!--5------------------------------>
	<li class="item-e">
		<div class="box box-img05">
		<div class="slide-details">
	  <p>Design</p>
	  <p>Graphic Designing</p>
	  </div>
	 <div class="user user-img05"></div>
		</div></li>
	<!--6------------------------------>
	<li class="item-f">
		<div class="box box-img06">
		<div class="slide-details">
	  <p>Design</p>
	  <p>Graphic Designing</p>
	  </div>
	 <div class="user user-img06"></div>
		</div></li>
</ul>
<!------------graphic-------------------->
<div class="graphics">
<!----------heading-------------------->
<div class="g-heading">
	<span></span>
	<p>Graphic Design</p>	
</div>
<!-----------details---------------->
<p class="g-details">This is a graphic design website using HTML and CSS.</p>
</div>
</section>
<!--plans-->

	
	<!--sevices-heading-->
	<section class="services">
	<div class="s-heading">
	<p>Services</p>	
	<p>Our Services,Trems and Conditions</p>	
	</div>
	
	<div class="services-container">
	<!--1-box---------------------->
	<div class="s-box">
		<div class="s-icon front-icon"></div>
		<a href="#">Front End Devolper</a>
		<p>This website is best for your website make plan and this website  pro10 /10 website services that other website not provide. </p>
		<button class="service-button">Read More</button>	
	</div>
	<!--2----------------------->
	<div class="s-box">
		<div class="s-icon back-icon"></div>
		<a href="#">Back End</a>
		<p>This website is best for your website make plan and this website  pro10 /10 website services that other website not provide. </p>
		<button class="service-button">Read More</button>	
	</div>
	<!--3----------------------->
	<div class="s-box">
		<div class="s-icon seo-icon"></div>
		<a href="#">SEO/Security</a>
		<p>This website is best for your website make plan and this website  pro10 /10 website services that other website not provide. </p>
		<button class="service-button">Read More</button>
	</div>
	<!--4----------------------->
	<div class="s-box">
		<div class="s-icon gui-icon"></div>
		<a href="#">GUI</a>
		<p>This website is best for your website make plan and this website  pro10 /10 website services that other website not provide. </p>
		<button class="service-button">Read More</button>	
	</div>
	
	
	</div>
	</section>
		<!----------------Team-------------------->
	<section class="team">
	<!--team-heading-->
	<div class="t-heading">
	<p>Team</p>	
	<p>This is our Teams members</p>	
	</div>
	<!--team-conatiner-->
	<div class="t-box-container">
	<!--member-box-1--->
	<div class="team-box">
	<!--member-img-->
	<div class="team-img t-img1"></div>
	<div class="t-id">
	<a href="#">Danyal Siddique</a>
	<p>Graphic designer</p>
	</div>
	</div>
		<!--member-box-2--->
	
	<div class="team-box">
	<!--member-img-->
	<div class="team-img t-img2"></div>
	<div class="t-id">
	<a href="#">Touseeq Ijaz</a>
			<p>Web designer</p>
	</div>
	</div>
		<!--member-box-3--->
	
	<div class="team-box">
	<!--member-img-->
	<div class="team-img t-img3"></div>
	<div class="t-id">
	<a href="#">Umair Malik</a>
			<p>Video Editor</p>
	</div>
	</div>
	
		<!--member-box-4--->
	
	<div class="team-box">
	<!--member-img-->
	<div class="team-img t-img4"></div>
	<div class="t-id">
	<a href="#">Zahid Chuhan</a>
		<p>Music Producer</p>
	</div>
	</div>
	
	</div>
	</section>
	<!--conatct-box------------------->
	<div class="contact">
	<h1>If You Have Any Project In Your Mind.</h1>
	<button class="contact-btn">Conatct Me</button>
	</div>
	<section class="palns">
	<!--plans-heading------------------------------------>
	<div class="p-heading">
	<p>Pricing</p>	
	<p>This is our membership plan you will see chose the best plan.This Site make you design Attractive.</p>	
	</div>
	<!--plan-conatiner-->
		<div class="p-box-conatiner">
	<!--plan-box-1-->
	<div class="p-box">
	<!--plan-box-heading-->
	<p class="p-box-heading">Enterprise Plan</p>
	<!--price-->
	<div class="price">
	<a href="#">12$</a>
	<p>Monthly</p>
	</div>
	<!--plan-box-details-->
	<p class="p-box-details">Free plan available when you regisration you account</p>
	<!--price-button-->
	<button class="price-button">Start Now</button>
	</div>
	<!--plan-box-2-->
	<div class="p-box">
		<!--plan-box-heading-->
	<p class="p-box-heading">Enterprise Plan</p>
	<!--price-->
	<div class="price">
	<a href="#">12$</a>
	<p>Monthly</p>
	</div>
	<!--plan-box-details-->
	<p class="p-box-details">Free plan available when you regisration you account</p>
	<!--price-button-->
	<button class="price-button">Start Now</button>		
	</div>
	<!--plan-box-3-->
	<div class="p-box">
		<!--plan-box-heading-->
	<p class="p-box-heading">Enterprise Plan</p>
	<!--price-->
	<div class="price">
	<a href="#">12$</a>
	<p>Monthly</p>
	</div>
	<!--plan-box-details-->
	<p class="p-box-details">Free plan available when you regisration you account</p>
	<!--price-button-->
	<button class="price-button">Start Now</button>		
	</div>
	<!--plan-box-4-->
	<div class="p-box">
		<!--plan-box-heading-->
	<p class="p-box-heading">Enterprise Plan</p>
	<!--price-->
	<div class="price">
	<a href="#">12$</a>
	<p>Monthly</p>
	</div>
	<!--plan-box-details-->
	<p class="p-box-details">Free plan available when you regisration you account</p>
	<!--price-button-->
	<button class="price-button">Start Now</button>		
	</div>
	</div>
	</section>
	<!--footer-->
	<footer>
	<!---------------------------->
	<div class="dw-footer">
	<!--1-->
		<ul>
	<h1>Team</h1>
	<li><a href="#">Zahid Music</a></li>
	<li><a href="#">Azhar Editor</a></li>
	<li><a href="#">Tousee Owner</a></li>
	</ul>
	<!--2-->
	<ul>
	<h1>Channel</h1>
	<li><a href="#">Video Tutorial</a></li>
	<li><a href="#">Website</a></li>
	<li><a href="#">Bolgs</a></li>

	</ul>
	
	<!--socail-->
	<div class="social">
	<h1>Social</h1>
	<div class="social-icons">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	</div>
	</div>
	<!--search-->
	<div class="search">
	<h1>Search</h1>
	<input type="search" placeholder=" Search Somthing Here">
	</div>
	</div>
	<!--copyright-->
    <p class="copyright">Going-To Internet copyright 2020</p>
	
	</footer>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>

5) Copy CSS Code Which I Given Below And Past In Your CSS File.

CSS 
@charset "utf-8";
/* CSS Document */
body{
	margin: 0px;
	padding: 0px;
	background-color:#eeeeee;
}
ul{
	list-style:none;
}
a{
	text-decoration:none;
}
*{
	box-sizing:border-box;
}
.main{

	height:100vh;
	background-image:url("../images/bg.png");
	background-position:bottom;
	background-repeat: no-repeat;
	background-size:cover;
	
	
		
}
.menu-left{
	display:flex;
	
}
.menu-left a{
	color: #4a5057;
	font-size: 16px;
	margin: 0px 15px;
	font-family: myriad pro regular;
	font-weight: 600;
}
.menu-left img{
	height: 18px;

}

.sign-in{
	width:100px;
	height: 35px;
	border-radius: 10px;
	border:1px solid #3d3d3e;
	color:#3d3d3e;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: calibri;
	font-weight: bold;
	box-shadow:  2px 2px 6px rgba(0,0,0,0.1);
}
nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 60px;
}
.sign-in:hover{
	background-color:#4530c3;
	color:#FFFFFF;
	transition: all ease 0.2s;
}
.box{
	width: 220px;
	height: 310px;
	border-radius: 5px;
	box-shadow: 2px 6px 30px rgba(0,0,0,0.1);
	background-color:#f6f6f6;
	margin: 30px 30px;
	position:relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;


}
.user{
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color:#3d3d3e;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}
.box p{
	font-family: calibri;

	text-align: center;
margin: 0px;
	padding: 0px;
	
	
	color: #3d3d3e;
}
.slide-details p:nth-child(1){
	font-size: 23px;
	font-weight: 700;
	
}
.slide-details p:nth-child(2){
	font-size: 18px;
	

}
.slide-details{
	position: absolute;
	left: 50%;
	top: 20%;
	width:100%;
	transform: translate(-50%,-20%);
}
.box-img01{
	background-image:url("../images/1.png");
}
.box-img02{
	background-image:url("../images/2.png");
}
.box-img03{
	background-image:url("../images/3.png");
}
.box-img04{
	background-image:url("../images/4.png");
}
.box-img05{
	background-image:url("../images/5.png");
}
.box-img06{
	background-image:url("../images/6.png");
}
.user-img01{
	background-image: url("../images/109134-Marie_Avgeropoulos-brunette-blue_background-jacket-model.jpg");
	
}
.user-img02{
	background-image: url("../images/66990853-man-student-smile-and-use-phone-isolated-on-blue-background-asian.jpg");
	
}
.user-img03{
	background-image: url("../images/khilari-daff-hilary-duff-model-pevitsa-blondinka-pricheska-m.jpg");
	
}
.user-img04{
	background-image: url("../images/109134-Marie_Avgeropoulos-brunette-blue_background-jacket-model.jpg");
	
}
.user-img05{
	background-image: url("../images/66990853-man-student-smile-and-use-phone-isolated-on-blue-background-asian.jpg");
	
}
.user-img06{
	background-image: url("../images/khilari-daff-hilary-duff-model-pevitsa-blondinka-pricheska-m.jpg");
	
}

.g-heading span{
	width: 30px;
	height: 30px;
	background-color:#4530c3;
	display: flex;
	border-radius: 10px;
}
.graphics{
		font-family: calibri;
	position:absolute;
	left: 30px;
	bottom: 20px;
	width:200px;
	
}
.g-heading p{

	font-weight: bold;
	font-size: 20px;
	color: #3d3d3e;
	margin: 0px 10px;
	line-height: 25px;
	
	
}
.g-heading{
	display: flex;
	align-items: center;
}
.g-details {
	font-size: 14px;
	margin: 10px 0px;
	color: #3d3d3e;
}


.p-heading,
.t-heading,
.s-heading{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.p-heading p:nth-child(1),
.t-heading p:nth-child(1),
.s-heading p:nth-child(1){
	font-family:Magmawave Caps ;
	font-weight: bold;
	font-size: 25px;
	color: #3d3d3e;
	width:40%;
	text-align: center;
	margin:10px;
}
.p-heading p:nth-child(2),
.t-heading p:nth-child(2),
.s-heading p:nth-child(2){
	font-family: myriad pro;
	font-size: 14px;
	color:#9f9e9e;
	margin-top: 0px;
}

.s-heading{
	margin: 0px 0px 30px 0px;
}
.s-box {
	width: 220px;
	padding: 20px;
	background-color: #ffffff;
	box-shadow: 1px 2px 12px rgba(0,0,0,0.1);
	display: flex;
	text-align: center;
	flex-direction: column;
	align-items: center;
	margin:10px 5px;
	border-radius: 10px;
}
.s-icon{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #313131;
	margin: 10px;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
.s-box a{
	font-family: myriad pro;
	font-weight: bold;
	color:#313131;
	font-size: 18px;
	margin: 10px 0px;
}
.s-box p{
	font-family: myriad pro;
	color:#313131;
	font-size: 14px;
}
.price-button,
.service-button{
	width:140px;
	height: 35px;
	border:none;
	outline:none;
	border-radius:20px;
	color:#4530c3;
	border:1px solid #4530c3;
}
.price-button:hover,
.service-button:hover{
	color:#ffffff;
	background-color:#4530c3;
	transition: all ease 0.5s;
}

.services-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.services{
	padding-top: 30px;
}

.front-icon{
	background-image:url("../images/front.jpg");
}
.back-icon{
	background-image:url("../images/back.png");
}
.seo-icon{
	background-image:url("../images/seo.jpeg");
}
.gui-icon{
	background-image:url("../images/gui.jpeg");
}



.team-img{
	width:100px;
	height: 100px;
	border-radius: 50%;
	background-color: #3d3d3e;
	margin: 15px 0px ;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.t-id {
	font-family: myriad pro;
	
	
}
.t-id a{
	font-size: 18px;
	color:#3d3d3e;
	font-weight: bold;
}
.t-id p{
	font-size: 14px;
	color:#9f9e9e;
	margin: 0px;
}
.team-box{
	margin: 0px 30px 30px 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}
.t-box-container{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
.t-img1{
	background-image: url("../images/109134-Marie_Avgeropoulos-brunette-blue_background-jacket-model.jpg");
}
.t-img2{
	background-image:url("../images/66990853-man-student-smile-and-use-phone-isolated-on-blue-background-asian.jpg");
}
.t-img3{
	background-image: url("../images/khilari-daff-hilary-duff-model-pevitsa-blondinka-pricheska-m.jpg")
}
.t-img4{
	background-image: url("../images/109134-Marie_Avgeropoulos-brunette-blue_background-jacket-model.jpg");
}



.contact{
	width:100%;
	height: 200px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	background-color:#353745 ;
	font-family: myriad pro;
}
.contact h1{
	color:#FFFFFF;
	font-size: 26px;
margin: 5px;

}

.contact-btn{
	width: 150px;
	height: 40px;
	border-radius: 20px;
	background-color: #4530c3;
	border:none;
	outline: none;
	color:#ffffff;
	margin: 10px;
}

.palns{
	margin: 2% 0px 0px 0px;
}
.p-box{
		width: 220px;
	height: 310px;
	border-radius: 10px;
	background-color:#ffffff;
	box-shadow: 2px 2px 12px rgba(0,0,0,0.1);
	margin: 30px 5px;
	font-family: myriad pro;
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content: space-evenly;
	padding: 20px 0px;
}
.p-box-conatiner{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.p-box-heading{
	font-family: myriad pro;
	font-weight: bold;
	color: #3d3d3e;
	font-size:18px;
}
.price a{
	color:#4530c3;
	font-size: 25px;
	font-weight: bold
}
.price p{
		color: #3d3d3e;
	font-size:14px;
	margin: 0px;
	font-weight: bold;
	
}
.price{
	text-align: center;
}
.p-box-details{
	color: #3d3d3e;
	font-size:14px;
	text-align: center;
	
}

button:active{
	transform: scale(1.1);
}


footer{
	background-color:#353745;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.dw-footer ul{
	font-family: calibri;
	margin:0px;
	padding:0px 20px;
	
}
.dw-footer h1{
	color: #9697A0;
	font-size:20px;
	font-family: calibri;
}
.dw-footer ul li a{
	font-size: 16px;
	color:#575A70;
}

.dw-footer{
	display: flex;
	justify-content:space-between;
	padding:3% 0px;
	margin:5px;
	width:80%;
	flex-wrap: wrap;
	
}

.social-icons{
	display:flex;
}
.social-icons a{
	width: 35px;
	height:35px;
	margin:0px 5px;
	background-color:#424356;
	box-shadow:2px 2px 12px rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.social-icons i{
	color:#FFFFFF;
	font-size: 14px;
	
}

.search input{
	height:35px;
	width:200px;
	text-align: center;
	box-shadow:2px 2px 12px rgba(0,0,0,0.1);
	border:none;
	outline:none;
}
.copyright{
	font-family: calibri;
	font-size:12px;
	margin:10px;
	text-align: center;
	color: #B3B3B3;
}
.dw-footer ul li a:hover{
	color:#9697A0;
	
}
.social-icons a:hover{
	background-color:#9a9ff6;
	transition: all ease 0.5s;
}

.social-icons a:hover i{
	color: #424356;
}

@media(max-width:1024px){
	.search{
		margin:20px auto;
		display:flex;
		align-items: center;
		width: 100%;
		justify-content: center;		
	}
	.search h1{
		margin:20px;
	}
	.s-box,
	.p-box{
		flex-grow:1;
		margin: 5px;
	}
	.s-box:nth-child(4),
	.p-box:nth-child(4){
		width: 100%;
		
		
	}
	
	.p-box:nth-child(4){
		height: 250px;
	}
	
}
	
@media(max-width:720px){
	
	.menu-left a{
		margin:0px 10px;
		font-size:14px;		
	}
	nav{
		padding:15px 30px;
	}
	.sign-in{
		height: 30px;
		width: 80px;
		font-size: 12px;
	}
	.s-box p,
	.service-button{
		display:none;
	}
	
	.s-box{
		flex-direction: row;
		width: 100%;
		padding: 5px;
	}
	.s-box:hover{
		transform:scale(1);
		background-color:;
	}
	.services{
		background-image: none;
	}
	.s-heading p:nth-child(2){
		color:#9f9e9e;
	}
	.s-heading p:nth-child(1){
		color:#3d3d3e;
	}
	.s-icon{
		height:40px;
		width: 40px;
	}
	.s-box a{
		font-size:16px;
		margin: 0px 15px;
	}
	
	.team-img{
		width: 60px;
		height: 60px;
	}
	.team-box{
		margin:0px 10px 30px 10px;
	}
	.t-id a{
		font-size: 14px;
	}
		.t-id p{
		font-size: 12px;
	}
	.contact{
		height:150px;
	}
	.contact h1{
		font-size:18px;
	}
	.contact button{
		height: 33px;
		width: 120px;
		font-size: 12px;
	}
	.p-box{
		width:80%;
		margin: 10px;
		
	
	}
	.p-heading p{
		width: 80%;
	}
	.dw-footer{
		flex-direction: column;
		align-items:center;
		text-align:center;
		
	}
	.dw-footer ul h1{
		font-size: 25px;
	}
	.dw-footer ul li{
		text-align: center;
		margin:10px;
		
	}
	.dw-footer ul li a{
		
		font-size: 20px;
	}
	.f-logo{
		border: 1px solid #545562;
	}
	.search{
		display: block;
	}
}

JavaScript

6) Copy Javascript Code Which I Given Below And Past In Your JavaScript File.

 
// JavaScript Document
 $(document).ready(function() {
    $('#autoWidth').lightSlider({
        autoWidth:true,
        loop:true,
        onSliderLoad: function() {
            $('#autoWidth').removeClass('cS-hidden');
        } 
    });  
  });

7) All Files link, Which I use in the project given below.


YOUR EXISTING AD GOES HERE

The Download Links Will Be Shown in 40 Seconds


How To Dowload Files
Share
Post a Comment Labels,

Comments


Archive

Contact Form

Send