add functional to header
This commit is contained in:
@@ -80,6 +80,53 @@ h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: red;
|
||||
header {
|
||||
height: 45px;
|
||||
border-bottom: 2px solid rgb(161, 137, 0);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
color: rgb(2, 2, 120);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav-header {
|
||||
width: 35%;
|
||||
}
|
||||
.nav__item {
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.nav__item_active {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
}
|
||||
.nav__item_active::after {
|
||||
content: "";
|
||||
bottom: -14px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: rgb(128, 109, 1);
|
||||
}
|
||||
.nav__item:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
1
icons/calendar1.svg
Normal file
1
icons/calendar1.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><path d="M24,29H8a5,5,0,0,1-5-5V10A5,5,0,0,1,8,5H24a5,5,0,0,1,5,5V24A5,5,0,0,1,24,29ZM8,7a3,3,0,0,0-3,3V24a3,3,0,0,0,3,3H24a3,3,0,0,0,3-3V10a3,3,0,0,0-3-3Z"/><path d="M24,25H20a1,1,0,0,1-1-1V20a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4A1,1,0,0,1,24,25Zm-3-2h2V21H21Z"/><path d="M28,13H4a1,1,0,0,1,0-2H28a1,1,0,0,1,0,2Z"/><path d="M11,9a1,1,0,0,1-1-1V4a1,1,0,0,1,2,0V8A1,1,0,0,1,11,9Z"/><path d="M21,9a1,1,0,0,1-1-1V4a1,1,0,0,1,2,0V8A1,1,0,0,1,21,9Z"/></g><g id="frame"><rect class="cls-1" height="32" width="32"/></g></svg>
|
||||
|
After Width: | Height: | Size: 685 B |
1
icons/calendar2.svg
Normal file
1
icons/calendar2.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><rect height="8" width="30" x="49" y="1"/><polygon points="119,119 9,119 9,49 1,49 1,127 127,127 127,49 119,49 "/><polygon points="107,9 119,9 119,31 9,31 9,9 21,9 21,1 1,1 1,39 127,39 127,1 107,1 "/><rect height="18" width="8" x="31" y="1"/><rect height="18" width="8" x="89" y="1"/></g></svg>
|
||||
|
After Width: | Height: | Size: 517 B |
1
icons/clock.svg
Normal file
1
icons/clock.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g data-name="Layer 2" id="Layer_2"><path d="M16,29A13,13,0,1,1,29,16,13,13,0,0,1,16,29ZM16,5A11,11,0,1,0,27,16,11,11,0,0,0,16,5Z"/><path d="M21.5,22.5a1,1,0,0,1-.71-.29l-5.5-5.5A1,1,0,0,1,15,16V8a1,1,0,0,1,2,0v7.59l5.21,5.2a1,1,0,0,1,0,1.42A1,1,0,0,1,21.5,22.5Z"/></g><g id="frame"><rect class="cls-1" height="32" width="32"/></g></svg>
|
||||
|
After Width: | Height: | Size: 473 B |
1
icons/instagram.svg
Normal file
1
icons/instagram.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M505,257c0,34.8-0.7,69.7,0.2,104.5c1.5,61.6-37.2,109.2-86.5,130.4c-19.8,8.5-40.6,13-62.1,13c-67.3,0.1-134.7,1-202-0.3 c-50.7-1-92.4-22.2-122.3-64c-15.7-22-23.2-47-23.2-74.1c0-71.7,0-143.3,0-215c0-58.5,28.5-99.4,79.1-126C110.2,14,134.1,9.1,159,9 c65.3,0,130.7-0.4,196,0.2c50.7,0.4,93,19.8,124.2,60.6c17.4,22.8,25.8,49,25.8,77.8C505,184,505,220.5,505,257z M46,257 c0,36.7,0,73.3,0,110c0,16.4,3.8,31.8,12.3,45.7c22.3,36.5,56,54.3,97.8,55c67.1,1,134.3,0.4,201.5,0.2c16.5,0,32.5-3.4,47.4-10.5 c40.6-19.4,63.3-50.3,63.1-96.7c-0.4-71-0.1-142-0.1-213c0-20.1-5.7-38.5-17.6-54.7c-23-31.1-54.8-46.4-92.8-46.8 c-67-0.8-134-0.3-201-0.2c-14.3,0-28.1,2.9-41.5,7.9c-36.8,13.7-71,48.4-69.4,99.5C46.9,188,46,222.5,46,257z"/><path d="M257.6,363c-64.5,0-116.5-51.4-116.6-115.4c-0.1-63,52.3-114.6,116.4-114.6c64.3-0.1,116.5,51.4,116.6,114.9 C374,311.3,321.9,362.9,257.6,363z M257.6,326c43.9,0,79.5-35.1,79.4-78.3c-0.1-42.8-35.7-77.8-79.4-77.8 c-43.9,0-79.7,34.9-79.7,78C178,291.1,213.7,326.1,257.6,326z"/><path d="M387.5,98c13.5,0,24.5,11.5,24.5,25.6c-0.1,14.1-11.2,25.5-24.7,25.4c-13.3-0.1-24.2-11.5-24.2-25.3 C363,109.6,374,98,387.5,98z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
icons/linkedin.svg
Normal file
1
icons/linkedin.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M173.5,508.7c0-2.4,0-4.7,0-7c0-107.7,0-215.3,0-323c0-3-0.2-5.4,4.2-5.4c31.8,0.2,63.7,0.1,95.5,0.1 c0.8,0,1.6,0.2,2.9,0.4c0,14,0,27.8,0,41.7c0.4,0.1,0.7,0.3,1.1,0.4c4-5.2,7.8-10.6,12-15.7c12.2-15,27.5-26,45.5-32.6 c9.8-3.6,20.5-5.8,30.8-6.3c14.2-0.6,28.7-0.4,42.7,2c23,3.9,43.3,14.1,60.1,30.8c15.9,15.7,26.4,34.6,32.1,55.9 c3,11.3,4.9,22.9,6.7,34.4c1.2,8,1.8,16.2,1.8,24.2c0.1,65,0.1,130,0.1,195c0,1.6-0.1,3.2-0.2,5.3c-1.9,0-3.5,0-5.1,0 c-30.7,0-61.3-0.1-92,0.1c-5.1,0-6-1.7-6-6.3c0.1-59.8,0.3-119.7-0.1-179.5c-0.1-10.5-1.1-21.4-3.8-31.5 c-4.9-17.7-16.1-30.5-33.9-37c-15-5.5-30.2-6.5-45.6-2.6c-17,4.3-28.7,15.6-37.5,30.5c-6.8,11.5-8.1,24.2-8.2,36.9 c-0.4,60.7-0.2,121.3-0.2,182c0,2.3,0,4.6,0,7.1C241.9,508.7,208,508.7,173.5,508.7z"/><path d="M109.1,342.6c0,53.3-0.1,106.6,0.1,159.9c0,4.8-1,6.6-6.3,6.5c-30.5-0.3-61-0.3-91.5,0c-5,0-6.1-1.7-6.1-6.3 c0.1-107.1,0.1-214.3,0-321.4c0-4.3,1.2-5.8,5.6-5.8c30.8,0.2,61.6,0.2,92.5,0c4.8,0,5.7,1.8,5.7,6.1 C109.1,235.3,109.1,289,109.1,342.6z"/><path d="M56.1,4.8C89,4,108.7,27.9,108.8,57.2c0.1,30-20.9,52.4-53.9,52.3c-30.7,0-52.4-22-52.3-53.1C2.7,27.3,23.8,3.8,56.1,4.8z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
icons/skype.svg
Normal file
1
icons/skype.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x34_1-skype_x2C__chat"><g><g><path d="M486.129,258.485c0-124.26-101.885-225.02-227.592-225.02c-13.244,0-26.246,1.139-38.926,3.289 c-20.34-12.646-44.409-20.004-70.21-20.004c-72.918,0-132.004,58.406-132.004,130.509c0,24.079,6.624,46.592,18.136,66.004 c-3.014,14.593-4.621,29.758-4.621,45.222c0,124.289,101.905,225.042,227.592,225.042c14.26,0,28.158-1.322,41.695-3.769 c18.613,9.866,39.814,15.491,62.428,15.491c72.891,0,131.977-58.44,131.977-130.486c0-20.813-4.949-40.486-13.721-57.955 C484.344,291.199,486.129,275.077,486.129,258.485L486.129,258.485z M486.129,258.485" style="fill:#03ACF8;"/><path d="M375.275,366.021c-10.533,14.742-26.068,26.409-46.262,34.662 c-19.957,8.196-43.848,12.413-71.105,12.413c-32.691,0-60.1-5.682-81.511-16.927c-15.304-8.169-27.886-19.202-37.463-32.896 c-9.693-13.76-14.555-27.426-14.555-40.674c0-8.194,3.192-15.371,9.488-21.206c6.234-5.83,14.226-8.727,23.771-8.727 c7.809,0,14.55,2.299,20.039,6.875c5.221,4.429,9.725,10.945,13.336,19.29c4.021,9.149,8.408,16.865,13.031,22.874 c4.504,5.893,10.918,10.801,19.115,14.659c8.264,3.828,19.387,5.831,33.051,5.831c18.816,0,34.266-4.008,45.84-11.813 c11.363-7.628,16.85-16.839,16.85-28.084c0-8.856-2.891-15.848-8.764-21.323c-6.211-5.742-14.381-10.195-24.283-13.276 c-10.348-3.173-24.396-6.642-41.754-10.23c-23.65-4.993-43.725-10.881-59.65-17.641c-16.317-6.881-29.498-16.392-39.102-28.261 c-9.783-12.141-14.732-27.309-14.732-45.131c0-16.982,5.188-32.296,15.449-45.516c10.168-13.125,25.022-23.386,44.204-30.357 c18.877-6.904,41.334-10.373,66.773-10.373c20.311,0,38.18,2.33,53.119,6.936c15.004,4.604,27.646,10.825,37.584,18.514 c10.021,7.774,17.475,15.996,22.125,24.609c4.717,8.676,7.135,17.321,7.135,25.658c0,8.045-3.131,15.375-9.344,21.713 c-6.262,6.405-14.131,9.629-23.381,9.629c-8.408,0-15.031-2.063-19.592-6.038c-4.262-3.739-8.711-9.572-13.604-17.882 c-5.664-10.651-12.555-19.052-20.43-25.006c-7.662-5.77-20.428-8.643-38.023-8.643c-16.285,0-29.588,3.235-39.432,9.633 c-9.482,6.126-14.104,13.186-14.104,21.558c0,5.119,1.49,9.394,4.559,13.07c3.223,3.945,7.787,7.33,13.57,10.197 c5.969,2.965,12.143,5.354,18.314,7.028c6.322,1.734,16.914,4.337,31.496,7.659c18.432,3.886,35.342,8.284,50.314,13.036 c15.18,4.753,28.248,10.645,38.982,17.555c10.885,7.026,19.506,15.998,25.65,26.766c6.141,10.857,9.248,24.163,9.248,39.655 C391.197,334.351,385.83,351.25,375.275,366.021L375.275,366.021z M375.275,366.021" style="fill:#FCFCFC;"/></g></g></g><g id="Layer_1"/></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
1
icons/telegram.svg
Normal file
1
icons/telegram.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-telegram" width="24" height="24" viewBox="0 0 24 24"><path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z" /></svg>
|
||||
|
After Width: | Height: | Size: 578 B |
1
icons/toggle_off.svg
Normal file
1
icons/toggle_off.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-toggle-switch-off-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z" /></svg>
|
||||
|
After Width: | Height: | Size: 537 B |
1
icons/toggle_on.svg
Normal file
1
icons/toggle_on.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-toggle-switch-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z" /></svg>
|
||||
|
After Width: | Height: | Size: 538 B |
1
icons/vk.svg
Normal file
1
icons/vk.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#4489c8;}.cls-2{fill:#fff;}</style></defs><title/><g data-name="32-vk" id="_32-vk"><rect class="cls-1" height="64" rx="11.2" ry="11.2" width="64"/><path class="cls-2" d="M9.62,19.77H17.3a.79.79,0,0,1,.74.51c.85,2.19,4.38,10.76,7.61,11.46,2.4,0,1.55-11.4-1.5-11.4-.8,0,1.42-1.42,1.57-1.48a16.38,16.38,0,0,1,8.66,0c1.53.64,1.79,2.43,1.83,3.95s-1.7,8,.59,8.7c3,.92,6.86-8.49,7.76-10.8a.79.79,0,0,1,.74-.5h8.55a.8.8,0,0,1,.74,1.11,74.74,74.74,0,0,1-6.31,11.52,1.59,1.59,0,0,0,.16,2C51,37.58,58,45.34,54,45.34H45.37a1.57,1.57,0,0,1-1.18-.53c-1.34-1.48-5.24-5.6-7-5.27-1.46.27-1.6,2.75-1.53,4.37a1.6,1.6,0,0,1-1.48,1.68c-1.53.09-3.62.13-3.81.12-6.1-.39-9.71-4.46-13.16-9A56.33,56.33,0,0,1,8.86,20.83.81.81,0,0,1,9.62,19.77Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 837 B |
101
index.html
101
index.html
@@ -4,10 +4,107 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<title>Courses</title>
|
||||
</head>
|
||||
<body>
|
||||
kjfdnfk
|
||||
<header>
|
||||
<div class="container header">
|
||||
<p class="logo">BodyMindCare</p>
|
||||
<nav class="nav-header">
|
||||
<ul class="nav">
|
||||
<li><a class="nav__item" href="#">Главная</a></li>
|
||||
<li><a class="nav__item nav__item_active" href="#">Услуги</a></li>
|
||||
<li><a class="nav__item" href="#">Новости</a></li>
|
||||
<li><a class="nav__item" href="#">Контакты</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="settings">
|
||||
<p class="sort">Сортиртировать по: <span>Дате</span></p>
|
||||
<p class="calendar">Календарь</p>
|
||||
<p class="ended">Скрыть завершенные</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<img src="" alt="card-image" />
|
||||
<div class="themes">
|
||||
<span class="theme__name">Lorem</span>
|
||||
<span class="theme__name">Theme1</span>
|
||||
</div>
|
||||
<p class="card__title">Lorem ipsum dolor sit.</p>
|
||||
<p class="card__describe">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
|
||||
dolores quos autem est aut, animi numquam fugiat voluptatem, vero
|
||||
vel, magni expedita aliquid. Tempore vel quas tenetur ipsa at ab?
|
||||
Ex eaque numquam blanditiis voluptatibus eius earum quas
|
||||
cupiditate id, voluptatem delectus ipsum, facilis dolorem unde
|
||||
aspernatur labore soluta non repellat quos magni molestias maiores
|
||||
atque dolore molestiae? Voluptatum, cum?<span class="more"
|
||||
>См. подробнее...</span
|
||||
>
|
||||
</p>
|
||||
<div class="card-inf">
|
||||
<p class="card-inf__item">20:00 - 22:00</p>
|
||||
<p class="card-inf__item">05 Нояб 2022</p>
|
||||
</div>
|
||||
<button class="subscribe">Записаться</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p class="logo">BodyMindCare</p>
|
||||
<div class="footer">
|
||||
<p class="text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci,
|
||||
eos.
|
||||
</p>
|
||||
<div>
|
||||
<p class="text">Я В СОЦИАЛЬНЫХ СЕТЯХ</p>
|
||||
<ul class="social">
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="insta" /></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="linkedin" /></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="vk" /></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="telega" /></a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="#"><img src="" alt="skype" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about">
|
||||
<div>
|
||||
<p>Почта</p>
|
||||
<p>BodyMindCare@gmail.ru</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Телефон</p>
|
||||
<p>+375 33 123-45-67</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Время работы:</p>
|
||||
<p>пн-пт 10:00-21:00</p>
|
||||
</div>
|
||||
<div>
|
||||
<p></p>
|
||||
<p>сб-вс 08:00-21:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
12
script.js
12
script.js
@@ -0,0 +1,12 @@
|
||||
const navigationItems = document.querySelectorAll(".nav__item");
|
||||
|
||||
navigationItems.forEach((item) => {
|
||||
item.onclick = (elem) => {
|
||||
navigationItems.forEach((item2) =>
|
||||
item2.classList.remove("nav__item_active")
|
||||
);
|
||||
|
||||
!item.classList.contains("nav__item_active") &&
|
||||
item.classList.add("nav__item_active");
|
||||
};
|
||||
});
|
||||
|
||||
55
style.scss
55
style.scss
@@ -69,7 +69,58 @@ h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: red;
|
||||
header {
|
||||
height: 45px;
|
||||
border-bottom: 2px solid rgb(161, 137, 0);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
color: rgb(2, 2, 120);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-header {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
&__item {
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
transition: 0.2s;
|
||||
|
||||
&_active {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
bottom: -14px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: rgb(128, 109, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user