diff --git a/source/fonts/montserrat/montserrat-300.woff2 b/source/fonts/montserrat/montserrat-300.woff2 new file mode 100644 index 000000000..97b0f2c77 Binary files /dev/null and b/source/fonts/montserrat/montserrat-300.woff2 differ diff --git a/source/fonts/montserrat/montserrat-400.woff2 b/source/fonts/montserrat/montserrat-400.woff2 new file mode 100644 index 000000000..8e4646683 Binary files /dev/null and b/source/fonts/montserrat/montserrat-400.woff2 differ diff --git a/source/fonts/montserrat/montserrat-500.woff2 b/source/fonts/montserrat/montserrat-500.woff2 new file mode 100644 index 000000000..fc09b9654 Binary files /dev/null and b/source/fonts/montserrat/montserrat-500.woff2 differ diff --git a/source/fonts/montserrat/montserrat-600.woff2 b/source/fonts/montserrat/montserrat-600.woff2 new file mode 100644 index 000000000..9048f09e2 Binary files /dev/null and b/source/fonts/montserrat/montserrat-600.woff2 differ diff --git a/source/fonts/montserrat/montserrat-700.woff2 b/source/fonts/montserrat/montserrat-700.woff2 new file mode 100644 index 000000000..af8f601b3 Binary files /dev/null and b/source/fonts/montserrat/montserrat-700.woff2 differ diff --git a/source/fonts/montserrat/montserrat-800.woff2 b/source/fonts/montserrat/montserrat-800.woff2 new file mode 100644 index 000000000..246cf5b0a Binary files /dev/null and b/source/fonts/montserrat/montserrat-800.woff2 differ diff --git a/source/img/sprite/cross.svg b/source/img/sprite/cross.svg new file mode 100644 index 000000000..212aef56b --- /dev/null +++ b/source/img/sprite/cross.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/logo.svg b/source/img/sprite/logo.svg deleted file mode 100644 index aee2e13c0..000000000 --- a/source/img/sprite/logo.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/source/img/sprite/main-logo.svg b/source/img/sprite/main-logo.svg new file mode 100644 index 000000000..3e1343747 --- /dev/null +++ b/source/img/sprite/main-logo.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/menu.svg b/source/img/sprite/menu.svg new file mode 100644 index 000000000..845b51a15 --- /dev/null +++ b/source/img/sprite/menu.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/user.svg b/source/img/sprite/user.svg deleted file mode 100644 index 6873ae6e1..000000000 --- a/source/img/sprite/user.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/source/index.html b/source/index.html index 0ce0e1c9c..f70e7a9d8 100644 --- a/source/index.html +++ b/source/index.html @@ -1,20 +1,59 @@ - - - - Lifetour - - + + + + Lifetour + + - - + +
+
+ +
+
+ +
+
+ + +
header
hero
tours
@@ -25,7 +64,8 @@
gallery
form
footer
- - + --> + + diff --git a/source/js/main.js b/source/js/main.js index 70fde252c..16909b2e6 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -2,3 +2,5 @@ // import Swiper from "swiper"; // import {Navigation, Pagination} from "swiper/modules"; // import 'swiper/css'; + +import './open-burger.js'; diff --git a/source/js/open-burger.js b/source/js/open-burger.js new file mode 100644 index 000000000..1d2fea25e --- /dev/null +++ b/source/js/open-burger.js @@ -0,0 +1,14 @@ +const menuButton = document.querySelector('.header__menu-button'); +const menuList = document.querySelector('.header__list'); + +menuButton.addEventListener('click', () => { + const isOpen = menuButton.classList.contains('header__menu-button--open'); + + // Переключаем классы кнопки + menuButton.classList.toggle('header__menu-button--open', !isOpen); + menuButton.classList.toggle('header__menu-button--close', isOpen); + + // Переключаем класс у списка + menuList.classList.toggle('header__list--open', isOpen); +}); + diff --git a/source/sass/blocks/header.scss b/source/sass/blocks/header.scss new file mode 100644 index 000000000..086a63d0a --- /dev/null +++ b/source/sass/blocks/header.scss @@ -0,0 +1,299 @@ +.header { + background-color: $main-background-color; +} + +.header__navigation { + position: relative; + width: 320px; + margin: 0 auto; + padding: 15px; + box-sizing: border-box; + display: grid; + grid-template-columns: auto 142px; + grid-auto-rows: auto; + row-gap: 14px; + + @media (min-width: $tablet-width) { + width: 768px; + padding: 20px 45px; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + @media (min-width: $desktop-width) { + width: 1440px; + padding: 32px 120px; + justify-content: space-between; + } +} + +.header__menu-button { + padding: 0; + position: relative; + width: 26px; + height: 26px; + grid-column: 1 / 2; + grid-row: 1 / 2; + border: none; + background-color: $colorless; + cursor: pointer; + + &::after { + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 26px; + height: 26px; + transform: translate(-50%, -50%); + content: ""; + mask-position: center; + mask-repeat: no-repeat; + background-color: $base-white-color; + } + + @media (min-width: $tablet-width) { + margin-right: 242px; + } + + @media (min-width: $desktop-width) { + display: none; + } + + &:hover { + opacity: 0.5; + } + + &:focus-visible { + outline: 1px solid $base-white-color; + opacity: 1; + } + + &:active { + opacity: 0.3; + } + +} + +.header__menu-button--open { + &::after { + mask-image: url("/__spritemap#sprite-menu-view"); + } +} + +.header__menu-button--close { + &::after { + mask-image: url("/__spritemap#sprite-cross-view"); + } +} + +.header__link-img { + display: flex; + align-items: center; + justify-content: center; + + @media (min-width: $desktop-width) { + padding-top: 10px; + padding-bottom: 10px; + } + + &:hover { + opacity: 0.5; + } + + &:focus-visible { + outline: 1px solid $base-white-color; + opacity: 1; + cursor: pointer; + } + + &:active { + opacity: 0.3; + } +} + +.header__logo { + grid-column: 2 / 3; + grid-row: 1 / 2; + + @media (min-width: $desktop-width) { + display: block; + width: 205px; + } +} + +.header__list { + display: none; + position: absolute; + left: 0; + top: 100%; + width: 100%; + margin: 0; + padding: 30px 15px 50px; + box-sizing: border-box; + flex-direction: column; + flex-wrap: wrap; + list-style-type: none; + gap: 22px; + + &::after { + content: ""; + display: block; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100vw; + min-width: 320px; + height: 100%; + background-color: $main-background-color; + } + + &--open { + display: flex; + } + + @media (min-width: $tablet-width) { + padding: 45px 50px 70px; + gap: 26px; + } + + @media (min-width: $desktop-width) { + position: relative; + width: 838px; + padding: 0; + display: flex; + flex-direction: row; + justify-content: center; + font-size: 16px; + font-weight: 400; + line-height: 16px; + + &::after { + display: none; + } + } +} + +.header__item { + z-index: 1; +} + +.header__item-link { + position: relative; + font-weight: 700; + line-height: 14px; + letter-spacing: 0.56px; + color: $base-white-color; + text-transform: uppercase; + text-decoration: none; + + @media (min-width: $tablet-width) { + font-size: 16px; + line-height: 16px; + } + + @media (min-width: $desktop-width) { + font-weight: 400; + text-transform: none; + } + + &::after { + display: none; + content: ""; + position: absolute; + top: 0; + left: -5px; + right: -5px; + bottom: -3px; + } + + &:hover { + &::after { + display: block; + border-bottom: 1px solid $base-white-color; + } + } + + &:focus-visible { + outline: none; + + &::after { + display: block; + left: -5px; + right: -5px; + top: -3px; + bottom: -3px; + border: 1px solid $base-white-color; + } + } + + &:active { + color: $active-color; + + &::after { + display: none; + } + } + + &--disabled { + color: $disabled-color; + pointer-events: none; + cursor: default; + + &:focus-visible { + display: none; + } + } +} + +.header__number { + grid-column: 2 / 3; + grid-row: 2 / 3; + justify-self: end; + font-weight: 600; + line-height: 14px; + color: $base-white-color; + text-decoration: none; + + @media (min-width: $tablet-width) { + margin-left: auto; + font-size: 16px; + line-height: 16px; + } + + @media (min-width: $desktop-width) { + margin-left: 0; + font-size: 18px; + line-height: 18px; + } + + &:hover { + opacity: 0.5; + } + + &:focus-visible { + outline: none; + color: $focus-color; + opacity: 1; + } + + &:active { + color: $active-color; + opacity: 1; + } + + &--disabled { + color: $disabled-color; + opacity: 1; + pointer-events: none; + cursor: default; + + &:focus-visible { + display: none; + } + } +} + + diff --git a/source/sass/common/fonts.scss b/source/sass/common/fonts.scss new file mode 100644 index 000000000..980bc5b89 --- /dev/null +++ b/source/sass/common/fonts.scss @@ -0,0 +1,6 @@ +@include font-face("Montserrat", 300, normal, url("../../fonts/montserrat/montserrat-300.woff2") format("woff2")); +@include font-face("Montserrat", 400, normal, url("../../fonts/montserrat/montserrat-400.woff2") format("woff2")); +@include font-face("Montserrat", 500, normal, url("../../fonts/montserrat/montserrat-500.woff2") format("woff2")); +@include font-face("Montserrat", 600, normal, url("../../fonts/montserrat/montserrat-600.woff2") format("woff2")); +@include font-face("Montserrat", 700, normal, url("../../fonts/montserrat/montserrat-700.woff2") format("woff2")); +@include font-face("Montserrat", 800, normal, url("../../fonts/montserrat/montserrat-800.woff2") format("woff2")); diff --git a/source/sass/common/global.scss b/source/sass/common/global.scss new file mode 100644 index 000000000..f6c1933d9 --- /dev/null +++ b/source/sass/common/global.scss @@ -0,0 +1,24 @@ +html { + height: 100%; + margin: 0; + padding: 0; +} + +body { + min-width: 320px; + height: 100%; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + font-family: "Montserrat", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + color: $base-text-color; +} + +main { + flex-grow: 1; +} + diff --git a/source/sass/common/variables.scss b/source/sass/common/variables.scss new file mode 100644 index 000000000..0a8956a04 --- /dev/null +++ b/source/sass/common/variables.scss @@ -0,0 +1,25 @@ +@mixin font-face($font-family, $font-weight, $font-style, $font-src) { + @font-face { + font-family: $font-family; + font-weight: $font-weight; + font-style: $font-style; + font-display: swap; + src: $font-src; + } +} + +/* size */ +$tablet-width: 768px; +$desktop-width: 1440px; + +/* color */ + +$base-text-color: #2d383f; +$main-background-color: #0266c1; +$active-color: #1c3374; +$focus-color: #2d383f; +$disabled-color: #999999; +$base-white-color: #ffffff; +$colorless: rgba(0, 0, 0, 0); + + diff --git a/source/sass/common/visually-hidden.scss b/source/sass/common/visually-hidden.scss new file mode 100644 index 000000000..70a0f84e7 --- /dev/null +++ b/source/sass/common/visually-hidden.scss @@ -0,0 +1,12 @@ +.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 96467369f..a4c242807 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -1,4 +1,13 @@ // Vendor // --------------------------------- +/* GLOBAL */ @import "vendor/normalize"; +@import "./common/visually-hidden"; +@import "./common/variables"; +@import "./common/global"; +@import "./common/fonts"; + +/* BLOCKS */ + +@import "./blocks/header";