Вот HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav class="header__nav">
<a href="../../index.html"> <img src="./logo.jpg" alt="logo" class="header__logo"> </a>
<ul class="header__menu">
<li class="menu__link"> <a class="link__second" href="../../index.html"> Главная </a></li>
<li class="menu__link"> <a class="link__now" href=""> Тренажеры </a></li>
<li class="menu__link"> <a class="link__second" href=""> Упражнения </a></li>
<li class="menu__link"> <a class="link__second" href=""> Спортивные добавки </a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Вот CSS:
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
body {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
.container {
width: 1250px;
margin: auto;
/* border: 1px solid red; */
}
.sticky__button {
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
position: fixed;
right: 5px;
bottom: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(27, 23, 247);
}
.sticky__button img {
width: 23px;
}
:root {
--p-text: 17px;
--h2-title: 28px;
--title-color: blue;
--title-background: -webkit-linear-gradient(80deg, blue, rgb(0, 0, 0));
}
header {
/* margin-bottom: 100px; */
box-shadow: 0 8px 16px rgb(0, 0, 0);
margin-bottom: 5px;
align-items: center;
margin-bottom: 50px;
}
.header__nav {
display: flex;
justify-content: space-between;
align-items: center;
/* margin: 10px; */
}
.header__logo {
width: 100px;
}
.header__menu {
display: flex;
gap: 30px;
}
.menu__link {
/* z-index: 0;
position: relative; */
font-weight: 500;
list-style: none;
font-size: 18px;
color: blue;
background: -webkit-linear-gradient(80deg, blue, rgb(0, 0, 0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.link__second:after {
display: block;
position: absolute;
right: 0;
bottom: -3px;
width: 0;
height: 2px;
background-color: black;
content: "";
transition: width 0.5s;
}
.link__second:hover:after {
width: 100%;
display: block;
position: absolute;
left: 0;
bottom: -3px;
height: 2px;
background-color: rgb(255, 0, 0);
content: "";
transition: width 0.5s;
}
.link__second {
transition: all ease .4s;
position: relative;
z-index: 1;
cursor: pointer;
font-size: 24px;
text-decoration: none;
}
.link__now {
background-color: rgba(0, 13, 192, 0.16);
padding: 4px 14px;
border-radius: 5px;
}
.header__effect {}
