diff --git a/source/img/icon_find.svg b/source/img/icon_find.svg new file mode 100644 index 00000000..c49716e5 --- /dev/null +++ b/source/img/icon_find.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/icon_menu.svg b/source/img/icon_menu.svg new file mode 100644 index 00000000..ced5b67d --- /dev/null +++ b/source/img/icon_menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/icon_shop.svg b/source/img/icon_shop.svg new file mode 100644 index 00000000..3a42f9a4 --- /dev/null +++ b/source/img/icon_shop.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/logo.svg b/source/img/logo.svg index b6557b7a..83e428c5 100644 --- a/source/img/logo.svg +++ b/source/img/logo.svg @@ -1,15 +1,3 @@ - - - - - - - - - - - - - - + + diff --git a/source/index.html b/source/index.html index 39b24a4e..474564f3 100644 --- a/source/index.html +++ b/source/index.html @@ -1,13 +1,54 @@ - - - - - Ваш проект - - - - Привет мир! - + + + + + + Ваш проект + + + + + +
+ + + diff --git a/source/sass/blocks/container.scss b/source/sass/blocks/container.scss new file mode 100644 index 00000000..cad557dd --- /dev/null +++ b/source/sass/blocks/container.scss @@ -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; + } + + +} diff --git a/source/sass/blocks/main-nav.scss b/source/sass/blocks/main-nav.scss new file mode 100644 index 00000000..88dd450a --- /dev/null +++ b/source/sass/blocks/main-nav.scss @@ -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; + } + +} diff --git a/source/sass/root.scss b/source/sass/root.scss index 6b77f554..7d9a6643 100644 --- a/source/sass/root.scss +++ b/source/sass/root.scss @@ -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; +} diff --git a/source/sass/style.scss b/source/sass/style.scss index 387357a4..adf6da9c 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -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';