diff --git a/src/images/arrow-top.svg b/src/images/arrow-top.svg new file mode 100644 index 000000000..0bfb2174c --- /dev/null +++ b/src/images/arrow-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefit-1.svg b/src/images/benefit-1.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/benefit-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefit-2.svg b/src/images/benefit-2.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/benefit-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefit-3.svg b/src/images/benefit-3.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/benefit-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefit-4.svg b/src/images/benefit-4.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/benefit-4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/facebook-logo.svg b/src/images/facebook-logo.svg new file mode 100644 index 000000000..fbeee204a --- /dev/null +++ b/src/images/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features-bg-mobile.png b/src/images/features-bg-mobile.png new file mode 100644 index 000000000..2f709b7a8 Binary files /dev/null and b/src/images/features-bg-mobile.png differ diff --git a/src/images/features-bg-tablet.png b/src/images/features-bg-tablet.png new file mode 100644 index 000000000..4b6b56b56 Binary files /dev/null and b/src/images/features-bg-tablet.png differ diff --git a/src/images/features-bg.png b/src/images/features-bg.png new file mode 100644 index 000000000..676359d5c Binary files /dev/null and b/src/images/features-bg.png differ diff --git a/src/images/header-img.png b/src/images/header-img.png new file mode 100644 index 000000000..4b05dd50f Binary files /dev/null and b/src/images/header-img.png differ diff --git a/src/images/header-mobile-img.png b/src/images/header-mobile-img.png new file mode 100644 index 000000000..7fdd075a1 Binary files /dev/null and b/src/images/header-mobile-img.png differ diff --git a/src/images/icon-close.svg b/src/images/icon-close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/instagram-logo.svg b/src/images/instagram-logo.svg new file mode 100644 index 000000000..9c7b45248 --- /dev/null +++ b/src/images/instagram-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/kickstarter-favicon.svg b/src/images/kickstarter-favicon.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/kickstarter-favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/kickstarter-logo.svg b/src/images/kickstarter-logo.svg new file mode 100644 index 000000000..9801c53e5 --- /dev/null +++ b/src/images/kickstarter-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/menu-button.svg b/src/images/menu-button.svg new file mode 100644 index 000000000..c3f42c4a0 --- /dev/null +++ b/src/images/menu-button.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/presentation-img.png b/src/images/presentation-img.png new file mode 100644 index 000000000..153f96b88 Binary files /dev/null and b/src/images/presentation-img.png differ diff --git a/src/images/review-bg.svg b/src/images/review-bg.svg new file mode 100644 index 000000000..2cd173184 --- /dev/null +++ b/src/images/review-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/review-img.png b/src/images/review-img.png new file mode 100644 index 000000000..01cd48c29 Binary files /dev/null and b/src/images/review-img.png differ diff --git a/src/images/technology-img-first.png b/src/images/technology-img-first.png new file mode 100644 index 000000000..4be18fdfb Binary files /dev/null and b/src/images/technology-img-first.png differ diff --git a/src/images/technology-img-second.png b/src/images/technology-img-second.png new file mode 100644 index 000000000..c0561d66e Binary files /dev/null and b/src/images/technology-img-second.png differ diff --git a/src/images/twitter-logo.svg b/src/images/twitter-logo.svg new file mode 100644 index 000000000..b969568ed --- /dev/null +++ b/src/images/twitter-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..12912f131 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,431 @@ + - - Title + + Crazybaby | audio system + rel="icon" + href="./images/kickstarter-favicon.svg" + type="image/svg+xml" + > + + + + + -

Hello Mate Academy

+
+
+
+ +
+ +
+ menu-icon +
+
+
+
+
+

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. +

+
+
+ header-img +
+
+ header-mobile-img +
+
+ +
+
+ +
+
+
+
+
+
+
+ benefit-image +
+
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. +
+
+
+
+
+
+ benefit-image +
+
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. +
+
+
+
+
+
+ benefit-image +
+
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. +
+
+
+
+
+
+ benefit-image +
+
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. +
+
+
+
+
+
+
+
+
+ presentation-img +
+
+
+
+
+
+
+
+
+ about-img +
+
+
+
DESIGNED FOR THE FUTURE
+
+ 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 +
+
+
+
+
+
+
+ about-img +
+
+
+
Luna Eye
+
+ 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. +
+
+ author-img +
+
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
    • +
+
+
+
+
+
+
+
+

DO YOU HAVE ANY QUESTIONS?

+
+ + + +
+
+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..669dcabc5 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,60 @@ 'use strict'; + +const menuIcon = document.querySelector('.top-bar__icon'); +const closeIcon = document.querySelector('.sidebar__close'); +const sidebar = document.querySelector('.sidebar'); +const menuLink = document.querySelectorAll('.menu__item a'); + +menuIcon.addEventListener('click', () => { + sidebar.classList.add('sidebar--active'); + document.body.classList.add('no-scroll'); +}); + +closeIcon.addEventListener('click', () => { + sidebar.classList.remove('sidebar--active'); + document.body.classList.remove('no-scroll'); +}); + +menuLink.forEach((link) => { + link.addEventListener('click', () => { + sidebar.classList.remove('sidebar--active'); + document.body.classList.remove('no-scroll'); + }); +}); + +const arrow = document.querySelector('.footer__totop'); + +/* eslint-disable no-undef */ + +function smoothScrollToTop(duration = 500) { + const start = window.pageYOffset; + const startTime = performance.now(); + + function scrollStep(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const ease = 1 - Math.pow(1 - progress, 3); + + window.scrollTo(0, start * (1 - ease)); + + if (progress < 1) { + requestAnimationFrame(scrollStep); + } + } + + requestAnimationFrame(scrollStep); +} + +/* eslint-enable no-undef */ + +arrow.addEventListener('click', () => { + smoothScrollToTop(500); +}); + +const form = document.querySelector('.form'); + +form.addEventListener('submit', function (event) { + event.preventDefault(); + + this.reset(); +}); 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..f1078dced 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/container.scss b/src/styles/container.scss new file mode 100644 index 000000000..9426dacd2 --- /dev/null +++ b/src/styles/container.scss @@ -0,0 +1,13 @@ +.container { + padding: 0 30px; + + @include on-tablet { + padding: 0 34px; + } + + @include on-dekstop { + max-width: 1200px; + margin-left: auto; + margin-right: auto; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..cfee08bd2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,67 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'container'; +@import 'sections/header'; +@import 'sections/sidebar'; +@import 'sections/benefits'; +@import 'sections/presentation'; +@import 'sections/technologies'; +@import 'sections/reviews'; +@import 'sections/features'; +@import 'sections/contacts'; +@import 'sections/form'; +@import 'sections/footer'; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + margin: 30px 0; + background-color: #f7f7f7; + color: #333; + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +input { + all: unset; +} + +textarea { + all: unset; +} + +h2 { + margin: 0; + padding: 0; +} + +section { + margin-top: 110px; + + @include on-tablet { + margin-top: 140px; + } + + @include on-dekstop { + margin-top: 170px; + } +} + +footer { + margin-top: 110px; + + @include on-tablet { + margin-top: 140px; + } + + @include on-dekstop { + margin-top: 170px; + } +} + +.no-scroll { + overflow: hidden; } diff --git a/src/styles/sections/benefits.scss b/src/styles/sections/benefits.scss new file mode 100644 index 000000000..8edb75385 --- /dev/null +++ b/src/styles/sections/benefits.scss @@ -0,0 +1,70 @@ +@import '../utils/mixins'; + +.benefits { + @include on-dekstop { + margin-top: 75px; + } + + &__row { + display: flex; + gap: 30px; + flex-wrap: wrap; + + @include on-dekstop { + flex-wrap: nowrap; + } + } + + &__col { + width: 100%; + + @include on-tablet { + width: 47%; + } + + @include on-dekstop { + width: 24%; + } + } +} + +.benefit { + text-align: center; + display: flex; + flex-direction: column; + height: 100%; + + &__img { + margin-bottom: 30px; + transition: 0.3s; + } + + &:hover { + + .benefit__img { + transform: scale(1.2); + } + } + + &__title { + margin-bottom: 20px; + font-size: 22px; + font-weight: 700; + line-height: 1.27; + text-transform: uppercase; + } + + &__text { + color: #7C7C7C; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + max-width: 75%; + margin: 0 auto; + margin-top: auto; + + @include on-tablet { + max-width: 100%; + } + } +} \ No newline at end of file diff --git a/src/styles/sections/contacts.scss b/src/styles/sections/contacts.scss new file mode 100644 index 000000000..e77aaeccf --- /dev/null +++ b/src/styles/sections/contacts.scss @@ -0,0 +1,18 @@ +.contacts { + + &__title { + width: 100%; + font-size: 30px; + font-weight: 700; + line-height: 1.25; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + } + + @include on-dekstop { + font-size: 56px; + } + } +} \ No newline at end of file diff --git a/src/styles/sections/features.scss b/src/styles/sections/features.scss new file mode 100644 index 000000000..e83459a86 --- /dev/null +++ b/src/styles/sections/features.scss @@ -0,0 +1,95 @@ +@import './../utils/mixins'; + +.features { + + .container { + padding: 0; + + @include on-tablet { + padding: 0 34px; + } + } + + &__title { + font-size: 30px; + font-weight: 700; + line-height: 1.25; + text-transform: uppercase; + padding-left: 30px; + margin-bottom: 30px; + + @include on-tablet { + padding-left: 0; + } + + @include on-dekstop { + font-size: 56px; + } + } + + &__wrapper { + background-color: #D6ECEC; + background-image: url(./../images/features-bg-mobile.png); + background-repeat: no-repeat; + background-position: bottom right; + padding: 30px; + display: flex; + flex-wrap: wrap; + height: 555px; + box-sizing: border-box; + + @include on-tablet { + padding: 60px 90px; + background-image: url(./../images/features-bg-tablet.png); + } + + @include on-dekstop { + padding: 60px 100px; + gap: 55px; + height: initial; + background-image: url(./../images/features-bg.png); + } + } +} + +.feature { + display: none; + + @include on-dekstop { + width: 45%; + display: block; + } + + &--active { + display: block; + } + + &__title { + color: #0C797A; + font-size: 18px; + font-weight: 700; + line-height: 1.23; + text-transform: uppercase; + + @include on-dekstop { + font-size: 34px; + } + } + + &__list { + padding: 0; + margin: 30px 0 0; + list-style-position: inside; + display: flex; + flex-direction: column; + gap: 10px; + } + + &__item { + font-size: 14px; + + @include on-dekstop { + font-size: 16px; + } + } +} diff --git a/src/styles/sections/footer.scss b/src/styles/sections/footer.scss new file mode 100644 index 000000000..9db3859a5 --- /dev/null +++ b/src/styles/sections/footer.scss @@ -0,0 +1,53 @@ +@import './../utils/mixins'; + +.footer { + + &__wrapper { + display: flex; + align-items: center; + flex-direction: column; + gap: 30px; + + @include on-tablet { + gap: 60px; + } + } + + &__row { + width: 100%; + display: flex; + justify-content: space-between; + } + + &__col { + width: 100%; + } + + &__logo { + text-align: center; + display: none; + + @include on-tablet { + display: block; + } + } + + &__totop { + text-align: right; + cursor: pointer; + display: none; + + @include on-tablet { + display: block; + } + } + + &__socials { + display: flex; + gap: 40px; + } + + &__copyright { + text-align: center; + } +} diff --git a/src/styles/sections/form.scss b/src/styles/sections/form.scss new file mode 100644 index 000000000..04f4164e9 --- /dev/null +++ b/src/styles/sections/form.scss @@ -0,0 +1,82 @@ +@import './../utils/mixins'; + +.form { + display: flex; + flex-direction: column; + width: 100%; + + &__wrapper { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + flex-direction: row; + } + } + + &__email { + height: 48px; + background: #fff; + color: #BDBDBD; + line-height: 1.5; + border: 1px solid #828282; + outline: none; + padding: 12px 35px; + margin-bottom: 20px; + box-sizing: border-box; + + &::placeholder { + color: #BDBDBD; + opacity: 1; + } + } + + &__textarea { + height: 128px; + background: #fff; + color: #BDBDBD; + line-height: 1.5; + border: 1px solid #828282; + outline: none; + padding: 12px 35px; + margin-bottom: 30px; + box-sizing: border-box; + + @include on-tablet { + height: 201px; + } + + @include on-dekstop { + height: 128px; + } + + &::placeholder { + color: #BDBDBD; + opacity: 1; + } + } + + &__btn { + width: 102px; + height: 40px; + background: #0DB2B3; + color: #FFF; + font-size: 12px; + font-weight: 700; + line-height: 1.16; + text-transform: uppercase; + text-align: center; + cursor: pointer; + transition: 0.3s; + + @include on-dekstop { + width: 120px; + height: 48px; + } + + &:hover { + background-color: #11D6D7; + } + } +} diff --git a/src/styles/sections/header.scss b/src/styles/sections/header.scss new file mode 100644 index 000000000..0262d3d2e --- /dev/null +++ b/src/styles/sections/header.scss @@ -0,0 +1,235 @@ +@import '../utils/mixins'; + +.panel__item a { + font-size: 14px; + line-height: 1.42; + text-transform: uppercase; + text-decoration: none; +} + +.menu { + + &__list { + margin: 30px 0 0; + list-style: none; + padding: 0; + display: flex; + flex-direction: column; + gap: 25px; + + @include on-tablet { + gap: 40px; + margin: 40px 0 0; + } + } + + &__item { + + a { + color: #333; + font-size: 14px; + line-height: 1.27; + text-transform: uppercase; + text-decoration: none; + + &:hover { + color: #6B6B6B; + } + + @include on-tablet { + font-size: 22px; + } + } + } +} + +.header { + + &__wrapper { + display: flex; + flex-direction: column-reverse; + margin-top: 90px; + + @include on-tablet { + flex-direction: row; + justify-content: center; + align-items: center; + } + } + + &__title { + color: #333; + font-size: 40px; + font-weight: 700; + line-height: 1.25; + text-transform: uppercase; + margin: 0; + + @include on-tablet { + font-size: 48px; + } + + @include on-dekstop { + font-size: 62px; + } + } + + &__subtitle { + color: #333; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + + @include on-tablet { + max-width: 275px; + } + } + + &__img { + width: 100%; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 0; + } + + img { + width: 100%; + height: 100%; + object-fit: contain; + + @include on-dekstop { + width: initial; + height: initial; + } + } + + &--dekstop { + display: none; + + @include on-tablet { + display: block; + } + } + + &--mobile { + display: block; + + @include on-tablet { + display: none; + } + } + } + + &__menu { + display: none; + margin-top: 170px; + + .menu { + + &__list { + flex-direction: row; + justify-content: center; + margin: 0; + gap: 84px; + } + + &__item { + a { + font-size: 14px; + display: inline-block; + min-width: 85px; + + &:hover { + color: #131313; + font-weight: 700; + } + } + } + } + + @include on-dekstop { + display: block; + } + } +} + +.top-bar { + height: 74px; + display: flex; + justify-content: space-between; + align-items: center; + + &__logo { + transition: 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__tools { + display: flex; + align-items: center; + gap: 30px; + } + + &__icon { + display: flex; + align-items: center; + + @include on-dekstop { + display: none; + } + } +} + +.panel { + list-style: none; + padding: 0; + margin: 0; + display: none; + align-items: center; + gap: 30px; + + @include on-tablet { + display: flex; + } + + &__link { + color: #4F4F4F; + transition: 0.3s; + + &:hover { + color: #6B6B6B; + } + } + + &__lang { + color: #BDBDBD; + transition: 0.3s; + + &:hover { + color: #4D4D4D; + } + + &--active { + color: #333; + } + } + + &__btn { + background-color: #333; + height: 48px; + padding: 0 37px; + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + transition: 0.3s; + + &:hover { + background-color: #4D4D4D; + } + } +} diff --git a/src/styles/sections/presentation.scss b/src/styles/sections/presentation.scss new file mode 100644 index 000000000..58fcf8343 --- /dev/null +++ b/src/styles/sections/presentation.scss @@ -0,0 +1,16 @@ +.presentation { + + &__img { + text-align: center; + + img { + width: 100%; + height: 100%; + + @include on-dekstop { + width: initial; + height: initial; + } + } + } +} diff --git a/src/styles/sections/reviews.scss b/src/styles/sections/reviews.scss new file mode 100644 index 000000000..8b914b74d --- /dev/null +++ b/src/styles/sections/reviews.scss @@ -0,0 +1,50 @@ +.reviews { + + &__wrapper { + text-align: center; + max-width: 780px; + margin: 0 auto; + background: url(./../images/review-bg.svg); + background-repeat: no-repeat; + background-position: top center; + } + + &__text { + font-size: 14px; + font-weight: 700; + line-height: 1.5; + + @include on-tablet { + font-size: 24px; + } + } + + &__img { + margin-top: 30px; + + @include on-tablet { + margin-top: 40px; + } + + @include on-dekstop { + margin-top: 30px; + } + } + + &__author { + font-weight: 700; + line-height: 1.37; + margin-top: 10px; + + @include on-tablet { + margin-top: 20px; + } + } + + &__position { + color: #7C7C7C; + font-size: 14px; + line-height: 1.5; + margin-top: 5px; + } +} diff --git a/src/styles/sections/sidebar.scss b/src/styles/sections/sidebar.scss new file mode 100644 index 000000000..ea2038ac2 --- /dev/null +++ b/src/styles/sections/sidebar.scss @@ -0,0 +1,53 @@ +@import '../utils/mixins'; + +.sidebar { + background: #eee; + position: absolute; + height: 100vh; + width: 100%; + top: 0; + z-index: 1; + transform: translateX(-100%); + transition: transform 0.3s ease; + display: flex; + flex-direction: column; + + &--active { + transform: translateX(0); + } + + &__panel { + margin-top: 50px; + display: flex; + flex-direction: column; + flex: 1; + + .panel { + display: flex; + gap: 20px; + } + + @include on-tablet { + display: none; + } + } + + &__btn { + margin-top: auto; + margin-bottom: 30px; + + a { + font-size: 14px; + line-height: 1.42; + text-transform: uppercase; + text-decoration: none; + display: flex; + } + } + + .container { + display: flex; + flex-direction: column; + flex: 1; + } +} diff --git a/src/styles/sections/technologies.scss b/src/styles/sections/technologies.scss new file mode 100644 index 000000000..18adad73a --- /dev/null +++ b/src/styles/sections/technologies.scss @@ -0,0 +1,126 @@ +@import './../utils/mixins'; + +.technologies { + + .container { + + @include on-tablet { + padding: 0; + } + + @include on-dekstop { + padding: 0 34px; + } + } +} + +.technology { + + &__col { + width: 100%; + } + + &:last-child { + margin-top: 170px; + + .technology { + + &__col { + + &:last-child { + + @include on-tablet { + padding-left: 34px; + } + + @include on-dekstop { + padding-left: 0; + } + } + } + } + } + + &__row { + display: flex; + gap: 30px; + flex-direction: column; + + @include on-tablet { + flex-direction: row; + } + + &--reverse { + + @include on-tablet { + flex-direction: row-reverse; + } + } + } + + &__img { + height: 100%; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + &__title { + font-size: 30px; + font-weight: 700; + line-height: 1.25; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + } + + @include on-dekstop { + font-size: 56px; + } + } + + &__text { + color: #7C7C7C; + line-height: 1.25; + margin-top: 20px; + margin-bottom: 30px; + + @include on-tablet { + max-width: 85%; + margin-top: 30px; + margin-bottom: 60px; + } + } + + &__link { + display: inline-block; + color: #0DB2B3; + font-size: 12px; + line-height: 1.16; + font-weight: 700; + text-decoration: none; + text-transform: uppercase; + transition: 0.3s; + + &::after { + content: ''; + border-bottom: 1px solid #0DB2B3; + width: 50%; + display: block; + padding-top: 5px; + transition: width 0.3s; + } + + &:hover { + color: #11D6D7; + + &::after { + width: 100%; + } + } + } +} \ No newline at end of file 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 index 80c79780d..752d7de6b 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,27 @@ +@import 'vars'; + @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; &:hover { #{$_property}: $_toValue; } } + +@mixin on-phone { + @media (min-width: $phone-min-width) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-dekstop { + @media (min-width: $dekstop-min-width) { + @content; + } +} + diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..045aa1033 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,3 @@ -$c-gray: #eee; +$phone-min-width: 320px; +$tablet-min-width: 768px; +$dekstop-min-width: 1200px; \ No newline at end of file