Как создать потрясающую шапку для сайта используя HTML и CSS | Create An Awesome Landing Page using HTML and CSS
Всем Привет! В этом видео мы создадим потрясающую шапку для сайта используя HTML и CSS. Надеюсь, это видео будет полезным для вас. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ».
Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page Design</title>
<!--css file-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav class="nav">
<a href="#" class="logo">MobTech</a>
<ul class="links">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="btn">Login</button>
</nav>
<div class="home">
<div class="content">
<h2>
Creating applications, <br />
<span>touching lives.</span>
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque dicta
praesentium beatae cupiditate voluptates, excepturi expedita
consequuntur magnam enim ut non labore molestiae modi eligendi eius,
maxime ducimus omnis quia?
</p>
<button class="btn">Explore</button>
</div>
<div class="image">
<img src="img.png" alt="" />
</div>
</div>
</body>
</html>
CSS КОД:
/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
width: 100%;
background: linear-gradient(to bottom, #213695, #160c62 90%);
overflow: hidden;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 60px;
}
.nav .logo {
text-decoration: none;
color: #fff;
font-size: 30px;
font-weight: 600;
}
.nav .links {
display: flex;
align-items: center;
gap: 40px;
}
.nav .links li {
list-style: none;
}
.nav .links li a {
position: relative;
text-decoration: none;
color: #fff;
}
.nav .links li a::before {
position: absolute;
content: "";
height: 2px;
width: 100%;
background: #fff;
left: 0;
bottom: -5px;
border-radius: 10px;
transform: scaleX(0);
transition: 0.3s;
}
.nav .links li a:hover:before {
transform: scaleX(1);
}
.btn {
padding: 8px 30px;
border: 2px solid #fff;
border-radius: 8px;
background: none;
color: #fff;
font-weight: 500;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
transform: scaleX(1.1);
}
.home {
width: 90%;
height: 80vh;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.home .content {
width: 50%;
}
.content h2 {
font-size: 48px;
text-transform: uppercase;
margin-bottom: 15px;
}
.content h2 span {
color: #c62390;
}
.content p {
color: #aaa;
font-size: 18px;
margin-bottom: 20px;
}
.content .btn:hover {
background: #fff;
color: #160c62;
}
.home .image {
width: 50%;
height: 100%;
}
.image img {
width: 110%;
height: 100%;
}
0 Комментарии