Адаптивная навигационная панель с использованием HTML и CSS | Responsive Navbar 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>website</title>
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<header>
<input type="checkbox" name="" id="chek">
<label for="chek"><i class="fa-solid fa-bars"></i></label>
<h1 class="logo">self code</h1>
<nav>
<a href="#">home</a>
<a href="#">about</a>
<a href="#">service</a>
<a href="#">contact</a>
</nav>
<a href="#" class="btn">sign up</a>
</header>
<!--
<section>
<div class="content">
<h1>responsive navbar</h1>
<p>If you follow the step-by-step video <br>you will be able to make a
beautiful website using HTML & CSS
</p>
<a href="#" class="btn">let's talk</a>
</div>
</section>-->
</body>
</html>CSS КОД:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
text-decoration: none;
}
body{
min-height: 100vh;
background: url(background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
header{
width: 100%;
position:fixed;
left: 0;
top: 0;
right: 0;
background-color: aliceblue;
padding: 20px 6%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
}
header .logo{
font-size: 30px;
text-transform: capitalize;
letter-spacing: 1px;
}
nav a{
font-size: 18px;
text-transform: capitalize;
margin: 15px;
padding: 8px;
color: #111;
font-weight: 500;
border-bottom: solid transparent 3px;
transition: .3s ease;
}
nav a:hover{
border-bottom: solid #0050d5 3px;
color: #0050d5;
}
.btn{
display: inline-block;
padding: 10px 30px;
background-color: #0050d5;
color: #fff;
border-radius: 10px;
transition: .3s ease;
font-size: 20px;
text-transform: capitalize;
font-weight: 600;
}
#chek{
display: none;
}
#chek:checked ~ nav{
left: 0;
opacity: 1;
}
label{
font-size: 35px;
cursor: pointer;
color: #111;
display: none;
}
@media (max-width:898px){
header{
padding: 4%;
transition: .3s ease;
}
nav a{
margin: 10px;
transition: .3s ease;
}
}
@media(max-width:798px){
header nav {
position: absolute;
left: -100%;
top: 100%;
right: 0;
width: 100%;
background-color: #fff;
padding: 20px;
border-radius: 10px;
transition: .3s ease;
opacity: 0;
}
header nav a{
display: block;
text-align: center;
padding: 10px;
box-shadow: 0 0 10px #0050d5;
border-radius: 10px;
margin-top: 30px;
font-size: 22px;
}
label{
display: block;
}
}
section{
padding: 6%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.content{
text-align: center;
position: relative;
}
.content h1{
font-size: 60px;
color: #fff;
text-transform: capitalize;
letter-spacing: 1px;
}
.content p{
line-height: 1.4;
font-size: 17px;
color: #eee;
margin: 20px 30px;
}
section .content .btn{
background-color: #fff;
color: #0050d5;
transition: .3s ease;
}
.btn:hover{
transform: scale(1.1);
}
0 Комментарии