diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index afee6c841..d6d2ec480 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum_2/). + [DEMO LINK](https://Vl-Tsr.github.io/Museum_2/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/event/austrelia.png b/src/images/event/austrelia.png new file mode 100644 index 000000000..a4a92b7bd Binary files /dev/null and b/src/images/event/austrelia.png differ diff --git a/src/images/event/gudimov.png b/src/images/event/gudimov.png new file mode 100644 index 000000000..c39841dfb Binary files /dev/null and b/src/images/event/gudimov.png differ diff --git a/src/images/exhibition/angel-large.png b/src/images/exhibition/angel-large.png new file mode 100644 index 000000000..6b5498580 Binary files /dev/null and b/src/images/exhibition/angel-large.png differ diff --git a/src/images/exhibition/angel-small.png b/src/images/exhibition/angel-small.png new file mode 100644 index 000000000..071fa2a8c Binary files /dev/null and b/src/images/exhibition/angel-small.png differ diff --git a/src/images/exhibition/xx-xxi-large.png b/src/images/exhibition/xx-xxi-large.png new file mode 100644 index 000000000..0b61001f5 Binary files /dev/null and b/src/images/exhibition/xx-xxi-large.png differ diff --git a/src/images/exhibition/xx-xxi-small.png b/src/images/exhibition/xx-xxi-small.png new file mode 100644 index 000000000..6e887a2be Binary files /dev/null and b/src/images/exhibition/xx-xxi-small.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..6b3e3ea41 Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icon/arrow-up.svg b/src/images/icon/arrow-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icon/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/arrow.svg b/src/images/icon/arrow.svg new file mode 100644 index 000000000..fa069d596 --- /dev/null +++ b/src/images/icon/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/burger-menu.svg b/src/images/icon/burger-menu.svg new file mode 100644 index 000000000..c86f620af --- /dev/null +++ b/src/images/icon/burger-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/close-menu.svg b/src/images/icon/close-menu.svg new file mode 100644 index 000000000..688f77828 --- /dev/null +++ b/src/images/icon/close-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/instagram.svg b/src/images/icon/instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/icon/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/namu-ico.jpg b/src/images/icon/namu-ico.jpg new file mode 100644 index 000000000..44dd70ef7 Binary files /dev/null and b/src/images/icon/namu-ico.jpg differ diff --git a/src/images/icon/telegram.svg b/src/images/icon/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icon/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/twitter.svg b/src/images/icon/twitter.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/images/icon/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu-bg.png b/src/images/menu-bg.png new file mode 100644 index 000000000..70cb1e76c Binary files /dev/null and b/src/images/menu-bg.png differ diff --git a/src/images/namu-logo.svg b/src/images/namu-logo.svg new file mode 100644 index 000000000..dfb7a77ee --- /dev/null +++ b/src/images/namu-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/news/books.png b/src/images/news/books.png new file mode 100644 index 000000000..83b42f51e Binary files /dev/null and b/src/images/news/books.png differ diff --git a/src/images/news/cat.png b/src/images/news/cat.png new file mode 100644 index 000000000..3c2a137f7 Binary files /dev/null and b/src/images/news/cat.png differ diff --git a/src/images/visit-bg.png b/src/images/visit-bg.png new file mode 100644 index 000000000..073b86ff0 Binary files /dev/null and b/src/images/visit-bg.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..34d427f9a 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,607 @@ + - + - Title + NAMU + + + + + + + - -

Hello Mate Academy

- + + + + +
+
+
+
+ + + + +
+ + +
+
+ +
+

10 серпня - 10 листопада

+

Мистецтво ХІХ - ХХ ст.

+

+ Внесок українських митців у світову культуру 19-20 ст. +

+ + Купити квиток + +

10.08 - 10.10

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

+ Актуальні виставки +

+ +
+
+ +
+ +

11.07 - 22.09

+

Кураторська виставка “Ангели”

+

+ Виставковий проект «Ангели» – знакова подія для української + культури і водночас наймасштабніший... +

+ + Купити квиток + +
+ +
+
+ +
+

Діє постійно

+

Мистецтво ХХ ст. — XXI ст.

+

+ Знакові роботи Алли Горської, Миколи Самокиша, Федора + Кричевського та інших митців. +

+ + Купити квиток + +
+ + + Архів виставок + +
+
+
+ + + + +
+
+
+

+ Найближчі події +

+ + + +
+ + pavlo gudimov + + +
+

14.08 о 13:00

+

+ Кураторські екскурсії від Павла Гудімова +

+

+ Таємниці підготовки, історії експонатів, магія дійства до і в + момент вашої присутності – розгортатиметься... +

+ + Зареєструватись + +
+
+ +
+ + austrelia + + +
+

16.08 о 13:00

+

+ Майстер-клас “Подорож до Австралії” +

+

+ Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт + кругосвітньої подорожі - Австралія. +

+ + Зареєструватись + +
+
+ + + + + Календар подій + +
+
+
+ + + +
+
+
+

+ Сплануйте +
+ візит до музею +

+

+ Оберіть зручний день, зареєструйтесь на події, що цікавлять, + купіть квиток заздалегідь, щоб ніщо не завадило вам + насолоджуватись мистецтвом. +

+ + Почати + +
+
+
+ + + +
+
+
+

+ Новини +

+ +
+ + # + + +

9 серпня 2019

+

Оголошення переможця

+

+ Друзі, сьогодні п'ятниця! А це означає, що час оголосити + переможця розіграшу... +

+
+ +
+ + # + + +

9 серпня 2019

+

Міжнародний день котів

+

+ Музей з левами не може просто так взяти і пропустити Міжнародний + день котів! +

+
+ + + Усі новини + +
+
+
+ + + + + + +
+ + + + + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 33c3ed2b3..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1 +0,0 @@ -// put fonts here 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/article-title.scss b/src/styles/blocks/article-title.scss new file mode 100644 index 000000000..89596427e --- /dev/null +++ b/src/styles/blocks/article-title.scss @@ -0,0 +1,15 @@ +.article-title { + color: $black; + + font-size: 20px; + line-height: 24px; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } +} + + + + diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..ae81624df --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,87 @@ +.button { + display: block; + font-weight: 600; + line-height: 1; + text-align: center; + transition: 0.3s; + + &--clr--main { + color: $white; + background-color: $main; + padding-block: 23px; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + &:disabled { + background-color: #dd836f; + } + + &--disabled { + background-color: #dd836f; + pointer-events: none; + } + } + + &--transparent { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + color: $main; + border: 1px solid $main; + padding-block: 19px; + align-self: start; + + &::after { + content: ''; + width: 20px; + height: 20px; + mask-image: url(/src/images/icon/arrow.svg); + background-color: $main; + transition: 0.3s; + } + + &:hover { + color: #af3419; + border-color: #af3419; + + &::after { + background-color: #af3419; + } + } + + &:active { + color: #ea340d; + border-color: #ea340d; + + &::after { + background-color: #ea340d; + } + } + + &:disabled { + color: #dd836f; + border-color: #dd836f; + + &::after { + background-color: #dd836f; + } + } + + &--disabled { + color: #dd836f; + border-color: #dd836f; + pointer-events: none; + + &::after { + background-color: #dd836f; + } + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..fb0c09b18 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,22 @@ +.contacts { + &__address { + color: $white; + } + + &__phones { + display: flex; + } + + &__email { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__media { + display: flex; + gap: 20px; + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..848d29ec9 --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,96 @@ +.event { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 12; + } + + @include page-grid; + + &--gudimov { + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 70px; + } + + @include on-desktop { + margin-bottom: 60px; + } + } + + &--austrelia { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__link { + position: relative; + margin-bottom: 20px; + grid-column: span 2; + padding-bottom: 127%; + overflow: hidden; + + @include on-tablet { + margin-bottom: 0; + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 4; + } + } + &__image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + transition: 0.3s; + + &:hover { + transform: scale(1.05); + } + } + + &__info { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__period { + font-size: 16px; + line-height: 24px; + color: $main; + margin-bottom: 10px; + } + + &__discription { + font-size: 16px; + line-height: 24px; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__registration { + @include on-desktop { + width: calc(50% - ($grid-large-gap / 2)); + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..f122ec645 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,39 @@ +.events { + &__content { + @include page-grid; + + padding-bottom: 90px; + + @include on-tablet { + padding-bottom: 100px; + } + + @include on-desktop { + padding-bottom: 110px; + } + } + + &__title { + grid-row: 1 / 2; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 9; + } + } + + &__calendar { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + grid-row: 1 / 2; + } + } +} + + diff --git a/src/styles/blocks/exhibition.scss b/src/styles/blocks/exhibition.scss new file mode 100644 index 000000000..3eeba7a7f --- /dev/null +++ b/src/styles/blocks/exhibition.scss @@ -0,0 +1,98 @@ +.exhibition { + &--angel { + padding-bottom: 60px; + grid-column: span 2; + + @include on-tablet { + padding-bottom: 0; + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &--xx-xxi { + grid-column: span 2; + padding-bottom: 30px; + + @include on-tablet { + grid-column: span 3; + padding-bottom: 0; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__link-wrapper { + position: relative; + padding-bottom: 127%; + margin-bottom: 20px; + overflow: hidden; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 20px; + padding-bottom: 84%; + } + } + + &__link { + position: absolute; + width: 100%; + height: 100%; + background-size: cover; + transition: 0.3s; + + &--bg-angel { + background-image: url(/src/images/exhibition/angel-small.png); + + @include on-desktop { + background-image: url(/src/images/exhibition/angel-large.png); + } + } + + &--xx-xxi { + background-image: url(/src/images/exhibition/xx-xxi-small.png); + + @include on-desktop { + background-image: url(/src/images/exhibition/xx-xxi-large.png); + } + } + + &:hover { + transform: scale(1.05); + } + } + + &__period { + color: $main; + font-size: 16px; + line-height: 24px; + margin-bottom: 10px; + } + + &__description { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + + &__buy { + @include on-desktop { + width: calc(50% - ($grid-large-gap / 2)); + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..5b029be48 --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,44 @@ +.exhibitions { + &__content { + @include page-grid; + + padding-bottom: 120px; + + @include on-tablet { + padding-bottom: 160px; + } + + @include on-desktop { + padding-bottom: 200px; + } + } + + &__title { + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + grid-row: 1 / 2; + } + + @include on-desktop { + grid-column: span 9; + } + } + + &__archive { + grid-column: span 2; + + @include on-tablet { + grid-row: 1 / 2; + } + + @include on-desktop { + grid-column: span 3; + } + } +} + +/////////////////////////////////////////////////////////////////////// + +/////////////////////////////////////////////////////////////////////// diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..20f24e1fc --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,107 @@ +.footer { + background-color: $background; + color: $white; + font-size: 16px; + line-height: 24px; + position: sticky; + z-index: -1; + + &__content { + @include page-grid; + + row-gap: 50px; + padding-block: 34px 30px; + + @include on-tablet { + padding-block: 50px 30px; + } + + @include on-desktop { + row-gap: 60px; + } + } + + &__contacts { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + + &__schedule { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + + &__nav { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + + &__copyright { + display: flex; + align-items: center; + justify-content: space-between; + + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 12; + } + } + + &__title { + margin-bottom: 10px; + font-size: 18px; + line-height: 27px; + + @include on-tablet { + margin-bottom: 30px; + font-size: 20px; + line-height: 30px; + } + } + + &__link-up { + font-family: 'Playfair Display', 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 700; + } + + &__privacy { + display: flex; + gap: 22px; + + @include on-desktop { + gap: 102px; + } + } + + & a { + transition: 0.3s; + color: inherit; + + &:visited { + color: inherit; + } + + &:hover { + color: inherit; + opacity: 0.5; + } + } + + + + +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..57e4940ce --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,123 @@ +.header { + background-color: $background; + min-height: 747px; + + color: $white; + overflow: auto; + + background-image: url(/src/images/header-bg.png); + background-repeat: no-repeat; + background-size: auto 37%; + background-position: center bottom; + + @include on-tablet { + background-size: auto 45%; + min-height: 1092px; + } + + @include on-desktop { + background-position: right bottom; + background-size: auto 83%; + min-height: 800px; + } + + &__bottom { + @include page-grid; + + padding-block: 50px; + + @include on-tablet { + padding-block: 100px 50px; + } + + @include on-desktop { + padding-block: 90px 50px; + } + } + + &__period { + font-size: 14px; + line-height: 20px; + margin-bottom: 10px; + + grid-row: 1 / 2; + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + } + + &__title { + font-size: 48px; + line-height: 1; + margin-bottom: 30px; + grid-row: 2 / 3; + grid-column: span 2; + + @include on-tablet { + font-size: 72px; + margin-bottom: 20px; + grid-column: span 5; + } + + @include on-desktop { + font-size: 96px; + margin-bottom: 30px; + grid-column: span 6; + } + } + + &__description { + margin-bottom: 40px; + grid-row: 3 / 4; + grid-column: span 2; + + @include on-tablet { + margin-bottom: 50px; + grid-column: span 3; + } + + @include on-desktop { + margin-bottom: 80px; + grid-column: span 6; + } + } + + &__button { + grid-row: 4 / 5; + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + margin-bottom: 135px; + } + } + + &__period-decor { + display: none; + font-family: 'Playfair Display', 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 17.5px; + + @include on-desktop { + display: flex; + gap: 20px; + align-items: center; + grid-row: 5 / 6; + grid-column: span 6; + } + + + &::after { + content: ''; + flex-grow: 1; + height: 1px; + background-color: $white; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..279458fd1 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,44 @@ +.icon { + display: block; + background-size: cover; + + @include hover(transform, scale(1.2)); + + &--large { + height: 30px; + width: 30px; + } + + &--small { + height: 20px; + width: 20px; + } + + &--menu { + background-image: url(/src/images/icon/burger-menu.svg); + } + + &--close { + background-image: url(/src/images/icon/close-menu.svg); + } + + &--facebook { + background-image: url(/src/images/icon/facebook.svg); + } + + &--twitter { + background-image: url(/src/images/icon/twitter.svg); + } + + &--telegram { + background-image: url(/src/images/icon/telegram.svg); + } + + &--instagram { + background-image: url(/src/images/icon/instagram.svg); + } + + &--arrow-up { + background-image: url(/src/images/icon/arrow-up.svg); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..4521f372d --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,11 @@ +.main { + padding-block: 90px 80px; + + @include on-tablet { + padding-block: 105px 128px; + } + + @include on-desktop { + padding-block: 110px 200px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..8723eeadc --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,144 @@ +.menu { + background-color: $background; + min-height: 747px; + color: $white; + z-index: 1; + overflow: auto; /* to scroll the menu if needed */ + + @include on-tablet { + background-image: url(/src/images/menu-bg.png); + background-repeat: no-repeat; + background-size: auto 45%; + background-position: center bottom; + min-height: 1092px; + } + + @include on-desktop { + background-position: right bottom; + background-size: auto 83%; + min-height: 100vh; + } + + &__top { + position: sticky; + top: 0; + background-color: $background; + z-index: 2; + } + + &__bottom { + @include page-grid; + + padding-top: 10px; + + @include on-tablet { + padding-top: 30px; + } + + @include on-desktop { + padding-top: 14px; + padding-bottom: 108px; + } + } + + &__hours { + grid-column: span 2; + margin-bottom: 20px; + grid-row: 1 / 2; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 70px; + grid-row: 1 / 2; + } + } + + &__address { + grid-column: span 2; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + grid-column: span 3; + } + + @include on-desktop { + margin-bottom: 70px; + grid-row: 1 / 2; + } + } + + &__text { + font-size: 14px; + line-height: 20px; + } + + &__description { + color: inherit; + font-weight: 600; + + + &--pointer { + transition: 0.3s; + + + &:hover { + opacity: 0.5; + } + } + + } + + &__nav { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-row: 2 / 3; + } + } + + &__list { + font-size: 20px; + line-height: 30px; + gap: 20px; + padding-bottom: 40px; + border-bottom: 1px solid $white; + margin-bottom: 40px; + font-family: 'Playfair Display', 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 700; + + @include on-tablet { + gap: 30px; + padding-bottom: 50px; + margin-bottom: 50px; + font-size: 48px; + line-height: 58px; + } + + @include on-desktop { + gap: 60px; + padding-bottom: 60px; + margin-bottom: 60px; + } + } + + &__button { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-row: 3 / 4; + } + } +} + diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..35a03dce0 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,29 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + overflow: hidden; + } + + &__link { + color: inherit; + position: relative; + width: fit-content; + + &::before { + content: ''; + width: 100%; + position: absolute; + height: 1px; + background-color: $white; + bottom: 3px; + transition: 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::before { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/new.scss b/src/styles/blocks/new.scss new file mode 100644 index 000000000..445d012c6 --- /dev/null +++ b/src/styles/blocks/new.scss @@ -0,0 +1,59 @@ +.new { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + &--winner { + margin-bottom: 50px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &--cats { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__link { + position: relative; + margin-bottom: 20px; + padding-bottom: 100%; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 20px; + padding-bottom: 65%; + } + } + + &__image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__date { + line-height: 20px; + color: $black; + } + + &__description { + font-size: 16px; + line-height: 24px; + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..46b10f337 --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,105 @@ +.news { + &__content { + @include page-grid; + + padding-block: 90px 120px; + } + + @include on-tablet { + padding-block: 125px 160px; + } + + @include on-desktop { + padding-block: 110px 200px; + } + + &__title { + grid-column: span 2; + grid-row: 1 / 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 9; + } + } + + &__link { + grid-column: span 2; + + @include on-tablet { + grid-row: 1 / 2; + } + + @include on-desktop { + grid-column: span 3; + } + } +} + +.new { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + &--winner { + margin-bottom: 50px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &--cats { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__link { + position: relative; + margin-bottom: 20px; + padding-bottom: 100%; + overflow: hidden; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 20px; + padding-bottom: 65%; + } + } + + &__image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + transition: 0.3s; + &:hover { + transform: scale(1.05); + } + } + + &__date { + line-height: 20px; + color: $black; + } + + &__description { + font-size: 16px; + line-height: 24px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..1cb25288f --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,74 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Playfair Display', 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 700; +} + +a { + display: block; +} + +.page { + scroll-behavior: smooth; + + font-size: 16px; + font-weight: 400; + line-height: 24px; + font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif; + color: $gray; + + &__body { + background-color: $white; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + transform: translateX(-100%); + transition: 0.3s; + overflow: auto; + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + } + + &__section-title { + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 75px; + } + + @include on-desktop { + margin-bottom: 70px; + } + } + + &__article-title { + margin-bottom: 20px; + } +} + +.container { + @include content-padding-inline; + + max-width: 1440px; + margin-inline: auto; +} + +// .page:has(.page__menu:target) { +// overflow: hidden; /* not to scroll the page */ +// } diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..ad57a57e1 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,18 @@ +.section-title { + color: $black; + font-size: 28px; + line-height: 35px; + + + @include on-tablet { + font-size: 40px; + line-height: 30px; + + } + + @include on-desktop { + font-size: 48px; + line-height: 58px; + + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..7baaeda72 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,125 @@ +.subscribe { + &__content { + @include page-grid; + } + + &__title { + padding-bottom: 0; + line-height: 35px; + grid-column: span 2; + grid-row: 1 / 2; + margin-bottom: 20px; + + @include on-tablet { + grid-column: span 5; + line-height: 50px; + } + + @include on-desktop { + line-height: 58px; + margin-bottom: 50px; + } + } + + &__description { + font-size: 16px; + line-height: 24px; + grid-column: span 2; + margin-bottom: 50px; + + @include on-tablet { + grid-column: span 5; + } + + @include on-desktop { + grid-column: 7 / 13; + grid-row: 1 /2; + } + } + + &__form { + grid-column: 1 / -1; + + @include page-grid; + } + + &__email { + font-size: 16px; + line-height: 24px; + font-weight: 700; + grid-row: 1 / 2; + grid-column: span 2; + background-color: inherit; + padding-bottom: 2px; + border-bottom: 1px solid $black; + margin-bottom: 30px; + transition: 0.3s; + + &::placeholder { + font-weight: 400; + transition: 0.3s; + } + + &:hover { + border-color: $main; + color: $main; + + &::placeholder { + color: $main; + } + } + + &:active { + border-color: $main; + color: $main; + + &::placeholder { + color: $main; + } + } + + &:focus { + border-color: $main; + color: $main; + + &::placeholder { + color: $main; + } + } + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 5; + margin-bottom: 40px; + } + + &:-webkit-autofill { + color: $black; + -webkit-box-shadow: 1px 1px 1px 100vh $white inset; + + } + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-text-fill-color: $main; + -webkit-box-shadow: 1px 1px 1px 100vh $white inset; + + } + + } + + &__submit { + grid-row: 2 / 3; + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + } +} + + + diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..34091aa64 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,62 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 20px; + + @include on-desktop { + padding-block: 26px; + } + + &__logo-link { + @include hover( transform, scale(1.2)); + + + } + + &__logo { + height: 37px; + } + + &__icons { + display: flex; + gap: 40px; + + &--mob--reverse { + flex-direction: row-reverse; + + @include on-tablet { + flex-direction: row; + } + } + + } + + + &__language { + background-color: inherit; + color: inherit; + font-size: inherit; + + @include hover( transform, scale(1.2)); + + cursor: pointer; + + &:focus { + background-color: $background; + } + + &--mob--hide { + display: none; + + @include on-tablet { + display: block; + } + } + + + + } +} + + diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..4db123ab1 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,78 @@ +.visit { + background-color: $background; + + @include on-desktop{ + background-image: url(/src/images/visit-bg.png); + background-position: left bottom; + background-size: auto 100% ; + background-repeat: no-repeat; + + } + + + +&__content { + @include page-grid; + + color: $white; + padding-block: 50px; + + @include on-tablet { + padding-block: 80px; + } + + @include on-desktop { + padding-block: 205px; + } +} + + +&__title { + grid-column: 1 / -1; + font-size: 38px; + line-height: 1; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 5; + font-size: 62px; + + } + + @include on-desktop { + font-size: 80px; + + // margin-bottom: 10px; + grid-column: 6 / 13; + } +} + +&__text { + font-size: 16px; + line-height: 24px; + margin-bottom: 40px; + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 60px; + grid-column: 1 / 5; + + } + + @include on-desktop { + margin-bottom: 50px; + grid-column: 6 / 11; + } +} +&__begin { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 6 / 9; + } +} +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..41b2f822c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,29 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import './utils/reset'; +@import './utils/vars'; +@import './utils/mixins'; +@import './blocks/page'; +@import './blocks/section-title'; +@import './blocks/article-title'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/icon'; +@import './blocks/button'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/main'; +@import './blocks/exhibitions'; +@import './blocks/exhibition'; +@import './blocks/events'; +@import './blocks/event'; +@import './blocks/visit'; +@import './blocks/news'; +@import './blocks/new'; +@import './blocks/subscribe'; +@import './blocks/footer'; +@import './blocks/contacts'; + + + + + -body { - background: $c-gray; -} 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..8872ae445 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,52 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + + +@mixin page-grid { + display: grid; + grid-template-columns: repeat($grid-mobile, 1fr); + column-gap: $grid-small-gap; + + @include on-tablet { + grid-template-columns: repeat($grid-tablet, 1fr); + column-gap: $grid-large-gap; + } + + @include on-desktop { + grid-template-columns: repeat($grid-desktop, 1fr); + } +} + + + + + diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 000000000..7b477b887 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,91 @@ +* { + padding: 0; + margin: 0; + border: 0; +} + +*, +*::before, +*::after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +:focus, +:active { + outline: none; +} + +a { + text-decoration: none; +} + +a:focus, +a:active { + outline: none; +} + +nav, +footer, +header, +aside { + display: block; +} + +html, +body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +input, +button, +textarea { + font-family: inherit; +} + +input::-ms-clear { + display: none; +} + +button { + cursor: pointer; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + + +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: 400; +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 000000000..8dde70262 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,19 @@ +$c-gray: #eee; +$main: rgba(205, 77, 49, 1); +$white: rgba(241, 245, 244, 1); +$background: rgba(63, 82, 82, 1); +$black: rgba(28, 27, 41, 1); +$gray: rgba(80, 79, 94, 1); +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$effect-duration: 0.3s; +$grid-mobile: 2; +$grid-tablet: 6; +$grid-desktop: 12; +$grid-small-gap: 20px; +$grid-large-gap: 30px; + +// Desktop 1024px Tablet 640px 576px + + +