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 Full website Using HTML & CSS

M-SoftTech 0 Comments

Hello viewer, in this article I will teach you how to make a full website layout using html css. When we make a website then first one thing in our mind why I make a website. So I will tell you why we are make a website. So when you thinking start a business to online first thing you need a website. so, let’s start our project. First step you make folder that’s name is main folder.

How to Make a movie website Using HTML & CSS

Then you create two folder inside of main folder one is image folder that contains all image file which is used in our website project. And second one is css folder that contains all css file which is used in our project.

And then you create a html document copy the below code and paste in your html document

Create A Responsive Coffee Shop Website Using HTML CSS & JAVASCRIPT Step by Step

HTML Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<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">
	<title></title>
</head>
<body>

	<header>
		<div class="top-header">
			<div class="container">
				<div class="col-div-6">
					<p class="p1">Have Any Questions ?</p>
					<a href="#" class="anch1"><i class="fa fa-phone hicon"></i> +124 4454 325</a>
					<a href="#" class="anch1"><i class="fa fa-envelope hicon"></i>  demo@example.com</a>
				</div>
				<div class="col-div-6">
					<div class="social">
					<i class="fa fa-facebook hicon"></i>
					<i class="fa fa-twitter hicon"></i>
					<i class="fa fa-instagram hicon"></i>
					<i class="fa fa-linkedin hicon"></i>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			
		</div>
		<div class="bottom-header" id="myHeader">
		<div class="container">
			<div class="col-div-4">
				<h1 class="logo">Trees</h1>
			</div>
			<div class="col-div-8">
				<nav class="menu">
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Services</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</div>
			<div class="clearfix"></div>
		</div>
		</div>
	</header>

<section class="banner-1">
	<div class="back-layer"></div>
	<div class="container">
		<div class="ban-box">
			<h1>Propper Greening & Smart Design</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,</p>
			<button class="learn-more">Learn More</button>
		</div>
	</div>
</section>


<section class="section-one">
	<br><br><br><br>
	<div class="container">
		
		<div class="col-div-6">
			<img src="images/p1.jpg" class="p-img-1">
			<img src="images/p2.jpg" class="p-img-2">
		</div>
		<div class="col-div-6">

			<h2 class="h2w">We Have <span>30+</span> Years of<br> Experience</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. <br><br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			<button class="learn-more">Learn More</button>
		</div>
		<div class="clearfix"></div>
		
	</div>
	
</section>


<section class="section-two">
	<div class="container">
		<p class="p-head">WHAT WE DO?</p>
		<h3 class="head-3">Our <span>Services</span></h3>

		<div class="all-box">
		<div class="box-2">
			<div class="box-left">
				<i class="fa fa-leaf sicon"></i>
			</div>
			<div class="box-right">
				<h3 class="head-4">Garden Care</h3>
				<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</p>
				<br>
				<a href="#">Read More </a>
			</div>
		</div>
		
		<div class="box-2">
			<div class="box-left">
				<i class="fa fa-pagelines sicon"></i>
			</div>
			<div class="box-right">
				<h3 class="head-4">Tree Planting</h3>
				<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</p>
				<br>
				<a href="#">Read More </a>
			</div>
		</div>

		<div class="box-2">
			<div class="box-left">
				<i class="fa fa-cut sicon"></i>
			</div>
			<div class="box-right">
				<h3 class="head-4">Cutting Leaves</h3>
				<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</p>
				<br>
				<a href="#">Read More </a>
			</div>
		</div>

		<div class="box-2">
			<div class="box-left">
				<i class="fa fa-tint sicon"></i>
			</div>
			<div class="box-right">
				<h3 class="head-4">Water Gardening</h3>
				<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</p>
				<br>
				<a href="#">Read More </a>
			</div>
		</div>

		

		</div>

	<div class="clearfix"></div>
	<br><br>
	</div>

</section>


<section class="section-three">
	<div class="container">
			<p class="p-head">SERVICES</p>
		<h3 class="head-3">We Provide the Best <span>Services</span></h3>
		<br>
		<div class="col-div-4">
			<div class="box-3">
				<img src="images/s-1.jpg" class="img-s1">
				<div class="content">
				<h3 class="head-4">Tree Planting</h3>
				<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</p>
			</div>
			</div>
		</div>

		<div class="col-div-4">
			<div class="box-3">
				<img src="images/s-2.jpg" class="img-s1">
				<div class="content">
				<h3 class="head-4">Lawn Maintanance</h3>
				<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</p>
			</div>
			</div>
		</div>

		<div class="col-div-4">
			<div class="box-3">
				<img src="images/1.jpg" class="img-s1">
				<div class="content">
				<h3 class="head-4">Landscaping Design</h3>
				<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</p>
				
			</div>
			</div>
		</div>
		<div class="clearfix"></div>
		<br><br>
	</div>
</section>

<section class="section-four">
	<div class="back-layer"></div>
	<div class="container">
		<div class="content-1">
		<h1>Extend Your Home With a Beautiful Garden</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</p>
		<button class="learn-more">Learn More</button>
	</div>
	</div>
</section>


<footer>
	<div class="container">
		<h1 class="logo">Tree</h1>
		<ul class="foot-nav">
			<li>Home</li>
			<li>About us</li>
			<li>Service</li>
			<li>Contact us</li>
		</ul>
		<div class="social s1">
					<i class="fa fa-facebook hicon"></i>
					<i class="fa fa-twitter hicon"></i>
					<i class="fa fa-instagram hicon"></i>
					<i class="fa fa-linkedin hicon"></i>
					</div>
		<div class="clearfix"></div>
		<br><br>
	</div>
	<div class="foot-bot">
			<p>© 2021 Tree. All rights reserved. Design by <span>M-SoftTech</span></p>
	</div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
window.onscroll = function() {myFunction()};

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

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


</body>
</html>

And then you create a css document copy the below code and paste in your css document

CSS Code

:root{
	--darkbackground: #171717;
	--lightbackground: #fff;
	--black: #000;
	--white: #fff;
	--green: #0abf53;
	--footer-color: #0e0e0e;
	--bg-light: #0c0b0b;
	--bg-color: #171717;
	--font-light: #b7b7b7;
	--scrollbarBG: #171717;
  	--thumbBG: #0abf53;
}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}
*{margin: 0;padding: 0;font-family:system-ui;}
.container{width: 1200px;max-width: 100%;margin: 0 auto;}
.clearfix{clear: both;}
a{text-decoration: none;}
.col-div-3{width: 25%;float: left;position: relative;}
.col-div-4{width: 33%;float: left;position: relative;}
.col-div-5{width: 40%;float: left;position: relative;}
.col-div-6{width: 50%;float: left; position: relative;}
.col-div-7{width: 60%;float: left;position: relative;}
.col-div-8{width: 67%;float: left;position: relative;}
.top-header{padding: 15px;background: var(--bg-color);}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
.hicon{
	color: var(--white);
	font-size: 20px;
	height: 20px;
	width: 20px;
	margin-left: 30px;
	cursor: pointer;
}
.p1{color: var(--white);display: inline-block;}
.anch1{color: var(--white);text-decoration: none;}
.social{text-align: right;}
.bottom-header{background: var(--green);padding: 15px;}
.logo{color: var(--white);line-height: 60px;}
.menu{float: right;}
.menu ul li{list-style: none;float: left;padding: 20px;}
.menu ul li a{
	color: var(--white);
	text-transform: uppercase;
	font-weight: 500;
}
.banner-1{
	background: url(../images/1.jpg);
	height: 500px;
	background-size: 100%;
	position: relative;
}
.back-layer{
	background: #00000082;
    position: absolute;
    height: 100%;
    z-index: 999;
    width: 100%;
}
.ban-box{
	background: var(--bg-color);
    padding: 30px 40px;
    width: 450px;
    color: var(--white);
    z-index: 9999;
    position: absolute;
    bottom: 50px;
    border-radius: 60px 0;
}
.ban-box h1{font-size: 35px;margin-bottom: 20px;}
.ban-box p{line-height: 22px;letter-spacing: 1px;font-size: 14px;}
.learn-more{
	padding: 12px 30px;
	background: var(--green);
	color: var(--white);
	font-size: 16px;
	border: none;
	text-transform: uppercase;
	margin-top: 10px;
	cursor: pointer;
}
.section-one{height: 680px;background: var(--bg-color);}
.p-img-1{margin: 0 auto;}
.p-img-2{
	position: absolute;
    top: 12%;
    left: 40%;
    border: 10px solid var(--bg-color);
}
.h2w{
	font-size: 40px;
	color: var(--white);
	font-weight: 400;
	margin-bottom:20px;
	margin-top: 20px;
}
.h2w span{color: var(--green);font-weight: 700;}
.para-1{
	line-height: 22px;
    letter-spacing: 1px;
    font-size: 14px;
    color: var(--font-light);
    margin-bottom: 20px;
}
.section-two{background: var(--bg-light);}
.p-head{text-align: center;padding-top: 50px;color: var(--font-light);}
.head-3{
	text-align: center;
	color: var(--white);
	font-size: 40px;
	margin-bottom: 20px;
}
.head-3 span{color: var(--green);}
.box-2{
	width: 40%;
	padding: 30px;
	background: var(--bg-color);
	margin: 25px;
	float: left;
}
.box-left{width: 20%;float: left; text-align: center;}
.box-right{width: 80%;float: left;}
.sicon{color: var(--green);font-size: 50px;text-align: center;}
.head-4{color: var(--white); font-size: 25px;}
.box-right p{font-size: 14px; line-height: 25px; color: var(--font-light); margin-top: 20px;}
.box-right a{color: white; font-size: 16px;}
.section-three{background: var(--bg-color);}
.box-3{background: var(--bg-light); width: 350px; margin: 0 auto; margin-bottom: 50px;}
.img-s1{width: 100%;}
.content{padding: 25px;}
.content p{font-size: 14px; line-height: 25px; color: var(--font-light); margin-top: 20px;}
.section-four{
	background:url(../images/1.jpg);
	height: 500px;
	background-attachment: fixed;
	position: relative;
	
}
.content-1{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	text-align: center;
	z-index: 9999;
}
.content-1 h1{
	font-size: 50px;
	color: var(--white);
}
.content-1 p{
	font-size: 14px; line-height: 25px; color: var(--font-light); margin-top: 20px;
}
footer{background: var(--bg-light); padding-top: 30px; text-align: center;}
.foot-nav{margin: 0 auto; width: 400px;}
.foot-nav li{list-style: none; float: left; padding: 20px; color: var(--font-light);}
.s1{width: 225px;margin: 0 auto;text-align: center;}
.foot-bot{padding: 15px; background:var(--black);}
.foot-bot p{text-align: center; color: var(--font-light);}
.foot-bot p span{color: var(--white);}

if you have any issue to understand this code then you also watch video tutorial

You May Also Like

How To Make Website with Scroll Effect Animation

M-SoftTech 0

How to Make a Modern Website using html css

M-SoftTech 0

How to Make a responsive website using html css

M-SoftTech 0

Leave a Reply

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