Daha fazla
- Cinsiyet
- Erkek
Merhabalar. Bu tür konuları açmamda sebep aslında yapmış olduğum ve gelecekte gelip burada bakmış olduğum unutmuş olduğum yerler olursa, geri gelip bakmak adına ve diğer benim gibi yapmaya çalışanlar ama belli bir süre kod yazmayıp unutanlar içindir.
CSS
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="main-header">
<div class="wrapper header-inner">
<nav class="navigation-menu">
<ul class="menu__list">
<li class="menu__item">
<a href="#" class="link">Shop</a>
</li>
<li class="menu__item">
<a href="#" class="link">Our story</a>
</li>
<li class="menu__item">
<a href="#" class="link">Contact</a>
</li>
</ul>
</nav>
<div class="logo">
<a href="#">
Logo
</a>
</div>
<div class="right">
<div class="search-block">
<svg class="search-icon" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.979 18.16a5.979 5.979 0 1111.957 0 5.979 5.979 0 01-11.957 0zm5.978-7.279a7.279 7.279 0 104.65 12.88l5.075 5.074.46.46.918-.92-.46-.46-5.071-5.071a7.279 7.279 0 00-5.572-11.962z" fill="#fff"/></svg>
<input type="text" placeholder="Axtar">
</div>
<a href="#">
<img src="img/user.svg" alt="">
</a>
<a href="#">
<img src="img/favorites.svg" alt="">
</a>
<a href="#">
<img src="img/bag.svg" alt="">
</a>
</div>
</div>
</header>
</body>
</html>CSS
CSS:
* {
margin: 0;
padding: 0;
}
.main-header {
height: 46px;
background: #526959;
}
.wrapper {
padding-left: 40px;
padding-right: 40px;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.navigation-menu {
display: flex;
align-items: center;
}
.menu__list {
display: flex;
align-items: center;
gap: 48px;
padding: 0;
margin: 0;
list-style: none;
}
.link {
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 300;
text-decoration: none;
}
.logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.logo a {
display: inline-flexbox;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 300;
text-decoration: none;
}
.right {
display: flex;
align-items: center;
grid-gap: 8px;
gap: 8px;
}
.search-block {
position: relative;
}
.search-block .search-icon {
position: absolute;
top: 0;
height: 40px;
}
.search-block input {
height: 40px;
border: none;
outline: none;
line-height: 1.5;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 300;
padding-left: 40px;
padding-right: 40px;
background: transparent;
color: #fff;
}
.search-block input::placeholder {
color: #fff;
}
@media screen and (max-width: 1024px) {
.logo {
display: none;
}
.search-block {
display: none;
}
.link {
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 300;
text-decoration: none;
font-size: 13px;
}
}