How To Create Website In Html And Css Step By Step ( Homepage || 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 👉👉
website for image svgSource Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>website || home page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0-10/css/all.css"
integrity="sha512-
==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<style type="text/css">
*{
font-family: 'Noto Sans JP', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
width: 80%;
margin: 0 auto;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center
}
.socal_link{
width: 70%;
text-align: end;
}
.socal_link ul{
display: inline-flex;
}
.socal_link ul li{
margin-left: 40px;
list-style: none;
text-transform: capitalize;
}
.socal_link ul li a{
text-decoration: none;
color: #000;
}
.socal_link ul li a#get{
padding: 10px 12px;
background: #e25a5a;
color: #fff;
}
header{
width: 100%;
height: 90vh;
background-color: #eeeff8;
position: relative;
}
.center_div{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
justify-content: space-between;
align-items: center;
}
.left_div{
min-width: 50%;
height: 50vh;
/* background-color: red; */
}
.left_div h1{
font-size: 50px;
}
.left_div p{
font-size: 20px;
}
.right_div{
min-width: 50%;
height: 50vh;
/* background-color: green; */
}
.right_div img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<nav>
<div class="logo">
<h2> <i class="fab fa-drupal"></i> BABATECH</h2>
</div>
<div class="socal_link">
<ul>
<li><a href="#" target="_blank">home</a></li>
<li><a href="#" target="_blank">about</a></li>
<li><a href="#" target="_blank">templates</a></li>
<li><a href="#" target="_blank">blog</a></li>
<li><a href="#" target="_blank">login</a></li>
<li><a href="#" target="_blank" id="get">get start</a></li>
</ul>
</div>
</nav>
<header>
<div class="center_div">
<div class="left_div">
<h1>The easiest way to make awesome videos.</h1>
<p>Choose your favorite video template, fully customize it online,
and watch us generate your video instantly.<br><br>It can't get any easier than that.</p>
</div>
<div class="right_div">
<img src="imge.svg" alt="image">
</div>
</div>
</header>
</body>
</html>
No comments:
Post a Comment