diff --git a/README.md b/README.md index 5f9e97051..8613768cc 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ +[DEMO LINK](https://ikseloi.github.io/Museum/). + # Museum landing page -Implement landing page according to [Figma design](https://www.figma.com/file/cRBCqE06cDrY3s4jX7h3iY/%D0%9D%D0%90%D0%9C%D0%A3-(Edit)?node-id=0%3A1) - Use BEM and SCSS + +Implement landing page according to [Figma design]() - Use BEM and SCSS Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans?query=ibm), [Montserrat](https://fonts.google.com/specimen/Montserrat?query=mon) @@ -20,36 +23,16 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 1. Don’t forget to add a title for the whole web page (it could be the name of your landing) 2. A landing page is implemented strictly according to the design in Figma -4. Links in the header and footer menus should lead to the corresponding blocks of the landing page -5. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) -6. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number -7. Make sure everything looks neat on mobile and without horizontal scrolling -8. Add favicon -9. Add a smooth scroll for the whole page -10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded -11. The form shouldn’t submit empty -12. The buttons "exhibitions" and "tickets" should lead to the block with current events -13. The button "about us" should lead to the email digest -14. Facebook and Instagram icons in the footer should be clickable and open the museum's social networks in a new tab -15. Pictures in the gallery and exhibitions sections should increase on hover -16. OPTIONAL: After everything is done, you can add a slider for viewing pictures in the gallery (for mobile version) - - -## Github flow -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. +3. Links in the header and footer menus should lead to the corresponding blocks of the landing page +4. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) +5. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number +6. Make sure everything looks neat on mobile and without horizontal scrolling +7. Add favicon +8. Add a smooth scroll for the whole page +9. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded +10. The form shouldn’t submit empty +11. The buttons "exhibitions" and "tickets" should lead to the block with current events +12. The button "about us" should lead to the email digest +13. Facebook and Instagram icons in the footer should be clickable and open the museum's social networks in a new tab +14. Pictures in the gallery and exhibitions sections should increase on hover +15. OPTIONAL: After everything is done, you can add a slider for viewing pictures in the gallery (for mobile version) diff --git a/index.html b/index.html index d339e6856..9426a095b 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,539 @@ - + - Title + Художній музей + + - -

Hello Mate Academy

- + +
+
+
+ + + +
+
+
+ + + +
+
+
+ Національний художній музей України + +

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

+ + + події + + + + + КВИТКИ + + +
+
+ +
+
+

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

+
+ Напівпустельний морський пейзаж, каменисте узбережжя з двома похиленими деревами на передньому плані та блакитна морська затока на тлі гір +
+
+ ВИСТАВКА + +
+

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

+

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

+
+
+
+ Зображено дівчину в українському національному вбранні, яка сидить у саду перед павичем із розгорнутим хвостом +
+
+ ВИСТАВКА + +
+

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

+

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

+
+
+
+ +
+
+
+ ЛЕКЦІЯ + +
+ +

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

+
+ +
+ Живописне полотно у стилі імпресіонізму із зображенням заходу або сходу сонця. Небо залите м'якими пастельними відтінками жовтого, рожевого та помаранчевого кольорів із легкими сизими хмарами. +
+
+
+ +
+
+

+ Галерея +

+ +
+ Традиційне українське вбрання + + Зимовий пейзаж з хатами + + Відпочинок у парку + + Етюд заходу сонця на морі +
+
+ +
+
+ Українська жінка у традиційному вбранні + + Гуси на прогулянці + + Відпочинок у парку + + Відпочинок поблизу моря +
+ +
+ + + + +
+
+
+ + +
+ + + + diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-300.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-300.woff2 new file mode 100644 index 000000000..c5f555d3c Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-300.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-500.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-500.woff2 new file mode 100644 index 000000000..29584f53c Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-500.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-600.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-600.woff2 new file mode 100644 index 000000000..ddf242780 Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-600.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-700.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-700.woff2 new file mode 100644 index 000000000..b56105de2 Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-700.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-regular.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-regular.woff2 new file mode 100644 index 000000000..6284f6521 Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic-ext_latin-regular.woff2 differ diff --git a/src/fonts/montserrat-v31-cyrillic-ext_latin-700.woff2 b/src/fonts/montserrat-v31-cyrillic-ext_latin-700.woff2 new file mode 100644 index 000000000..d9b415ab8 Binary files /dev/null and b/src/fonts/montserrat-v31-cyrillic-ext_latin-700.woff2 differ diff --git a/src/fonts/montserrat-v31-cyrillic-ext_latin-regular.woff2 b/src/fonts/montserrat-v31-cyrillic-ext_latin-regular.woff2 new file mode 100644 index 000000000..f7a73b574 Binary files /dev/null and b/src/fonts/montserrat-v31-cyrillic-ext_latin-regular.woff2 differ diff --git a/src/images/NA MU.svg b/src/images/NA MU.svg new file mode 100644 index 000000000..07e6290c4 --- /dev/null +++ b/src/images/NA MU.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/_hero-namu.webp b/src/images/_hero-namu.webp new file mode 100644 index 000000000..74fefe96b Binary files /dev/null and b/src/images/_hero-namu.webp differ diff --git a/src/images/favicons/NAMU.svg b/src/images/favicons/NAMU.svg new file mode 100644 index 000000000..9555100a2 --- /dev/null +++ b/src/images/favicons/NAMU.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/g-1.webp b/src/images/g-1.webp new file mode 100644 index 000000000..5e597f5e6 Binary files /dev/null and b/src/images/g-1.webp differ diff --git a/src/images/g-2.webp b/src/images/g-2.webp new file mode 100644 index 000000000..2e1ab3dcc Binary files /dev/null and b/src/images/g-2.webp differ diff --git a/src/images/g-3.webp b/src/images/g-3.webp new file mode 100644 index 000000000..fbf6e37be Binary files /dev/null and b/src/images/g-3.webp differ diff --git a/src/images/g-4.webp b/src/images/g-4.webp new file mode 100644 index 000000000..e968df3f7 Binary files /dev/null and b/src/images/g-4.webp differ diff --git a/src/images/g-5.webp b/src/images/g-5.webp new file mode 100644 index 000000000..bf6d30775 Binary files /dev/null and b/src/images/g-5.webp differ diff --git a/src/images/hero-namu.webp b/src/images/hero-namu.webp new file mode 100644 index 000000000..e98b04c68 Binary files /dev/null and b/src/images/hero-namu.webp differ diff --git a/src/images/icons/burger-menu.svg b/src/images/icons/burger-menu.svg new file mode 100644 index 000000000..473a1f40a --- /dev/null +++ b/src/images/icons/burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/carbon_arrow-up.png b/src/images/icons/carbon_arrow-up.png new file mode 100644 index 000000000..40c29ee42 Binary files /dev/null and b/src/images/icons/carbon_arrow-up.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/chevron.svg b/src/images/icons/chevron.svg new file mode 100644 index 000000000..ad9be9fe3 --- /dev/null +++ b/src/images/icons/chevron.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..7702febec --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..251368179 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..98186ebd2 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..d85f6bd67 --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/img-1.webp b/src/images/img-1.webp new file mode 100644 index 000000000..e975f5d3c Binary files /dev/null and b/src/images/img-1.webp differ diff --git a/src/images/img-2.webp b/src/images/img-2.webp new file mode 100644 index 000000000..8613d8167 Binary files /dev/null and b/src/images/img-2.webp differ diff --git a/src/images/img-3.webp b/src/images/img-3.webp new file mode 100644 index 000000000..6f52d8f4e Binary files /dev/null and b/src/images/img-3.webp differ diff --git a/src/images/img-4.webp b/src/images/img-4.webp new file mode 100644 index 000000000..cd90cc624 Binary files /dev/null and b/src/images/img-4.webp differ diff --git a/src/images/img-5.webp b/src/images/img-5.webp new file mode 100644 index 000000000..e51128a77 Binary files /dev/null and b/src/images/img-5.webp differ diff --git a/src/images/img-6.webp b/src/images/img-6.webp new file mode 100644 index 000000000..ca6c646f1 Binary files /dev/null and b/src/images/img-6.webp differ diff --git a/src/images/img-7.webp b/src/images/img-7.webp new file mode 100644 index 000000000..8e3cc3233 Binary files /dev/null and b/src/images/img-7.webp differ diff --git a/src/images/subscrbe-bg.webp b/src/images/subscrbe-bg.webp new file mode 100644 index 000000000..f2d202458 Binary files /dev/null and b/src/images/subscrbe-bg.webp differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..f0800d0d7 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,33 @@ 'use strict'; + +const track = document.querySelector('.slider__track'); +const dots = document.querySelectorAll('.slider__dot'); +const firstItem = document.querySelector('.slider__item'); + +const updateActiveDot = () => { + const slideWidth = firstItem.offsetWidth + 20; + const currentIndex = Math.round(track.scrollLeft / slideWidth); + + dots.forEach((dot) => dot.classList.remove('slider__dot--active')); + + if (dots[currentIndex]) { + dots[currentIndex].classList.add('slider__dot--active'); + } +}; + +dots.forEach((dot, index) => { + dot.addEventListener('click', (e) => { + e.preventDefault(); + + const slideWidth = firstItem.offsetWidth + 20; + + track.scrollTo({ + left: slideWidth * index, + behavior: 'smooth', + }); + }); +}); + +track.addEventListener('scroll', updateActiveDot); + +updateActiveDot(); 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/abstracts/_index.scss b/src/styles/abstracts/_index.scss new file mode 100644 index 000000000..98fbcaaf6 --- /dev/null +++ b/src/styles/abstracts/_index.scss @@ -0,0 +1,3 @@ +@forward 'variables'; +@forward 'mixins'; +@forward 'animations'; diff --git a/src/styles/abstracts/animations/_index.scss b/src/styles/abstracts/animations/_index.scss new file mode 100644 index 000000000..a46e85d07 --- /dev/null +++ b/src/styles/abstracts/animations/_index.scss @@ -0,0 +1 @@ +@forward 'animations'; diff --git a/src/styles/abstracts/animations/animations.scss b/src/styles/abstracts/animations/animations.scss new file mode 100644 index 000000000..b1c6c425f --- /dev/null +++ b/src/styles/abstracts/animations/animations.scss @@ -0,0 +1,74 @@ +@use '../variables' as *; + +%hover-effect-scale-5-color-secondary { + will-change: transform; + transform: translateZ(0); + transition: + color $transition-duration-normal, + transform $transition-duration-normal; + + &:hover { + transform: scale(1.1); + color: var(--color-secondary); + } +} + +%hover-effect-nav { + &:hover { + text-decoration: underline; + } +} + +%hover-effect-form { + transition: gap $transition-duration-normal; + + &:hover { + gap: 0; + } +} + +%hover-effect-scale-5 { + transition: transform $transition-duration-normal; + + &:hover { + transform: scale(1.05); + } +} + +%hover-effect-scale-20 { + transition: transform $transition-duration-normal; + + &:hover { + transform: scale(1.2); + } +} + +%hover-scale-10-bg-primary { + transition: + background-color $transition-duration-normal, + transform $transition-duration-normal; + + &:hover { + transform: scale(1.25); + background-color: var(--color-primary); + } +} + +%hover-primary-bg-color-white { + transition: + color $transition-duration-normal, + background-color $transition-duration-normal; + + &:hover { + color: $clr-white; + background-color: var(--color-primary); + } +} + +%hover-primary-color { + transition: color $transition-duration-normal; + + &:hover { + color: var(--color-primary); + } +} diff --git a/src/styles/abstracts/mixins/_grid.scss b/src/styles/abstracts/mixins/_grid.scss new file mode 100644 index 000000000..999506a2f --- /dev/null +++ b/src/styles/abstracts/mixins/_grid.scss @@ -0,0 +1,22 @@ +@use '../variables/grid' as *; +@use '../mixins/media' as *; + +@mixin page-grid($cols-phone: 2, $cols-sm: 6, $cols-lg: 12) { + display: grid; + grid-template-columns: repeat($cols-phone, minmax(0, 1fr)); + column-gap: $grid-gutter-sm; + + @if $cols-sm { + @include respond-to('md') { + grid-template-columns: repeat($cols-sm, minmax(0, 1fr)); + column-gap: $grid-gutter-md; // 30px + } + } + + @if $cols-lg { + @include respond-to('lg') { + grid-template-columns: repeat($cols-lg, minmax(0, 1fr)); + column-gap: $grid-gutter-lg; // 30px + } + } +} diff --git a/src/styles/abstracts/mixins/_icons.scss b/src/styles/abstracts/mixins/_icons.scss new file mode 100644 index 000000000..94a13fbdf --- /dev/null +++ b/src/styles/abstracts/mixins/_icons.scss @@ -0,0 +1,6 @@ +@mixin icon-mask($name) { + $path: '../images/icons/#{$name}.svg'; + + -webkit-mask-image: url($path); + mask-image: url($path); +} diff --git a/src/styles/abstracts/mixins/_index.scss b/src/styles/abstracts/mixins/_index.scss new file mode 100644 index 000000000..c136e0559 --- /dev/null +++ b/src/styles/abstracts/mixins/_index.scss @@ -0,0 +1,3 @@ +@forward 'media'; +@forward 'typography'; +@forward 'icons'; diff --git a/src/styles/abstracts/mixins/_media.scss b/src/styles/abstracts/mixins/_media.scss new file mode 100644 index 000000000..f81ff856c --- /dev/null +++ b/src/styles/abstracts/mixins/_media.scss @@ -0,0 +1,13 @@ +@use 'sass:map'; +@use '../variables/media' as *; + +// prettier-ignore +@mixin respond-to($name) { + @if map.has-key($breakpoints, $name) { + @media (min-width: map.get($breakpoints, $name)) { + @content; + } + } @else { + @error 'Unknown breakpoint: #{$name}. Check the name in _variables.scss'; + } +} diff --git a/src/styles/abstracts/mixins/_typography.scss b/src/styles/abstracts/mixins/_typography.scss new file mode 100644 index 000000000..f46c4a387 --- /dev/null +++ b/src/styles/abstracts/mixins/_typography.scss @@ -0,0 +1,41 @@ +@use 'sass:map'; + +@use 'media' as *; +@use '../variables/typography' as *; + +@mixin text-style($style-name) { + @if map.has-key($typography-sm, $style-name) { + $sm: map.get($typography-sm, $style-name); + + font-family: map.get($sm, font); + font-size: map.get($sm, size); + font-weight: map.get($sm, weight); + line-height: map.get($sm, line-height); + + @if map.has-key($typography-md, $style-name) { + $md: map.get($typography-md, $style-name); + + @include respond-to('md') { + font-size: map.get($md, size); + + @if map.has-key($md, line-height) { + line-height: map.get($md, line-height); + } + } + } + + @if map.has-key($typography-lg, $style-name) { + $lg: map.get($typography-lg, $style-name); + + @include respond-to('lg') { + font-size: map.get($lg, size); + + @if map.has-key($lg, line-height) { + line-height: map.get($lg, line-height); + } + } + } + } @else { + @warn "style #{$style-name} not found in vars typography"; + } +} diff --git a/src/styles/abstracts/variables/_animation.scss b/src/styles/abstracts/variables/_animation.scss new file mode 100644 index 000000000..df29baa60 --- /dev/null +++ b/src/styles/abstracts/variables/_animation.scss @@ -0,0 +1,2 @@ +$transition-duration-normal: 0.3s; +$transition-duration-slow: 0.5s; diff --git a/src/styles/abstracts/variables/_color.scss b/src/styles/abstracts/variables/_color.scss new file mode 100644 index 000000000..d4a7aac96 --- /dev/null +++ b/src/styles/abstracts/variables/_color.scss @@ -0,0 +1,24 @@ +$clr-malachite: #1a5a4c; +$clr-malachite-rgb-cannels: 26, 90, 76; +$clr-vermilion: #f14a27; +$clr-white: #fff; +$clr-black: #000; +$clr-dark-ebony: #0f0e08; +$clr-platinum: #e0e0e0; +$clr-slate: #687480; +$clr-charcoal: #4e4e4e; +$clr-shadow: #1a5a4c40; + +:root { + --color-primary: #{$clr-malachite}; + --color-primary-rgb: #{$clr-malachite-rgb-cannels}; + --color-secondary: #{$clr-vermilion}; + --color-bg-main: #{$clr-white}; + --color-bg-accent: #{$clr-dark-ebony}; + --color-bg-overlay: rgba(#{$clr-black}, 0.4); + --color-text-hero: #{$clr-black}; // ("ХУДОЖНІЙ МУЗЕЙ") + --color-text-title: #{$clr-dark-ebony}; // ("АКТУАЛЬНІ ПОДІЇ") + --color-text-muted: #{$clr-slate}; // ВИСТАВКА + --color-text-body: #{$clr-charcoal}; // Для основного тексту описів + --color-text-light: #{$clr-white}; // Для тексту на темному фоні (меню, підписка) +} diff --git a/src/styles/abstracts/variables/_fonts.scss b/src/styles/abstracts/variables/_fonts.scss new file mode 100644 index 000000000..55a3c00ec --- /dev/null +++ b/src/styles/abstracts/variables/_fonts.scss @@ -0,0 +1,69 @@ +/* ibm-plex-sans-300 - cyrillic-ext_latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 300; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic-ext_latin-300.woff2') + format('woff2'); +} + +/* ibm-plex-sans-regular - cyrillic-ext_latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic-ext_latin-regular.woff2') + format('woff2'); +} + +/* ibm-plex-sans-500 - cyrillic-ext_latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic-ext_latin-500.woff2') + format('woff2'); +} + +/* ibm-plex-sans-600 - cyrillic-ext_latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 600; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic-ext_latin-600.woff2') + format('woff2'); +} + +/* ibm-plex-sans-700 - cyrillic-ext_latin */ +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic-ext_latin-700.woff2') + format('woff2'); +} + +/* montserrat-regular - cyrillic-ext_latin */ +@font-face { + font-family: Montserrat; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('../fonts/montserrat-v31-cyrillic-ext_latin-regular.woff2') + format('woff2'); +} + +/* montserrat-700 - cyrillic-ext_latin */ +@font-face { + font-family: Montserrat; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/montserrat-v31-cyrillic-ext_latin-700.woff2') + format('woff2'); +} diff --git a/src/styles/abstracts/variables/_grid.scss b/src/styles/abstracts/variables/_grid.scss new file mode 100644 index 000000000..22886ef68 --- /dev/null +++ b/src/styles/abstracts/variables/_grid.scss @@ -0,0 +1,9 @@ +$max-width-sm: 320px; +$max-width-md: 768px; +$max-width-lg: 1280px; +$grid-gutter-sm: 1.25rem; // 20px / 16 +$grid-gutter-md: 1.88rem; // 30px / 16x +$grid-gutter-lg: 1.88rem; // 30px / 16x +$container-padding-sm: 1.25rem; // 20px / 16 +$container-padding-md: 2.13rem; // 34px / 16 +$container-padding-lg: 3.44rem; // 20px / 16 diff --git a/src/styles/abstracts/variables/_index.scss b/src/styles/abstracts/variables/_index.scss new file mode 100644 index 000000000..d2a2a23b6 --- /dev/null +++ b/src/styles/abstracts/variables/_index.scss @@ -0,0 +1,6 @@ +@forward 'color'; +@forward 'fonts'; +@forward 'media'; +@forward 'typography'; +@forward 'grid'; +@forward 'animation'; diff --git a/src/styles/abstracts/variables/_media.scss b/src/styles/abstracts/variables/_media.scss new file mode 100644 index 000000000..76ba3e058 --- /dev/null +++ b/src/styles/abstracts/variables/_media.scss @@ -0,0 +1,5 @@ +$breakpoints: ( + 'sm': 320px, + 'md': 768px, + 'lg': 1280px, +); diff --git a/src/styles/abstracts/variables/_typography.scss b/src/styles/abstracts/variables/_typography.scss new file mode 100644 index 000000000..df8ee115d --- /dev/null +++ b/src/styles/abstracts/variables/_typography.scss @@ -0,0 +1,89 @@ +@use 'sass:map'; + +$font-headings: Montserrat, sans-serif; +$font-body: 'IBM Plex Sans', sans-serif; +$fw-light: 300; +$fw-regular: 400; +$fw-medium: 500; +$fw-bold: 700; +$font-sizes-sm: ( + // 12px + 'small': 0.75rem, + // 14px + 'additional': 0.88rem, + // 16px + 'main': 1rem, + // 16px + 'button': 1rem, + // 18px + 'accent': 1.13rem, + // 45px + 'h1': 2.81rem, + // 36px + 'h2': 2.25rem, + // 28px + 'h3': 1.75rem, + //14px + 'h4': 0.88rem +); +$typography-sm: ( + 'additional': ( + font: $font-body, + size: map.get($font-sizes-sm, 'additional'), + weight: $fw-regular, + line-height: 1.5, + ), + 'main': ( + font: $font-body, + size: map.get($font-sizes-sm, 'main'), + weight: $fw-light, + line-height: 1.5, + ), + 'button': ( + font: $font-body, + size: map.get($font-sizes-sm, 'button'), + weight: $fw-medium, + line-height: 1.5, + ), + 'h1': ( + font: $font-headings, + size: map.get($font-sizes-sm, 'h1'), + weight: $fw-bold, + line-height: 1, + ), + 'h2': ( + font: $font-headings, + size: map.get($font-sizes-sm, 'h2'), + weight: $fw-bold, + line-height: 1, + ), + 'h3': ( + font: $font-headings, + size: map.get($font-sizes-sm, 'h3'), + weight: $fw-regular, + line-height: 1, + ), + 'h4': ( + font: $font-body, + size: map.get($font-sizes-sm, 'h4'), + weight: $fw-regular, + line-height: 1.5, + ), +); +$typography-md: ( + 'h1': ( + size: 3.38rem, + line-height: 1.2, + ), + 'h2': ( + size: 3rem, + ), + 'h3': ( + size: 2.25rem, + ), +); +$typography-lg: ( + 'h1': ( + size: 4.5rem, + ), +); diff --git a/src/styles/base/_index.scss b/src/styles/base/_index.scss new file mode 100644 index 000000000..aed2f54a1 --- /dev/null +++ b/src/styles/base/_index.scss @@ -0,0 +1,4 @@ +@forward 'reset'; +@forward 'typography'; +@forward 'page'; +@forward 'main'; diff --git a/src/styles/base/_main.scss b/src/styles/base/_main.scss new file mode 100644 index 000000000..c8989cf4c --- /dev/null +++ b/src/styles/base/_main.scss @@ -0,0 +1,11 @@ +@use '../abstracts' as *; + +.main { + // --padding-block: 70px 0px; + + // padding-block: var(--padding-block); + + // @include respond-to('md') { + // padding-block: var(--padding-block); + // } +} diff --git a/src/styles/base/_page.scss b/src/styles/base/_page.scss new file mode 100644 index 000000000..974368117 --- /dev/null +++ b/src/styles/base/_page.scss @@ -0,0 +1,133 @@ +@use 'sass:map'; +@use '../abstracts' as *; + +.page { + --display-schedule-note-wrapper: grid; + --column-menu: 1/3; + --column-schelude: 1/3; + --column-schedule-list-title: 1/3; + --column-schedule-list: 1/3; + --column-note-wrapper: 1/3; + --column-gap-nav-list: 28px; + --row-gap-menu-nav-list: 20px; + --row-gap-nav-list: 24px; + --padding-inline-menu-container: #{$container-padding-sm}; + --padding-block-menu-container: 27px; + --padding-block-title: 24px 20px; + --padding-block-schedule-note-info: 16px 0; + --font-size-menu: #{map.get($font-sizes-sm, button)}; + + scroll-behavior: smooth; + scrollbar-gutter: stable; + + &__menu-wrapper { + transform: translateX(100%); + background-color: $clr-malachite; + transition: transform $transition-duration-normal; + } + + &__menu-overlay { + pointer-events: none; + + position: fixed; + z-index: 20; + inset: 0; + + font-size: map.get($font-sizes-sm, additional); + font-weight: $fw-regular; + color: $clr-white; + + opacity: 0; + background-color: rgba(#000, 0.5); + + transition: opacity $transition-duration-slow; + + &:target { + pointer-events: all; + opacity: 1; + + .page__menu-wrapper { + transform: translateX(0); + } + } + } + + &__menu-container { + max-width: 1280px; + margin-inline: auto; + padding-block: var(--padding-block-menu-container); + padding-inline: var(--padding-inline-menu-container); + } + + &__menu { + grid-column: var(--column-menu); + } + + &__menu-nav-list { + gap: var(--row-gap-nav-list) var(--column-gap-nav-list); + } + + &__nav { + font-size: var(--font-size-menu); + } + + &__schedule { + display: grid; + grid-column: var(--column-schelude); + grid-template-columns: repeat(2, minmax(0, 1fr)); + column-gap: 15px; + + &-title { + grid-column: var(--column-schedule-list-title); + padding-block: var(--padding-block-title); + } + + &-list { + grid-column: var(--column-schedule-list); + width: 170px; + } + + &-note-info { + display: var(--display-schedule-note-wrapper); + grid-column: var(--column-note-wrapper); + grid-template-columns: subgrid; + + width: 144px; + padding-block: var(--padding-block-schedule-note-info); + } + + &-note { + grid-column: var(--column-note-wrapper); + } + } + + &:has(.page__menu-overlay:target) { + .page__body { + overflow: hidden; + } + } + + @include respond-to('md') { + --padding-inline-menu-container: #{$container-padding-md} 0; + --padding-block-menu-container: 39px; + --padding-block-title: 0px 20px; + --padding-block-schedule-note-info: 0; + --display-schedule-note-wrapper: block; + --column-menu: 1/4; + --column-schelude: 4/7; + --column-gap-nav-list: 20px; + --column-schedule-list: 1/2; + --column-note-wrapper: 2/3; + } + + @include respond-to('lg') { + --padding-inline-menu-container: #{$container-padding-lg} 0; + --padding-block-menu-container: 40px; + --font-size-menu: 22px; + --column-menu: 1/7; + --column-schelude: 8/13; + --column-gap-nav-list: 65px; + --column-schedule-list: 1/2; + --column-note-wrapper: 2/3; + } +} diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss new file mode 100644 index 000000000..3addd5e27 --- /dev/null +++ b/src/styles/base/_reset.scss @@ -0,0 +1,211 @@ +html { + box-sizing: border-box; + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; +} + +main { + display: block; +} + +h1 { + margin: 0.67em 0; + font-size: 2em; +} + +hr { + overflow: visible; + box-sizing: content-box; + height: 0; +} + +pre { + font-family: monospace; + font-size: 1em; +} + +a { + color: inherit; + text-decoration: none; + background-color: transparent; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp { + font-family: monospace; + font-size: 1em; +} + +small { + font-size: 80%; +} + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +img { + display: block; + max-width: 100%; + border-style: none; +} + +button, +input, +optgroup, +select, +textarea { + margin: 0; + font-family: inherit; + font-size: 100%; + line-height: 1.15; +} + +button, +input { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +[type='button'], +[type='reset'], +[type='submit'] { + cursor: pointer; + -webkit-appearance: button; + appearance: button; +} + +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; +} + +fieldset { + padding: 0.35em 0.75em 0.63em; +} + +legend { + display: table; + + box-sizing: border-box; + max-width: 100%; + padding: 0; + + color: inherit; + white-space: normal; +} + +progress { + vertical-align: baseline; +} + +textarea { + overflow: auto; +} + +[type='checkbox'], +[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} + +[type='search'] { + -webkit-appearance: textfield; + appearance: textfield; + outline-offset: -2px; +} + +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +template { + display: none; +} + +[hidden] { + display: none; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +p { + margin: 0; +} + +button { + margin: 0; + padding: 0; + border: none; + + font: inherit; + line-height: 1; + color: inherit; + + appearance: none; + background: transparent; +} diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss new file mode 100644 index 000000000..6e640e9b8 --- /dev/null +++ b/src/styles/base/_typography.scss @@ -0,0 +1,51 @@ +@use '../abstracts' as *; + +body { + @include text-style('main'); + + color: var(--color-text-body); +} + +h1 { + @include text-style('h1'); +} + +h2 { + @include text-style('h2'); + + color: var(--color-text-title); +} + +h3 { + @include text-style('h3'); +} + +h4 { + @include text-style('h4'); +} + +h1, +h2, +h3, +h4 { + margin: 0; +} + +button, +input[type='submit'], +input[type='reset'], +input[type='button'] { + @include text-style('button'); +} + +.btn { + @include text-style('button'); + + cursor: pointer; + + display: inline-block; + + text-align: center; + text-decoration: none; + vertical-align: middle; +} diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss new file mode 100644 index 000000000..9ea0f2b09 --- /dev/null +++ b/src/styles/components/_button.scss @@ -0,0 +1,12 @@ +@use '../abstracts/variables' as *; + +.btn { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + &__text { + flex-grow: 1; + } +} diff --git a/src/styles/components/_contacts.scss b/src/styles/components/_contacts.scss new file mode 100644 index 000000000..d97804e99 --- /dev/null +++ b/src/styles/components/_contacts.scss @@ -0,0 +1,18 @@ +@use '../abstracts' as *; + +.contacts { + &__body { + font-style: normal; + } + + &__map-link { + display: block; + } + + &__item, + &__map-link { + @extend %hover-effect-scale-5-color-secondary; + + width: fit-content; + } +} diff --git a/src/styles/components/_event-card.scss b/src/styles/components/_event-card.scss new file mode 100644 index 000000000..260a44740 --- /dev/null +++ b/src/styles/components/_event-card.scss @@ -0,0 +1,185 @@ +@use '../abstracts' as *; + +.event-card { + --width-img: 100%; + --width-img-lecture: 100%; + --height-img-lecture: 210px; + --width-content: 100%; + --width-event-date-lecture: auto; + --width-squire: 0.63rem; + --width-lecture-block: 280px; + --height-squire: 0.63rem; + --height-img: 100%; + --margin-block-meta: 1.25rem 0; + --margin-block-title: 0.63rem 0; + --margin-block-description: 0.69rem 0; + --margin-block-title-lecture: 20px 0; + --margin-bottom: 60px; + --padding-inline-meta-lecture: 20px; + --padding-inline-lecture-block: 0; + --padding-inline-container-img: 0; + --padding-block-lecture-block: 20px; + --text-align-title-lecture: center; + --flex-direction: column; + --justify-content-meta: space-between; + --justify-content-meta-lecture: space-between; + --gap-meta: 0; + --gap-meta-lecture: 20px; + + position: relative; + display: flex; + flex-direction: var(--flex-direction); + margin-bottom: var(--margin-bottom); + + &__wrapper { + padding-block: 20px; + } + + &__content { + width: var(--width-content); + } + + &__meta { + display: flex; + gap: var(--gap-meta); + justify-content: var(--justify-content-meta); + margin-block: var(--margin-block-meta); + } + + &__lecture-event-meta { + display: flex; + gap: var(--gap-meta-lecture); + justify-content: var(--justify-content-meta-lecture); + padding-inline: var(--padding-inline-meta-lecture); + } + + &__category { + font-weight: $fw-medium; + text-transform: uppercase; + } + + &__date { + font-weight: $fw-bold; + color: var(--color-primary); + } + + &__title { + display: flex; + gap: 0.5rem; + align-items: baseline; + margin-block: var(--margin-block-title); + + &::after { + content: ''; + + transform: translateY(-0.15rem); + + width: var(--width-squire); + height: var(--height-squire); + + background-color: var(--color-secondary); + } + } + + &--lecture { + flex-direction: column; + } + + &__title--lecture { + margin-block: var(--margin-block-title-lecture); + text-align: var(--text-align-title-lecture); + } + + &__description { + margin-block: var(--margin-block-description); + } + + &__img { + @extend %hover-effect-scale-5; + + width: var(--width-img); + height: var(--height-img); + object-fit: cover; + } + + &__years { + white-space: nowrap; + } + + &__img--lecture { + width: var(--width-img-lecture); + height: var(--height-img-lecture); + margin-inline: auto; + + object-fit: cover; + object-position: top; + } + + &__block-lecture { + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); + + width: var(--width-lecture-block); + padding-block: var(--padding-block-lecture-block); + padding-inline: var(--padding-inline-lecture-block); + + background-color: $clr-white; + box-shadow: 0 0.13rem 0 $clr-shadow; + + .event-card__title { + margin-top: 20px; + text-align: center; + + &::after { + display: none; + } + } + + .event-card__date { + width: var(--width-event-date-lecture); + } + } + + @include respond-to('md') { + --height-img-lecture: 390px; + --margin-block-meta: 2.5rem 0; + --margin-block-title: 1.88rem 0; + --margin-block-description: 0.94rem 0; + --margin-block-title-lecture: 16px 0; + --padding-block-lecture-block: 42px 50px; + --padding-inline-lecture-block: 55px; + --padding-inline-container-img: #{$container-padding-md}; + --padding-inline-meta-lecture: 0; + --width-lecture-block: 570px; + --width-event-date-lecture: 220px; + --text-align-title-lecture: left; + --width-content: 460px; + --justify-content-meta: normal; + --gap-meta: 20px; + --gap-meta-lecture: 140px; + --width-squire: 0.94rem; + --height-squire: 0.94rem; + + &__container-img { + width: 100%; + padding-inline: var(--padding-inline-container-img); + } + } + + @include respond-to('lg') { + --flex-direction: row; + --justify-content-meta-lecture: normal; + --width-content: 370px; + --width-img: 670px; + --width-img-lecture: 1280px; + --height-img-lecture: 550px; + --margin-block-meta: 0; + --margin-bottom: 104px; + --padding-inline-container-img: 0; + + gap: 130px; + align-items: center; + } +} diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss new file mode 100644 index 000000000..b89e9bf35 --- /dev/null +++ b/src/styles/components/_form.scss @@ -0,0 +1,52 @@ +@use '../abstracts' as *; + +.form { + --width-input: 230px; + --width-btn: 50px; + --height-btn: 50px; + --height-input: 50px; + --padding-input: 16px; + --gap: 0; + + @extend %hover-effect-form; + + display: flex; + gap: var(--gap); + + font-size: 14px; + font-weight: $fw-regular; + line-height: 1.5; + + &__input { + width: var(--width-input); + height: var(--height-input); + padding: var(--padding-input); + border: none; + + font: inherit; + + outline: none; + } + + &__btn { + width: var(--width-btn); + height: var(--height-btn); + background-color: var(--color-secondary); + outline: none; + } + + @include respond-to('md') { + --gap: 16px; + --width-input: 374px; + --width-btn: 70px; + --height-input: 70px; + --height-btn: 70px; + --padding-input: 28px; + } + + @include respond-to('lg') { + --width-input: 470px; + + gap: 30px; + } +} diff --git a/src/styles/components/_icons.scss b/src/styles/components/_icons.scss new file mode 100644 index 000000000..5b812d94c --- /dev/null +++ b/src/styles/components/_icons.scss @@ -0,0 +1,35 @@ +@use '../abstracts' as *; + +.icon { + display: block; + background-repeat: no-repeat; + background-position: center; + + &--facebook { + background-image: url(../images/icons/facebook.svg); + } + + &--instagram { + background-image: url(../images/icons/instagram.svg); + } + + &--arrow { + background-image: url(../images/icons/carbon_arrow-up.svg); + } + + &--menu { + @include icon-mask('burger-menu'); + + background-color: var(--color-text-hero); + } + + &--chevron { + background-image: url(../images/icons/chevron.svg); + } + + &--close { + width: 24px; + height: 24px; + background-image: url(../images/icons/icon-close.svg); + } +} diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss new file mode 100644 index 000000000..339341dd3 --- /dev/null +++ b/src/styles/components/_index.scss @@ -0,0 +1,12 @@ +@forward 'icons'; +@forward 'logo'; +@forward 'menu'; +@forward 'nav'; +@forward 'schedule'; +@forward 'button'; +@forward 'event-card'; +@forward 'lecture-card'; +@forward 'slider'; +@forward 'contacts'; +@forward 'input'; +@forward 'form'; diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss new file mode 100644 index 000000000..624040f99 --- /dev/null +++ b/src/styles/components/_input.scss @@ -0,0 +1,11 @@ +@use '../abstracts' as *; + +.input { + --width: 230px; + + width: var(--width); + + @include respond-to('md') { + --width: 374px; + } +} diff --git a/src/styles/components/_lecture-card.scss b/src/styles/components/_lecture-card.scss new file mode 100644 index 000000000..dcc1d7d4c --- /dev/null +++ b/src/styles/components/_lecture-card.scss @@ -0,0 +1,12 @@ +// .lecture-card { +// padding: 20px; + +// &__title { +// margin-top: 20px; +// text-align: center; +// } + +// &__img { +// object-fit: contain; +// } +// } diff --git a/src/styles/components/_logo.scss b/src/styles/components/_logo.scss new file mode 100644 index 000000000..24da30b67 --- /dev/null +++ b/src/styles/components/_logo.scss @@ -0,0 +1,9 @@ +@use '../abstracts' as *; + +.logo { + font-family: $font-headings; + font-weight: $fw-bold; + line-height: 0.91; + color: var(--color-bg-accent); + text-align: center; +} diff --git a/src/styles/components/_menu.scss b/src/styles/components/_menu.scss new file mode 100644 index 000000000..2f21f1ab7 --- /dev/null +++ b/src/styles/components/_menu.scss @@ -0,0 +1,25 @@ +@use '../abstracts' as *; + +.menu { + --gap: 28px; + + display: flex; + gap: var(--gap); + + padding-block: 0 24px; + border-bottom: 1px solid $clr-white; + + font-weight: $fw-medium; + color: $clr-white; + + @include respond-to('md') { + --gap: 38px; + + border: none; + border-right: 1px solid $clr-white; + } + + @include respond-to('lg') { + --gap: 102px; + } +} diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss new file mode 100644 index 000000000..867e48456 --- /dev/null +++ b/src/styles/components/_nav.scss @@ -0,0 +1,15 @@ +@use '../abstracts' as *; + +.nav { + &__list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + &__item { + @extend %hover-effect-nav; + + width: max-content; + line-height: 1; + } +} diff --git a/src/styles/components/_schedule.scss b/src/styles/components/_schedule.scss new file mode 100644 index 000000000..7da65cf40 --- /dev/null +++ b/src/styles/components/_schedule.scss @@ -0,0 +1,25 @@ +@use '../abstracts' as *; + +.schedule { + --font-weight-note: #{$fw-regular}; + --display-separator: none; + + &__address { + font-style: normal; + } + + &__note { + &--bold { + font-weight: $fw-bold; + } + } + + &__separator { + display: var(--display-separator); + } + + @include respond-to('lg') { + --font-weight-note: #{$fw-bold}; + --display-separator: inline-flex; + } +} diff --git a/src/styles/components/_slider.scss b/src/styles/components/_slider.scss new file mode 100644 index 000000000..0bdbb41ce --- /dev/null +++ b/src/styles/components/_slider.scss @@ -0,0 +1,88 @@ +@use '../abstracts' as *; + +.slider { + --height-item: 410px; + --width-item: 280px; + --gap-dots: 12px; + --margin-block-dots: 20px 0; + --margin-right-last-img: #{$container-padding-sm}; + --padding-inline-track: 20px 0; + --object-position-g4: -460px; + --gap-track: 16px; + + scrollbar-width: none; // Firefox + overflow: hidden; + padding-inline: var(--padding-inline-track); + + -ms-overflow-style: none; // Edge + + &__track { + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: flex; + gap: var(--gap-track); + + &::-webkit-scrollbar { + display: none; + } + } + + &__item { + scroll-snap-align: start; + scroll-snap-stop: always; + + flex-shrink: 0; + + width: 100%; + max-width: var(--width-item); + height: var(--height-item); + + &:last-child { + margin-right: var(--margin-right-last-img); + } + } + + &__item--fit-position-g4 { + object-position: var(--object-position-g4); + } + + &__item--cover { + object-fit: cover; + } + + &__dots { + display: flex; + gap: var(--gap-dots); + justify-content: center; + margin-block: var(--margin-block-dots); + } + + &__dot { + cursor: pointer; + + width: 10px; + height: 10px; + padding: 0; + border: none; + border-radius: 50%; + + background-color: $clr-platinum; + + &--active { + background-color: var(--color-primary); + } + } + + @include respond-to('md') { + --width-item: 340px; + --height-item: 543px; + --gap-track: 20px; + --gap-dots: 22px; + --margin-block-dots: 32px 0; + --padding-inline-track: 34px 0; + --object-position-g4: -610px; + --margin-right-last-img: #{$container-padding-md}; + } +} diff --git a/src/styles/layout/_container.scss b/src/styles/layout/_container.scss new file mode 100644 index 000000000..cfcd0272e --- /dev/null +++ b/src/styles/layout/_container.scss @@ -0,0 +1,17 @@ +@use '../abstracts/variables/grid' as *; +@use '../abstracts/mixins/media' as *; + +.container { + position: relative; + max-width: $max-width-lg; + margin-inline: auto; + padding-inline: $container-padding-sm; + + @include respond-to('md') { + padding-inline: $container-padding-md; + } + + @include respond-to('lg') { + padding-inline: $container-padding-lg; + } +} diff --git a/src/styles/layout/_index.scss b/src/styles/layout/_index.scss new file mode 100644 index 000000000..3db9aaac2 --- /dev/null +++ b/src/styles/layout/_index.scss @@ -0,0 +1,2 @@ +@forward 'container'; +@forward 'page-gird'; diff --git a/src/styles/layout/_page-gird.scss b/src/styles/layout/_page-gird.scss new file mode 100644 index 000000000..2bc2dd03c --- /dev/null +++ b/src/styles/layout/_page-gird.scss @@ -0,0 +1,7 @@ +@use '../abstracts/mixins/grid' as *; + +.grid { + @include page-grid; + + position: relative; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..9bb2874aa 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,7 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@forward 'base'; +@forward 'abstracts'; -body { - background: $c-gray; -} +@forward 'layout'; +@forward 'components'; + +@forward 'sections'; diff --git a/src/styles/sections/_events.scss b/src/styles/sections/_events.scss new file mode 100644 index 000000000..f73225377 --- /dev/null +++ b/src/styles/sections/_events.scss @@ -0,0 +1,26 @@ +@use '../abstracts' as *; + +.events { + --margin-block-title: 0 20px; + --text-align: center; + + margin-top: 70px; + + &__title { + margin-block: var(--margin-block-title); + text-align: var(--text-align); + } + + @include respond-to('md') { + --margin-block-title: 0 48px; + --text-align: left; + + margin-top: 88px; + } + + @include respond-to('lg') { + --margin-block-title: 0 56px; + + margin-top: 200px; + } +} diff --git a/src/styles/sections/_footer.scss b/src/styles/sections/_footer.scss new file mode 100644 index 000000000..6918ae22e --- /dev/null +++ b/src/styles/sections/_footer.scss @@ -0,0 +1,189 @@ +@use 'sass:map'; +@use '../abstracts' as *; + +.footer { + --margin-block-nav: 20px 0; + --padding-block: 3.13rem 4rem; + --padding-block-title: 24px 20px; + --padding-block-schedule-list: 0 16px; + --padding-block-nav: 40px 0; + --column-brand: 1/3; + --column-schedule: 1/2; + --column-contacts: 2/3; + --column-nav: 1/3; + --display-btn-to-top: block; + --display-separator: none; + --display-note-hour: static; + --display-note-1: static; + --display-note-1-hour: none; + --font-weight-note: #{$fw-regular}; + + padding-block: var(--padding-block); + border-bottom: 1px solid #1a5a4c80; + font-size: map.get($font-sizes-sm, additional); + font-weight: $fw-regular; + + &__logo { + @extend %hover-primary-color; + + font-size: 36px; + text-align: left; + } + + &__brand { + display: flex; + grid-column: var(--column-brand); + align-items: center; + justify-content: space-between; + } + + &__socials { + display: flex; + gap: 1.25rem; + .icon { + width: 1.5rem; + height: 1.5rem; + } + } + + &__social-link { + @extend %hover-effect-scale-20; + } + + &__schedule { + grid-column: var(--column-schedule); + + &-list { + padding-block: var(--padding-block-schedule-list); + } + + &-note-1 { + display: var(--display-note-1); + } + + &-note-1-hour { + display: var(--display-note-1-hour); + } + + &-note-hour { + display: var(--display-note-hour); + } + } + + &__schedule-title, + &__contacts-title { + padding-block: var(--padding-block-title); + } + + &__contacts { + grid-column: var(--column-contacts); + } + + &__nav { + grid-column: var(--column-nav); + margin-block: var(--margin-block-nav); + padding-block: var(--padding-block-nav); + border-top: 1px solid #1a5a4c80; + } + + &__address { + font-style: normal; + } + + &__menu-nav-list { + gap: 20px 28px; + } + + &__btn-back-to-top { + display: var(--display-btn-to-top); + grid-column: 2/3; + justify-self: end; + + width: 3.13rem; + height: 3.13rem; + border: 1px solid $clr-malachite; + border-radius: 50%; + .btn__icon--arrow { + width: 3.13rem; + height: 3.13rem; + } + } + + &__copyright { + display: flex; + flex-direction: column; + gap: 10px; + + margin-top: 80px; + + font-size: map.get($font-sizes-sm, small); + text-align: center; + } + + &__note { + display: inline-flex; + font-weight: var(--font-weight-note); + } + + &__separator { + display: var(--display-separator); + } + + @include respond-to('md') { + --column-brand: 1/2; + --column-schedule: 2/4; + --column-contacts: 4/6; + --column-nav: 2/6; + --margin-block-nav: 64px 0; + --padding-block-nav: 54px 0; + --padding-block-title: 0px 20px; + --display-btn-to-top: none; + --display-note-hour: block; + + &__brand { + flex-direction: column; + gap: 62px; + align-items: flex-start; + justify-content: normal; + } + + &__copyright { + flex-direction: row-reverse; + justify-content: space-between; + } + } + + @include respond-to('lg') { + --column-schedule: 3/5; + --column-contacts: 5/7; + --column-nav: 7/12; + --display-separator: inline-flex; + --font-weight-note: #{$fw-bold}; + --display-note-1: none; + --display-note-1-hour: static; + + &__nav { + margin: 0; + padding: 0; + padding-left: 65px; + border: none; + border-left: 1px solid #1a5a4c80; + } + + &__contacts-link { + white-space: nowrap; + } + + &__note-nowrap { + white-space: nowrap; + } + + &__note-block { + display: block; + } + + &__schedule-note-one-hour { + display: none; + } + } +} diff --git a/src/styles/sections/_gallery.scss b/src/styles/sections/_gallery.scss new file mode 100644 index 000000000..ae8cfa600 --- /dev/null +++ b/src/styles/sections/_gallery.scss @@ -0,0 +1,71 @@ +@use '../abstracts' as *; + +.gallery { + --text-align: center; + --margin-top: 183px; + --margin-block-title: 0 40px; + --margin-top-slider: 40px; + --display: none; + + position: relative; + margin-top: var(--margin-top); + + &__title { + margin-block: var(--margin-block-title); + text-align: var(--text-align); + } + + &__content { + display: none; + } + + &__img { + @extend %hover-effect-scale-5; + + width: 100%; + height: 100%; + object-fit: cover; + + @include respond-to('md') { + &--portrait { + grid-column: 1/5; + } + + &--landscape-big { + grid-column: 5/13; + } + + &--landscape-wide { + grid-column: 1/9; + } + + &--square { + grid-column: 9/13; + } + } + } + + &__slider { + margin-top: var(--margin-top-slider); + } + + @include respond-to('md') { + --text-align: left; + --margin-top: 208px; + --margin-block-title: 0 48px; + } + + @include respond-to('lg') { + --margin-top: 406px; + --margin-block-title: 0 56px; + + &__slider { + display: none; + } + + &__content { + display: grid; + row-gap: 30px; + } + } +} diff --git a/src/styles/sections/_header.scss b/src/styles/sections/_header.scss new file mode 100644 index 000000000..4a968a9ef --- /dev/null +++ b/src/styles/sections/_header.scss @@ -0,0 +1,65 @@ +@use '../abstracts' as *; + +.header { + --column-menu: 1/2; + --column-logo: 2/2; + --justify-items-menu: center; + --padding-top: 8px; + --font-size-logo: 30px; + --transform-translate-x-logo: -35px; + + position: absolute; + z-index: 10; + top: 0; + left: 0; + + width: 100%; + padding-top: var(--padding-top); + + &__content { + align-items: center; + + .icon { + @extend %hover-scale-10-bg-primary; + + width: 1.5rem; + height: 1.5rem; + } + } + + &__menu { + grid-column: var(--column-menu); + } + + &__logo { + @extend %hover-primary-color; + + transform: translateX(var(--transform-translate-x-logo)); + + grid-column: var(--column-logo); + + width: fit-content; + + font-family: $font-headings; + font-size: var(--font-size-logo); + font-weight: $fw-bold; + line-height: 1; + color: var(--color-bg-accent); + } + + @include respond-to('md') { + --column-menu: 1/4; + --column-logo: 5/5; + --font-size-logo: 36px; + --padding-top: 19px; + --text-align-logo: center; + --transform-translate-x-logo: -60px; + } + + @include respond-to('lg') { + --column-logo: 7/8; + --font-size-logo: 36px; + --padding-top: 19px; + --transform-translate-x-logo: -30px; + } +} diff --git a/src/styles/sections/_hero.scss b/src/styles/sections/_hero.scss new file mode 100644 index 000000000..dcfe1703d --- /dev/null +++ b/src/styles/sections/_hero.scss @@ -0,0 +1,127 @@ +@use 'sass:map'; +@use '../abstracts' as *; + +.hero { + --display-scroll-indicator: none; + --direct-content: column; + --column-img: 1/3; + --column-title: 1/3; + --column-btn: 1/3; + --height-hero: auto; + --height-img: 100%; + --height-button: 50px; + --position-img: static; + --padding-left-content: 0; + --padding-top-content: 0; + --margin-block-title: 20px; + --margin-inline-btn: auto; + --max-width-content: #{$max-width-sm}; + --width-button: 280px; + --width-icon-btn: 50px; + --text-align-title: center; + + height: var(--height-hero); + + &__content { + max-width: #{$max-width-lg}; + margin-inline: auto; + padding-top: var(--padding-top-content); + padding-left: var(--padding-left-content); + } + + &__title { + grid-column: var(--column-title); + margin-block: var(--margin-block-title); + color: var(--color-text-hero); + text-align: var(--text-align-title); + } + + &__img { + position: var(--position-img); + + grid-column: var(--column-img); + + width: 100%; + height: var(--height-img); + + object-fit: cover; + object-position: center; + } + + &__button { + @extend %hover-primary-bg-color-white; + + grid-column: var(--column-btn); + + width: var(--width-button); + height: var(--height-button); + margin-inline: var(--margin-inline-btn); + border: 1px solid var(--color-primary); + + .icon { + width: var(--width-icon-btn); + height: 100%; + background-color: var(--color-primary); + } + } + + &__scroll-indicator { + display: var(--display-scroll-indicator); + grid-column: 1/1; + flex-direction: column; + align-items: center; + justify-content: flex-start; + justify-self: start; + + margin-top: 55px; + } + + &__scroll-text { + transform: rotate(180deg); + + display: block; + + writing-mode: vertical-rl; + font-size: map.get($font-sizes-sm, additional); + font-weight: $fw-regular; + color: $clr-slate; + text-transform: uppercase; + letter-spacing: 0; + } + + &__scroll-line { + display: block; + + width: 1px; + height: 70px; + margin-top: 20px; + + background-color: var(--color-primary); + } + + @include respond-to('md') { + --column-title: 1/4; + --column-img: 4/7; + --column-btn: 1/4; + --height-button: 70px; + --padding-left-content: #{$container-padding-md}; + --padding-top-content: 127px; + --position-img: absolute; + --margin-block-title: 0 38px; + --margin-inline-btn: 0; + --width-button: 270px; + --width-icon-btn: 70px; + --text-align-title: left; + } + + @include respond-to('lg') { + --display-scroll-indicator: flex; + --column-title: 1/6; + --column-img: 6/13; + --column-btn: 3/6; + --padding-left-content: #{$container-padding-lg}; + --padding-top-content: 206px; + --margin-block-title: 0 89px; + --height-hero: 655px; + } +} diff --git a/src/styles/sections/_index.scss b/src/styles/sections/_index.scss new file mode 100644 index 000000000..354b5cb36 --- /dev/null +++ b/src/styles/sections/_index.scss @@ -0,0 +1,6 @@ +@forward 'header'; +@forward 'hero'; +@forward 'events'; +@forward 'gallery'; +@forward 'subscribe'; +@forward 'footer'; diff --git a/src/styles/sections/_subscribe.scss b/src/styles/sections/_subscribe.scss new file mode 100644 index 000000000..cdc8e3843 --- /dev/null +++ b/src/styles/sections/_subscribe.scss @@ -0,0 +1,79 @@ +@use 'sass:map'; +@use '../abstracts' as *; + +.subscribe { + --width-form: 280px; + --widht-icon: 50px; + --height-btn: 50px; + --margin-inline-icon: 0; + --margin-block-form: 50px 0; + --width-text-content: 280px; + --margin-top: 100px; + --padding-block: 88px; + --height: 386px; + --text-align-description: center; + + max-width: 1280px; + height: var(--height); + margin-top: var(--margin-top); + margin-inline: auto; + padding-block: var(--padding-block); + + color: white; + + background-image: url(../images/subscrbe-bg.webp); + background-position: center; + background-size: cover; + + &__title { + color: $clr-white; + text-align: var(--text-align-description); + } + + &__description { + margin-top: 20px; + font-size: map.get($font-sizes-sm, accent); + text-align: center; + } + + &__content-text { + width: var(--width-text-content); + margin-inline: auto; + } + + &__form { + width: var(--width-form); + margin-block: var(--margin-block-form); + margin-inline: auto; + + @include respond-to('md') { + --width: var(--width-form); + } + } + + &__btn { + width: 70px; + height: 70px; + } + + @include respond-to('md') { + --margin-top: 92px; + --width-form: 460px; + --width-text-content: 460px; + --padding-block: 82px; + --height: 380px; + --height-btn: 70px; + --widht-icon: 70px; + --margin-inline-icon: 10px 0; + --margin-block-btn: 64px 0; + --margin-block-form: 64px 0; + } + + @include respond-to('lg') { + --width-form: 570px; + --height: 550px; + --margin-top: 200px; + --padding-block: 163px; + --margin-block-form: 72px 0; + } +} 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;