diff --git a/README.md b/README.md index a95e97afe..845cdd124 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Kickstarter landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 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/Kickstarter/) + [DEMO LINK](https://PolianskyiDmytro.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/package-lock.json b/package-lock.json index 05ac51229..9567d7a35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1222,10 +1222,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 83c8373ca..d7f0fbd91 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/fonts/HelveticaNeueLight.otf b/src/fonts/HelveticaNeueLight.otf new file mode 100644 index 000000000..de55b685a Binary files /dev/null and b/src/fonts/HelveticaNeueLight.otf differ diff --git a/src/fonts/HelveticaNeueMedium.otf b/src/fonts/HelveticaNeueMedium.otf new file mode 100644 index 000000000..1a2a9df34 Binary files /dev/null and b/src/fonts/HelveticaNeueMedium.otf differ diff --git a/src/fonts/helvetica-neue-5.zip b/src/fonts/helvetica-neue-5.zip new file mode 100644 index 000000000..dbeee4f78 Binary files /dev/null and b/src/fonts/helvetica-neue-5.zip differ diff --git a/src/images/advantages/img-1.svg b/src/images/advantages/img-1.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/advantages/img-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/advantages/img-2.svg b/src/images/advantages/img-2.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/advantages/img-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/advantages/img-3.svg b/src/images/advantages/img-3.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/advantages/img-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/advantages/img-4.svg b/src/images/advantages/img-4.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/advantages/img-4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/descs/img-1.png b/src/images/descs/img-1.png new file mode 100644 index 000000000..85d93e773 Binary files /dev/null and b/src/images/descs/img-1.png differ diff --git a/src/images/descs/img-2.png b/src/images/descs/img-2.png new file mode 100644 index 000000000..25f5fda72 Binary files /dev/null and b/src/images/descs/img-2.png differ diff --git a/src/images/features/button-left.svg b/src/images/features/button-left.svg new file mode 100644 index 000000000..9b5f9564c --- /dev/null +++ b/src/images/features/button-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/features/button-right.svg b/src/images/features/button-right.svg new file mode 100644 index 000000000..32798e429 --- /dev/null +++ b/src/images/features/button-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/features/luna.png b/src/images/features/luna.png new file mode 100644 index 000000000..6bf89fc03 Binary files /dev/null and b/src/images/features/luna.png differ diff --git a/src/images/footer/arrow.svg b/src/images/footer/arrow.svg new file mode 100644 index 000000000..bc809f94c --- /dev/null +++ b/src/images/footer/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/facebook.svg b/src/images/footer/facebook.svg new file mode 100644 index 000000000..73cdd9f4a --- /dev/null +++ b/src/images/footer/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/instagram.svg b/src/images/footer/instagram.svg new file mode 100644 index 000000000..2f3d9a323 --- /dev/null +++ b/src/images/footer/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/twitter.svg b/src/images/footer/twitter.svg new file mode 100644 index 000000000..aa6ba3d84 --- /dev/null +++ b/src/images/footer/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header/balls.png b/src/images/header/balls.png new file mode 100644 index 000000000..6afd28eca Binary files /dev/null and b/src/images/header/balls.png differ diff --git a/src/images/header/burger-menu.svg b/src/images/header/burger-menu.svg new file mode 100644 index 000000000..42d0ecd63 --- /dev/null +++ b/src/images/header/burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/header/logo.svg b/src/images/header/logo.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/header/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icon.svg b/src/images/icon.svg new file mode 100644 index 000000000..3b0dd7e35 --- /dev/null +++ b/src/images/icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/menu/close.svg b/src/images/menu/close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/menu/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/page/image.png b/src/images/page/image.png new file mode 100644 index 000000000..58baac06c Binary files /dev/null and b/src/images/page/image.png differ diff --git a/src/images/review/photo.png b/src/images/review/photo.png new file mode 100644 index 000000000..90d43d0a6 Binary files /dev/null and b/src/images/review/photo.png differ diff --git a/src/images/review/quotation-marks.svg b/src/images/review/quotation-marks.svg new file mode 100644 index 000000000..2cd173184 --- /dev/null +++ b/src/images/review/quotation-marks.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..f52cbd5e4 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,8 @@ - + Title + + + + - -

Hello Mate Academy

+ +
+
+
+
+ +
+
+ + SPECS + +

+ + EN + + / + + UA + +

+ + BUY + +
+ + menu + +
+
+

Futuristic Wireless Speaker

+

+ Luna’s performance is balanced and smooth in all frequency ranges + which makes the music both naturally pleasant and distinctly more + layered. +

+
+
+ balls +
+ +
+
+
+
+ +
+ Futuristic Design +

Futuristic Design

+

+ To give Luna a truly flawless look, we specifically picked + aircraft grade aluminum as its material and adopted both + three-dimensional stretch-bending technology and a high + precision cold forging technique. +

+
+
+ Tweeter Speaker System +

Tweeter Speaker System

+

+ To deliver a more layered sound performance better than a sole + full-range speaker, our team equipped Luna with one more tweeter + speaker responsible for high-frequency sound independently. +

+
+
+ Multiroom System +

Multiroom System

+

+ Luna is natively compatible with your home Wi-Fi. Set up + multiple speakers in different rooms to expand your music + experience into the entire house. +

+
+
+ Intuitive Lighting System +

Intuitive Lighting System

+

+ An intuitive user interface allows you to adjust the hue and + saturation of color for lighting that fits any mood and + situation. +

+
+
+
+
+
+ Luna +
+
+
+
+
+

+ DESIGNED FOR THE FUTURE +

+ Design +

+ In 2014, a group of geeky industrial designers, engineering + veterans and acoustic experts formed crazybaby. This is a bunch + of passionate people who are crazy enough to think they can + challenge the industry with disruptive audio products. +

+ See more about us +
+
+
+
+
+
+

Luna Eye

+ Design +

+ Luna Eye is to the essence of this innovative light and audio + system. It comprises an independent tweeter speaker, a light + guiding component, a dome and a ring ornament. +

+ See more about us +
+
+
+
+
+
+
+

+ It really took me by surprise honestly to have such full beautiful + sound that coming out of this small compact device. And with the + brush aluminum surface, it feels so familiar. Like my iPhone. +

+ Garrett Martin +
Garrett Martin
+

Creative Director

+
+
+
+
+
+
+

FEATURES

+
+
+
+
+
+

Connectivity

+
    +
  • Hands Free Wireless Audio
    • +
  • Bluetooth 4.0 LE
    • +
  • Wi-Fi 2.4 GHz (802.11 b/g/n)
    • +
  • Smart Multiroom System Set Up
    • +
  • + Party Mode with 6.0 Units and above +
    • +
  • MESHNET Multi Speaker Network
    • +
+
+
+

App Features

+
    +
  • Customize Music Schedule
    • +
  • Wake Up with Favorite Songs
    • +
  • Home Detection Auto Wake Up
    • +
  • Color Wheel
    • +
+
+
+

Sound & Music

+
    +
  • Feel-in-chest Base Power
    • +
  • + Lossless Digital Audio Transmission +
    • +
  • Easy & Stable Stereo Pairing
    • +
  • + Crisp and Clear High Frequency Sound +
    • +
  • + Streams from Cloud Music and Local Library +
    • +
  • + Auto Music from Last Song Stopped +
    • +
+
+
+
+ + +
+

+ 01 + / 03 +

+
+ Luna +
+
+
+
+
+
+
+
+

DO YOU HAVE ANY QUESTIONS?

+
+ + + +
+
+
+
+
+ diff --git a/src/styles/_blocks.scss b/src/styles/_blocks.scss new file mode 100644 index 000000000..0753dfa45 --- /dev/null +++ b/src/styles/_blocks.scss @@ -0,0 +1,18 @@ +@import './blocks/page'; +@import './blocks/container'; +@import './blocks/nav'; +@import './blocks/top-bar'; +@import './blocks/lang'; +@import './blocks/link'; +@import './blocks/header'; +@import './blocks/menu'; +@import './blocks/advantages'; +@import './blocks/advantage'; +@import './blocks/img'; +@import './blocks/articles'; +@import './blocks/article'; +@import './blocks/review'; +@import './blocks/features'; +@import './blocks/feature'; +@import './blocks/questions'; +@import './blocks/footer'; 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 index 3280c3fe1..fc518cfad 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,3 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; +@import './utils/fonts'; diff --git a/src/styles/blocks/_advantage.scss b/src/styles/blocks/_advantage.scss new file mode 100644 index 000000000..609a60940 --- /dev/null +++ b/src/styles/blocks/_advantage.scss @@ -0,0 +1,76 @@ +.advantage { + display: flex; + flex-direction: column; + align-items: center; + + @include hover(transform, scale(1.1)); + + &--1 { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 4; + } + } + + &--3 { + @include on-tablet { + grid-column: 1 / 5; + } + } + + &--2, + &--4 { + @include on-tablet { + grid-column: 5 / -1; + } + } + + &--2, + &--3, + &--4 { + display: none; + + @include on-tablet { + display: flex; + } + + @include on-desktop { + grid-column: span 3; + } + } + + &--1, + &--2 { + @include on-tablet { + margin-bottom: 65px; + } + + @include on-desktop { + margin: 0; + } + } + + &__title { + margin: 0; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-align: center; + display: inline-block; + height: 56px; + margin-block: 30px 24px; + } + + &__desc { + margin: 0; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + } +} diff --git a/src/styles/blocks/_advantages.scss b/src/styles/blocks/_advantages.scss new file mode 100644 index 000000000..6b6571f78 --- /dev/null +++ b/src/styles/blocks/_advantages.scss @@ -0,0 +1,23 @@ +.advantages { + + &__content { + @include page-grid; + } + + &__nav { + display: none; + + @include on-desktop { + grid-column: 4 / 10; + display: flex; + align-items: center; + height: 76px; + margin-bottom: 62px; + } + } + + &__list { + justify-content: space-between; + gap: 84px; + } +} diff --git a/src/styles/blocks/_article.scss b/src/styles/blocks/_article.scss new file mode 100644 index 000000000..bed987ef7 --- /dev/null +++ b/src/styles/blocks/_article.scss @@ -0,0 +1,202 @@ +.article { + position: relative; + + @include on-tablet { + height: 415px; + } + + @include on-desktop { + height: 388px; + } + + &__content { + @include page-grid; + + &--1 { + @include on-desktop { + grid-template-rows: 170px 156px 62px; + align-items: start; + } + } + + &--2 { + @include on-desktop { + grid-template-rows: 100px 132px 156px; + align-items: start; + } + } + } + + &__img { + object-fit: cover; + object-position: center; + width: 100%; + height: 210px; + grid-column: 1 / -1; + margin-bottom: 20px; + + @include on-tablet { + position: absolute; + width: 374px; + height: 415px; + margin-bottom: 0; + } + + @include on-desktop { + position: relative; + width: 100%; + height: 388px; + } + + &--1 { + @include on-tablet { + left: 0; + top: 0; + } + + @include on-desktop { + grid-column: 1 / 7; + grid-row: 1 / -1; + } + } + + &--2 { + @include on-tablet { + right: 0; + top: 0; + } + + @include on-desktop { + grid-column: -6 / -1; + grid-row: 1 / 4; + } + } + } + + &__title--1 { + font-size: 30px; + line-height: 40px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: -5 / -1; + } + + @include on-desktop { + grid-column: -7 / -1; + grid-row: 1 / 2; + } + } + + &__title--2 { + font-size: 36px; + line-height: 46px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + grid-row: 1 / 2; + } + } + + &__title { + text-transform: uppercase; + font-weight: 700; + margin: 0; + margin-bottom: 30px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + margin: 0; + } + } + + &__desc { + font-size: 16px; + font-weight: 400; + line-height: 24px; + grid-column: 1 / -1; + margin: 0; + margin-bottom: 30px; + color: $secondary-color; + + @include on-tablet { + margin-bottom: 60px; + } + + @include on-desktop { + margin-bottom: 0; + } + + &--1 { + @include on-tablet { + grid-column: -5 / -1; + } + + @include on-desktop { + grid-column: -7 / -1; + grid-row: 2 / 3; + } + } + + &--2 { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + grid-row: 2 / 3; + } + } + } + + &__link { + text-transform: uppercase; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-decoration: none; + color: $link-color; + grid-column: 1 / -1; + + &::after { + display: block; + content: ''; + border-bottom: 1px solid $link-color; + width: 53px; + } + + &--1 { + @include on-tablet { + grid-column: -5 / -1; + } + + @include on-desktop { + grid-column: -7 / -1; + grid-row: 3 / 4; + } + } + + &--2 { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + grid-row: 3 / 4; + } + } + } +} diff --git a/src/styles/blocks/_articles.scss b/src/styles/blocks/_articles.scss new file mode 100644 index 000000000..c1d993558 --- /dev/null +++ b/src/styles/blocks/_articles.scss @@ -0,0 +1,13 @@ +.articles { + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + } + + @include on-desktop { + gap: 170px; + } +} diff --git a/src/styles/blocks/_container.scss b/src/styles/blocks/_container.scss new file mode 100644 index 000000000..574db7499 --- /dev/null +++ b/src/styles/blocks/_container.scss @@ -0,0 +1,13 @@ +.container { + margin: 0 auto; + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + max-width: 1440px; + padding-inline: 123px; + } +} diff --git a/src/styles/blocks/_feature.scss b/src/styles/blocks/_feature.scss new file mode 100644 index 000000000..8bcbfb901 --- /dev/null +++ b/src/styles/blocks/_feature.scss @@ -0,0 +1,79 @@ +.feature { + grid-column: 1 / -1; + justify-self: center; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + display: inline-block; + grid-column: 2 / 6; + width: 260px; + justify-self: start; + } + + @include on-desktop { + width: 100%; + } + + &--1, + &--2 { + display: none; + + @include on-desktop { + display: inline-block; + } + } + + &--1, + &--3 { + @include on-desktop { + grid-column: 2 / 6; + } + } + + &--2 { + @include on-desktop { + grid-column: 7 / 10; + } + } + + &--3 { + margin-bottom: 50px; + + @include on-desktop { + margin-bottom: 59px; + margin-top: 0; + } + } + + &__title { + margin: 0; + color: $features-color; + font-size: 18px; + font-weight: 700; + line-height: 22px; + margin-block: 30px 20px; + + @include on-tablet { + margin-top: 60px; + } + + @include on-desktop { + font-size: 34px; + font-weight: 700; + line-height: 42px; + margin-bottom: 30px; + } + } + + &__list { + padding-left: 16px; + margin: 0; + } + + &__item { + font-size: 16px; + font-weight: 400; + line-height: 24px; + } +} diff --git a/src/styles/blocks/_features.scss b/src/styles/blocks/_features.scss new file mode 100644 index 000000000..f5b5de6c8 --- /dev/null +++ b/src/styles/blocks/_features.scss @@ -0,0 +1,115 @@ +.features { + position: relative; + &__title { + margin: 0; + font-size: 30px; + font-weight: 700; + line-height: 40px; + margin-bottom: 32px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__outside-block { + background-color: $features-bg-color; + + @include on-tablet { + background-color: $main-bg-color; + } + } + + &__inside-block { + background-color: $features-bg-color; + + @include page-grid; + } + + &__buttons-block { + display: flex; + flex-direction: column; + align-items: center; + grid-column: 1 / -1; + justify-self: center; + margin-bottom: 173px; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + grid-column: 2 / 6; + justify-self: start; + margin-bottom: 123px; + } + + @include on-desktop { + display: none; + } + } + + &__buttons { + display: flex; + gap: 2px; + } + + &__button { + width: 48px; + height: 14px; + background-color: $features-bg-color; + border: none; + outline: none; + background-position: center; + background-repeat: no-repeat; + + &--1 { + background-image: url(../images/features/button-left.svg); + } + + &--2 { + background-image: url(../images/features/button-right.svg); + } + } + + &__pages { + margin: 0; + font-size: 11px; + font-weight: 400; + line-height: 13.31px; + color: $features-color; + margin-top: 8px; + } + + &__span { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $main-color; + } + + &__img { + position: absolute; + bottom: 0; + right: 0; + width: 320px; + height: 173px; + + @include on-tablet { + right: 34px; + width: 415.58px; + height: 225.33px; + } + + @include on-desktop { + position: relative; + grid-column: 7 / -1; + width: 543px; + height: 301px; + align-self: end; + } + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..9a99da555 --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,57 @@ +.footer { + &__content { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + gap: 30px; + margin-bottom: 20px; + + @include on-tablet { + gap: 60px; + margin-bottom: 30px; + } + } + + &__top { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__arrow { + position: absolute; + right: 0; + top: 0; + + @include hover(transform, scale(1.2)); + } + + &__links { + display: flex; + gap: 40px; + + @include on-tablet { + gap: 49px; + } + + @include on-desktop { + gap: 40px; + } + } + + &__link { + @include hover(transform, scale(1.2)); + } + + &__copyright { + margin: 0; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: #bdbdbd; + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..e13e9bc8b --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,80 @@ +.header { + position: relative; + + &__content { + @include page-grid; + } + + &__top-bar { + grid-column: 1 / -1; + } + + &__title { + text-transform: uppercase; + z-index: 2; + margin: 0; + grid-column: 1 / -1; + font-size: 40px; + font-weight: 700; + line-height: 52px; + margin-top: 285px; + display: block; + height: 156px; + + @include on-tablet { + grid-column: span 4; + font-size: 48px; + line-height: 62px; + margin-top: 131.23px; + height: 186px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + margin-top: 171px; + height: 234px; + } + } + + &__desc { + z-index: 2; + margin: 0; + grid-column: 1 / -1; + font-size: 16px; + font-weight: 400; + line-height: 24px; + margin-top: 20px; + display: block; + height: 120px; + + @include on-tablet { + grid-column: 1 / 4; + margin-top: 30px; + } + } + + &__img { + height: 245px; + width: 100%; + max-width: 431px; + object-fit: cover; + object-position: left; + position: absolute; + top: 76px; + + @include on-tablet { + height: 317; + max-width: 429.39px; + top: 225.23px; + right: 34.87px; + } + + @include on-desktop { + height: 464px; + max-width: 816px; + top: 138px; + right: 123px; + } + } +} diff --git a/src/styles/blocks/_img.scss b/src/styles/blocks/_img.scss new file mode 100644 index 000000000..dc5789776 --- /dev/null +++ b/src/styles/blocks/_img.scss @@ -0,0 +1,19 @@ +.img { + display: flex; + justify-content: center; + + &__img { + width: 296px; + height: 195px; + + @include on-tablet { + width: 700px; + height: 430px; + } + + @include on-desktop { + width: 846px; + height: 520px; + } + } +} diff --git a/src/styles/blocks/_lang.scss b/src/styles/blocks/_lang.scss new file mode 100644 index 000000000..3ee70ca87 --- /dev/null +++ b/src/styles/blocks/_lang.scss @@ -0,0 +1,5 @@ + .lang { + font-size: 14px; + font-weight: 400; + line-height: 18px; + } diff --git a/src/styles/blocks/_link.scss b/src/styles/blocks/_link.scss new file mode 100644 index 000000000..6729bafb4 --- /dev/null +++ b/src/styles/blocks/_link.scss @@ -0,0 +1,46 @@ +.link { + text-decoration: none; + + &--specs { + color: #4f4f4f; + font-size: 14px; + font-weight: 300; + line-height: 16.93px; + } + + + + &--en { + &-en { + color: $main-color; + pointer-events: none; + } + + &-ua { + color: #828282; + } + } + + &--ua { + &-ua { + color: $main-color; + pointer-events: none; + } + + &-en { + color: #828282; + } + } + + &--buy { + display: flex; + justify-content: center; + align-items: center; + height: 48px; + background-color: $main-color; + color: #fff; + font-size: 12px; + font-weight: 500; + line-height: 14.65px; + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 000000000..4fc0b8eb8 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,43 @@ +.menu { + &__content { + position: relative; + height: 100vh; + } + + &__nav { + margin-top: 30px; + } + + &__list { + flex-direction: column; + gap: 25px; + } + + &__link { + @include on-tablet { + font-size: 22px; + line-height: 28px; + } + } + + &__links { + display: flex; + gap: 20px; + align-items: center; + margin-top: 50px; + + @include on-tablet { + display: none; + } + } + + &__buy { + width: 100%; + position: absolute; + bottom: 30px; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 000000000..7a679cbdc --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,17 @@ +.nav { + &__list { + list-style: none; + display: flex; + padding: 0; + } + + &__link { + text-decoration: none; + color: $main-color; + font-size: 14px; + font-weight: 400; + line-height: 20px; + + @include hover(font-weight, 700); + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 000000000..08cf7df26 --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,59 @@ +.page { + &__body { + margin: 0; + background-color: $main-bg-color; + font-family: Inter, sans-serif; + color: $main-color; + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + } + + @include on-desktop { + gap: 170px; + } + } + + &__main { + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + } + + @include on-desktop { + gap: 170px; + } + } + + &__menu { + box-sizing: border-box; + height: 100vh; + background-color: $main-bg-color; + position: fixed; + top: 0; + right: 0; + left: 0; + + opacity: 0; + transition: all 0.3s; + transform: translateX(100%); + pointer-events: none; + + &:target { + z-index: 2; + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/_questions.scss b/src/styles/blocks/_questions.scss new file mode 100644 index 000000000..18ded2e28 --- /dev/null +++ b/src/styles/blocks/_questions.scss @@ -0,0 +1,84 @@ +.questions { + &__content { + @include page-grid; + } + + &__title { + margin: 0; + grid-column: 1 / -1; + font-size: 30px; + font-weight: 700; + line-height: 40px; + margin-bottom: 27px; + + @include on-tablet { + grid-column: 1 / 5; + font-size: 36px; + line-height: 46px; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1 / 7; + font-size: 56px; + line-height: 70px; + } + } + + &__form { + display: flex; + flex-direction: column; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__input { + border: 1px solid #828282; + color: #bdbdbd; + font-size: 16px; + font-weight: 400; + line-height: 24px; + padding-left: 20px; + outline: none; + + &--email { + height: 48px; + margin-bottom: 20px; + } + + &--question { + resize: none; + height: 128px; + padding-block: 12px; + padding-right: 20px; + margin-bottom: 30px; + } + } + + &__button { + width: 102px; + height: 40px; + background-color: $link-color; + color: #fff; + font-size: 12px; + font-weight: 700; + line-height: 14px; + border: none; + outline: none; + + @include hover(transform, scale(1.2)); + + @include on-desktop { + width: 123.66px; + height: 48px; + } + } +} diff --git a/src/styles/blocks/_review.scss b/src/styles/blocks/_review.scss new file mode 100644 index 000000000..304e2dbb7 --- /dev/null +++ b/src/styles/blocks/_review.scss @@ -0,0 +1,69 @@ +.review { + &__content { + @include page-grid; + + background-image: url(../images/review/quotation-marks.svg); + background-size: 233px 189px; + background-position: top center; + background-repeat: no-repeat; + justify-items: center; + } + + &__review { + margin: 0; + grid-column: 1 / -1; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: center; + margin-top: 50px; + display: flex; + height: 120px; + + @include on-tablet { + font-size: 24px; + font-weight: 700; + line-height: 36px; + margin-top: 60px; + height: 144px; + } + + @include on-desktop { + grid-column: 3 / -3; + margin-top: 42px; + height: 108px; + } + } + + &__photo { + width: 62px; + height: 62px; + margin-top: 30px; + grid-column: 1 / -1; + } + + &__name { + margin: 0; + grid-column: 2 / -2; + font-size: 16px; + font-weight: 700; + line-height: 22px; + text-align: center; + margin-top: 10px; + + @include on-tablet { + margin-top: 20px; + } + } + + &__position { + margin: 0; + grid-column: 2 / -2; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: $secondary-color; + margin-top: 5px; + } +} diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss new file mode 100644 index 000000000..630e4c711 --- /dev/null +++ b/src/styles/blocks/_top-bar.scss @@ -0,0 +1,40 @@ +.top-bar { + font-family: 'Helvetica Neue', sans-serif; + display: flex; + align-items: center; + justify-content: space-between; + height: 76px; + + &__links { + display: flex; + align-items: center; + gap: 30px; + } + + &__tablet-pc { + display: none; + + @include on-tablet { + display: flex; + align-items: center; + gap: 30px; + } + } + + &__buy { + width: 100px; + + @include hover(transform, scale(1.2)); + } + + &__menu, &__close { + height: 32px; + width: 32px; + + @include hover(transform, scale(1.2)); + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..0f945e57e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,2 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils'; +@import './blocks'; 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/_fonts.scss b/src/styles/utils/_fonts.scss new file mode 100644 index 000000000..ee77b1697 --- /dev/null +++ b/src/styles/utils/_fonts.scss @@ -0,0 +1,11 @@ +@font-face { + font-family: 'Helvetica Neue'; + src: url('../fonts/HelveticaNeueLight.otf') format('opentype'); + font-weight: 300; +} + +@font-face { + font-family: 'Helvetica Neue'; + src: url('../fonts/HelveticaNeueMedium.otf') format('opentype'); + font-weight: 500; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..d4ed6c154 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,42 @@ #{$_property}: $_toValue; } } + +@mixin action($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:active, &:focus { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet() { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop() { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin page-grid { + --columns: 4; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + + column-gap: 20px; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..1aeda461e 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ -$c-gray: #eee; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$main-bg-color: #F7F7F7; +$main-color: #333; +$secondary-color: #7C7C7C; +$link-color: #0DB2B3; +$features-bg-color: #D6ECEC; +$features-color: #0C797A; +