How to Make a Website using Html and CSS
Codes HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website Design step by step</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="navbar">
<img src="logo.png" class="logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clothing</a></li>
<li><a href="#">Service</a></li>
</ul>
</nav>
<img src="cart.png" class="cart">
</div>
<div class="content">
<a href="#" class="btn">2020 Clothing khmer</a>
<h1>It is a new Clothing <br>in subsequent<span> years.</span></h1>
<p>You get to keep the clothes you model.However, models almost<br> never get to keep the clothes they wear on the runway.</p>
<div class="arrow-icons">
<img src="back-arrow.png">
<img src="next-arrow.png">
</div>
</div>
<img src="thumb11.png" class="feature-img">
<div class="socail-links">
<a href="#">Facebook</a>
<a href="#">Instgram</a>
<a href="#">Twitter</a>
</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px
}
.container{
width: 100%;
height: 100vh;
background-image: url("backgound.jpg");
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.navbar{
width: 100%;
height: 15vh;
margin: auto;
display: flex;
align-items: center;
}
.logo{
width: 100px;
cursor: pointer;
}
.cart{
width: 40px;
cursor: pointer;
}
nav{
flex: 1;
padding-left: 60px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 0px 20px;
}
nav ul li a{
text-decoration: none;
color: white;
}
.content h1{
font-size: 60px;
font-weight: 100px;
margin-top: 24px;
margin-bottom: 15px;
color: white;
}
.content p{
font-size: 20px;
color: white;
}
.content{
margin-left: 10%;
margin-top: 10%;
}
.content .btn{
display: inline-block;
background: linear-gradient(45deg, #87adfe, #ff77cd);
border-radius: 60px;
padding: 10px 20px;
box-sizing: border-box;
text-decoration: none;
color: white;
box-shadow: 3px 8px 22px rgba(94, 28, 67,0.15);
}
.arrow-icons{
width: 60px;
display: flex;
}
.arrow-icons img{
width: 40px;
margin-right: 25px;
margin-top: 35px;
}
.feature-img{
height: 80%;
position: absolute;
bottom: 0;
right: 100px;
}
.socail-links{
transform: rotate(-90deg);
position: absolute;
left: -80px;
bottom: 180px;
}
.socail-links a{
text-decoration: none;
color: white;
padding-right: 20px;
font-size: 14px;
}
Post a Comment