Skip to content

Делвет шапку меню #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nigina9 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Делвет шапку меню #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f364f5
Делвет шапку меню
Nigina9 Sep 17, 2025
7eebc56
Создает папку для блоков
Nigina9 Sep 18, 2025
e6d461a
Стилизует шапку
Nigina9 Sep 18, 2025
e845192
Дополняет меню
Nigina9 Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions source/img/icon_find.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/img/icon_menu.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/img/icon_shop.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 2 additions & 14 deletions source/img/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 51 additions & 10 deletions source/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,54 @@
<!DOCTYPE html>
<html lang="ru">
<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>Ваш проект</title>
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
Привет мир!
</body>

<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>Ваш проект</title>
<link rel="stylesheet" href="css/style.min.css">
</head>

<body>
<nav class="main-nav">
<div class="container main-nav__container">
<a class="main-nav__logo">
<img class="main-nav__img" src="img/logo.svg" alt="Лого компании">
</a>

<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#">Главная</a>
</li>
<li class="main-nav__item">
<a href="#">Магазин</a>
</li>
<li class="main-nav__item">
<a href="#">Контакты</a>
</li>
</ul>
<ul class="main-nav__icons">
<li class="main-nav__icon">
<a class="main-nav__iconimg main-nav__iconimg--find" aria-label="Поиск">
<svg viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.000000" height="16.000000" fill="none" customFrame="#000000">
<path id="find" d="M11.8986 11.7215C10.6373 12.9641 8.89479 13.7326 6.97006 13.7326C3.1206 13.7326 0 10.6585 0 6.86631C0 3.07415 3.1206 0 6.97006 0C10.8195 0 13.9401 3.07415 13.9401 6.86631C13.9401 8.38123 13.4421 9.78157 12.5985 10.9171L16.843 15.0983C17.0523 15.3046 17.0523 15.639 16.843 15.8453C16.6336 16.0516 16.2941 16.0516 16.0847 15.8453L11.8986 11.7215ZM12.8678 6.86631C12.8678 10.0751 10.2273 12.6763 6.97006 12.6763C3.71283 12.6763 1.07232 10.0751 1.07232 6.86631C1.07232 3.65756 3.71283 1.05635 6.97006 1.05635C10.2273 1.05635 12.8678 3.65756 12.8678 6.86631Z" fill="rgb(0,0,0)" fill-rule="evenodd" />
</svg>
</a>
</li>
<li class="main-nav__icon">
<a class="main-nav__iconimg main-nav__iconimg--shop" aria-label="Корзина">
<svg viewBox="0 0 19.7427 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.742676" height="16.000000" fill="none" customFrame="#000000">
<path id="shop" d="M0.365956 0.534417C0.119476 0.583715 -0.0403714 0.823491 0.00892689 1.06997C0.0582252 1.31645 0.298001 1.4763 0.544481 1.427C0.886761 1.35854 1.20196 1.29172 1.49279 1.23007C2.20071 1.08001 2.76438 0.960518 3.2238 0.922236C3.54097 0.895806 3.75166 0.915051 3.89141 0.963095C4.01011 1.0039 4.08566 1.06695 4.14431 1.18425C4.15275 1.20113 4.16223 1.21747 4.1727 1.23318C4.39371 1.56468 4.55953 1.84095 4.7087 2.08958L4.71411 2.09859C4.85936 2.34067 4.99536 2.56734 5.14819 2.78131C5.3564 3.07278 5.59036 3.33328 5.92249 3.60973C5.91437 3.68189 5.91485 3.75535 5.92435 3.8286L6.83461 10.8441C6.8898 11.2694 7.23481 11.5985 7.66219 11.6341L7.67927 11.6355L7.72741 11.6394C7.76937 11.6427 7.83074 11.6475 7.9095 11.6534C8.06701 11.6651 8.29423 11.6814 8.57512 11.6994C9.1365 11.7354 9.91416 11.7786 10.7791 11.8074C12.4839 11.8642 14.6145 11.869 16.0793 11.6248C17.0843 11.4573 17.8404 10.8011 18.3694 10.0621C18.9014 9.31913 19.268 8.40897 19.4866 7.53427C19.705 6.66094 19.7924 5.75622 19.7153 5.00212C19.677 4.62769 19.5935 4.2426 19.4299 3.90677C19.267 3.57225 18.9776 3.19793 18.4932 3.03646C18.0451 2.8871 17.3569 2.78332 16.5786 2.70845C15.7756 2.6312 14.7995 2.57827 13.7313 2.55435C11.5959 2.50654 9.05505 2.57387 6.73647 2.80573C6.64189 2.81519 6.55034 2.83928 6.46477 2.87641C6.20828 2.65777 6.03895 2.46229 5.8889 2.25222C5.75918 2.07061 5.64064 1.87357 5.48924 1.62125L5.48816 1.61945C5.34198 1.37582 5.17089 1.09067 4.94451 0.749928C4.77508 0.427402 4.51464 0.214793 4.18733 0.102277C3.87196 -0.00613618 3.51373 -0.0153407 3.14821 0.0151182C2.62785 0.0584793 1.97715 0.196439 1.23901 0.352939C0.95974 0.41215 0.667947 0.474016 0.365956 0.534417ZM7.73731 10.727C7.73731 10.727 13.1989 11.1821 15.9297 10.727C18.6604 10.2718 19.5707 4.35515 18.2053 3.90001C16.9296 3.47476 12.0782 3.28226 7.73437 3.63C7.58229 3.64218 7.43083 3.65501 7.28016 3.66853C7.12825 3.68215 6.97716 3.69646 6.82705 3.71147L7.73731 10.727ZM9.1027 16C10.1081 16 10.9232 15.1849 10.9232 14.1795C10.9232 13.174 10.1081 12.359 9.1027 12.359C8.09725 12.359 7.28218 13.174 7.28218 14.1795C7.28218 15.1849 8.09725 16 9.1027 16ZM15.4745 16C16.48 16 17.2951 15.1849 17.2951 14.1795C17.2951 13.174 16.48 12.359 15.4745 12.359C14.4691 12.359 13.654 13.174 13.654 14.1795C13.654 15.1849 14.4691 16 15.4745 16ZM9.1027 15.3628C9.75624 15.3628 10.286 14.833 10.286 14.1795C10.286 13.5259 9.75624 12.9961 9.1027 12.9961C8.44916 12.9961 7.91936 13.5259 7.91936 14.1795C7.91936 14.833 8.44916 15.3628 9.1027 15.3628ZM15.4745 15.3628C16.1281 15.3628 16.6579 14.833 16.6579 14.1795C16.6579 13.5259 16.1281 12.9961 15.4745 12.9961C14.821 12.9961 14.2912 13.5259 14.2912 14.1795C14.2912 14.833 14.821 15.3628 15.4745 15.3628Z" fill="rgb(0,0,0)" fill-rule="evenodd" />
</svg>

</a>
</li>
</ul>
</div>

</nav>
<main></main>
<footer></footer>
</body>

</html>
13 changes: 13 additions & 0 deletions source/sass/blocks/container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.container{
margin: 0 auto;
padding: 0 10px 0 10px;

@media (min-width:768px){
padding: 0 16px 0 16px;
}
@media (min-width:1728px){
padding: 0 80px 0 80px;
}


}
52 changes: 52 additions & 0 deletions source/sass/blocks/main-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
.main-nav {
background-color: #ffffff;

&__container {
display: flex;
align-items: center;
}

&__logo {
@media (min-width:768px){
margin-right: 140px;
}
@media (min-width:728px){
margin-right: 360px;
}
}
&__img {
width: 74px;
height: 25px;
@media (min-width:768px) {
width: 93px;
height: 31px;
}
}

&__list {
@include clear-list;
display: flex;
flex-direction: column;
@media (min-width:768px) {
flex-direction: row;
}
}

&__item {
color: #000000;
font-size: 20px;
font-weight: 400;
text-transform: capitalize;

@media(min-width:768px){
font-size: 16px;
}
}

&__icons {
@include clear-list;
display: flex;
margin-left: auto;
}

}
12 changes: 12 additions & 0 deletions source/sass/root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,15 @@ a {
text-decoration: none;
color: inherit;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
2 changes: 2 additions & 0 deletions source/sass/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import 'common/fonts.scss';
@import 'common/clear-button.scss';
@import 'common/clear-list.scss';
@import 'blocks/main-nav.scss';
@import 'blocks/container.scss';

@import 'root.scss';