Saturday, July 27, 2024
Latest:

M-SoftTech is a coding blogs related to HTML CSS JavaScript

M-SoftTech is a coding blogs related to HTML CSS JavaScript

Full Website UI 

How to Make a responsive website using html css

M-SoftTech 0 Comments

Hello, Viewer. In this article I will teach you how to create a complete website using html CSS and JavaScript. In this website project I will also tell you how to make a responsive website. so, let’s start our project.

How to make a admin dashboard using html css

I will tell you basic to basic steps. first step you make a folder that name coffee website then you make two another folder inside of coffee website folder first one is images folder. images folder contains all images your project. and second one is CSS folder. CSS folder contains all CSS file we used in this project.

How To Make Website Using HTML & CSS | Full Responsive Website Design Step by Step

then you can create a html document and copy the code in below.

Copy The HTML Code

	<!DOCTYPE html> 
	<html> 
	<head> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Coffee Cafe</title> 
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

	<link rel="stylesheet" type="text/css" href="css/style.css"> 

	</head> 
	<body> 
	
	<header id="myHeader"> 
	<div class="container"> 
	<div class="col-div-3 col3"> 
	<h1 class="logo"><i class="fa fa-coffee"></i> Coffee Cafe <i class="fa fa-bars menu-icon"></i></h1> 
	
	</div> 
	<div class="col-div-6"> 
	<nav> 
	<ul> 
	<li><a href="#">Home</a></li> 

	<li><a href="#">About</a></li> 

	<li><a href="#">Our Coffee</a></li> 

	<li><a href="#">Contact</a></li> 

	</ul> 
	</nav> 
	
	</div> 
	<div class="col-div-3"> 
	<i class="fa fa-search sicon"></i> 
	<button class="buy buy-1">Buy Now</button> 
	
	</div> 
	<div class="clearfix"></div> 
	</div> 
	</header> 
	
	<section class="banner"> 
	<div class="overlay"></div> 
	<div class="container"> 
	<div class="ban-content"> 
	<h1>Hot and tasty coffee</h1> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> 
	<button class="buy">Buy Now</button> 
	</div> 
	<div class="clearfix"></div> 
	</div> 
	
	</section> 
	
	<section class="section-one"> 
	<div class="container"> 
	<div class="col-div-4"> 
	<p class="p1">BEST FOR YOU</p> 
	<h2 class="heading-1">Who we are.</h2> 
	<p class="para-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> 
	<button class="buy">Learn More</button> 
	</div> 
	<div class="col-div-8"> 
	<div class="img-box"> 
	<img src="images/p1.jpg"> 

	</div> 
	<div class="img-box"> 
	<img src="images/p2.jpg"> 

	</div> 
	<div class="img-box"> 
	<img src="images/p3.jpg"> 

	</div> 
	</div> 
	<div class="clearfix"></div> 
	</div> 
	</section> 
	
	
	<section class="section-two"> 
	<div class="container"> 
	<div style="text-align: center;"> 
	<p class="p1">OUR SERVICES</p> 
	<h2 class="heading-1">Our Products</h2> 
	</div> 
	
	<div class="our-box"> 
	<img src="images/ou-1.jpg"> 

	<div class="our-content"> 
	<h3>Cappuccino coffee</h3> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
	</div> 
	</div> 
	
	<div class="our-box"> 
	<img src="images/ou-2.jpg"> 

	<div class="our-content"> 
	<h3>Espresso Americano</h3> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
	</div> 
	</div> 
	
	<div class="our-box"> 
	<img src="images/ou-3.jpg"> 

	<div class="our-content"> 
	<h3>Cold brew coffee</h3> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
	</div> 
	</div> 
	
	<div class="clearfix"></div> 
	</div> 
	</section> 
	
	
	<section class="section-three"> 
	<div class="container"> 
	<div class="col-div-6"> 
	<p class="p1">BLEND COFFEE</p> 
	<h2 class="heading-1">Our Services.</h2> 
	<p class="para-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,<br><br> 
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> 
	<button class="buy">Read More</button> 
	</div> 
	
	<div class="col-div-6"> 
	<div class="s-box"> 
	<i class="fa fa-coffee isbox"></i> 
	<h3>Types of Coffee</h3> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. text of the printing</p> 
	</div> 
	
	
	<div class="s-box"> 
	<i class="fa fa-pagelines isbox"></i> 
	<h3>Coffee to go</h3> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. text of the printing</p> 
	</div> 
	
	<div class="s-box"> 
	<i class="fa fa-leaf isbox"></i> 
	<h3>Coffee & Pastry</h3> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. text of the printing</p> 
	</div> 
	
	<div class="s-box"> 
	<i class="fa fa-glass isbox"></i> 
	<h3>Bean Varieties</h3> 
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. text of the printing</p> 
	</div> 
	
	</div> 
	<div class="clearfix"></div> 
	
	</div> 
	</section> 
	
	<section class="section-four"> 
	<div class="container"> 
	<div style="text-align: center;"> 
	<p class="p1">COFFEE GALLERY</p> 
	<h2 class="heading-1">Portfolio Gallery</h2> 
	</div> 
	<br> 
	<div class="col-div-3"> 
	<img src="images/ou-1.jpg" class="ga-img"> 

	</div> 
	<div class="col-div-3"> 
	<img src="images/ou-2.jpg" class="ga-img"> 

	</div> 
	<div class="col-div-3"> 
	<img src="images/ou-3.jpg" class="ga-img"> 

	</div> 
	<div class="col-div-3"> 
	<img src="images/ou-1.jpg" class="ga-img"> 

	</div> 
	<div class="col-div-3"> 
	<img src="images/ou-1.jpg" class="ga-img"> 

	</div> 
	<div class="col-div-3"> 
	<img src="images/ou-2.jpg" class="ga-img"> 

	</div> 
	<div class="col-div-3"> 
	<img src="images/ou-3.jpg" class="ga-img"> 

	</div> 
	<div class="col-div-3"> 
	<img src="images/ou-1.jpg" class="ga-img"> 

	</div> 
	
	
	
	<div class="clearfix"></div> 
	</div> 
	</section> 
	
	
	<footer> 
	<div class="container"> 
	<div class="col-div-4"> 
	<h1 class="logo"><i class="fa fa-coffee"></i> Coffee Cafe</h1> 
	<p class="para-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> 
	</div> 
	<div class="col-div-4"> 
	<h2 class="heading-1">Get In Touch</h2> 
	<p class="para-3">Address : 1995 Stokes Isle Apt. 296, Coffee Cafe Center, UK.</p> 
	<p class="para-3">E-mail : info@demo.com</p> 
	<p class="para-3">Phone : +(91)-855-876-1234</p> 
	</div> 
	<div class="col-div-4"> 
	<h2 class="heading-1">Newsletter</h2> 
	<p class="para-3">Enter your email and receive the latest news from us. We'll never share your email address</p> 
	<div class="new-box"> 
	<input type="text" placeholder="Your Email Address"><i class="fa fa-paper-plane"></i> 
	</div> 
	</div> 
	<div class="clearfix"></div> 
	</div> 
	<br><br> 
	<div class="foot-bottom"> 
	<p>© 2021 Coffee Cafe All Rights Reserved | Theme by M-SoftTech.</p> 
	</div> 
	</footer> 
</body>
</html>

Copy The CSS Code

Add CSS file link in html head tag properly and font awesome cdn also.


:root{
	--main-color: #ce6d06;
	--background: #362d27;
	--white: #eee;
	--darkbrown:#2a2420;
	--light-font: #7e7d7d;
	--stickyheader: #1c0f00;
}
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-track {background: var(--stickyheader); }
body::-webkit-scrollbar-thumb {background: var(--main-color);border-radius: 10px; }
body{background: var(--background);}
*{font-family:system-ui; margin: 0; padding: 0;}
.clearfix{clear: both;}
header{padding: 15px; margin-top: 10px;}
.sticky {position: fixed;top: 0;width: 100%;margin-top: 0px; background: var(--stickyheader);
z-index: 999999;}
.container{width: 1200px; max-width: 100%; margin: 0 auto;}
.col-div-3{width: 25%; float: left;}
.col-div-4{width: 33%; float: left;}
.col-div-6{width: 50%; float: left;}
.col-div-8{width: 67%; float: left;}
.logo{color: var(--white);}
.logo i{color: var(--main-color);}
.banner{background: url(../images/ban-1.jpg); height: 100vh; background-size: 100%; 
background-position: bottom -50px center; position: relative;margin-top: -92px;
    z-index: -1;}
.menu-icon{display: none;}
.overlay{background:#1e0f00d9; position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
nav ul{width: 431px;margin: 0 auto;}
nav ul li{float: left;list-style: none;padding: 15px 25px;}
nav ul li a{text-decoration: none; color: var(--white); font-weight: 600;}
.buy{
	padding: 9px 40px;
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: .5px;
    border-radius: 35px;
    border: none;
    background: var(--main-color);
    color: var(--white);
}
.sicon{font-size: 25px;margin-right: 25px;color: var(--light-font);}
.ban-content{position: absolute;top:45%; }
.ban-content h1{color: var(--white); font-size: 55px;letter-spacing: 3px; margin-bottom: 20px;}
.ban-content p{color: var(--light-font); letter-spacing: 1px; line-height: 25px;width: 600px;
 margin-bottom: 20px;}
.section-one{background: var(--background); padding: 70px 0px;}
.p1{font-size: 16px; color: var(--light-font); font-weight: 600;}
.heading-1{font-size: 35px; color: var(--white);}
.para-1{font-size: 15px; color: var(--light-font); line-height: 25px; padding: 20px 0px;
font-weight: 600; letter-spacing: .5px;}
.img-box{width: 28%; float: left; margin-left: 30px;}
.img-box img{width: 100%; border-radius:5px;}
.section-two{height: auto; background: var(--darkbrown); padding: 100px 0px;}
.our-box{width: 30%; float: left; background: var(--background); height: 400px; margin:20px;
margin-top: 35px; border-radius: 5px;}
.our-box img{width: 100%;border-radius: 5px 5px 0px 0px;}
.our-content{padding: 30px;}
.our-content h3{color: var(--white); letter-spacing: 1px;}
.our-content p{margin-top:15px; color:var(--light-font); line-height:25px; font-weight:600;}
.section-three{padding: 100px 0px; background: var(--background);}
.para-2{font-size: 15px; color: var(--light-font); line-height: 25px; padding: 20px 0px;
font-weight: 600; letter-spacing: .5px; width: 485px;}
.s-box{width: 45%; float: left; padding: 15px; text-align: center;}
.isbox{font-size: 30px;margin-bottom: 15px; color: var(--main-color);}
.s-box h3{color: var(--white); font-size: 25px; margin-bottom: 20px;}
.s-box p{color: var(--light-font); font-weight: 600; line-height: 25px;}
.section-four{padding: 100px 0px; background: var(--darkbrown);}
.ga-img{width:278px; margin:10px; border-radius: 5px; transition: transform 0.5s ease;}
.col-div-3:hover .ga-img{transform: scale(1.1);}
footer{background: var(--background); padding:70px 0px 0px 0px;}
.para-3{font-size: 15px; color: var(--light-font); line-height: 25px; margin-top: 10px;
font-weight: 600; letter-spacing: .5px; width: 285px;}
.new-box input{padding:15px;width: 62%;background: #53453c;border: none;
	border-radius: 5px 0px 0px 5px; outline: none; margin-top: 20px;}
.new-box i{padding: 10px 15px;background: var(--main-color);font-size: 22px;height: 27px;
	color: var(--white); border-radius: 0px 5px 5px 0px; cursor: pointer;}
.foot-bottom{padding: 15px; background: var(--darkbrown);}
.foot-bottom p{text-align: center; color: var(--light-font); font-weight: 600;}

@media screen and (max-width: 1282px) {
  .container {width: 900px;}
  .our-box{margin: 15px;}
  .para-2{width: 400px;}
  .s-box{width: 43%;}
  .ga-img{width: 205px;}
  .menu-icon{display: none;}
  
}
@media screen and (max-width: 950px) {
	.container {width: 600px;}
	nav{display: none;}
	.sicon{display: none;}
	.buy-1{display: none;}
	.ban-content h1{font-size: 40px;}
	.col-div-4{width: 100%;}
	.img-box{margin-top: 50px;}
	.col-div-8{width: 100%;}
	.our-box{margin: 21px auto!important; width: 50%; float: none;}
	.col-div-6{width: 100%; text-align: center;}
	.para-2{width: 100%!important;}
	.col-div-3{width: 50%;}
  .our-box{margin: 15px;}
  .para-2{width: 400px;}
  .s-box{width: 43%;}
  .ga-img{width: 280px;}
  header{position: fixed;top: 0;width: 100%;margin-top: 0px;background: var(--stickyheader);z-index: 999999;}
    .menu-icon{display: block; font-size: 20px; color: var(--white);float: right;margin-top: 14px;}
    .col3{width: 100%;}
    nav ul {width: 100%;margin: 0 auto;}
    nav ul li{float: none;}
    .ban-content{top: 48%;}
}
@media screen and (max-width: 670px) {
	.container {width: 400px;}
	.banner {height: 80vh;margin-top: -117px;background-size: cover;}
	.logo{font-size: 20px;}
	.ban-content h1{font-size: 25px;}
	.ban-content{top: 48%;left: 35px;}
	.ban-content p{width: 100%;line-height: 20px;font-size: 14px;}
	.buy{padding: 5px 25px;font-size: 15px;line-height: 30px;}
	.section-one{padding: 50px 0px;}
	.img-box{width: 100%; float: none; margin-left: 0px;}
	.our-box{width:100%;}
	.section-two{padding: 50px 0px;}
	.s-box{width: 100%; margin-top: 50px;}
	.col-div-3{width: 100%;}
	.ga-img {width: 100%;}
	.heading-1{font-size: 20px;}
}

@media screen and (max-width: 480px) {
	.container {width: 300px;}
	.s-box{padding: 0px;}
	.ga-img{width: 94%;}
	.heading-1{margin-top: 5px;}
	.ban-content h1{font-size: 18px;}
	.ban-content p{line-height: 17px;font-size: 12px;}
	.col3{width: 90%;}
	.menu-icon{margin-top: 5px;}
}

Copy The JS Code

<script type="text/javascript"> 

window.onscroll = function() {myFunction()}; 

var header = document.getElementById("myHeader"); 
var sticky = header.offsetTop; 

function myFunction() { 
if (window.pageYOffset > sticky) { 
header.classList.add("sticky"); 
} else { 
header.classList.remove("sticky"); 
} 
} 

</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 
$(".menu-icon").click(function(){ 
$("nav").slideToggle(); 
}); 
}); 
</script>

You May Also Like

How To Make A Full website Using HTML & CSS

M-SoftTech 0

How to Create a Website with Video Background

M-SoftTech 0

How to Make a website Using HTML CSS

M-SoftTech 0

Leave a Reply

Your email address will not be published. Required fields are marked *