diff --git a/README.md b/README.md index 7fa4acc..e34ebe2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,23 @@ -# Base layout template with Gulp, SCSS and Stylelint -1. Create a repo using this template -1. Replace `` and `` with your Github username and the new repo name - - [DEMO LINK](https://.github.io//) +Назва проєкту: +"The Met"; + +Опис: +"The Met" - це веб-сайт музею, призначений для любителів мистецтва та культури. на нашому сайті користувачі можуть ознайомитися з путівниками виставкових галерей, відео, статтями тощо. На нашому сайті користувачі можуть віртуально подорожувати через колекції музею, дізнаватися про різноманітні художні стили та епохи, ознайомлюватися з великими майстрами мистецтва та їх творами. + +Основні функції: +Вся актуальна інформація стосовно наявних виставок та графіку роботи +Віртуальні екскурсії по різних виставках та галереях музею. +Можливість ознайомитися з наявими шедеврами мистецтва. +Контактна інформація та форма зворотного зв'язку для зв'язку з адміністрацією музею. + +Використані технології: +HTML/CSS; +СSS-препроцессор SCSS; +Photo compression; +CSS трансформаії. + +Макет: +https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET?type=design&node-id=8590-537&mode=design&t=0XdKeA1jOHV0bp9D-0 + +Прев'ю: +https://shevchuchka.github.io/landing-page-final/ diff --git a/src/images/galaryPhoto/aNewLookAt....jpg b/src/images/galaryPhoto/aNewLookAt....jpg new file mode 100644 index 0000000..bd91256 Binary files /dev/null and b/src/images/galaryPhoto/aNewLookAt....jpg differ diff --git a/src/images/galaryPhoto/bodhisattvas.jpg b/src/images/galaryPhoto/bodhisattvas.jpg new file mode 100644 index 0000000..0d8f371 Binary files /dev/null and b/src/images/galaryPhoto/bodhisattvas.jpg differ diff --git a/src/images/galaryPhoto/collectionAreas.jpg b/src/images/galaryPhoto/collectionAreas.jpg new file mode 100644 index 0000000..af37047 Binary files /dev/null and b/src/images/galaryPhoto/collectionAreas.jpg differ diff --git a/src/images/galaryPhoto/compassion.jpg b/src/images/galaryPhoto/compassion.jpg new file mode 100644 index 0000000..fdfcbdc Binary files /dev/null and b/src/images/galaryPhoto/compassion.jpg differ diff --git a/src/images/galaryPhoto/footerImg.jpg b/src/images/galaryPhoto/footerImg.jpg new file mode 100644 index 0000000..3df5b43 Binary files /dev/null and b/src/images/galaryPhoto/footerImg.jpg differ diff --git a/src/images/galaryPhoto/frenchArtClocks.jpg b/src/images/galaryPhoto/frenchArtClocks.jpg new file mode 100644 index 0000000..3a7ec53 Binary files /dev/null and b/src/images/galaryPhoto/frenchArtClocks.jpg differ diff --git a/src/images/galaryPhoto/frenchArtStatue.jpg b/src/images/galaryPhoto/frenchArtStatue.jpg new file mode 100644 index 0000000..1bb77e6 Binary files /dev/null and b/src/images/galaryPhoto/frenchArtStatue.jpg differ diff --git a/src/images/galaryPhoto/oldMaster.jpg b/src/images/galaryPhoto/oldMaster.jpg new file mode 100644 index 0000000..331cf7b Binary files /dev/null and b/src/images/galaryPhoto/oldMaster.jpg differ diff --git a/src/images/galaryPhoto/power.jpg b/src/images/galaryPhoto/power.jpg new file mode 100644 index 0000000..68863cb Binary files /dev/null and b/src/images/galaryPhoto/power.jpg differ diff --git a/src/images/galaryPhoto/travel.jpg b/src/images/galaryPhoto/travel.jpg new file mode 100644 index 0000000..4022565 Binary files /dev/null and b/src/images/galaryPhoto/travel.jpg differ diff --git a/src/images/galaryPhoto/virtualTour.jpg b/src/images/galaryPhoto/virtualTour.jpg new file mode 100644 index 0000000..22045fc Binary files /dev/null and b/src/images/galaryPhoto/virtualTour.jpg differ diff --git a/src/images/icons/icon-burger-menu.svg b/src/images/icons/icon-burger-menu.svg new file mode 100644 index 0000000..884ec5f --- /dev/null +++ b/src/images/icons/icon-burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 0000000..bc6f523 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-phone-call.svg b/src/images/icons/icon-phone-call.svg new file mode 100644 index 0000000..90ffd01 --- /dev/null +++ b/src/images/icons/icon-phone-call.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/the-met-logo.svg b/src/images/icons/the-met-logo.svg new file mode 100644 index 0000000..171f121 --- /dev/null +++ b/src/images/icons/the-met-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/the-met-bg.jpg b/src/images/the-met-bg.jpg new file mode 100644 index 0000000..84585af Binary files /dev/null and b/src/images/the-met-bg.jpg differ diff --git a/src/index.html b/src/index.html index 7b816cc..a80ba06 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,456 @@ + - + - Miami + + The MET + + + + - -

Landing Page

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

+ Welcome +
to The MET +

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

Plan your visit

+

Museum hours

+
+ +
+
+

The Met Fifth Avenue

+ +
+
+

10 am - 5 pm

+

10 am - 9 pm

+

Closed

+
+ +
+

Sun, Mon, Tue, Thu

+

Fri, Sat

+

Wen

+
+
+ +
+

Closed on

+

Thanksgiving Day, Dec 25, Jan 1, and the first Monday in May.

+
+
+ +
+

The Met Cloisters

+ +
+
+

10 am – 4.30 pm

+

Closed

+
+ +
+

Thu - Tue

+

Wen

+
+
+ +
+

Closed on

+

Thanksgiving Day, Dec 25, Jan 1

+
+
+
+
+ + + +
+
+

Now On View

+

Explore exhibition gallery guides, videos, articles, and more.

+
+ +
+
+
+ + A New Look at Old Masters + + + oldMaster + +
+
+

A New Look at Old Masters

+

December 12, 2020 – Through Spring 2023

+
+
+ +
+
+ + bodhisattvas + + + compassion + + + power + +
+
+

Bodhisattvas of Wisdom, Compassion, and Power

+

March 27, 2021 – October 30, 2022

+
+
+ +
+
+ + frenchArtClocks + + + frenchArtStatue + +
+
+

Inspiring Walt Disney:
The Animation of French Decorative Arts

+

December 10, 2021 – March 6, 2022

+
+
+
+ + View all exhibitions +
+ + + +
+
+

More to Explore Online

+
+ +
+
+ Colection Areas + +
+

Collection Areas

+

These collection areas study, exhibit, and care for the objects in The Met collection.

+
+
+ +
+ Travel + +
+

Travel

+

Travel with The Met connects the Museum's wide and diverse audience to art, inspiration, and historical perspective.

+
+
+ +
+ Virtual Group Tour + +
+

Virtual group tours

+

Request a guided tour, reserve admission and lead your own small group, or request a live virtual tour led by a Museum guide.

+
+
+
+
+ + + +
+
+

Contact us

+
+ +
+
+
+

The Met Fifth Avenue

+
+
phone
+ +1 212-535-7710 +
+
+
address
+ + 1000 Fifth Avenue
New York, NY 10028 + +
+
+
+

The Met Cloisters

+
+
phone
+ +1 212-923-3700 +
+
+
address
+ + 99 Margaret Corbin Drive
+ Fort Tryon Park
+ New York, NY 10040 + +
+
+
+ +
+ + + + + + + +
+
+
+ +
+ + +
+ diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000..7864680 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,8 @@ +.footer { + height: 180px; + background: center / cover no-repeat url('/src/images/galaryPhoto/footerImg.jpg'); + + @media (min-width: $tablet-min-width) { + height: 359px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000..08d6c7c --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,41 @@ +.header { + height: 100vh; + background: center/cover no-repeat url(../images/the-met-bg.jpg); + + &__content { + position: relative; + height: 50vh; + } + + &__title { + display: block; + width: 100%; + position: absolute; + bottom: 0; + + text-align: center; + font-size: 40px; + font-weight: 700; + color: #fff; + line-height: 100%; + letter-spacing: -1.5px; + + @include on-tablet { + font-size: 64px; + } + + @include on-desktop { + font-size: 80px; + } + } +} + + + + + + + + + + diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000..f509837 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,45 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-size: cover; + + @media (min-width: $tablet-min-width){ + width: 32px; + height: 32px; + } + + &--phone { + background-image: url(../images/icons/icon-phone-call.svg); + margin-left: 16px; + } + + &--menu { + background-image: url(../images/icons/icon-burger-menu.svg); + margin-left: 24px; + + @media (min-width: $tablet-min-width){ + margin-left: 55px; + } + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + } +} + +.phone-icon { + display: flex; + align-items: center; + position: relative; + + &:hover .phone-icon__menu { + display: block; + } +} + + + + diff --git a/src/styles/blocks/mainBlocks/bemBlocks/button.scss b/src/styles/blocks/mainBlocks/bemBlocks/button.scss new file mode 100644 index 0000000..f8f78b7 --- /dev/null +++ b/src/styles/blocks/mainBlocks/bemBlocks/button.scss @@ -0,0 +1,26 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + + height: 56px; + + background-color: $red-text-color; + border: none; + + font-family: inherit; + font-weight: 700; + color: #fff; + + transition: 0.35s; + + &:hover { + background-color: #ae1c23; + transition: 0.35s; + } + + &:active { + background-color: #eb343d; + transition: 0.35s; + } +} diff --git a/src/styles/blocks/mainBlocks/bemBlocks/increase.scss b/src/styles/blocks/mainBlocks/bemBlocks/increase.scss new file mode 100644 index 0000000..c567db9 --- /dev/null +++ b/src/styles/blocks/mainBlocks/bemBlocks/increase.scss @@ -0,0 +1,3 @@ +.increase { + @include hover (transform, scale(1.05)); +} diff --git a/src/styles/blocks/mainBlocks/bemBlocks/link.scss b/src/styles/blocks/mainBlocks/bemBlocks/link.scss new file mode 100644 index 0000000..0b409de --- /dev/null +++ b/src/styles/blocks/mainBlocks/bemBlocks/link.scss @@ -0,0 +1,25 @@ +.link { + position: relative; + display: inline-block; + padding-bottom: 7px; + + &::after { + content: ""; + position: absolute; + display: block; + bottom: 0; + width: 100%; + height: 1px; + background-color: #fff; + border-radius: 50%; + + transition: transform 0.35s; + transform-origin: left; + transform: scale(0); + } + + &:hover::after { + cursor: default; + transform: scale(1); + } +} diff --git a/src/styles/blocks/mainBlocks/bemBlocks/sectionTitle.scss b/src/styles/blocks/mainBlocks/bemBlocks/sectionTitle.scss new file mode 100644 index 0000000..b4959ce --- /dev/null +++ b/src/styles/blocks/mainBlocks/bemBlocks/sectionTitle.scss @@ -0,0 +1,20 @@ +.sectionTitle { + margin-bottom: 48px; + + &__title{ + font-size: 32px; + font-weight: 700; + line-height: 32px; + letter-spacing: -1.5; + text-align: center; + + &--museumHours { + text-align: left; + } + + @media (min-width: $tablet-min-width) { + font-size: 48px; + line-height: 48px; + } + } +} diff --git a/src/styles/blocks/mainBlocks/contacts.scss b/src/styles/blocks/mainBlocks/contacts.scss new file mode 100644 index 0000000..391926a --- /dev/null +++ b/src/styles/blocks/mainBlocks/contacts.scss @@ -0,0 +1,113 @@ +.locations { + @include page-grid; + + &__wrapper { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + grid-auto-flow: column; + } + + @media (min-width: $desktop-min-width) { + display: grid; + + $columns: 6; + + grid-template-columns: repeat($columns, 1fr); + column-gap: 20px; + } + } +} + +.location { + margin-bottom: 48px; + + @include on-desktop { + grid-column: span 3; + } + + &__name { + margin-bottom: 16px; + font-weight: 700; + } + + &__items { + margin-top: 8px; + + &-caption { + font-size: 14px; + line-height: 27px; + font-weight: 400; + } + + &-link { + font-weight: 700; + color: #3E3E3E; + + @include hover(color, #000); + } + } +} + +.inputs { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: -6 / -1; + } + + display: flex; + flex-direction: column; + + &__input { + padding: 14px 11px; + margin-bottom: 16px; + + color: $text-color-general; + + border: none; + outline: none; + box-shadow: none; + + background-color: #f8f8fa; + + &::placeholder { + font-family: Cinzel, serif; + font-size: 14px; + line-height: 20px; + color: #7e7e83; + } + + &:hover::placeholder { + color: $text-color-general; + } + + &:focus { + border: 1px solid $text-color-general; + color: $text-color-general; + } + } + + &__one-line { + height: 48px; + } + + &__multi-line { + height: 144px; + } + + &__button { + margin-top: 16px; + } +} + + diff --git a/src/styles/blocks/mainBlocks/exploreOnline.scss b/src/styles/blocks/mainBlocks/exploreOnline.scss new file mode 100644 index 0000000..5cc2e42 --- /dev/null +++ b/src/styles/blocks/mainBlocks/exploreOnline.scss @@ -0,0 +1,41 @@ +.cards { + @include page-grid; + + row-gap: 48px; +} + +.card { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + grid-column: span 4; + } + + &__photo { + display: block; + + margin: 0 auto; + } + + &__text { + text-align: center; + + &-title { + margin-top: 24px; + + color: $red-text-color + } + + &-description { + margin-top: 4px; + + font-family: Roboto, sans-serif; + font-size: 16px; + line-height: 27px; + } + } +} diff --git a/src/styles/blocks/mainBlocks/main.scss b/src/styles/blocks/mainBlocks/main.scss new file mode 100644 index 0000000..8ab56f8 --- /dev/null +++ b/src/styles/blocks/mainBlocks/main.scss @@ -0,0 +1,37 @@ +.main { + display: grid; + padding-block: 100px; + row-gap: 100px; + + @include content-padding-inline; + + @media (min-width: $tablet-min-width) { + padding-block: 140px; + row-gap: 140px; + } +} + +@import 'bemBlocks/sectionTitle'; +@import 'bemBlocks/button'; +@import 'bemBlocks/increase'; +@import 'bemBlocks/link'; + + + +// shedule +@import 'museumHours'; + + +// now-on-view +@import 'nowOnView'; + + +// exploreOnline +@import 'exploreOnline'; + + +// contacts +@import 'contacts'; + + + diff --git a/src/styles/blocks/mainBlocks/museumHours.scss b/src/styles/blocks/mainBlocks/museumHours.scss new file mode 100644 index 0000000..481df3f --- /dev/null +++ b/src/styles/blocks/mainBlocks/museumHours.scss @@ -0,0 +1,60 @@ +.museumHours { + @include page-grid; + + &__title { + margin-bottom: 32px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: span 5; + } + } + + &__description { + grid-column: 1/ -1; + + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: span 7; + } + } + + &__subtitle { + font-size: 12px; + line-height: 16.8px; + font-weight: 700; + color: $red-text-color; + } +} + +.shedule { + &--cloisters { + margin-top: 24px; + } + + &__title { + @include h3-properties; + + line-height: 30px; + } + + &__description { + display: flex; + column-gap: 24px; + padding-block: 16px; + } + + &__time { + font-weight: 700; + display: grid; + row-gap: 8px; + } +} diff --git a/src/styles/blocks/mainBlocks/nowOnView.scss b/src/styles/blocks/mainBlocks/nowOnView.scss new file mode 100644 index 0000000..fe897a6 --- /dev/null +++ b/src/styles/blocks/mainBlocks/nowOnView.scss @@ -0,0 +1,99 @@ +.nowOnView { + &__subtitle { + font-size: 16px; + font-weight: 400; + line-height: 27px; + text-align: center; + } + + &__button { + margin-top: 40px; + } +} + +.galary-wrapper { + display: grid; + row-gap: 48px; +} + +.galary { + &__photos { + @include page-grid; + + &--three { + @media (max-width: $tablet-min-width) { + display: grid; + + $columns: 3; + + grid-template-columns: repeat($columns, 1fr); + column-gap: 8px; + } + } + } + + &__photo { + position: relative; + width: 100%; + height: 100%; + object-fit: cover; + + &--left-position{ + object-position: 30%; + } + + &--right-position{ + object-position: right; + } + + &--wide { + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 8; + } + } + + &--square { + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &--medium { + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &--hidden { + @include on-tablet{ + position: absolute; + visibility: hidden; + } + + @include on-desktop{ + position: relative; + visibility: visible; + } + } + } + + &__text { + margin-top: 24px; + + &-title { + color: $red-text-color; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000..e2f1150 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,90 @@ +.top-bar { + @include space-between-centered-content; + + padding-top: 25px; + + @include on-tablet{ + padding-top: 50px; + } + + @include content-padding-inline; + + &__icons { + display: flex; + align-items: center; + } + + &__logo { + display: flex; + + @include on-tablet{ + width: 87px; + height: 65px; + } + } +} + +.menu { + height: 100vh; + + box-sizing: border-box; + + background-color: #d12d35; + + font-weight: 700; + text-transform: uppercase; + color: #fff; + + overflow: auto; + + &__top { + padding-bottom: 40px; + } + + &__content { + @include content-padding-inline; + } +} + +.phone { + &__list { + margin: 0; + padding: 0; + } + + &__item { + margin-bottom: 8px; + list-style: none; + } + + &__link { + color: #fff; + text-decoration: none; + } +} + +.phone-icon__menu { + position: absolute; + right: 48px; + display: none; + width: 201px; + + text-align: right; +} + + +.call-to-order { + margin-top: 16px; + border-bottom: 1px solid #fff; + + width: fit-content; + + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; +} + + + + + diff --git a/src/styles/blocks/mixins.scss b/src/styles/blocks/mixins.scss new file mode 100644 index 0000000..77df583 --- /dev/null +++ b/src/styles/blocks/mixins.scss @@ -0,0 +1,77 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width){ + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width){ + @content; + } +} + +@mixin page-grid { + display: grid; + + $columns: 2; + + grid-template-columns: repeat($columns, 1fr); + column-gap: 20px; + + @include on-tablet { + $columns: 6; + + grid-template-columns: repeat($columns, 1fr); + column-gap: 24px; + } + + @include on-desktop { + $columns: 12; + + grid-template-columns: repeat($columns, 1fr); + column-gap: 24px; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 72px; + } + + @include on-desktop { + margin-inline: auto; + max-width: 1020px; + padding-inline: 120px; + } +} + + +@mixin space-between-centered-content { + display: flex; + justify-content: space-between; + align-items: center; +} + + +@mixin h3-properties { + font-size: 24px; + font-weight: 700; +} + +@mixin hover($property, $toValue) { + transition: $property 0.35s; + + &:hover { + cursor: default; + #{$property}: $toValue; + } +} + + + + + + + diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000..7b16ae4 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,26 @@ +.nav { + &__list { + margin: 0; + padding: 0; + + list-style: none; + } + + &__item { + padding-bottom: 32px; + } + + &__link { + color: #fff; + text-decoration: none; + font-size: 22px; + line-height: 22px; + letter-spacing: 2px; + + position: relative; + display: inline-block; + padding-bottom: 7px; + } +} + + diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000..a9df433 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,40 @@ +* { + margin: 0; +} + +a { + text-decoration: none; +} + +.page { + box-sizing: border-box; + + font-family: Cinzel, serif; + font-size: 16px; + line-height: 27px; + color: $text-color-general; + + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transition: 0.35s; + opacity: 0; + pointer-events: none; + + &:target { + transition: 0.35s; + opacity: 1; + pointer-events: all; + } + } +} + diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss new file mode 100644 index 0000000..6c7f046 --- /dev/null +++ b/src/styles/blocks/variables.scss @@ -0,0 +1,4 @@ +$red-text-color: #d12d35; +$text-color-general: #161616; +$tablet-min-width: 576px; +$desktop-min-width: 1024px; diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1..c72978c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,10 @@ -body { - margin: 0; -} +@import 'blocks/variables'; +@import 'blocks/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/icon'; +@import 'blocks/mainBlocks/main'; +@import 'blocks/footer'; +