How to Create Simple Website Layout with HTML and CSS e-commerce website
In in tutorial you will learn to create a login form in HTML and CSS coding, subscribe BABA TECHNICAL GMT channel to watch more videos on website designing tutorials for beginners.
Download Free Pictures 👉👉
DOWNLOAD
sorce code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0-10/css/all.css"
integrity="sha512-Dj9pt3sZROOuTTs9S89ykGZeu1XQgWKg3DVpu5tZALApsrWdd3tnVjTclUuVONa
HM4O8GgCnjSbHlTKXrd2OWg==" crossorigin="anonymous" />
<title>website</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Josefin Sans', sans-serif;
}
.socal_link{
width: 100%;
display: flex;
justify-content: space-between;
height: 40px;
padding: 0 20px;
align-items: center;
background: rgba(82,80,80,0.4);
}
.contact_div{
display: flex;
}
.contact_div h4{
padding: 0 10px;
}
.link_div ul{
display: flex;
}
.link_div ul li {
list-style: none;
margin-right: 20px;
font-size: 20px;
color: black;
}
.link_div ul li a i{
color: black;
transition: 0.2s ease;
}
.link_div ul li a i:hover{
color:rgb(0, 238, 255);
}
nav{
width: 100%;
display: flex;
justify-content: space-between;
height: 45px;
padding: 0 50px;
align-items: center;
background: rgba(187,75,75,0.4);
}
.mainu ul{
display: flex;
}
.mainu ul li{
list-style: none;
margin-right: 20px;
font-size: 17px;
}
.mainu ul li a{
text-decoration: none;
text-transform: capitalize;
color: #fff;
padding: 10px;
transition: 0.5s ease;
}
.mainu ul li a:hover{
background: #000;
border-radius: 10px;
}
header{
width: 100%;
height: 87vh;
background: url('./image1.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fff;
}
.center_div{
max-width: 800px;
height: 70%;
/* background: red; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-transform: capitalize;
}
.center_div h3{
font-size: 30px;
margin: 15px 0;
}
.center_div h1{
font-size: 40px;
margin: 15px 0;
}
.center_div p{
font-size: 20px;
padding: 0 30px;
margin: 15px 0;
}
.center_div a{
font-size: 20px;
margin: 15px 0;
padding: 20px 18px;
color: #fff;
text-decoration: none;
background: #000;
text-transform: uppercase;
position: relative;
}
.center_div a::after{
width: 2%;
height: 100%;
content: '';
position: absolute;
top: 0;
left: 0;
background: red;
}
</style>
</head>
<body>
<div class="socal_link">
<div class="contact_div">
<h4><i class="fa fa-phone"></i> +911234567890</h4>
<h4><i class="fa fa-envelope"></i> abcd@gmail.com</h4>
</div>
<div class="link_div">
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
</div>
<nav>
<div class="logo">
<h3>BABATECH</h3>
</div>
<div class="mainu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">service</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">about us</a></li>
</ul>
</div>
</nav>
<header>
<div class="center_div">
<h3>We Offer</h3>
<h1>Affordable And Effective Legal Help</h1>
<p>Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing Elit. Consequuntur Iure Aperiam Nesciunt
Voluptatem Cupiditate Repudiandae Minus Labore Debitis Iste Molestiae.</p>
<a href="https://babatechnicalgmt.blogspot.com/" target="_blank">contact me</a>
</div>
</header>
</body>
</html>
No comments:
Post a Comment