diff --git a/src/images/duck.png b/src/images/duck.png new file mode 100644 index 000000000..af1c266c8 Binary files /dev/null and b/src/images/duck.png differ diff --git a/src/images/exhibition-image-one.png b/src/images/exhibition-image-one.png new file mode 100644 index 000000000..231fc33fe Binary files /dev/null and b/src/images/exhibition-image-one.png differ diff --git a/src/images/exhibition-image-two.png b/src/images/exhibition-image-two.png new file mode 100644 index 000000000..219f05fab Binary files /dev/null and b/src/images/exhibition-image-two.png differ diff --git a/src/images/galeru-house.png b/src/images/galeru-house.png new file mode 100644 index 000000000..ae9a8e542 Binary files /dev/null and b/src/images/galeru-house.png differ diff --git a/src/images/galery-five.png b/src/images/galery-five.png new file mode 100644 index 000000000..0bc426fbb Binary files /dev/null and b/src/images/galery-five.png differ diff --git a/src/images/galery-four.png b/src/images/galery-four.png new file mode 100644 index 000000000..e298cb6ff Binary files /dev/null and b/src/images/galery-four.png differ diff --git a/src/images/galery-image-one.png b/src/images/galery-image-one.png new file mode 100644 index 000000000..8e4b335c5 Binary files /dev/null and b/src/images/galery-image-one.png differ diff --git a/src/images/icons/NA MU.png b/src/images/icons/NA MU.png new file mode 100644 index 000000000..138c71634 Binary files /dev/null and b/src/images/icons/NA MU.png differ diff --git a/src/images/icons/arrow-black.png b/src/images/icons/arrow-black.png new file mode 100644 index 000000000..a21fb3492 Binary files /dev/null and b/src/images/icons/arrow-black.png differ diff --git a/src/images/icons/carbon_arrow-up.svg b/src/images/icons/carbon_arrow-up.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/icons/carbon_arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-arrow.png b/src/images/icons/icon-arrow.png new file mode 100644 index 000000000..5a9b15df8 Binary files /dev/null and b/src/images/icons/icon-arrow.png differ diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 000000000..c8cb7d117 Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/icons/icon-menu.png b/src/images/icons/icon-menu.png new file mode 100644 index 000000000..47e7b3b41 Binary files /dev/null and b/src/images/icons/icon-menu.png differ diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..4c9b6ca10 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/lection-image.png b/src/images/lection-image.png new file mode 100644 index 000000000..fd58771cb Binary files /dev/null and b/src/images/lection-image.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..138c71634 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/muzei-background.png b/src/images/muzei-background.png new file mode 100644 index 000000000..87254ac69 Binary files /dev/null and b/src/images/muzei-background.png differ diff --git a/src/images/subscribe.png b/src/images/subscribe.png new file mode 100644 index 000000000..7d2388f43 Binary files /dev/null and b/src/images/subscribe.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..843dfe2c1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,495 @@ - + - Title + НАМУ + + + + + + + + - -

Hello Mate Academy

+ + +
+
+
+ +
+

+ NA +
+ MU +

+ +
+
+
+ +
+
+

ХУДОЖНІЙ МУЗЕЙ

+ +
+
+ + КВИТКИ + +
+ +
+
+
+
+
+

ПОДІЇ

+
+
+ + + +
+
+

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

+ +
+
+
+ exhibition-image-one +
+ +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+
+

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

+
+
+
+

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

+
+
+
+ +
+
+ exhibition-image-one +
+
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+ +
+

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

+
+
+
+

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

+
+
+
+
+ +
+ lection-image + +
+
+

ЛЕКЦІЯ

+

26/08/2019 - 11:00

+
+ +

Від класицизму до романтизму

+
+
+
+ +
+

Галерея

+ +
+
+ galery-image-one +
+ +
+ galery-image-one +
+ +
+ galery-image-one +
+ +
+ galery-image-one +
+ +
+ galery-image-one +
+
+ +
+ + + + +
+
+ +
+ + +
+
+ + diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..28aa54a0f --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,329 @@ +.events { + margin-top: 70px; + + @include on-tablet { + margin-top: 88px; + } + + @include on-desktop { + margin-top: 200px; + } + + &__exhibitions { + margin-top: 40px; + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + padding-left: 34px; + padding-right: 34px; + margin-top: 48px; + } + + @include on-desktop { + padding-left: 55px; + padding-right: 55px; + margin-top: 56px; + } + } + + &__exhibition { + @include on-desktop { + grid-column: 1 / -1; + + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + margin: 0; + } + } + + &__exhibition--two { + margin-top: 60px; + + @include on-tablet { + margin-top: 64px; + } + + @include on-desktop { + margin-top: 104px; + } + } + + &__exhibition-image-wrapper { + @include on-desktop { + grid-column: 1 /8; + } + } + + &__exhibition-content { + @include on-desktop { + grid-column: 8 /-1; + padding-left: 60px; + margin-top: 159px; + } + } + + &__title { + color: #0f0e08; + padding-left: 20px; + padding-right: 20px; + + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + + margin: 0; + + @include on-tablet { + text-align: left; + padding-left: 34px; + padding-right: 34px; + font-size: 48px; + } + + @include on-desktop { + padding-left: 55px; + padding-right: 55px; + } + } + + &__exhibition-image { + height: auto; + width: 100%; + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.03); + } + } + + &__exhibition-top { + margin-top: 20px; + display: flex; + align-items: center; + gap: 60px; + + @include on-tablet { + margin-top: 40px; + } + + @include on-desktop { + margin: 0; + } + } + + &__exhibition-name { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + color: #687480; + + margin: 0; + + @include on-tablet { + font-size: 14px; + } + } + + &__exhibition-date { + color: #1a5a4c; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + margin: 0; + + @include on-tablet { + font-size: 14px; + } + } + + &__exhibition-text-block { + display: flex; + align-items: center; + gap: 15px; + + margin-top: 15px; + + @include on-tablet { + margin-top: 30px; + } + } + + &__exhibition-title { + color: #0f0e08; + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + line-height: 100%; + letter-spacing: 0%; + margin: 0; + } + + &__exhibition-square { + width: 10px; + height: 10px; + background-color: #f14a27; + } + + &__exhibition-sub-title { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: #4e4e4e; + + margin: 10px 0 0; + + @include on-tablet { + margin-top: 15px; + text-align: left; + + padding-right: 240px; + } + + @include on-desktop { + padding-right: 0; + } + } + + &__lection { + margin-top: 60px; + padding: 0; + + @include on-tablet { + padding-right: 34px; + margin-top: 112px; + padding-left: 34px; + } + + @include on-desktop { + padding: 0; + margin-top: 104px; + } + } + + &__lection-image { + width: 100%; + height: auto; + position: relative; + + @include on-desktop { + max-height: 550px; + } + } + + &__lection-text-block { + background-color: #fff; + + box-shadow: 0 2px 0 0 #1a5a4c40; + + margin-left: 20px; + margin-right: 20px; + + transform: translateY(-45%); + + @include on-tablet { + margin-left: 65px; + margin-right: 65px; + } + + @include on-desktop { + margin-left: 355px; + margin-right: 355px; + } + } + + &__lection-top { + display: flex; + align-items: center; + gap: 25px; + + padding-left: 21px; + + @include on-tablet { + padding-left: 55px; + padding-right: 55px; + justify-content: space-between; + } + + @include on-desktop { + padding-left: 100px; + padding-right: 100px; + } + } + + &__lection-name { + color: #687480; + + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + + margin: 0; + padding-top: 24px; + + @include on-tablet { + font-size: 14px; + padding-top: 45px; + } + } + + &__lection-date { + color: #1a5a4c; + + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + margin: 0; + padding-top: 20px; + + @include on-tablet { + font-size: 14px; + padding-top: 45px; + } + } + + &__lection-title { + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + + margin: 0; + padding-top: 20px; + padding-bottom: 20px; + + @include on-tablet { + font-size: 36px; + text-align: left; + padding: 16px 55px 50px; + } + + @include on-desktop { + font-size: 36px; + text-align: left; + + @include on-desktop { + padding: 16px 100px 50px ; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..f01cf1dd5 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,308 @@ +.footer { + margin-top: 50px; + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + margin-top: 51px; + padding-left: 34px; + padding-right: 34px; + + display: grid; + + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + @include on-desktop { + margin-top: 47px; + padding-left: 55px; + padding-right: 55px; + + display: grid; + + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + + @include on-tablet { + grid-column: span 1; + + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 32px; + } + } + + &__title { + color: #0f0e08; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + + margin: 0; + } + + &__icons { + display: flex; + gap: 20px; + + transition: all 0.3s ease; + + + } + + &__bottom { + margin-top: 40px; + + display: grid; + grid-template-columns: repeat(2, 1fr); + + gap: 20px; + + @include on-tablet { + grid-column: 2 / 6; + margin-top: 0; + } + + @include on-desktop { + grid-column: 3 / 5; + gap: 30px; + } + } + + &__schedule { + min-width: 130px; + + @include on-tablet { + min-width: 220px; + } + } + + &__schedule-title { + color: #0f0e08; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 141%; + letter-spacing: 0%; + + margin: 0; + } + + &__schedule-sub-title-number { + color: #0f0e08; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + + margin: 0; + padding-top: 20px; + } + + &__schedule-sub-title-day { + color: #0f0e08; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + } + + &__schedule-headline { + color: #0f0e08; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + + margin: 0; + padding-top: 20px; + } + + &__contact { + min-width: 128px; + + @include on-tablet { + min-width: 220px; + } + } + + &__contact-sub-title { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + color: #0f0e08; + padding-top: 20px; + text-decoration: none; + + margin: 0; + } + + &__contact-link { + text-decoration: none; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + color: #0f0e08; + padding-top: 20px; + } + + &__contact-title { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 141%; + letter-spacing: 0%; + color: #0f0e08; + + margin: 0; + } + + &__button { + display: flex; + justify-content: center; + align-items: center; + margin-left: auto; + + border: 1px solid #1a5a4c; + border-radius: 50%; + width: 50px; + height: 50px; + + @include on-tablet { + display: none; + } + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } + + &__line { + margin-top: 20px; + border: 1px solid #1a5a4c80; + min-width: 280px; + + @include on-tablet { + grid-column: 1 / -1; + + width: 66%; + max-width: 900px; + + margin-left: auto; + margin-right: auto; + } + + @include on-desktop { + grid-column: 7 / 7; + border-left: 1px solid #1a5a4c80; + + place-self: center; + border: none; + border-top: 1px solid #1a5a4c80; + transform-origin: center; + transform: rotate(90deg); + min-width: 260px; + + position: relative; + left: 65px; + } + } + + &__links { + margin-top: 40px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 8 / -1; + + gap: 32px; + } + } + + &__link { + color: #0f0e08; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + text-decoration: none; + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__link-wrapper { + display: flex; + flex-direction: column; + gap: 20px; + min-width: 130px; + + @include on-tablet { + min-width: 220px; + } + } + + &__description { + padding-top: 80px; + padding-bottom: 56px; + + @include on-tablet { + grid-column: 1 / -1; + + display: flex; + justify-content: space-between; + align-items: center; + + padding-top: 120px; + padding-bottom: 36px; + } + } + + &__headeline { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 12px; + line-height: 141%; + letter-spacing: 0%; + text-align: center; + color: #0f0e08; + margin: 0; + } + + &__headeline--two { + padding-top: 10px; + + @include on-tablet { + padding-top: 0; + } + } +} diff --git a/src/styles/blocks/galery.scss b/src/styles/blocks/galery.scss new file mode 100644 index 000000000..928ec2bc0 --- /dev/null +++ b/src/styles/blocks/galery.scss @@ -0,0 +1,216 @@ +.galery { + margin-top: 100px; + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + margin-top: 88px; + padding-left: 34px; + padding-right: 34px; + } + + @include on-desktop { + margin-top: 200px; + padding-left: 55px; + padding-right: 55px; + } + + &__images { + @include on-tablet { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__title { + color: #0f0e08; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + + margin: 0; + + @include on-tablet { + text-align: left; + } + } + + &__image-wrapper { + margin-top: 40px; + + @include on-tablet { + margin-top: 48px; + } + + @include on-desktop { + margin-top: 56px; + grid-column: span 4; + width: 100%; + } + } + + &__image-one { + width: 100%; + height: auto; + object-fit: cover; + + @include on-tablet { + height: 100%; + object-fit: cover; + } + + @include on-desktop { + height: 100%; + width: 100%; + object-fit: cover; + } + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.03); + } + } + + &__image-two { + @include on-tablet { + height: 100%; + width: 100%; + object-fit: cover; + } + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.03); + } + } + + &__image-three { + @include on-desktop { + height: 100%; + width: 100%; + object-fit: cover; + } + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.03); + } + } + + &__image-four { + @include on-desktop { + height: 100%; + width: 100%; + object-fit: cover; + } + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.03); + } + } + + &__image-five { + @include on-desktop { + height: 100%; + width: 100%; + object-fit: cover; + } + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.03); + } + } + + &__eclipses { + margin-top: 20px; + display: flex; + justify-content: center; + align-items: center; + gap: 22px; + + @include on-tablet { + margin-top: 32px; + } + + @include on-desktop { + display: none; + } + } + + &__eclipse { + width: 9px; + height: 9px; + background-color: #e0e0e0; + color: #e0e0e0; + padding: 0; + + border-radius: 50%; + border: none; + + &:active { + background-color: #1a5a4c; + color: #1a5a4c; + } + } + + &__image-wrapper-two { + display: none; + + @include on-tablet { + display: block; + margin-top: 48px; + } + + @include on-desktop { + display: none; + } + } + + &__image-wrapper-three { + display: none; + + @include on-desktop { + display: block; + + grid-column: 5 / -1; + margin-top: 56px; + } + } + + &__image-wrapper-four { + display: none; + + @include on-desktop { + display: block; + + grid-column: 1 / 9; + } + } + + &__image-wrapper-five { + display: none; + + @include on-desktop { + display: block; + + grid-column: 9 / -1; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..68b4291f5 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,223 @@ +.header { + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + + &__top { + background-image: url(/src/images/muzei-background.png); + background-size: cover; + background-position: center; + height: 300px; + position: relative; + display: flex; + justify-content: space-between; + box-sizing: border-box; + + @include on-tablet { + grid-column: 4 /-1; + height: 374px; + } + + @include on-desktop { + grid-column: 6 /-1; + height: 655px; + } + } + + &__bottom-icon { + display: none; + + @include on-tablet { + display: flex; + position: absolute; + top: 39px; + left: 34px; + + @include on-desktop { + left: 55px; + } + } + } + + &__title { + color: #0f0e08; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 30px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + + margin: 0; + padding-top: 9px; + + @include on-tablet { + padding-left: 60px; + padding-top: 15px; + font-size: 36px; + } + + @include on-desktop { + padding-left: 50px; + } + } + + &__icon { + padding-top: 27px; + padding-left: 20px; + + @include on-tablet { + display: none; + } + } + + &__space { + padding-right: 44px; + + @include on-tablet { + display: none; + } + } + + &__bottom { + margin-top: 20px; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include on-tablet { + grid-column: span 3; + grid-row: 1; + margin-top: 39px; + padding-left: 34px; + padding-right: 20px; + align-items: normal; + } + + @include on-desktop { + grid-column: span 5; + padding-left: 55px; + margin-top: 45px; + padding-right: 30px; + } + } + + &__bottom-title { + color: #000; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 45px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + + margin: 0; + + @include on-tablet { + font-size: 54px; + text-align: left; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__button { + display: flex; + margin-top: 20px; + border: 1px solid #1a5a4c; + + width: 280px; + height: 50px; + justify-content: space-between; + align-items: center; + + transition: all 0.3s ease; + + @include on-tablet { + margin-top: 38px; + width: 270px; + height: 70px; + } + + @include on-desktop { + margin-top: 89px; + margin-left: auto; + } + + &:hover { + transform: scale(1.1); + background-color: #fff5ee; + } + } + + &__button-link { + text-decoration: none; + color: #0f0e08; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + transition: all 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__events { + display: none; + + @include on-desktop { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + position: relative; + top: -40px; + } + } + + &__events-title { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + color: #687480; + + transform: rotate(-90deg); + margin: 0; + padding: 0; + transform-origin: top left; + position: relative; + top: -40px; + } + + &__line { + border: 1px solid #1a5a4c; + transform: rotate(-90deg); + + width: 70px; + background-color: #1a5a4c; + margin-left: 10px; + } + + &__button-icon { + background-color: #1a5a4c; + height: 100%; + width: 50px; + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..aa4b18bb0 --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,76 @@ +.icon { + display: inline-block; + height: 24px; + width: 24px; + background-size: cover; + background-position: center; + + &--menu { + background-image: url(/src/images/icons/icon-menu.png); + background-repeat: no-repeat; + background-position: center; + } + + &--arrow { + background-image: url(/src/images/icons/icon-arrow.png); + width: 8px; + height: 12px; + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.3); + } + } + + &--arrow-black { + background-image: url(/src/images/icons/arrow-black.png); + width: 8px; + height: 12px; + } + + &--close { + background-image: url(/src/images/icons/icon-close.png); + width: 13px; + height: 13px; + } + + &--facebook { + width: 24px; + height: 24px; + background-image: url(/src/images/icons/facebook.svg); + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } + + &--instagram { + width: 24px; + height: 24px; + background-image: url(/src/images/icons/instagram.svg); + + + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.2); + + } + } + + &--arrow-up { + height: 16px; + width: 16px; + background-image: url(/src/images/icons/carbon_arrow-up.svg); + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..21d0608f5 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,214 @@ +.menu { + height: 399px; + box-sizing: border-box; + background-color: #1a5a4c; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + height: 225px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + height: 233px; + } + + &__icon { + padding-top: 33px; + padding-left: 26px; + + @include on-tablet { + padding-top: 45px; + padding-left: 40px; + } + + @include on-desktop { + padding-top: 46px; + padding-left: 61px; + } + } + + &__top { + display: flex; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: 2 / 4; + } + } + + &__link { + color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-decoration: none; + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } + + &__links { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-top: 27px; + margin-left: 33px; + gap: 28px; + + @include on-tablet { + padding-top: 39px; + margin-left: 44px; + gap: 20px; + } + + @include on-desktop { + padding-top: 40px; + margin-left: 108px; + gap: 31px; + } + } + + &__link-wrapper { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-desktop { + gap: 30px; + } + } + + &__line { + height: 1px; + width: 280px; + background-color: #fff; + box-sizing: border-box; + margin-top: 24px; + margin-left: 20px; + margin-right: 20px; + opacity: 50%; + position: relative; + + @include on-tablet { + position: relative; + left: 280%; + width: 1px; + background-color: #fff; + opacity: 0.5; + + height: 145px; + margin-top: 40px; + } + + @include on-desktop { + right: 50%; + } + } + + &__bottom { + margin-top: 24px; + padding-left: 20px; + padding-right: 35px; + padding-bottom: 27px; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1; + + display: grid; + grid-template-columns: 1.5fr 1px 1.5fr; + + margin-top: 40px; + padding-right: 20px; + padding-left: 10px; + } + + @include on-desktop { + grid-column: 8 / -1; + + padding-right: 155px; + padding-left: 20px; + } + } + + &__schedule-times { + @include on-tablet { + grid-column: 1 / 2; + grid-row: 1; + } + } + + &__schedule-info { + padding-top: 16px; + + @include on-tablet { + grid-column: 3 / 4; + grid-row: 1; + + padding-top: 40px; + padding-left: 38px; + } + } + + &__schedule-title { + color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 141%; + letter-spacing: 0%; + + margin: 0; + } + + &__schedule-sub-title-number { + color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + + margin: 0; + padding-top: 20px; + } + + &__schedule-sub-title-day { + color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + } + + &__schedule-headline { + color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + + margin: 0; + } + + &__schedule-headline-two { + color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..2d27b0cff --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,26 @@ +.page { + scroll-behavior: smooth; + + &__body { + margin: 0; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + opacity: 0; + transition: all 0.3s; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} + diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..8c168a5f7 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,172 @@ +.subscribe { + margin-top: 100px; + padding-left: 20px; + padding-right: 20px; + + background-image: url(/src/images/subscribe.png); + background-size: cover; + background-position: center; + box-sizing: border-box; + + height: 386px; + width: 100%; + + @include on-tablet { + margin-top: 92px; + padding-left: 154px; + padding-right: 154px; + height: 380px; + } + + @include on-desktop { + margin-top: 200px; + padding-left: 355px; + padding-right: 355px; + height: 550px; + } + + &__text-block { + padding-top: 88px; + display: flex; + flex-direction: column; + + @include on-tablet { + padding-top: 82px; + } + + @include on-desktop { + padding-top: 163px; + } + } + + &__title { + color: #fff; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + text-decoration: none; + + margin: 0; + + @include on-tablet { + font-size: 48px; + } + } + + &__sub-title { + color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 150%; + letter-spacing: 0%; + text-align: center; + + margin: 0; + padding-top: 20px; + + @include on-tablet { + padding-top: 16px; + } + } + + &__button { + display: flex; + margin-top: 50px; + border: 0 solid #fff; + background-color: #fff; + + width: 280px; + height: 50px; + justify-content: space-between; + align-items: center; + + @include on-tablet { + width: 374px; + height: 70px; + margin-top: 64px; + justify-content: space-between; + } + + @include on-desktop { + width: 470px; + margin-top: 72px; + } + } + + &__form { + display: flex; + align-items: center; + justify-content: center; + } + + &__input { + border: none; + color: #4e4e4e; + outline: none; + justify-content: left; + padding-left: 24px; + width: 100%; + + &::placeholder { + color: #687480; + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + box-shadow: 0 0 0 1000px #fff inset !important; + -webkit-text-fill-color: #4e4e4e !important; + } + + @include on-tablet { + padding-left: 24px; + } + + @include on-desktop { + padding-left: 32px; + } + } + + &__button-icon { + background-color: #f14a27; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 50px; + + border: none; + outline: none; + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + width: 70px; + height: 70px; + margin-top: 64px; + position: relative; + left: 16px; + } + + @include on-desktop { + margin-top: 72px; + position: relative; + left: 30px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..384731449 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,14 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'blocks/header'; +@import 'blocks/page'; +@import 'blocks/icons'; +@import 'blocks/menu'; +@import 'blocks/events'; +@import 'blocks/galery'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; body { background: $c-gray; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..6cf5aefa8 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,21 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..fc156fbc1 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ $c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$design-min-width: 1440px;