diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index a95e97afe..38d1ac2d6 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://annaskobara.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 000000000..40c6699c7 --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +html{scroll-behavior:smooth}h1{font-family:Roboto,sans-serif;font-weight:400}@font-face{font-family:Roboto,Arial,Helvetica,sans-serif;src:url("../fonts/Roboto-Regular-webfont.woff") format("woff");font-weight:normal;font-style:normal}html{scroll-behavior:smooth}.header{display:flex;flex-direction:column;justify-content:space-between}.header__image{display:flex;box-sizing:border-box;background-image:url(/src/images/header-bg-mobile-crazybaby.jpg);width:100%;min-height:245px;background-position:center;background-size:contain;background-repeat:no-repeat}@media(min-width: 576px){.header__image{background-image:url(/src/images/header-bg-tablet-crazybaby.jpg);min-width:320px;flex:1}}@media(min-width: 1024px){.header__image{background-image:url(/src/images/header-bg-desktop-crazybaby.jpg);background-position:center;grid-column:2;grid-row:1;min-height:100%;width:100%}}.header__top{padding-bottom:40px;padding-inline:30px}@media(min-width: 576px){.header__top{padding-inline:35px}}.header__top{display:flex;justify-content:space-between;align-items:center}.header__bottom{box-sizing:border-box;display:flex;flex-direction:column;align-items:center}@media(min-width: 576px){.header__bottom{box-sizing:border-box;flex-direction:row-reverse;align-items:center;gap:20px}}@media(min-width: 1024px){.header__bottom{margin-top:171px;display:grid;grid-template-columns:1fr 2fr;align-items:center;padding:0}}.header__text{padding-bottom:40px;padding-inline:30px}@media(min-width: 576px){.header__text{padding-inline:35px}}@media(min-width: 1024px){.header__text{padding:0;grid-column:1}}.header__subtitle{font-weight:400;font-size:16px;line-height:24px}.header__title{font-weight:700;font-size:40px;line-height:52px;text-transform:uppercase}@media(min-width: 576px){.header__title{font-size:48px;line-height:62px}}@media(min-width: 1024px){.header__title{font-size:62px;line-height:78px}}.icon{display:block;background-image:url(/src/images/icons/icon-burger-menu-crazybaby.svg);width:32px;height:32px;background-repeat:no-repeat}.icon--close{background-image:url(/src/images/icons/icon-close-crazybaby.svg);background-repeat:no-repeat;width:24px;height:24px}.menu{box-sizing:border-box;width:100%;padding-block:25px;padding-inline:30px}@media(min-width: 576px){.menu{padding-inline:35px}}.menu{height:100vh;background-color:#f7f7f7;display:flex;flex-direction:column}.menu__top{display:flex;justify-content:space-between;align-items:center}.menu__btn{background:none;border:none;color:#828282;font-size:14px;font-weight:300;line-height:18px;text-transform:uppercase;cursor:pointer;padding:0}.menu__btn:active{color:#333;font-weight:400}.menu__bottom{margin-top:50px;display:flex;flex-direction:row;gap:20px;align-items:center}@media(min-width: 576px){.menu__bottom{display:none}}.nav--desktop{display:none}@media(min-width: 1024px){.nav{display:flex;justify-content:center;margin:198px 0 90px}}.nav__list{padding:0;list-style:none;margin:30px 0 0;display:flex;flex-direction:column}@media(min-width: 1024px){.nav__list{flex-direction:row;gap:84px;margin:0}}.nav__link{color:#333;font-weight:400;font-size:14px;line-height:20px;text-transform:uppercase;text-decoration:none}@media(min-width: 576px){.nav__link{font-size:22px;line-height:28px}}@media(min-width: 1024px){.nav__link{padding:0;margin:0}}.nav__link--info{color:#4f4f4f;font-size:14px;text-transform:uppercase;text-decoration:none;font-weight:300;line-height:100%}.nav__link:hover{font-weight:700}.nav__item{padding-bottom:25px}@media(min-width: 576px){.nav__item{padding-bottom:40px}.nav__item:first-child{padding-top:40px}}@media(min-width: 1024px){.nav__item{padding:0}.nav__item:first-child{padding-top:0}}.nav__item:last-child{padding:0}.page{font-family:Inter,sans-serif;color:#333;font-size:14px;line-height:21px;overflow-x:hidden}.page__body{margin:0;background-color:#f7f7f7;overflow-x:hidden}@media(min-width: 1024px){.page__body{padding:30px 123px}}.page__menu{position:fixed;inset:0;overflow:hidden;pointer-events:none;opacity:0}.page__menu:target{opacity:1;pointer-events:all}@media(min-width: 576px){.page__menu:target{padding:45px 34px;max-width:768px}}.top-bar{padding-block:25px;padding-inline:30px}@media(min-width: 576px){.top-bar{padding-inline:35px}}.top-bar{display:flex;justify-content:space-between;align-items:center}@media(min-width: 576px){.top-bar{padding:40px 35px;gap:30px}}@media(min-width: 1024px){.top-bar{padding:0}}.top-bar__icon{display:flex;gap:24px}@media(min-width: 1024px){.top-bar__icon{display:none}}.top-bar__text{display:none;margin-left:auto}@media(min-width: 576px){.top-bar__text{display:flex;align-items:center;gap:30px}}.btn{flex-direction:column;margin-top:auto;display:flex;align-items:center;justify-content:center;width:260px;height:48px;cursor:pointer;font-weight:500;font-size:12px;line-height:100%;text-transform:uppercase;border:none;color:#fff;background-color:#333}@media(min-width: 576px){.btn{display:none}}.btn:hover{background-color:#131313}.btn:disabled{background-color:#d0d0d0}@media(min-width: 576px){.btn--menu{display:none}}.btn--tablet{display:none}@media(min-width: 576px){.btn--tablet{display:flex;width:100px;height:48px;padding:0 20px;margin-top:auto}}.our-story{display:grid;grid-auto-flow:column;grid-auto-columns:35ch;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;anchor-name:--carousel}@media(min-width: 576px){.our-story{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-gap:20px;overflow-x:visible;scroll-snap-type:none}}@media(min-width: 1024px){.our-story{display:flex;gap:30px}}.story{box-sizing:border-box;margin:70px 0 0 30px;scroll-snap-align:center}@media(min-width: 576px){.story--left{margin:70px 0 0 34px}}@media(min-width: 576px){.story--right{margin:70px 34px 0 0}}@media(min-width: 1024px){.story{max-width:276px;margin:0}}.story__photo{display:block;margin:0 auto 40px;height:40px;width:50px}@media(min-width: 1024px){.story__photo{width:70px;height:50px;margin:0 auto 30px}}.story__title{margin:0;padding-bottom:20px;text-align:center;font-size:22px;font-weight:700;text-transform:uppercase;line-height:28px;color:#333}@media(min-width: 1024px){.story__title{padding-bottom:24px}.story__title--left{padding-bottom:52px}}.story__subtitle{text-align:center;margin:0;font-size:14px;font-weight:400;line-height:21px;color:#7c7c7c}.picture{box-sizing:border-box;margin:70px 12px;background-image:url(/src/images/meet-luma-crazybaby-mb.jpg);background-repeat:no-repeat;background-position:center;min-height:195px}@media(min-width: 576px){.picture{background-image:url(/src/images/meet-luma-crazybaby-tb.jpg);min-height:430px;margin:140px 34px}}@media(min-width: 1024px){.picture{background-image:url(/src/images/meet-luma-crazybaby-ds.jpg);min-height:520px;margin:170px 0}}@media(min-width: 576px){.about-us{display:flex;flex-direction:column}}.about-us__card{box-sizing:border-box;margin-bottom:110px}@media(min-width: 576px){.about-us__card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;-moz-column-gap:20px;column-gap:20px;align-items:start}}@media(min-width: 1024px){.about-us__card{-moz-column-gap:30px;column-gap:30px}}.about-us__title{margin:30px;font-size:30px;font-weight:700;line-height:40px;text-transform:uppercase;color:#333}@media(min-width: 576px){.about-us__title{grid-column:2;grid-row:1;margin:0 34px 30px 0;font-size:36px;line-height:46px;max-width:335px}}@media(min-width: 1024px){.about-us__title{font-size:56px;line-height:70px;max-width:580px}}.about-us__subtitle{font-size:14px;font-weight:400;line-height:21px;color:#7c7c7c;margin:0 30px}@media(min-width: 576px){.about-us__subtitle{grid-column:2;grid-row:2;margin:0 34px 30px 0;font-size:16px;line-height:24px}}@media(min-width: 1024px){.about-us__subtitle{margin:0;max-width:580px}}.about-us__photo{box-sizing:border-box;margin:0 30px 20px}@media(min-width: 576px){.about-us__photo{grid-column:1;grid-row:1/4;margin:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}}.about-us__info{position:relative;display:block;text-decoration:none;cursor:pointer;font-size:12px;font-weight:700;line-height:14px;text-transform:uppercase;color:#0db2b3;margin:30px}@media(min-width: 576px){.about-us__info{grid-column:2;grid-row:3;margin:60px 0 30px}}.about-us__info::after{content:"";position:absolute;background-color:#0db2b3;width:50px;height:2px;left:0;bottom:-5px}@media(min-width: 576px){.about-us .about-us__photo--reverse{grid-column:2;grid-row:1/4;margin-right:0}.about-us .about-us__title--reverse{grid-column:1;grid-row:1;font-size:36px;line-height:46px;margin:0 0 0 34px}.about-us .about-us__subtitle--reverse{grid-column:1;grid-row:2;font-size:16px;line-height:24px;margin:0 0 0 34px}.about-us .about-us__info--reverse{grid-column:1;grid-row:3;margin:0 0 0 34px}}@media(min-width: 1024px){.about-us .about-us__title--reverse{font-size:56px;line-height:70px;margin:0}.about-us .about-us__subtitle--reverse{margin:0}.about-us .about-us__info--reverse{margin:0}}.review{display:flex;align-items:center;justify-content:center;position:relative;margin:auto;flex-direction:column;text-align:center;width:100%}@media(min-width: 576px){.review{max-width:710px}}@media(min-width: 1024px){.review{max-width:795px;margin-top:102px}}.review__title{position:relative;margin:30px 30px 0;font-size:14px;font-weight:700;line-height:20px}@media(min-width: 576px){.review__title{font-size:24px;line-height:36px;margin:0 34px}}.review__title::before{content:"";position:absolute;top:30%;left:60%;transform:translate(-50%, -50%);width:100%;height:170px;display:flex;align-items:center;justify-content:center;background-image:url("/src/images/quotes-crazybaby.png");background-repeat:no-repeat;background-size:contain;opacity:1}@media(min-width: 576px){.review__title::before{left:85%}}@media(min-width: 1024px){.review__title::before{top:50%;height:192px}}.review__avatar{margin-top:30px;display:flex;align-items:center;justify-content:center;flex-direction:column}@media(min-width: 576px){.review__avatar{margin-top:55px}}@media(min-width: 1024px){.review__avatar{margin-top:30px}}.review__photo{width:62px;height:62px}.review__name{margin:10px 0 5px;color:#333;font-size:16px;font-weight:700;line-height:22px}@media(min-width: 1024px){.review__name{margin-top:20px}}.review__profession{margin:0;font-size:14px;font-weight:400;line-height:21px;color:#7c7c7c}.features__title{margin:30px;font-weight:700;font-size:30px;line-height:40px;text-transform:uppercase}@media(min-width: 576px){.features__title{margin:34px}}@media(min-width: 1024px){.features__title{margin:170px 0 30px;font-size:56px;line-height:70px}}.features__category{background-color:#d6ecec}@media(min-width: 576px){.features__category{max-width:700px;max-height:555px;margin:34px;display:grid;grid-template-columns:1fr 1fr}}@media(min-width: 1024px){.features__category{display:none}}.features__subtitle{font-weight:700;font-size:18px;line-height:22px;text-transform:uppercase;color:#0c797a;padding:30px 40px 20px}@media(min-width: 576px){.features__subtitle{grid-column:1;grid-row:1;margin:0;padding:60px 0 20px 90px}}@media(min-width: 1024px){.features__subtitle{font-size:34px;line-height:42px}}.features__list{margin-left:25px;padding-inline:30px}@media(min-width: 576px){.features__list{padding-inline:35px}}@media(min-width: 576px){.features__list{grid-column:1;grid-row:2;margin:0;padding:0 0 30px 100px}}.features__item{font-weight:400;font-size:14px;line-height:21px;color:#333;padding-bottom:10px}@media(min-width: 1024px){.features__item{font-size:16px;line-height:24px}}.features__nav{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px 0}@media(min-width: 576px){.features__nav{max-height:233px;grid-column:1;grid-row:3;justify-content:flex-start;padding:0 0 30px 100px}}.features__arrow{background:none;border:none;padding:0;cursor:pointer}.features__arrow svg path{fill:#bdbdbd;transition:fill .2s}.features__arrow.active svg path{fill:#333}.features__arrow:hover svg path{fill:#0c797a}@media(min-width: 1024px){.features__arrow{display:none}}.features__image{background-image:url(/src/images/future2.0.png);background-repeat:no-repeat;background-size:contain;background-position:center bottom;width:70%;min-height:175px}@media(min-width: 576px){.features__image{grid-column:2;grid-row:1/4;width:100%;min-height:400px;background-size:100%}}.features__pagination{display:flex;justify-content:center;align-items:baseline;gap:2px;font-family:initial}@media(min-width: 1024px){.features__pagination{display:none}}.features__page--current{font-size:16px;font-weight:400;line-height:24px;color:#333;position:relative;top:-3px;margin-top:10px}.features__page--sep{font-size:11px;font-weight:400;line-height:100%;color:#0c797a}.features__page--total{font-size:11px;font-weight:400;line-height:100%;color:#0c797a}.features__desktop{display:none}@media(min-width: 1024px){.features__desktop{display:flex;background-color:#d6ecec;min-height:645px}}.features__desktop-left{flex:1;padding:60px 0 60px 102px;display:flex;flex-direction:column;gap:40px;max-width:380px}.features__desktop-row{display:flex;gap:130px}.features__desktop-col{flex:1;display:flex;flex-direction:column;min-width:0}.features__desktop-col .features__subtitle{padding:0 0 30px}.features__desktop-col .features__list{margin:0;padding:0}@media(min-width: 1024px){.features__desktop-col .features__list{margin-left:25px}}.features__desktop-right{flex:1;display:flex;flex-direction:column;padding:60px 0 0 90px}.features__desktop-image{flex:1;background-image:url(/src/images/future2.0.png);background-repeat:no-repeat;background-size:contain;background-position:bottom;min-height:300px}.form{margin:0 30px}@media(min-width: 576px){.form{display:flex;gap:21px;margin:0}}@media(min-width: 1024px){.form{gap:28px}}@media(min-width: 576px){.form__left{flex:1;margin:140px 0 0 34px}}@media(min-width: 576px){.form__right{flex:1;margin:140px 34px 0 0}}.form__title{font-weight:700;font-size:30px;line-height:40px;text-transform:uppercase}@media(min-width: 576px){.form__title{font-size:36px;line-height:46px;margin:0}}@media(min-width: 1024px){.form__title{font-size:56px;line-height:70px}}.form__input{font-family:inherit;box-sizing:border-box;border:1px solid #828282;outline:none;cursor:text;font-weight:400;font-size:16px;line-height:24px;padding:12px 20px;width:100%;background-color:#f7f7f7;margin-bottom:20px}.form__input--big{height:130px}@media(min-width: 576px){.form__input--big{height:200px;margin-bottom:30px}}@media(min-width: 1024px){.form__input--big{height:128px}}.form__input:focus{border:1px solid #0c797a;color:#333}.form__input:not(:-moz-placeholder):invalid{border:1px solid #eb5757;color:rgba(235,87,87,.3019607843)}.form__input:not(:placeholder-shown):invalid{border:1px solid #eb5757;color:rgba(235,87,87,.3019607843)}.form_btn{border:none;background-color:#0db2b3;color:#fff;font-weight:700;font-size:12px;line-height:14px;text-transform:uppercase;padding:13px 35px;cursor:pointer}.form_btn:hover{background-color:#0c797a}.form_btn:disabled{background-color:#cfeff0}.footer{position:relative}.footer__social{margin-top:110px;display:flex;justify-content:center;gap:40px}@media(min-width: 576px){.footer__social{margin:0}}.footer__text{margin:30px 30px 20px;text-align:center;font-weight:400;font-size:14px;line-height:21px;color:#bdbdbd}@media(min-width: 576px){.footer__text{margin:60px 34px 30px}}.footer__logo{display:none}@media(min-width: 576px){.footer__logo{display:flex;justify-content:center;margin:140px 0 60px}}.footer__top{display:none}@media(min-width: 576px){.footer__top{position:absolute;right:34px;bottom:125px;display:flex;transition:transform .3s}.footer__top:hover{transform:scale(1.2)}}/*# sourceMappingURL=main.min.css.map */ \ No newline at end of file diff --git a/css/main.min.css.map b/css/main.min.css.map new file mode 100644 index 000000000..9a4995010 --- /dev/null +++ b/css/main.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/styles/utils/_vars.scss","../src/styles/utils/_extends.scss","../src/styles/_fonts.scss","../src/styles/block/_header.scss","../src/styles/utils/_mixins.scss","../src/styles/block/_icon.scss","../src/styles/block/_menu.scss","../src/styles/block/_nav.scss","../src/styles/block/_page.scss","../src/styles/block/_top-bar.scss","../src/styles/block/_btn.scss","../src/styles/block/_our-story.scss","../src/styles/block/_picture.scss","../src/styles/block/_about-us.scss","../src/styles/block/_review.scss","../src/styles/block/_features.scss","../src/styles/block/_form.scss","../src/styles/block/_footer.scss"],"names":[],"mappings":"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","file":"main.min.css"} \ No newline at end of file diff --git a/index.html b/index.html index d339e6856..9d1aab2e9 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,513 @@ + - + - Title + + CrazyBaby + + + - -

Hello Mate Academy

+ + + +
+
+ + +
+ Specs +
+ + / + +
+
+ + + + +
+ +
+
+ +
+
+
+

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

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

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

Designed for the future

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

Luna Eye

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

+ +
+ Garrett Martin +

Garrett Martin

+

Creative Director

+
+
+ + +
+

Features

+
+

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 Playback from Last Song Stopped
    • +
+ + +
+
+ + + +
+ 01 + / + 03 +
+
+
+
+
+
+ +
+
+
+

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

Sound & Music

+
    +
  • Feel-in-chest Bass 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
    • +
+
+
+ +
+
+

App Features

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

Do you have any
questions?

+
+ +
+
+ + + + + + +
+
+
+
+ + + diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..aaa6d39c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "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 19d2ac56e..cd8f44768 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/avatar-garrett-m'artin.svg b/src/images/avatar-garrett-m'artin.svg new file mode 100644 index 000000000..551d3e805 --- /dev/null +++ b/src/images/avatar-garrett-m'artin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/designed-for-the-future-desktop.jpg b/src/images/designed-for-the-future-desktop.jpg new file mode 100644 index 000000000..bb11ff9fe Binary files /dev/null and b/src/images/designed-for-the-future-desktop.jpg differ diff --git a/src/images/designed-for-the-future-tablet.jpg b/src/images/designed-for-the-future-tablet.jpg new file mode 100644 index 000000000..87084a03f Binary files /dev/null and b/src/images/designed-for-the-future-tablet.jpg differ diff --git a/src/images/designed-for-the-future.jpg b/src/images/designed-for-the-future.jpg new file mode 100644 index 000000000..b0ab39ad8 Binary files /dev/null and b/src/images/designed-for-the-future.jpg differ diff --git a/src/images/features-mb.jpg b/src/images/features-mb.jpg new file mode 100644 index 000000000..0882e6166 Binary files /dev/null and b/src/images/features-mb.jpg differ diff --git a/src/images/features-mb.png b/src/images/features-mb.png new file mode 100644 index 000000000..05a8baff5 Binary files /dev/null and b/src/images/features-mb.png differ diff --git a/src/images/future.png b/src/images/future.png new file mode 100644 index 000000000..c44f4739e Binary files /dev/null and b/src/images/future.png differ diff --git a/src/images/future2.0.png b/src/images/future2.0.png new file mode 100644 index 000000000..2ddbb2786 Binary files /dev/null and b/src/images/future2.0.png differ diff --git a/src/images/header-bg-desktop-crazybaby.jpg b/src/images/header-bg-desktop-crazybaby.jpg new file mode 100644 index 000000000..8a3ed1108 Binary files /dev/null and b/src/images/header-bg-desktop-crazybaby.jpg differ diff --git a/src/images/header-bg-mobile-crazybaby.jpg b/src/images/header-bg-mobile-crazybaby.jpg new file mode 100644 index 000000000..a118cc356 Binary files /dev/null and b/src/images/header-bg-mobile-crazybaby.jpg differ diff --git a/src/images/header-bg-tablet-crazybaby.jpg b/src/images/header-bg-tablet-crazybaby.jpg new file mode 100644 index 000000000..24a105c50 Binary files /dev/null and b/src/images/header-bg-tablet-crazybaby.jpg differ diff --git a/src/images/icons/arrow-hover-crazy.svg b/src/images/icons/arrow-hover-crazy.svg new file mode 100644 index 000000000..037f13419 --- /dev/null +++ b/src/images/icons/arrow-hover-crazy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-left-crazy.svg b/src/images/icons/arrow-left-crazy.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/icons/arrow-left-crazy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-right-crazy.svg b/src/images/icons/arrow-right-crazy.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icons/arrow-right-crazy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-up.svg b/src/images/icons/arrow-up.svg new file mode 100644 index 000000000..e23b10413 --- /dev/null +++ b/src/images/icons/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-crazy.svg b/src/images/icons/facebook-crazy.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icons/facebook-crazy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon-crazybaby.svg b/src/images/icons/favicon-crazybaby.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/icons/favicon-crazybaby.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/icon-burger-menu-crazybaby.svg b/src/images/icons/icon-burger-menu-crazybaby.svg new file mode 100644 index 000000000..42d0ecd63 --- /dev/null +++ b/src/images/icons/icon-burger-menu-crazybaby.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-close-crazybaby.svg b/src/images/icons/icon-close-crazybaby.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icons/icon-close-crazybaby.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-future.svg b/src/images/icons/icon-future.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icons/icon-future.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-intuitive-lighting-system.svg b/src/images/icons/icon-intuitive-lighting-system.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icons/icon-intuitive-lighting-system.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/icon-multiroom-system.svg b/src/images/icons/icon-multiroom-system.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icons/icon-multiroom-system.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-speaker.svg b/src/images/icons/icon-speaker.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icons/icon-speaker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/insta-crazy.svg b/src/images/icons/insta-crazy.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icons/insta-crazy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo_crazybaby.svg b/src/images/icons/logo_crazybaby.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/icons/logo_crazybaby.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/twitter-crazy.svg b/src/images/icons/twitter-crazy.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icons/twitter-crazy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/luma-eye-desktop.jpg b/src/images/luma-eye-desktop.jpg new file mode 100644 index 000000000..866bb90f8 Binary files /dev/null and b/src/images/luma-eye-desktop.jpg differ diff --git a/src/images/luma-eye-tablet.jpg b/src/images/luma-eye-tablet.jpg new file mode 100644 index 000000000..9f0100a70 Binary files /dev/null and b/src/images/luma-eye-tablet.jpg differ diff --git a/src/images/luna-eye.jpg b/src/images/luna-eye.jpg new file mode 100644 index 000000000..a4ae61d1f Binary files /dev/null and b/src/images/luna-eye.jpg differ diff --git a/src/images/meet-luma-crazybaby-ds.jpg b/src/images/meet-luma-crazybaby-ds.jpg new file mode 100644 index 000000000..32be892d8 Binary files /dev/null and b/src/images/meet-luma-crazybaby-ds.jpg differ diff --git a/src/images/meet-luma-crazybaby-mb.jpg b/src/images/meet-luma-crazybaby-mb.jpg new file mode 100644 index 000000000..5728b859d Binary files /dev/null and b/src/images/meet-luma-crazybaby-mb.jpg differ diff --git a/src/images/meet-luma-crazybaby-tb.jpg b/src/images/meet-luma-crazybaby-tb.jpg new file mode 100644 index 000000000..8a3133634 Binary files /dev/null and b/src/images/meet-luma-crazybaby-tb.jpg differ diff --git a/src/images/oval.png b/src/images/oval.png new file mode 100644 index 000000000..05a8baff5 Binary files /dev/null and b/src/images/oval.png differ diff --git a/src/images/quotes-crazybaby.png b/src/images/quotes-crazybaby.png new file mode 100644 index 000000000..4ddbbf1ce Binary files /dev/null and b/src/images/quotes-crazybaby.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..07d1f0970 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,228 @@ 'use strict'; + +// ===== Language buttons ===== +const langButtons = document.querySelectorAll('.menu__btn'); + +if (langButtons.length) { + langButtons.forEach(btn => { + btn.addEventListener('click', () => { + langButtons.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + }); + }); +} + +// ===== Features slider ===== +const categories = [ + { + title: 'Sound & Music', + items: [ + 'Feel-in-chest Bass Power', + 'Lossless Digital Audio Transmission', + 'Easy & Stable Stereo Pairing', + 'Crisp and Clear High Frequency Sound', + 'Streams from Cloud Music and Local Library', + 'Auto Music Playback from Last Song Stopped' + ], + image: '/src/images/features-sound.png' + }, + { + title: 'Connectivity', + items: [ + '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' + ], + image: '/src/images/features-connect.png' + }, + { + title: 'App Features', + items: [ + 'Customize Music Schedule', + 'Wake Up with Favorite Songs', + 'Home Detection Auto Wake Up', + 'Color Wheel' + ], + image: '/src/images/features-design.png' + } +]; + +let current = 0; + +// DOM elements +const subtitle = document.querySelector('.features__subtitle'); +const list = document.querySelector('.features__list'); +const image = document.querySelector('.features__image'); +const currentNum = document.querySelector('.features__page--current'); +const totalNum = document.querySelector('.features__page--total'); +const btnNext = document.querySelector('.features__arrow--next'); +const btnPrev = document.querySelector('.features__arrow--prev'); + +// ===== Render function ===== + +function render() { + const cat = categories[current]; + + if (!cat) return; + + + subtitle.textContent = cat.title; + + list.innerHTML = cat.items + .map(t => `
  • ${t}
    • `) + .join(''); + + // image.style.backgroundImage = `url("${cat.image}")`; + + currentNum.textContent = String(current + 1).padStart(2, '0'); + + btnPrev.disabled = current === 0; + btnNext.disabled = current === categories.length - 1; + + currentNum.textContent = String(current + 1).padStart(2, '0'); + totalNum.textContent = String(categories.length).padStart(2, '0'); +} + +// ===== Buttons ===== +btnNext.addEventListener('click', () => { + if (current < categories.length - 1) { + current++; + btnNext.classList.add('active'); + btnPrev.classList.remove('active'); + render(); + } +}); + +btnPrev.addEventListener('click', () => { + if (current > 0) { + current--; + btnPrev.classList.add('active'); + btnNext.classList.remove('active'); + render(); + } +}); +// ===== Features slider ===== +// const categories = [ +// { +// title: 'Sound & Music', +// items: [ +// 'Feel-in-chest Bass Power', +// 'Lossless Digital Audio Transmission', +// 'Easy & Stable Stereo Pairing', +// 'Crisp and Clear High Frequency Sound', +// 'Streams from Cloud Music and Local Library', +// 'Auto Music Playback from Last Song Stopped' +// ], +// image: '/src/images/features-sound.png' +// }, +// { +// title: 'Connectivity', +// items: [ +// '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' +// ], +// image: '/src/images/features-connect.png' +// }, +// { +// title: 'App Features', +// items: [ +// 'Customize Music Schedule', +// 'Wake Up with Favorite Songs', +// 'Home Detection Auto Wake Up', +// 'Color Wheel' +// ], +// image: '/src/images/features-design.png' +// } +// ]; + +// let current = 0; + +// // DOM elements +// const subtitle = document.querySelector('.features__subtitle'); +// const list = document.querySelector('.features__list'); +// const image = document.querySelector('.features__image'); +// const currentNum = document.querySelector('.features__page--current'); +// const totalNum = document.querySelector('.features__page--total'); +// const btnNext = document.querySelector('.features__arrow--next'); +// const btnPrev = document.querySelector('.features__arrow--prev'); + +// // ===== Helpers ===== +// function isDesktop() { +// return window.innerWidth >= 1024; // можно поменять брейкпоинт +// } + +// // ===== Render function ===== +// function render() { + +// // ===== DESKTOP MODE ===== +// if (isDesktop()) { +// // subtitle.textContent = 'Features'; + +// list.innerHTML = categories +// .map(cat => ` +//
    +//

    ${cat.title}

    +//
      +// ${cat.items.map(t => `
    • ${t}
      • `).join('')} +//
    +//
    +// `) +// .join(''); + +// btnPrev.style.display = 'none'; +// btnNext.style.display = 'none'; +// currentNum.style.display = 'none'; +// totalNum.style.display = 'none'; + +// return; +// } + +// // ===== MOBILE / TABLET SLIDER MODE ===== +// const cat = categories[current]; +// if (!cat) return; + +// subtitle.textContent = cat.title; + +// list.innerHTML = cat.items +// .map(t => `
  • ${t}
    • `) +// .join(''); + +// currentNum.textContent = String(current + 1).padStart(2, '0'); +// totalNum.textContent = String(categories.length).padStart(2, '0'); + +// btnPrev.style.display = ''; +// btnNext.style.display = ''; +// currentNum.style.display = ''; +// totalNum.style.display = ''; + +// btnPrev.disabled = current === 0; +// btnNext.disabled = current === categories.length - 1; +// } + +// // ===== Buttons ===== +// btnNext.addEventListener('click', () => { +// if (current < categories.length - 1) { +// current++; +// render(); +// } +// }); + +// btnPrev.addEventListener('click', () => { +// if (current > 0) { +// current--; +// render(); +// } +// }); + +// // ===== Responsive update ===== +// window.addEventListener('resize', render); + +// // init +// render(); diff --git a/src/styles/block/_about-us.scss b/src/styles/block/_about-us.scss new file mode 100644 index 000000000..5db5c8c22 --- /dev/null +++ b/src/styles/block/_about-us.scss @@ -0,0 +1,164 @@ +.about-us { + @include on-tablet { + display: flex; + flex-direction: column; + } + + &__card { + box-sizing: border-box; + margin-bottom: 110px; + + @include on-tablet { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto auto; + column-gap: 20px; + align-items: start; + } + + @include on-desktop { + column-gap: 30px; + } + } + + &__title { + margin: 30px; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-transform: uppercase; + color: colors(text-secondary); + + @include on-tablet { + grid-column: 2; + grid-row: 1; + margin: 0 34px 30px 0; + + font-size: 36px; + line-height: 46px; + max-width: 335px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + max-width: 580px; + } + } + + &__subtitle { + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: colors(text-main); + margin: 0 30px; + + @include on-tablet { + grid-column: 2; + grid-row: 2; + + margin: 0 34px 30px 0; + font-size: 16px; + line-height: 24px; + } + + @include on-desktop { + margin: 0; + max-width: 580px; + } + } + + &__photo { + box-sizing: border-box; + margin: 0 30px 20px; + + @include on-tablet { + grid-column: 1; + grid-row: 1 / 4; + margin: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + } + + &__info { + position: relative; + display: block; + text-decoration: none; + cursor: pointer; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-transform: uppercase; + color: colors(primary); + margin: 30px; + + @include on-tablet { + grid-column: 2; + grid-row: 3; + + margin: 60px 0 30px; + } + + &::after { + content: ''; + position: absolute; + background-color: colors(primary); + width: 50px; + height: 2px; + left: 0; + bottom: -5px; + } + } + + @include on-tablet { + .about-us__photo--reverse { + grid-column: 2; + grid-row: 1 / 4; + + margin-right: 0; + } + + .about-us__title--reverse { + grid-column: 1; + grid-row: 1; + + font-size: 36px; + line-height: 46px; + margin: 0 0 0 34px; + } + + .about-us__subtitle--reverse { + grid-column: 1; + grid-row: 2; + + font-size: 16px; + line-height: 24px; + margin: 0 0 0 34px; + } + + .about-us__info--reverse { + grid-column: 1; + grid-row: 3; + margin: 0 0 0 34px; + } + } + + @include on-desktop { + .about-us__title--reverse { + font-size: 56px; + line-height: 70px; + margin: 0; + } + + .about-us__subtitle--reverse { + margin: 0; + } + + .about-us__info--reverse { + margin: 0; + } + } +} diff --git a/src/styles/block/_btn.scss b/src/styles/block/_btn.scss new file mode 100644 index 000000000..abd5306c5 --- /dev/null +++ b/src/styles/block/_btn.scss @@ -0,0 +1,47 @@ +.btn { + flex-direction: column; + margin-top: auto; + + @include flex-center; + + width: 260px; + height: 48px; + cursor: pointer; + font-weight: 500; + font-size: 12px; + line-height: 100%; + text-transform: uppercase; + border: none; + color: white; + background-color: colors(text-secondary); + + @include on-tablet { + display: none; + } + + &:hover { + background-color: colors(text-primary); + } + + &:disabled { + background-color: colors(border); + } + + &--menu { + @include on-tablet { + display: none; + } + } + + &--tablet { + display: none; + + @include on-tablet { + display: flex; + width: 100px; + height: 48px; + padding: 0 20px; + margin-top: auto; + } + } +} diff --git a/src/styles/block/_features.scss b/src/styles/block/_features.scss new file mode 100644 index 000000000..fad6aebec --- /dev/null +++ b/src/styles/block/_features.scss @@ -0,0 +1,233 @@ +.features { + &__title { + margin: 30px; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + + @include on-tablet { + margin: 34px; + } + + @include on-desktop { + margin: 170px 0 30px; + font-size: 56px; + line-height: 70px; + } + } + + &__category { + background-color: #d6ecec; + + @include on-tablet { + max-width: 700px; + max-height: 555px; + margin: 34px; + display: grid; + grid-template-columns: 1fr 1fr; + } + + @include on-desktop { + display: none; + } + } + + &__subtitle { + font-weight: 700; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + color: colors(primary-dark); + padding: 30px 40px 20px; + + @include on-tablet { + grid-column: 1; + grid-row: 1; + margin: 0; + padding: 60px 0 20px 90px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } + } + + &__list { + margin-left: 25px; + @include contenr-padding-in-line; + + @include on-tablet { + grid-column: 1; + grid-row: 2; + margin: 0; + padding: 0 0 30px 100px; + } + } + + &__item { + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: colors(text-secondary); + padding-bottom: 10px; + + @include on-desktop { + font-size: 16px; + line-height: 24px; + } + } + + &__nav { + @include flex-center; + + gap: 20px; + padding: 20px 0; + + @include on-tablet { + max-height: 233px; + grid-column: 1; + grid-row: 3; + justify-content: flex-start; + padding: 0 0 30px 100px; + } + } + + &__arrow { + background: none; + border: none; + padding: 0; + cursor: pointer; + + & svg path { + fill: #bdbdbd; + transition: fill 0.2s; + } + + &.active svg path { + fill: #333; + } + + &:hover svg path { + fill: #0c797a; + } + + @include on-desktop { + display: none; + } + } + + &__image { + background-image: url(/src/images/future2.0.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center bottom; + width: 70%; + min-height: 175px; + + @include on-tablet { + grid-column: 2; + grid-row: 1 / 4; + width: 100%; + min-height: 400px; + background-size: 100%; + } + } + + &__pagination { + display: flex; + justify-content: center; + align-items: baseline; + gap: 2px; + font-family: initial; + + @include on-desktop { + display: none; + } + } + + &__page--current { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: #333; + position: relative; + top: -3px; + margin-top: 10px; + } + + &__page--sep { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: #0c797a; + } + + &__page--total { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: #0c797a; + } + + // ===== Desktop ===== + &__desktop { + display: none; + + @include on-desktop { + display: flex; + background-color: #d6ecec; + min-height: 645px; + } + } + + &__desktop-left { + flex: 1; + padding: 60px 0 60px 102px; + display: flex; + flex-direction: column; + gap: 40px; + max-width: 380px; + } + + &__desktop-row { + display: flex; + gap: 130px; + } + + &__desktop-col { + flex: 1; + display: flex; + flex-direction: column; + min-width: 0; + + .features__subtitle { + padding: 0 0 30px; + } + + .features__list { + margin: 0; + padding: 0; + @include on-desktop { + margin-left: 25px; + } + } + } + + &__desktop-right { + flex: 1; + display: flex; + flex-direction: column; + padding: 60px 0 0 90px; + } + + &__desktop-image { + flex: 1; + background-image: url(/src/images/future2.0.png); + background-repeat: no-repeat; + background-size: contain; + background-position: bottom; + min-height: 300px; + } +} diff --git a/src/styles/block/_footer.scss b/src/styles/block/_footer.scss new file mode 100644 index 000000000..d6a001b63 --- /dev/null +++ b/src/styles/block/_footer.scss @@ -0,0 +1,52 @@ +.footer { + position: relative; + &__social { + margin-top: 110px; + display: flex; + justify-content: center; + gap: 40px; + + @include on-tablet { + margin: 0; + } + } + + &__text { + margin: 30px 30px 20px; + text-align: center; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: colors(border-light); + + @include on-tablet { + margin: 60px 34px 30px; + } + } + + &__logo { + display: none; + + @include on-tablet { + display: flex; + justify-content: center; + margin: 140px 0 60px; + } + } + + &__top { + display: none; + + @include on-tablet { + position: absolute; + right: 34px; + bottom: 125px; + display: flex; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + } +} diff --git a/src/styles/block/_form.scss b/src/styles/block/_form.scss new file mode 100644 index 000000000..ee2b3a244 --- /dev/null +++ b/src/styles/block/_form.scss @@ -0,0 +1,103 @@ +.form { + margin: 0 30px; + + @include on-tablet { + display: flex; + gap: 21px; + margin: 0; + } + + @include on-desktop { + gap: 28px; + } + + &__left { + @include on-tablet { + flex: 1; + margin: 140px 0 0 34px; + } + } + + &__right { + @include on-tablet { + flex: 1; + margin: 140px 34px 0 0; + } + } + + &__title { + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + margin: 0; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__input { + font-family: inherit; + box-sizing: border-box; + border: 1px solid #828282; + outline: none; + cursor: text; + font-weight: 400; + font-size: 16px; + line-height: 24px; + padding: 12px 20px; + width: 100%; + background-color: colors(background); + margin-bottom: 20px; + + &--big { + height: 130px; + + @include on-tablet { + height: 200px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 128px; + } + } + + &:focus { + border: 1px solid colors(primary-dark); + color: colors(text-secondary); + } + + &:not(:placeholder-shown):invalid { + border: 1px solid #eb5757; + color: #eb57574d; + } + } + + &_btn { + border: none; + background-color: colors(primary); + color: white; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; + padding: 13px 35px; + cursor: pointer; + + &:hover { + background-color: colors(primary-dark); + } + + &:disabled { + background-color: colors(primary-light); + } + } +} diff --git a/src/styles/block/_header.scss b/src/styles/block/_header.scss new file mode 100644 index 000000000..15b8cb387 --- /dev/null +++ b/src/styles/block/_header.scss @@ -0,0 +1,97 @@ +.header { + display: flex; + flex-direction: column; + justify-content: space-between; + + &__image { + display: flex; + box-sizing: border-box; + background-image: url(/src/images/header-bg-mobile-crazybaby.jpg); + width: 100%; + min-height: 245px; + @include background; + + @include on-tablet { + background-image: url(/src/images/header-bg-tablet-crazybaby.jpg); + min-width: 320px; + flex: 1; + } + + @include on-desktop { + background-image: url(/src/images/header-bg-desktop-crazybaby.jpg); + background-position: center; + grid-column: 2; + grid-row: 1; + min-height: 100%; + width: 100%; + } + } + + &__top { + padding-bottom: 40px; + @include contenr-padding-in-line; + + display: flex; + justify-content: space-between; + align-items: center; + } + + &__bottom { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + + @include on-tablet { + box-sizing: border-box; + flex-direction: row-reverse; + align-items: center; + gap: 20px; + } + + @include on-desktop { + margin-top: 171px; + display: grid; + grid-template-columns: 1fr 2fr; + align-items: center; + padding: 0; + } + } + + &__text { + padding-bottom: 40px; + @include contenr-padding-in-line; + + @include on-desktop { + padding: 0; + grid-column: 1; + } + } + + &__subtitle { + font-weight: 400; + font-size: 16px; + line-height: 24px; + + @include on-desktop { + // max-width: 276px; + } + } + + &__title { + font-weight: 700; + font-size: 40px; + line-height: 52px; + text-transform: uppercase; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } + } +} diff --git a/src/styles/block/_icon.scss b/src/styles/block/_icon.scss new file mode 100644 index 000000000..53228d4f1 --- /dev/null +++ b/src/styles/block/_icon.scss @@ -0,0 +1,14 @@ +.icon { + display: block; + background-image: url(/src/images/icons/icon-burger-menu-crazybaby.svg); + width: 32px; + height: 32px; + background-repeat: no-repeat; + + &--close { + background-image: url(/src/images/icons/icon-close-crazybaby.svg); + background-repeat: no-repeat; + width: 24px; + height: 24px; + } +} diff --git a/src/styles/block/_menu.scss b/src/styles/block/_menu.scss new file mode 100644 index 000000000..0f5cdd6b0 --- /dev/null +++ b/src/styles/block/_menu.scss @@ -0,0 +1,46 @@ +.menu { + box-sizing: border-box; + width: 100%; + padding-block: 25px; + @include contenr-padding-in-line; + + height: 100vh; + background-color: colors(background); + display: flex; + flex-direction: column; + + &__top { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__btn { + background: none; + border: none; + color: #828282; + font-size: 14px; + font-weight: 300; + line-height: 18px; + text-transform: uppercase; + cursor: pointer; + padding: 0; + + &:active { + color: colors(text-secondary); + font-weight: 400; + } + } + + &__bottom { + margin-top: 50px; + display: flex; + flex-direction: row; + gap: 20px; + align-items: center; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/block/_nav.scss b/src/styles/block/_nav.scss new file mode 100644 index 000000000..9b5e336c3 --- /dev/null +++ b/src/styles/block/_nav.scss @@ -0,0 +1,80 @@ +.nav { + &--desktop { + display: none; + } + + @include on-desktop { + display: flex; + justify-content: center; + margin: 198px 0 90px; + } + + &__list { + padding: 0; + list-style: none; + margin: 30px 0 0; + display: flex; + flex-direction: column; + + @include on-desktop { + flex-direction: row; + gap: 84px; + margin: 0; + } + } + + &__link { + color: colors(text-secondary); + font-weight: 400; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + text-decoration: none; + + @include on-tablet { + font-size: 22px; + line-height: 28px; + } + + @include on-desktop { + padding: 0; + margin: 0; + } + + &--info { + color: #4f4f4f; + font-size: 14px; + text-transform: uppercase; + text-decoration: none; + font-weight: 300; + line-height: 100%; + } + + &:hover { + font-weight: 700; + } + } + + &__item { + padding-bottom: 25px; + + @include on-tablet { + padding-bottom: 40px; + + &:first-child { + padding-top: 40px; + } + } + + @include on-desktop { + padding: 0; + &:first-child { + padding-top: 0; + } + } + + &:last-child { + padding: 0; + } + } +} diff --git a/src/styles/block/_our-story.scss b/src/styles/block/_our-story.scss new file mode 100644 index 000000000..63a3948e8 --- /dev/null +++ b/src/styles/block/_our-story.scss @@ -0,0 +1,90 @@ +.our-story { + display: grid; + grid-auto-flow: column; + grid-auto-columns: 35ch; + gap: 10px; + overflow-x: auto; + overscroll-behavior-x: contain; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + anchor-name: --carousel; + + @include on-tablet { + grid-auto-flow: row; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; + overflow-x: visible; + scroll-snap-type: none; + } + + @include on-desktop { + display: flex; + gap: 30px; + } +} + +.story { + box-sizing: border-box; + margin: 70px 0 0 30px; + scroll-snap-align: center; + + &--left { + @include on-tablet { + margin: 70px 0 0 34px; + } + } + + &--right { + @include on-tablet { + margin: 70px 34px 0 0; + } + } + + @include on-desktop { + max-width: 276px; + margin: 0; + } + + &__photo { + display: block; + margin: 0 auto 40px; + height: 40px; + width: 50px; + + @include on-desktop { + width: 70px; + height: 50px; + margin: 0 auto 30px; + } + } + + &__title { + margin: 0; + padding-bottom: 20px; + text-align: center; + font-size: 22px; + font-weight: 700; + text-transform: uppercase; + line-height: 28px; + + color: colors(text-secondary); + + @include on-desktop { + padding-bottom: 24px; + + &--left { + padding-bottom: 52px; + } + } + } + + &__subtitle { + text-align: center; + margin: 0; + + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: colors(text-main); + } +} diff --git a/src/styles/block/_page.scss b/src/styles/block/_page.scss new file mode 100644 index 000000000..b94bc9cce --- /dev/null +++ b/src/styles/block/_page.scss @@ -0,0 +1,36 @@ +.page { + font-family: Inter, sans-serif; + color: colors(text-secondary); + font-size: 14px; + line-height: 21px; + overflow-x: hidden; + + &__body { + margin: 0; + background-color: colors(background); + overflow-x: hidden; + + @include on-desktop { + padding: 30px 123px; + } + } + + &__menu { + position: fixed; + inset: 0; + overflow: hidden; + + pointer-events: none; + opacity: 0; + + &:target { + opacity: 1; + pointer-events: all; + + @include on-tablet { + padding: 45px 34px; + max-width: 768px; + } + } + } +} diff --git a/src/styles/block/_picture.scss b/src/styles/block/_picture.scss new file mode 100644 index 000000000..8063caa66 --- /dev/null +++ b/src/styles/block/_picture.scss @@ -0,0 +1,20 @@ +.picture { + box-sizing: border-box; + margin: 70px 12px; + background-image: url(/src/images/meet-luma-crazybaby-mb.jpg); + background-repeat: no-repeat; + background-position: center; + min-height: 195px; + + @include on-tablet { + background-image: url(/src/images/meet-luma-crazybaby-tb.jpg); + min-height: 430px; + margin: 140px 34px; + } + + @include on-desktop { + background-image: url(/src/images/meet-luma-crazybaby-ds.jpg); + min-height: 520px; + margin: 170px 0; + } +} diff --git a/src/styles/block/_review.scss b/src/styles/block/_review.scss new file mode 100644 index 000000000..42e41ff18 --- /dev/null +++ b/src/styles/block/_review.scss @@ -0,0 +1,102 @@ +.review { + @include flex-center; + + position: relative; + margin: auto; + flex-direction: column; + text-align: center; + width: 100%; + + @include on-tablet { + max-width: 710px; + } + + @include on-desktop { + max-width: 795px; + margin-top: 102px; + } + + &__title { + position: relative; + margin: 30px 30px 0; + font-size: 14px; + font-weight: 700; + line-height: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + margin: 0 34px; + } + + &::before { + content: ''; + position: absolute; + top: 30%; + left: 60%; + transform: translate(-50%, -50%); + + width: 100%; + height: 170px; + + @include flex-center; + + background-image: url('/src/images/quotes-crazybaby.png'); + background-repeat: no-repeat; + background-size: contain; + + opacity: 1; + + @include on-tablet { + left: 85%; + } + + @include on-desktop { + top: 50%; + height: 192px; + } + } + } + + &__avatar { + margin-top: 30px; + + @include flex-center; + + flex-direction: column; + + @include on-tablet { + margin-top: 55px; + } + + @include on-desktop { + margin-top: 30px; + } + } + + &__photo { + width: 62px; + height: 62px; + } + + &__name { + margin: 10px 0 5px; + color: colors(text-secondary); + font-size: 16px; + font-weight: 700; + line-height: 22px; + + @include on-desktop { + margin-top: 20px; + } + } + + &__profession { + margin: 0; + font-size: 14px; + font-weight: 400; + line-height: 21px; + + color: colors(text-main); + } +} diff --git a/src/styles/block/_top-bar.scss b/src/styles/block/_top-bar.scss new file mode 100644 index 000000000..a047dfd00 --- /dev/null +++ b/src/styles/block/_top-bar.scss @@ -0,0 +1,37 @@ +.top-bar { + padding-block: 25px; + @include contenr-padding-in-line; + + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding: 40px 35px; + gap: 30px; + } + + @include on-desktop { + padding: 0; + } + + &__icon { + display: flex; + gap: 24px; + + @include on-desktop { + display: none; + } + } + + &__text { + display: none; + margin-left: auto; + + @include on-tablet { + display: flex; + align-items: center; + gap: 30px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..369ac8db7 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,21 @@ +@use 'sass:map'; + @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'utils/vars'; -body { - background: $c-gray; -} +@import 'block/header'; +@import 'block/icon'; +@import 'block/menu'; +@import 'block/nav'; +@import 'block/page'; +@import 'block/top-bar'; +@import 'block/btn'; +@import 'block/our-story'; +@import 'block/picture'; +@import 'block/about-us'; +@import 'block/review'; +@import 'block/features'; +@import 'block/form'; +@import 'block/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..cf85d1e79 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,49 @@ #{$_property}: $_toValue; } } + +@mixin flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +@mixin background { + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} + +@mixin text-main { + font-size: 14px; + line-height: 21px; + color: colors(text-secondary); +} + +@mixin contenr-padding-in-line() { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 35px; + } + + // @include on-desktop { + // padding-inline: 123px; + // } +} + +@mixin on-tablet { + @media (min-width: 576px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1024px) { + @content; + } +} + +@function cols($n, $col: 72px, $gap: 30px) { + @return calc(#{$n} * #{$col} + #{$n - 1} * #{$gap}); +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..6a4c9a811 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,23 @@ -$c-gray: #eee; +html { + scroll-behavior: smooth; +} + +$colors: ( + primary: #0db2b3, + primary-dark: #0c797a, + primary-light: #cfeff0, + primary-extra-light: #eefafa, + + text-main: #7c7c7c, + text-light: #4f4f4f, + text-primary: #131313, + text-secondary: #333, + + border: #d0d0d0, + border-light: #bdbdbd, + background: #f7f7f7, +); + +@function colors($name) { + @return map.get($colors, $name); +}