diff --git a/.bemlintrc.json b/.bemlintrc.json new file mode 100644 index 0000000000..22a597e54f --- /dev/null +++ b/.bemlintrc.json @@ -0,0 +1,16 @@ +{ + "elementDivider": "__", + "modifierDivider": "--", + "ignore": [ + "node_modules", + "dist" + ], + "rules": { + "one-block": true, + "one-element": true, + "element-inside-parent-block": true, + "no-double-element": true, + "no-neighbour-parent-block": true, + "modifiable-class": true + } +} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 340cff5c58..f3065d382b 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -20,7 +20,7 @@ jobs: with: node-version: ${{ matrix.node-version }} - run: npm install - - run: npm start & sleep 5 && npm test + - run: npm test - name: Upload HTML report(backstop data) if: ${{ always() }} uses: actions/upload-artifact@v2 diff --git a/.linthtmlrc.json b/.linthtmlrc.json index 0f2047a737..774726ebe0 100644 --- a/.linthtmlrc.json +++ b/.linthtmlrc.json @@ -1,3 +1,49 @@ { - "extends": "@mate-academy/linthtml-config" + "attr-bans": [ + "align", + "background", + "bgcolor", + "border", + "frameborder", + "style" + ], + "attr-name-ignore-regex": "viewBox", + "attr-no-dup": true, + "attr-quote-style": "double", + "attr-req-value": true, + "class-no-dup": true, + "doctype-first": true, + "doctype-html5": true, + "fig-req-figcaption": true, + "head-req-title": true, + "html-req-lang": true, + "id-class-style": false, + "id-no-dup": true, + "img-req-src": true, + "img-req-alt": "allownull", + "indent-width": 2, + "indent-style": "spaces", + "indent-width-cont": true, + "input-radio-req-name": true, + "spec-char-escape": true, + "tag-bans": [ + "b", + "i", + "u", + "center", + "style", + "marquee", + "font", + "s" + ], + "tag-name-lowercase": true, + "tag-name-match": true, + "tag-self-close": "never", + "tag-close": true, + "text-ignore-regex": "&", + "title-no-dup": true, + "line-end-style": "lf", + "attr-new-line": 2, + "attr-name-style": "dash", + "attr-no-unsafe-char": true } diff --git a/README.md b/README.md index 93d9738cc4..397477420f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Dia landing page + ## Checklist for preparing a portfolio project for HR review -1. Don’t forget to add the title “Air” for the whole web page + + + + + + + + + + + ## Github flow @@ -65,7 +65,7 @@ Adapt the page to the following screens: 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/layout_dia/). + [DEMO LINK](https://spec0s.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/checklist.md b/checklist.md index c24c685fb5..aad8253cdf 100644 --- a/checklist.md +++ b/checklist.md @@ -3,7 +3,7 @@ ## Tech review -1. Add favicon + + 14. OPTIONAL: After everything is done, you can implement the slider in the first section ## HR review -1. To make it clear to the recruiter what exactly this landing page is, it is better to give the whole web page the title “Air” + diff --git a/package.json b/package.json index d72aceadf9..42a9b8f9b3 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/bemlint": "^0.1.1", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "0.0.2", - "@mate-academy/scripts": "^0.9.0", + "@mate-academy/scripts": "^1.2.8", "@mate-academy/stylelint-config": "*", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/images/cross.png b/src/images/cross.png new file mode 100644 index 0000000000..75456aa0b0 Binary files /dev/null and b/src/images/cross.png differ diff --git a/src/images/expertise/image-1.png b/src/images/expertise/image-1.png new file mode 100644 index 0000000000..164a7e1a4d Binary files /dev/null and b/src/images/expertise/image-1.png differ diff --git a/src/images/expertise/image-2.png b/src/images/expertise/image-2.png new file mode 100644 index 0000000000..736cb3af6b Binary files /dev/null and b/src/images/expertise/image-2.png differ diff --git a/src/images/expertise/image-3.png b/src/images/expertise/image-3.png new file mode 100644 index 0000000000..1b53488fb3 Binary files /dev/null and b/src/images/expertise/image-3.png differ diff --git a/src/images/features/features-bg.jpg b/src/images/features/features-bg.jpg deleted file mode 100644 index 36b7a748d3..0000000000 Binary files a/src/images/features/features-bg.jpg and /dev/null differ diff --git a/src/images/features/features-item-icon-1.svg b/src/images/features/features-item-icon-1.svg deleted file mode 100644 index 2eb2ee14c3..0000000000 --- a/src/images/features/features-item-icon-1.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/features/features-item-icon-2.svg b/src/images/features/features-item-icon-2.svg deleted file mode 100644 index 194e788e11..0000000000 --- a/src/images/features/features-item-icon-2.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/images/features/features-item-icon-3.svg b/src/images/features/features-item-icon-3.svg deleted file mode 100644 index b278d8d16f..0000000000 --- a/src/images/features/features-item-icon-3.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg deleted file mode 100644 index a81933296e..0000000000 --- a/src/images/logo/dia-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/logo/logo.png b/src/images/logo/logo.png new file mode 100644 index 0000000000..1573d0db64 Binary files /dev/null and b/src/images/logo/logo.png differ diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/mdi-arrow-forward.png b/src/images/mdi-arrow-forward.png new file mode 100644 index 0000000000..c1e8f088c9 Binary files /dev/null and b/src/images/mdi-arrow-forward.png differ diff --git a/src/images/menu.png b/src/images/menu.png new file mode 100644 index 0000000000..7f38365c55 Binary files /dev/null and b/src/images/menu.png differ diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg deleted file mode 100644 index 66daed19a5..0000000000 --- a/src/images/slider/arrow-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg deleted file mode 100644 index e9ddf85873..0000000000 --- a/src/images/slider/arrow-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/mdi-chevron-left.png b/src/images/slider/mdi-chevron-left.png new file mode 100644 index 0000000000..635e9ebb68 Binary files /dev/null and b/src/images/slider/mdi-chevron-left.png differ diff --git a/src/images/slider/mdi-chevron-right.png b/src/images/slider/mdi-chevron-right.png new file mode 100644 index 0000000000..8accadf672 Binary files /dev/null and b/src/images/slider/mdi-chevron-right.png differ diff --git a/src/images/slider/photo0.png b/src/images/slider/photo0.png new file mode 100644 index 0000000000..975e7ad138 Binary files /dev/null and b/src/images/slider/photo0.png differ diff --git a/src/images/slider/photo1.png b/src/images/slider/photo1.png new file mode 100644 index 0000000000..a43b16e096 Binary files /dev/null and b/src/images/slider/photo1.png differ diff --git a/src/images/slider/photo2.png b/src/images/slider/photo2.png new file mode 100644 index 0000000000..eecd2d3c2e Binary files /dev/null and b/src/images/slider/photo2.png differ diff --git a/src/images/slider/photo3.png b/src/images/slider/photo3.png new file mode 100644 index 0000000000..f95e074939 Binary files /dev/null and b/src/images/slider/photo3.png differ diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg deleted file mode 100644 index 98c4188508..0000000000 Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ diff --git a/src/images/socials/facebook-1.svg b/src/images/socials/facebook-1.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/socials/facebook-1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/socials/instagram.svg b/src/images/socials/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/socials/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/twitter-1.svg b/src/images/socials/twitter-1.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/socials/twitter-1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/socials/twitter-2.svg b/src/images/socials/twitter-2.svg new file mode 100644 index 0000000000..493d29131b --- /dev/null +++ b/src/images/socials/twitter-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/sub-title/sub-title-icon-dark.svg b/src/images/sub-title/sub-title-icon-dark.svg deleted file mode 100644 index 9fcdfa10cd..0000000000 --- a/src/images/sub-title/sub-title-icon-dark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/sub-title/sub-title-icon-light.svg b/src/images/sub-title/sub-title-icon-light.svg deleted file mode 100644 index 5ec041c15e..0000000000 --- a/src/images/sub-title/sub-title-icon-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/testimonials/person-1.png b/src/images/testimonials/person-1.png new file mode 100644 index 0000000000..ebdb1c4edf Binary files /dev/null and b/src/images/testimonials/person-1.png differ diff --git a/src/images/testimonials/person-2.png b/src/images/testimonials/person-2.png new file mode 100644 index 0000000000..593dd66b05 Binary files /dev/null and b/src/images/testimonials/person-2.png differ diff --git a/src/images/testimonials/person-3.png b/src/images/testimonials/person-3.png new file mode 100644 index 0000000000..5bb6788532 Binary files /dev/null and b/src/images/testimonials/person-3.png differ diff --git a/src/images/testimonials/quote.png b/src/images/testimonials/quote.png new file mode 100644 index 0000000000..9cf3030870 Binary files /dev/null and b/src/images/testimonials/quote.png differ diff --git a/src/images/testimonials/rectangle-12.png b/src/images/testimonials/rectangle-12.png new file mode 100644 index 0000000000..5c171a43c9 Binary files /dev/null and b/src/images/testimonials/rectangle-12.png differ diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg deleted file mode 100644 index d487a51ddf..0000000000 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg deleted file mode 100644 index 04288940f3..0000000000 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg deleted file mode 100644 index 24c0f2b94b..0000000000 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/what-we-do/what-we-do-1.jpg deleted file mode 100644 index 9481d8eeb2..0000000000 Binary files a/src/images/what-we-do/what-we-do-1.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/what-we-do/what-we-do-2.jpg deleted file mode 100644 index 724e65566f..0000000000 Binary files a/src/images/what-we-do/what-we-do-2.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/what-we-do/what-we-do-3.jpg deleted file mode 100644 index 7a69cc03f1..0000000000 Binary files a/src/images/what-we-do/what-we-do-3.jpg and /dev/null differ diff --git a/src/index.html b/src/index.html index f619b6d70b..3270146fbb 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,544 @@ - + - Dia + Air + + + + - -

Dia

+ +
+
+
+
+ + + + + + Hire us + +
+
+
+

+ Strategic Agency +

+

+ We believe in the power of bold ideas that can solve business challenges. +

+ + Learn more + +
+
+ + +
+
+ INtro +
+

+ By the same illusion which lifts the horizon. +

+
+
+
+
+ +
+
+
+

+ Who we are +

+

+ We embrace a strategic approach to creative ideas. We are interested in people and human relationships. This is the main thing you need to know about us. We believe in the power of bold ideas that can solve business challenges. +

+
+
+
+
+

+ Our expertise +

+
+
+ expertise-image +

Branding

+

We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience.

+
+
+ expertise-image +

Communication

+

We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies.

+
+
+ expertise-image +

Strategy

+

We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators.

+
+
+
+
+
+
+
+

+ Services +

+

+ Air is a full service creative agency +

+

+ Deep analytics, strong strategy and bright creative ideas. +
+
+ We are sure that first-rate job is possible only if all three components are united. +

+
+
+
+ 001 +
+

+ Brand Development +
+ Copywriting +
+ Logo & Webite Design +
+ Packaging +

+ +
+
+ Learn more +
+ +
+
+
+ 002 +
+

+ Сontent Production +
+ Graphic Design +
+ Video Production +
+ Post Production +

+ +
+
+ Learn more +
+ +
+
+
+ 003 +
+

+ Marketing Strategy +
+ Email Marketing +
+ Paid Advertising +
+ Blog Content & SEO +

+ +
+
+ Learn more +
+ +
+
+
+ 004 +
+

+ Digital Communications +
+ Influencer Marketing +
+ Product Placements +
+ Strategic Partnerships +

+ +
+
+ Learn more +
+ +
+
+
+
+
+
+
+

+ Testimonials +

+

+ What +
+ people say +

+
+
+
+
+
+
+
+
+

+ AIR’s ideas are refreshing and out of the box. Authentic team that focuses on the important path of the brand. +

+

+ Tal Gilad +

+

+ Teach for America +

+
+
+
+
+
+
+

+ AIR is an exceptional agency that leads with creative talent, first-class account servicing. +

+

+ Azadeh Hawkins +

+

+ Hawkins Consulting +

+
+
+
+
+
+
+

+ AIR raises the agency bar to stratospheric heights on both creative output and client service. +

+

+ Michel Grover +

+

+ Hulu +

+
+
+
+
+
+
+
+
+

+ Vision, Passion, Results +

+

+ We are sure that first-rate job is possible only if all three components are united. +

+ + Apply + +
+
+
+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..6d9eaa0716 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,50 @@ 'use strict'; + +const btnLeft = document.querySelector('.slider__button--left'); +const btnRight = document.querySelector('.slider__button--right'); +const form = document.querySelector('.form'); +const image = document.querySelector('.slider'); + +const images = [ + 'url("https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-' + + '4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=form' + + 'at&fit=crop&w=2670&q=80")', + 'url("https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-' + + '' + + '4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=form' + + 'at&fit=crop&w=2416&q=80")', + 'url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-' + + '' + + '4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=form' + + 'at&fit=crop&w=2670&q=80")', + 'url("https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-' + + '' + + '4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=form' + + 'at&fit=crop&w=2669&q=80")', +]; + +image.style.backgroundImage = images[images.length - 1]; + +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page__body--no-scroll'); + } else { + document.body.classList.remove('page__body--no-scroll'); + } +}); + +btnLeft.addEventListener('click', e => { + images.push(images.shift()); + image.style.backgroundImage = images[images.length - 1]; +}); + +btnRight.addEventListener('click', e => { + images.unshift(images.pop()); + image.style.backgroundImage = images[images.length - 1]; +}); + +form.addEventListener('submit', e => { + e.preventDefault(); + + form.reset(); +}); diff --git a/src/styles/_blocks.scss b/src/styles/_blocks.scss new file mode 100644 index 0000000000..105112319b --- /dev/null +++ b/src/styles/_blocks.scss @@ -0,0 +1,15 @@ +@import "./blocks/page"; +@import "./blocks/logo"; +@import "./blocks/header"; +@import "./blocks/container"; +@import "./blocks/footer"; +@import "./blocks/slider"; +@import "./blocks/form"; +@import "./blocks/contact-info"; +@import "./blocks/about.scss"; +@import "./blocks/expertise.scss"; +@import "./blocks/services.scss"; +@import "./blocks/testimonials.scss"; +@import "./blocks/vision.scss"; +@import "./blocks/menu.scss"; +@import "./blocks/button.scss"; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3fca2..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - 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 1837eb46e2..0000000000 --- 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 1366a06aa5..27205eb4fd 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ -@import "utils/vars"; -@import "utils/mixins"; -@import "utils/extends"; +@import "./utils/vars"; +@import "./utils/mixins"; +@import "./utils/maps"; +@import "./blocks/grid.scss"; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 0000000000..8d1861874c --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,37 @@ +.about { + margin-bottom: 120px; + text-align: center; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 148px; + } + + &__title { + margin-bottom: 24px; + + color: $h2-colot; + font-family: "Poppins", sans-serif; + font-size: 32px; + font-weight: 600; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 16px; + } + } + + &__paragraph { + color: $p-color; + font-size: 22px; + line-height: 150%; + font-weight: 600; + + @include transition(all, $transition-time); + + @include onTablet { + font-size: 24px; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..8b0520ad3c --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,39 @@ +.button { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + max-width: 280px; + height: 56px; + + @include transition(all, $transition-time); + + text-decoration: none; + font-size: 15px; + font-weight: 600; + line-height: normal; + background: $color-blue; + color: $color-white; + border-radius: 8px; + + &:hover, + :active { + background-color: $button-background-hover; + } + + @include onTablet { + width: 264px; + } + + &--header { + height: 50px; + } + + &--vision { + margin: 0 auto; + } + + &--form { + margin: 0; + } +} diff --git a/src/styles/blocks/contact-info.scss b/src/styles/blocks/contact-info.scss new file mode 100644 index 0000000000..5c0175991e --- /dev/null +++ b/src/styles/blocks/contact-info.scss @@ -0,0 +1,95 @@ +.contact-info { + margin-bottom: 80px; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 139px; + } + + &__details { + + &--title { + margin-bottom: 8px; + + color: $color-white; + font-size: 13px; + font-weight: 700; + letter-spacing: 3px; + text-transform: uppercase; + opacity: 0.5; + } + + > a { + @include hover(color, $color-blue); + + text-decoration: none; + color: $color-white; + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 150%; + } + } + + &__title { + margin-bottom: 48px; + + color: $color-white; + font-size: 32px; + font-weight: 600; + line-height: 150%; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 56px; + } + } + + &__socials { + + &--title { + margin-bottom: 16px; + } + } + + &__links { + display: flex; + + & > :not(:last-child) { + margin-right: 32px; + } + } + + & > :not(:last-child):not(:first-child) { + margin-bottom: 40px; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 48px; + } + } + + &__link { + @include square(32px); + + background-color: $color-white; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + + @include hover(background-color, $color-blue); + + @each $name, $social in $socials { + &--#{$name} { + -webkit-mask-image: $social; + mask-image: $social; + } + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..1913d4a2cb --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,18 @@ +.container { + padding: 0 20px; + @include transition(all, $transition-time); + + @include onTablet { + padding: 0 42px; + } + + @include onDesktop { + padding: 0 54px; + } + + @include onDesktopXXL { + padding: 0 227px; + max-width: 1600px; + margin: 0 auto; + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..edbb99fd42 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,103 @@ +.expertise { + padding: 72px 0; + margin-bottom: 120px; + + text-align: center; + background-color: $color-white; + border-radius: $page-border-radius; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 148px; + } + + @include onDesktop { + margin-bottom: 251px; + } + + &__title { + margin-bottom: 56px; + + color: $h2-colot; + font-size: 44px; + font-weight: 600; + line-height: 120%; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 64px; + + font-size: 52px; + line-height: 150%; + } + } + + &__cards { + display: flex; + flex-direction: column; + align-items: center; + + @include onDesktop { + flex-direction: row; + justify-content: space-between; + } + } + + &__card { + @include transition(all, $transition-time); + + max-width: 362px; + + &:not(:last-child) { + margin-bottom: 56px; + } + + @include onTablet { + &:not(:last-child) { + margin-bottom: 72px; + } + } + + @include onDesktop { + max-width: 214px; + + &:not(:last-child) { + margin-bottom: 0; + } + } + + &-image { + margin-bottom: 32px; + border-radius: 20px; + + @include transition(all, $transition-time); + + @include onDesktop { + margin-bottom: 40px; + } + + &:hover { + transform: scale(105%); + } + } + + &-title { + margin-bottom: 16px; + + color: $h2-colot; + text-align: center; + font-size: 20px; + font-weight: 600; + line-height: 140%; + } + + &-paragraph { + + color: $p-color; + text-align: center; + font-size: 14px; + font-weight: 400; + line-height: 150%; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..3e46b4fea1 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,69 @@ +.footer { + @include transition(all, $transition-time); + @include border-top-radius($page-border-radius); + + position: relative; + z-index: 1; + padding: 72px 0 80px; + + background-color: $background-dark; + color: $color-white; + + @include onTablet { + padding-top: 180px; + } + + &__nav { + display: flex; + flex-direction: column; + + @include onDesktop { + flex-direction: row; + justify-content: space-between; + } + } + + &__links { + @include transition(all, $transition-time); + + & > :not(:last-child) { + margin-bottom: 24px; + + @include onTablet { + margin-bottom: 0; + } + } + + @include onTablet { + display: flex; + justify-content: space-between; + } + + @include onDesktop { + & > :not(:last-child) { + margin-right: 64px; + } + } + } + + &__link { + list-style: none; + + & > a { + @include underline-links-hover(); + + position: relative; + margin-right: -3px; + display: inline-block; + + text-decoration: none; + color: $color-white; + font-size: 13px; + font-weight: 700; + line-height: 150%; + letter-spacing: 3px; + text-transform: uppercase; + word-break: break-all; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..e383509807 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,75 @@ +.form { + margin-bottom: 80px; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 120px; + } + + &__title { + margin-bottom: 31px; + + color: $color-white; + font-size: 32px; + font-weight: 600; + line-height: 130%; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 39px; + + line-height: 150%; + } + } + + &__input { + width: 100%; + margin-bottom: 23px; + + border-style: none; + background-color: $background-dark; + color: $color-white; + font-size: 15px; + font-weight: 600; + line-height: normal; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 31px; + } + + &:nth-child(4) { + margin-bottom: 56px; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 80px; + } + } + + &-enterinfo { + border-bottom: solid $color-white; + padding: 17px 0; + + &:focus { + outline-style: none; + border-bottom: solid $color-blue; + } + + &--textarea { + resize: none; + overflow: hidden; + } + } + } + + &__input::placeholder { + color: $color-white; + font-size: 15px; + font-weight: 600; + line-height: normal; + opacity: 0.7; + } +} diff --git a/src/styles/blocks/grid.scss b/src/styles/blocks/grid.scss new file mode 100644 index 0000000000..d6ce76e773 --- /dev/null +++ b/src/styles/blocks/grid.scss @@ -0,0 +1,48 @@ +.grid { + + @include useGrid(2, 20px); + gap: 24px; + + @include onTablet { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + @include onDesktop { + grid-template-columns: repeat(12, 1fr); + gap: 20px; + } + + &__item { + + @include transition(all, $transition-time); + + @for $start from 1 through 2 { + @for $end from $start through 2 { + &--#{$start}-#{$end} { + grid-column: #{$start} / #{$end + 1}; + } + } + } + + @include onTablet { + @for $start from 1 through 6 { + @for $end from $start through 6 { + &--tablet-#{$start}-#{$end} { + grid-column: #{$start} / #{$end + 1}; + } + } + } + } + + @include onDesktop { + @for $start from 1 through 12 { + @for $end from $start through 12 { + &--desktop-#{$start}-#{$end} { + grid-column: #{$start} / #{$end + 1}; + } + } + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..f99cf5f22e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,183 @@ +.header { + @include border-bottom-radius($page-border-radius); + + position: relative; + overflow: hidden; + height: 100vh; + padding: 20px 0 0; + margin-bottom: 120px; + + color: $color-white; + background-color: $background-dark; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 148px; + } + + &__menu { + @include square(24px); + + align-self: flex-end; + + background-image: url(../images/menu.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + + @include onDesktop { + display: none; + } + + @include transition(all, $transition-time); + + &:hover { + transform: scale(115%); + } + } + + &__nav { + margin-bottom: 48px; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 56px; + } + + @include onDesktop { + margin-bottom: 164px; + } + + &-container { + display: flex; + align-items: center; + + @include onDesktop { + display: flex; + justify-content: space-between; + } + } + } + + &__links { + display: none; + + font-size: 13px; + font-weight: 700; + line-height: 150%; + letter-spacing: 3px; + text-transform: uppercase; + + @include onDesktop { + display: flex; + flex-direction: row; + } + } + + &__link { + position: relative; + list-style: none; + + & > a { + @include underline-links-hover(); + + color: $color-white; + text-decoration: none; + } + + &:not(:last-child) { + margin-right: 48px; + } + } + + &__introduction { + @include transition(all, $transition-time); + + @include onDesktop { + width: 50%; + } + } + + &__title { + margin-bottom: 32px; + + color: $color-white; + font-size: 52px; + font-weight: 600; + line-height: 120%; + letter-spacing: -2px; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 24px; + + font-size: 64px; + line-height: 68px; + } + + @include onDesktop { + margin-bottom: 32px; + } + } + + &__paragraph { + max-width: 362px; + margin-bottom: 72px; + + color: $color-white; + font-size: 18px; + font-weight: 400; + line-height: 150%; + + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 56px; + } + + @include onDesktop { + margin-bottom: 83px; + } + } + + &__toform { + display: flex; + margin-left: auto; + padding-bottom: 8px; + position: relative; + + text-decoration: none; + color: $color-white; + font-size: 13px; + font-weight: 700; + line-height: 150%; + letter-spacing: 3px; + text-transform: uppercase; + + &::before { + content: ""; + position: absolute; + left: 0; + bottom: -0.5px; + width: $underline-width; + border: solid $color-blue $underline-border-size; + border-radius: 4px; + + @include onDesktop { + bottom: -8.5px; + } + } + + @include transition(all, $transition-time); + + &:hover { + transform: scale(105%); + } + + @include onDesktop { + margin-left: 0; + padding-bottom: 0; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 0000000000..764c669172 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,41 @@ +.logo { + display: inline-block; + width: 46px; + height: 28px; + + background-image: url(../images/logo/logo.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + text-decoration: none; + + @include transition(all, $transition-time); + + &:hover { + transform: scale(105%); + } + + &--header { + margin-right: 32px; + + @include transition(all, $transition-time); + + @include onDesktop { + margin-right: 0; + } + } + + &--footer { + @include transition(all, $transition-time); + + margin-bottom: 48px; + + @include onTablet { + margin-bottom: 24px; + } + + @include onDesktop { + margin-bottom: 0; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..4f61bf164d --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,82 @@ +.menu { + @include border-bottom-radius($page-border-radius); + + position: absolute; + z-index: 2; + top: 0; + width: 100%; + height: 100vh; + padding: 20px 0 0; + transform: translateY(-100%); + + color: $color-white; + background-color: $background-dark; + @include transition(all, $transition-time); + + &:target { + transform: translateY(0); + } + + &__close { + @include square(28px); + + -webkit-mask-image: url(../images/cross.png); + mask-image: url(../images/cross.png); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + background-color: $color-white; + + @include transition(all, $transition-time); + + &:hover { + transform: scale(115%); + } + } + + &__nav { + + &-container { + display: flex; + justify-content: space-between; + height: 100vh; + + @include onDesktop { + display: flex; + justify-content: space-between; + } + } + } + + &__links { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + font-size: 13px; + font-weight: 700; + letter-spacing: 3px; + text-transform: uppercase; + + & > :not(:last-child) { + margin-bottom: $menu-margin-bottom; + } + } + + &__link { + position: relative; + list-style: none; + + & > a { + @include underline-links-hover(); + + color: $color-white; + text-decoration: none; + } + + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..3dae7c2a77 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,36 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.page { + scroll-behavior: smooth; + + font-family: "Poppins", sans-serif; + + &__body { + background-color: $background-grey; + + &--no-scroll { + overflow-y: hidden; + } + } +} + +p { + font-family: "Open Sans", sans-serif; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus { + border: none; + -webkit-text-fill-color: $button-background-hover; + border-bottom: solid $color-blue; + -webkit-box-shadow: 0 0 1000px $background-dark inset; + transition: 5000s ease-in-out 0s; +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..d63df94e42 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,117 @@ +.services { + margin-bottom: 120px; + + &__about { + margin-bottom: 24px; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 26px; + } + } + + &__pretitle { + margin-bottom: 16px; + + color: $h3-pretitle-color; + font-size: 13px; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__title { + margin-bottom: 24px; + + color: $h2-colot; + font-size: 31px; + font-weight: 600; + line-height: 130%; + } + + &__paragraph { + color: $p-color; + font-size: 14px; + line-height: 150%; + } + + &__card { + padding: 32px; + + background-color: $color-white; + border-radius: $main-border-radius; + + @include onTablet { + &:nth-child(odd) { + transform: translate(0, -50%); + } + } + + &-nr { + display: flex; + justify-content: center; + align-items: center; + width: 46px; + height: 24px; + margin-bottom: 24px; + + border-radius: 23px; + background-color: rgba(32, 96, 246, 0.1); + color: $color-blue; + font-size: 13px; + } + + &-p { + margin-bottom: 32px; + + color: $p-color; + font-size: 13px; + font-weight: 600; + line-height: 150%; + } + + &-more { + display: flex; + align-items: center; + + text-decoration: none; + + @include transition(all, $transition-time); + + & > :first-child { + @include circle(40px); + margin-right: 16px; + + background-color: $color-blue; + background-image: url(../images/mdi-arrow-forward.png); + background-position: center; + background-repeat: no-repeat; + } + + &:last-child { + color: var(--text-200, #334563); + font-size: 15px; + font-weight: 600; + } + + &:hover > :last-child { + transform: scale(105%); + } + + &:hover > :first-child { + animation-duration: 0.5s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-name: in; + } + } + } +} + +@-webkit-keyframes in { + from { + -webkit-transform: translateX(0); + } + to { + -webkit-transform: translateX(6px); + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..4efd5a968f --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,89 @@ +.slider { + position: absolute; + width: 100%; + height: 390px; + bottom: 0; + right: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 0 0 24px 20px; + + border-radius: $page-border-radius; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + @include transition(all, $transition-time); + + @include onTablet { + padding: 0 0 32px 41px; + } + + @include onDesktop { + left: 50% ; + width: 50%; + height: 88%; + padding: 0 0 48px 78px; + + border-top-right-radius: 0; + border-bottom-left-radius: 0; + } + + @include onDesktopXL { + left: 58%; + width: 42%; + } + + &__buttons { + cursor: pointer; + display: flex; + margin-top: auto; + z-index: 2; + } + + &__button { + @include circle(32px); + + margin-bottom: 16px; + + background-color: $color-white; + background-position: center; + background-repeat: no-repeat; + + @include transition(all, $transition-time); + + &:hover { + transform: scale(105%); + } + + &--left { + margin-right: 16px; + + background-image: url(../images/slider/mdi-chevron-left.png); + } + + &--right { + background-image: url(../images/slider/mdi-chevron-right.png); + } + } + + &__title { + margin-bottom: 6px; + + color: $color-white; + font-size: 13px; + font-weight: 700; + line-height: normal; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__paragraph { + max-width: 280px; + + color: $color-white; + font-size: 14px; + font-weight: 400; + line-height: 140%; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..2c68a1bb37 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,135 @@ +.testimonials { + margin-bottom: 120px; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 148px; + } + + &__about { + margin-bottom: 48px; + @include transition(all, $transition-time); + + @include onTablet { + margin-bottom: 56px; + } + } + + &__pretitle { + margin-bottom: 16px; + + color: $h3-pretitle-color; + font-size: 13px; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__title { + color: $h2-colot; + font-size: 32px; + font-weight: 600; + line-height: 150%; + + &--br { + display: none; + + @include onTablet { + display: inline; + } + } + } + + &__card { + display: flex; + align-items: center; + flex-direction: column; + padding: 75px 30px 32px; + + @include transition(all, $transition-time); + + border-radius: 16px; + background-color: $color-white; + + @include onTablet { + padding: 87px 106px 32px; + } + + @include onDesktop { + height: 456px; + padding: 75px 30px 32px; + margin: auto; + } + @include onDesktopXXL { + height: 494px; + } + + &:hover { + transform: scale(105%); + } + + &-container { + position: relative; + z-index: 0; + margin-bottom: 67px; + } + + &-img { + @include circle(110px); + @include transition(all, $transition-time); + + background-repeat: no-repeat; + background-size: cover; + + @include onTablet { + @include circle(140px); + } + + &::before { + @include rectangle(-30%); + } + + &::after { + @include rectangle(30%); + } + + @each $index, $person in $people { + &-#{$index} { + background-image: $person; + } + } + } + + &-quote { + @include square(24px); + + margin-bottom: 8px; + + background-image: url(../images/testimonials/quote.png); + } + + &-p { + margin-bottom: 32px; + + color: $p-color; + text-align: center; + font-size: 13px; + font-weight: 600; + line-height: 150%; + } + + &-person { + margin-bottom: 4px; + + color: $h2-colot; + font-size: 13px; + } + + &-job { + color: $h3-pretitle-color; + text-align: center; + font-size: 13px; + letter-spacing: 3px; + text-transform: uppercase; + } + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..7f8ddc5b4f --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,74 @@ +.vision { + text-align: center; + margin-bottom: 120px; + + @include transition(all, $transition-time); + + background-color: $color-white; + + @include onTablet { + margin-bottom: -30px; + } + + &__background { + max-width: 1600px; + margin: 0 auto; + position: relative; + background-image: url(../images/Shapes.png); + background-position: center; + background-repeat: no-repeat; + background-size: 150%; + @include transition(all, $transition-time); + + @include onDesktop { + background-size: 125%; + } + + @include onDesktopXL { + background-size: 100%; + } + } + + &__container { + padding: 72px 0; + + @include transition(all, $transition-time); + + @include onTablet { + padding: 200px 0 230px; + } + } + + &__title { + padding-bottom: 24px; + + color: $h2-colot; + text-align: center; + font-size: 44px; + font-weight: 600; + line-height: 120%; + + @include transition(all, $transition-time); + + @include onTablet { + font-size: 52px; + } + } + + &__paragraph { + padding-bottom: 56px; + + color: $p-color; + font-size: 22px; + font-weight: 600; + line-height: 150%; + + @include transition(all, $transition-time); + + @include onTablet { + padding-bottom: 64px; + + font-size: 24px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d7..4dc51eda3c 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 "./blocks"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0e37..0000000000 --- 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/_maps.scss b/src/styles/utils/_maps.scss new file mode 100644 index 0000000000..8f17f92006 --- /dev/null +++ b/src/styles/utils/_maps.scss @@ -0,0 +1,9 @@ +$socials: + "facebook" url(../images/socials/facebook-1.svg), + "twitter" url(../images/socials/twitter-2.svg), + "instagram" url(../images/socials/instagram.svg); + +$people: + "1" url(../images/testimonials/person-1.png), + "2" url(../images/testimonials/person-2.png), + "3" url(../images/testimonials/person-3.png); diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..9eeeb59141 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,94 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} #{$transition-time}; &:hover { #{$_property}: $_toValue; } } + +@mixin transition($_transition, $_time) { + transition: $_transition $_time; +} + +@mixin border-bottom-radius($_radius) { + border-bottom-left-radius: $_radius; + border-bottom-right-radius: $_radius; +} + +@mixin border-top-radius($_radius) { + border-top-left-radius: $_radius; + border-top-right-radius: $_radius; +} + +@mixin underline-links-hover() { + &::before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 0; + border: solid $color-blue; + border-width: 0; + border-radius: 4px; + @include transition(all, $transition-time); + } + + &:hover::before { + width: calc(#{$underline-width} - 3px); + border-width: $underline-border-size; + } +} + +@mixin square($size) { + height: $size; + width: $size; +} + +@mixin circle($size) { + @include square($size); + + border-radius: 50%; +} + +@mixin rectangle($_translate) { + content: ""; + position: absolute; + z-index: -1; + transform: translate($_translate, $_translate); + + @include square(100%); + + background-image: url(../images/testimonials/rectangle-12.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +@mixin useGrid($columns, $gap) { + display: grid; + grid-template-columns: repeat($columns, 1fr); + column-gap: $gap; +} + +@mixin onTablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin onDesktopXL { + @media (min-width: 1280px) { + @content; + } +} + +@mixin onDesktopXXL { + @media (min-width: 1600px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..85e8ccade9 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ -$c-gray: #eee; +$color-white: #fff; +$background-dark: #2c2c2c; +$background-grey: #f2f6fa; +$color-blue: #2060f6; +$p-color: #6c788b; +$h2-colot: var(--text-100, #253757); +$h3-pretitle-color: #c0ccd7; +$button-background-hover: #144ed4; +$menu-margin-bottom: 10vh; + +$page-border-radius: 30px; +$main-border-radius: 16px; +$underline-border-size: 1px; +$underline-width: calc(100% - #{$underline-border-size} * 2); +$transition-time: 0.3s;