diff --git a/src/images/aside-icon-close.png b/src/images/aside-icon-close.png new file mode 100644 index 000000000..900d259b3 Binary files /dev/null and b/src/images/aside-icon-close.png differ diff --git a/src/images/burger-menu.png b/src/images/burger-menu.png new file mode 100644 index 000000000..3ec0a17e9 Binary files /dev/null and b/src/images/burger-menu.png differ diff --git a/src/images/events/img1.png b/src/images/events/img1.png new file mode 100644 index 000000000..23d0985aa Binary files /dev/null and b/src/images/events/img1.png differ diff --git a/src/images/events/img2.png b/src/images/events/img2.png new file mode 100644 index 000000000..b13b123bf Binary files /dev/null and b/src/images/events/img2.png differ diff --git a/src/images/events/square.png b/src/images/events/square.png new file mode 100644 index 000000000..4997a8f69 Binary files /dev/null and b/src/images/events/square.png differ diff --git a/src/images/footer/button.png b/src/images/footer/button.png new file mode 100644 index 000000000..24e28f714 Binary files /dev/null and b/src/images/footer/button.png differ diff --git a/src/images/footer/facebook.png b/src/images/footer/facebook.png new file mode 100644 index 000000000..d4fb55231 Binary files /dev/null and b/src/images/footer/facebook.png differ diff --git a/src/images/footer/instagram.png b/src/images/footer/instagram.png new file mode 100644 index 000000000..2ed33753c Binary files /dev/null and b/src/images/footer/instagram.png differ diff --git a/src/images/footer/instagram.svg b/src/images/footer/instagram.svg new file mode 100644 index 000000000..5c5a5cd6e --- /dev/null +++ b/src/images/footer/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/header-background.svg b/src/images/header-background.svg new file mode 100644 index 000000000..22a1dcc6c --- /dev/null +++ b/src/images/header-background.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/header-button.png b/src/images/header-button.png new file mode 100644 index 000000000..61bdd7310 Binary files /dev/null and b/src/images/header-button.png differ diff --git a/src/images/logo/logo.png b/src/images/logo/logo.png new file mode 100644 index 000000000..ac50f2df1 Binary files /dev/null and b/src/images/logo/logo.png differ diff --git a/src/images/main-img.png b/src/images/main-img.png new file mode 100644 index 000000000..153543b24 Binary files /dev/null and b/src/images/main-img.png differ diff --git a/src/images/slider/img1.png b/src/images/slider/img1.png new file mode 100644 index 000000000..6aee072f1 Binary files /dev/null and b/src/images/slider/img1.png differ diff --git a/src/images/slider/img2.png b/src/images/slider/img2.png new file mode 100644 index 000000000..2cfa0c4c6 Binary files /dev/null and b/src/images/slider/img2.png differ diff --git a/src/images/slider/img3.png b/src/images/slider/img3.png new file mode 100644 index 000000000..4d8ca4513 Binary files /dev/null and b/src/images/slider/img3.png differ diff --git a/src/images/slider/img4.png b/src/images/slider/img4.png new file mode 100644 index 000000000..ca704a558 Binary files /dev/null and b/src/images/slider/img4.png differ diff --git a/src/images/subscription/background.png b/src/images/subscription/background.png new file mode 100644 index 000000000..2c5ac774e Binary files /dev/null and b/src/images/subscription/background.png differ diff --git a/src/images/subscription/button.png b/src/images/subscription/button.png new file mode 100644 index 000000000..4cf40af62 Binary files /dev/null and b/src/images/subscription/button.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..ecc7a80d2 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,532 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Hamy + + + + + + + -

Hello Mate Academy

+ + + +
+ +
+
+
+

Актуальні події

+
+
+
+ +
+
+
+
+

Виставка

+

26.08-29.11.2019

+
+
+

Йду і повертаюсь

+ +
+

+ Національний Художній Музей України презентує унікальну + частину колекції Градобанку - українське мистецтво другої + половини 1980-1995 років. +

+
+
+
+
+
+ +
+
+
+
+

Виставка

+

26.08-29.11.2019

+
+
+

І спогади і мрії

+ +
+

+ Національний художній музей України до 100 річчя від дня + народження видатної української художниці Тетяни Яблонської + відкриває ретроспективну ювілейну виставку «І спогади і + мрії». +

+
+
+
+
+
+
+
+
+
+ +
+

Галерея

+
+ + + + + +
+
+ Image 1 +
+
+ Image 2 +
+
+ Image 3 +
+
+ Image 4 +
+
+ +
+ + + + +
+
+
+ +
+
+

Підписка

+

+ Бути в курсі всіх актуальних подій та останніх новин. +

+
+
+ +
+ +
+
+
+ +
+
+
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/advert.scss b/src/styles/blocks/advert.scss new file mode 100644 index 000000000..8a328e1fa --- /dev/null +++ b/src/styles/blocks/advert.scss @@ -0,0 +1,98 @@ +.main-img { + background-image: url(../images/main-img.png); + background-size: cover; + background-position: center; + width: 100%; + height: 210px; + + @include onTablet { + height: 390px; + } + + @include onDesktop { + height: 550px; + } + + &__container { + padding-top: 60px; + + @include onTablet { + padding-inline: 35px; + padding-top: 112px; + } + + @include onDesktop { + padding-inline: 0; + padding-top: 104px; + } + } +} + +.advert { + padding-inline: 20px; + display: flex; + justify-content: center; + @include hover(transform, scale(1.02)); + + &__container { + width: 280px; + background-color: #fff; + transform: translateY(-40%); + box-shadow: 0px 2px 0px 0px #1a5a4c40; + + @include onTablet { + width: 570px; + } + + @include onDesktop { + transform: translateY(-50%); + } + } + + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20px; + padding-bottom: 20px; + padding-inline: 21px; + + @include onTablet { + padding-top: 45px; + padding-bottom: 16px; + padding-inline: 55px; + } + } + + &__name { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 16px; + color: #687480; + text-transform: uppercase; + } + + &__date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 24px; + color: #1a5a4c; + } + + &__title { + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 28px; + text-align: center; + padding-bottom: 20px; + + @include onTablet { + text-align: left; + padding-bottom: 50px; + padding-inline: 55px; + } + } +} diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 000000000..48b889fcb --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,213 @@ +body { + overflow: auto; + + &.no-scroll { + overflow: hidden; + } +} + +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; +} + +.overlay:target, +.aside:target ~ .overlay { + display: block; +} + +.aside { + z-index: 2; + background-color: #1a5a4c; + opacity: 0; + pointer-events: none; + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateY(-100%); + transition: + opacity 0.3s ease, + transform 0.3s ease; + + &:target { + opacity: 1; + pointer-events: all; + transform: translateY(0); + } + + &__wrapper { + @include pageGrid; + } + + &__container-navigatioin { + display: flex; + align-items: flex-start; + padding-top: 27px; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + padding-top: 39px; + } + + @include onDesktop { + grid-column: 1 / 8; + padding-top: 39px; + } + } + + &__icon { + padding-right: 38px; + + @include onDesktop { + padding-right: 102px; + } + } + + &__icon-close { + background-image: url(../images/aside-icon-close.png); + background-position: center; + background-size: cover; + width: 24px; + height: 24px; + display: block; + } + + &__navigation { + gap: 20px; + display: flex; + justify-content: space-between; + padding-bottom: 24px; + + @include onDesktop { + gap: 31px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + list-style: none; + padding: 0; + + @include onDesktop { + gap: 30px; + } + } + + &__link { + color: white; + text-decoration: none; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 16px; + } + + &__item { + @include hover(transform, scale(1.05)); + } + + &__line { + border: 1px solid #ffffff80; + width: auto; + grid-column: 1 / -1; + + @include onTablet { + transform: rotate(-90deg); + position: absolute; + width: 145px; + top: 50%; + left: 40%; + } + + @include onDesktop { + left: 45%; + } + } + + &__container-schedule { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + } + + @include onDesktop { + grid-column: 8 / 13; + } + } +} + +.schedule { + &__wrapper { + display: flex; + flex-direction: column; + + @include onTablet { + flex-direction: row; + gap: 26px; + padding-top: 20px; + padding-bottom: 40px; + } + } + + &__title { + padding-top: 24px; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.69px; + color: #fff; + + @include onTablet { + padding-top: 39px; + } + } + + &__list { + list-style: none; + padding: 0; + padding-top: 20px; + + @include onTablet { + padding: 0; + } + } + + &__item { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #fff; + text-decoration: none; + white-space: nowrap; + } +} + +.weekend { + padding-top: 16px; + padding-bottom: 27px; + + @include onTablet { + padding: 0; + } + + &__content { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + + color: #fff; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..069ccee73 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,150 @@ +.events { + padding-top: 70px; + + @include onTablet { + padding-top: 88px; + } + + @include onDesktop { + padding-top: 200px; + } + + &__wrapper { + display: flex; + flex-direction: column; + gap: 60px; + + @include onTablet { + gap: 64px; + } + + @include onDesktop { + gap: 104px; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + text-align: center; + padding-bottom: 40px; + + @include onTablet { + padding-bottom: 48px; + } + + @include onDesktop { + padding-bottom: 56px; + } + } + + &__container { + display: flex; + align-items: center; + @include pageGrid; + } + + &__img-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + grid-column: 1 / -1; + + @include onDesktop { + grid-column: 1 / 8; + } + } + + &__img { + width: 100%; + height: auto; + } + + &__description { + grid-column: 1 / -1; + + @include onDesktop { + grid-column: 9 / -1; + } + } + + &__description-container { + @include pageGrid; + } + + &__date-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 16px; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 3; + padding-top: 44px; + } + + @include onDesktop { + grid-column: 1 / -1; + } + } + + &__exhibition { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 16px; + color: #687480; + text-transform: uppercase; + } + + &__date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + line-height: 24px; + color: #1a5a4c; + } + + &__name-wrapper { + padding-top: 10px; + display: flex; + gap: 5px; + align-items: center; + grid-column: 1 / -1; + + @include onTablet { + padding-top: 32px; + } + } + + &__name { + font-family: Montserrat, sans-serif; + font-size: 28px; + line-height: 28px; + } + + &__name-img { + width: 10px; + height: 10px; + } + + &__text { + padding-top: 10px; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + line-height: 24px; + color: #4e4e4e; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + padding-top: 15px; + } + + @include onDesktop { + grid-column: 1 / -1; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..fd4143ca5 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,264 @@ +.footer { + position: relative; + &__container { + @include pageGrid; + padding-top: 50px; + } + + &__icons { + display: flex; + align-items: center; + justify-content: space-between; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 2; + flex-direction: column; + gap: 62px; + align-items: flex-start; + justify-content: flex-start; + } + } + + &__logo { + height: 72px; + width: auto; + @include hover(transform, scale(1.1)); + } + + &__social-icons { + display: flex; + gap: 20px; + } + + &__icon { + background-position: center; + background-size: cover; + width: 24px; + height: 24px; + display: block; + @include hover(transform, scale(1.1)); + } + + &__icon-facebook { + background-image: url(../images/footer/facebook.png); + } + + &__icon-instagram { + background-image: url(../images/footer/instagram.png); + } + + &-schedule { + padding-top: 40px; + grid-column: 1 / 2; + + @include onTablet { + grid-column: 2 / 4; + padding: 0; + } + + @include onDesktop { + grid-column: 3 / 5; + } + + &__title { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.69px; + padding-bottom: 20px; + } + + &__list { + list-style: none; + padding: 0; + } + + &__item { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + } + } + + &-contacts { + padding-top: 40px; + grid-column: 2 / -1; + + @include onTablet { + grid-column: 4 / 6; + padding: 0; + } + + @include onDesktop { + grid-column: 5 / 7; + } + + &__title { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.69px; + padding-bottom: 20px; + } + + &__links { + display: flex; + flex-direction: column; + } + + &__link { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-decoration: none; + color: #000; + @include hover(transform, scale(1.05)); + } + } + + &__weekend { + padding-top: 15px; + + @include onTablet { + padding-bottom: 64px; + } + + @include onDesktop { + grid-column: 3 / 5; + } + + &__content { + font-family: + IBM Plex Sans, + sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + } + } + + &__button { + border: 1px solid #1a5a4c; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + + &-wrapper { + display: flex; + justify-content: flex-end; + grid-column: 1 / -1; + padding-bottom: 20px; + + @include onTablet { + display: none; + } + } + + &-link { + background-image: url(../images/footer/button.png); + background-size: cover; + background-position: center; + width: 16px; + height: 16px; + display: block; + } + } + + &__line { + border: 1px solid #1a5a4c80; + width: auto; + grid-column: 1 / -1; + + @include onDesktop { + transform: rotate(-90deg); + position: absolute; + width: 260px; + left: 45%; + top: 190px; + } + } + + &__list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + padding-top: 40px; + gap: 20px; + + @include onTablet { + padding-top: 64px; + } + + @include onDesktop { + padding: 0; + } + } + + &__list1 { + grid-column: 1 / 2; + + @include onTablet { + grid-column: 2 / 4; + } + + @include onDesktop { + grid-column: 8 / 10; + } + } + + &__list2 { + grid-column: 2 / -1; + + @include onTablet { + grid-column: 4 / 6; + } + + @include onDesktop { + grid-column: 10 / 12; + } + } + + &__link { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + text-decoration: none; + color: #000; + } + + &__item { + @include hover(transform, scale(1.05)); + } +} + +.designed-by { + display: flex; + flex-direction: column-reverse; + grid-column: 1 / -1; + align-items: center; + margin-top: 80px; + padding-bottom: 35px; + + @include onTablet { + flex-direction: row; + justify-content: space-between; + margin-top: 120px; + } + + @include onDesktop { + margin-top: 37px; + } + + &__content { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 12px; + line-height: 16.88px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..1f64cfa63 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,204 @@ +.header { + position: relative; + @include pageGrid; + + @include onTablet { + height: 384px; + } + + @include onDesktop { + height: 655px; + } + + &-background { + height: 300px; + width: 100%; + object-fit: cover; + grid-column: 1 / -1; + position: absolute; + z-index: -1; + + @include onTablet { + grid-column: 4 / 7; + height: 384px; + } + + @include onDesktop { + grid-column: 6 / -1; + height: 655px; + } + } + + &__img { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 27px; + + @include onTablet { + padding-top: 39px; + } + } + + &__logo { + width: 55px; + height: 61px; + position: absolute; + left: 50%; + transform: translateX(-50%); + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 6; + } + + @include onDesktop { + grid-column: 6 / 8; + } + } + + &__burger-menu { + background-image: url(../images/burger-menu.png); + background-size: cover; + background-position: center; + width: 24px; + height: 24px; + display: block; + @include hover(transform, scale(1.1)); + } + + &__bottom { + margin-top: 250px; + padding-top: 20px; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + margin: 0; + padding-top: 64px; + } + + @include onDesktop { + grid-column: 1 / 6; + padding-top: 143px; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 45px; + text-align: center; + + @include onTablet { + text-align: left; + font-size: 54px; + line-height: 54px; + } + + @include onDesktop { + font-size: 72px; + line-height: 72px; + } + } + + &__buttons { + display: flex; + justify-content: center; + padding-top: 20px; + grid-column: 1 / -1; + + @include hover(transform, scale(1.05)); + + @include onTablet { + padding-top: 38px; + grid-column: 1 / 4; + justify-content: left; + padding-left: 34px; + } + + @include onDesktop { + padding-top: 89px; + grid-column: 3 / 6; + padding-left: 0; + } + + &-text { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 16px; + text-align: center; + text-transform: uppercase; + width: 230px; + height: 50px; + border: 1px solid #1a5a4c; + background-color: #fff; + cursor: pointer; + + @include onTablet { + width: 200px; + height: 70px; + } + } + + &-icon { + width: 50px; + height: 50px; + position: relative; + background-color: #1a5a4c; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #1a5a4c; + cursor: pointer; + + @include onTablet { + width: 70px; + height: 70px; + } + + &::before { + content: ''; + position: absolute; + width: 24px; + height: 24px; + background-image: url(../images/header-button.png); + background-size: cover; + background-position: center; + } + } + } +} + +.event__wrapper { + position: absolute; + top: 642px; + left: 55px; + bottom: 0; + display: flex; + align-items: center; + gap: 20px; + transform: rotate(-90deg); + transform-origin: left bottom; + display: none; + + @include onDesktop { + display: flex; + } +} + +.event__line { + border: 1px solid #1a5a4c; + width: 70px; +} + +.event__text { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + line-height: 14px; + text-align: left; + color: #687480; + font-weight: 500; +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 000000000..b0098230f --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,173 @@ +.slider { + padding-inline: 20px; + padding-top: 40px; + + @include onTablet { + padding-inline: 34px; + padding-top: 30px; + } + + @include onDesktop { + padding-inline: 55px; + padding-top: 100px; + } + + &__title { + font-family: Montserrat, sans-serif; + font-size: 36px; + line-height: 36px; + text-align: center; + padding-bottom: 40px; + + @include onTablet { + text-align: left; + } + } + + &-container { + position: relative; + overflow: hidden; + } + + &-wrapper { + display: flex; + transition: transform 0.5s ease-in-out; + + @include onTablet { + width: 50%; + justify-content: space-between; + gap: 20px; + } + + @include onDesktop { + width: 100%; + gap: 30px; + @include pageGrid; + transition: none; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + + &-nav { + display: flex; + justify-content: center; + align-items: center; + padding-top: 20px; + display: flex; + gap: 22px; + + @include onDesktop { + display: none; + } + } +} + +.slide { + flex: 0 0 100%; + box-sizing: border-box; + overflow: hidden; + display: flex; + align-items: center; + width: 280px; + height: 410px; + + @include onTablet { + width: 340px; + height: 543px; + } + + @include onDesktop { + width: auto; + height: auto; + @include hover(transform, scale(1.05)); + } +} + +.nav-dot { + width: 10px; + height: 10px; + background-color: #ddd; + border-radius: 50%; + cursor: pointer; + + &:hover { + background-color: #333; + } +} + +input[type='radio'] { + display: none; + + &:checked + .slider-wrapper { + transform: translateX(-0%); + } + + &:nth-of-type(2):checked ~ .slider-wrapper { + transform: translateX(-100%); + } + + &:nth-of-type(3):checked ~ .slider-wrapper { + transform: translateX(-200%); + } + + &:nth-of-type(4):checked ~ .slider-wrapper { + transform: translateX(-300%); + } +} + +@include onDesktop { + input[type='radio']:nth-of-type(2):checked ~ .slider-wrapper, + input[type='radio']:nth-of-type(3):checked ~ .slider-wrapper, + input[type='radio']:nth-of-type(4):checked ~ .slider-wrapper { + transform: none; + } +} + +#slide1:checked ~ .slider-nav .nav-dot:nth-child(1), +#slide2:checked ~ .slider-nav .nav-dot:nth-child(2), +#slide3:checked ~ .slider-nav .nav-dot:nth-child(3), +#slide4:checked ~ .slider-nav .nav-dot:nth-child(4) { + background-color: #333; +} + +.slide1 { + grid-column: 1 / -1; + + @include onDesktop { + grid-column: 1 / 5; + height: 600px; + } +} + +.slide2 { + grid-column: 1 / -1; + + @include onDesktop { + grid-column: 5 / -1; + height: 600px; + } +} + +.slide3 { + grid-column: 1 / -1; + + @include onDesktop { + grid-column: 1 / 9; + height: 360px; + } +} + +.slide4 { + grid-column: 1 / -1; + + @include onDesktop { + grid-column: 9 / -1; + height: 360px; + } +} diff --git a/src/styles/blocks/subscription.scss b/src/styles/blocks/subscription.scss new file mode 100644 index 000000000..b3ff0627c --- /dev/null +++ b/src/styles/blocks/subscription.scss @@ -0,0 +1,118 @@ +.subscription__input:-webkit-autofill, +.subscription__input:-webkit-autofill:hover, +.subscription__input:-webkit-autofill:focus, +.subscription__input:-webkit-autofill:active { + border: none; + -webkit-text-fill-color: #000; + background-color: #fff; +} + +.subscription { + @include pageGrid; + margin-top: 100px; + background-image: url(../images/subscription/background.png); + background-size: cover; + background-position: center; + + @include onTablet { + margin-top: 92px; + } + + @include onDesktop { + margin-top: 200px; + } + + &__content { + grid-column: 1 / -1; + padding-block: 88px; + padding-inline: 20px; + + @include onTablet { + padding-block: 82px; + grid-column: 2 / 6; + } + + @include onDesktop { + padding-block: 163px; + grid-column: 4 / 10; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + text-align: center; + color: #fff; + } + + &__description { + padding-top: 20px; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 18px; + line-height: 27px; + text-align: center; + color: #fff; + + @include onTablet { + padding-top: 16px; + } + } + + &__input-wrapper { + padding-top: 50px; + display: flex; + align-items: center; + height: 50px; + justify-content: center; + + @include onTablet { + padding-top: 64px; + gap: 16px; + height: 70px; + } + + @include onDesktop { + padding-top: 72px; + } + } + + &__input { + flex-grow: 1; + height: 100%; + border: none; + padding: 0; + padding-left: 24px; + box-sizing: border-box; + + &:focus { + outline: none; + } + } + + &__button { + background-image: url(../images/subscription/button.png); + background-size: cover; + background-position: center; + background-color: #f14a27; + width: 24px; + height: 24px; + border: none; + cursor: pointer; + + &-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 50px; + height: 100%; + background-color: #f14a27; + cursor: pointer; + @include hover(transform, scale(1.1)); + + @include onTablet { + width: 70px; + } + } + } +} diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss new file mode 100644 index 000000000..6fd082b69 --- /dev/null +++ b/src/styles/blocks/variables.scss @@ -0,0 +1,2 @@ +$tablet-min-width: 640px; +$desktop-min-width: 1280px; diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 000000000..17e0d74c9 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,17 @@ +@import 'blocks/variables.scss'; +@import 'utils/mixins.scss'; +@import 'blocks/header.scss'; +@import 'blocks/aside.scss'; +@import 'blocks/events.scss'; +@import 'blocks/advert.scss'; +@import 'blocks/slider.scss'; +@import 'blocks/subscription.scss'; +@import 'blocks/footer.scss'; + +* { + margin: 0; +} + +html { + scroll-behavior: smooth; +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..3d2cd4fc0 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,51 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin onTablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin contentPaddingInline() { + padding-inline: 20px; + + @include onTablet { + padding-inline: 34px; + } + + @include onDesktop { + padding-inline: 55px; + } +} + +.container { + @include contentPaddingInline; +} + +@mixin pageGrid { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include onTablet { + --columns: 6; + column-gap: 30px; + } + + @include onDesktop { + --columns: 12; + column-gap: 30px; + } +}