diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /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 93d9738cc4..2ba3a6aa8b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # Dia landing page -Implement landing page according to [Figma design](https://www.figma.com/file/7qwsWggv9BAxMi2VPhBuPr/Air-(formerly-Dia)?node-id=9138%3A35) - Use BEM and SCSS + +Implement landing page according to [Figma design]() - Use BEM and SCSS Adapt the page to the following screens: + - Large screens 2560px - The design 1600px - Desktop 1280px @@ -12,46 +14,46 @@ Adapt the page to the following screens: 1. Implement the header with `nav`. 1. Implement `Strategic agency` block. 1. Implement slider (You may start with a single picture). - - implement slider block as absolutely positioned element with `right: 0` and `bottom: 0` position inside the black container - - on large screens limit the width of black container to 1600px, so that left outer space have a standart grey background color -3. Implement `Who we are` block. -4. Implement `Our expertise` block with the card reused 3 times. -5. Implement `Process` block with 4 process cards. - - use `trasnlateY(-50%)` to move cards up -6. Implement `Testimonials` block. - - each card should have a fixed width and on the small screens the whole block should switch to column layout -8. Implement `Vision, Passion, Results` block. - - use https://github.com/mate-academy/layout_dia/blob/master/src/images/Shapes.png as background picture -9. Implement `Send us a message` block. -10. Implement `Contact us` block. -11. Implement the footer. + - implement slider block as absolutely positioned element with `right: 0` and `bottom: 0` position inside the black container + - on large screens limit the width of black container to 1600px, so that left outer space have a standart grey background color +1. Implement `Who we are` block. +1. Implement `Our expertise` block with the card reused 3 times. +1. Implement `Process` block with 4 process cards. + - use `trasnlateY(-50%)` to move cards up +1. Implement `Testimonials` block. + - each card should have a fixed width and on the small screens the whole block should switch to column layout +1. Implement `Vision, Passion, Results` block. + - use https://github.com/mate-academy/layout_dia/blob/master/src/images/Shapes.png as background picture +1. Implement `Send us a message` block. +1. Implement `Contact us` block. +1. Implement the footer. ## Checklist for preparing a portfolio project for HR review 1. Don’t forget to add the title “Air” for the whole web page 2. A landing page is implemented strictly according to the design in Figma -4. Links in the header and footer menus should lead to the corresponding blocks of the landing page -5. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) -6. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number -7. Make sure everything looks neat on mobile and without horizontal scrolling -8. Add favicon -9. Add a smooth scroll for the whole page -10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded -11. The form shouldn’t submit empty -12. The "Learn more" button should lead to the closest block (Our expertise) -13. The "Hire Us" button in the header menu should lead to the contact form -14. In the PROCESS section add a hover effect to cards (for example, let them increase in size a little) -15. Inside the cards in PROCESS sections, make a link out of the "Learn More" text, so that it hovers simultaneously with the arrow button on the left -16. In the Vision, Passion, Results section, the “Apply” button also should lead to the contact form -17. In the Testimonials and Our expertise section add hover effects for each review -18. After clicking the menu buttons, the landing page will scroll exactly to the beginning of the desired block (exactly where its section begins) -19. The arrows at the bottom of the first block should not respond slowly to pressing (this is possible if the pictures are too large) -20. When a user clicks on Address Google Maps is opened in a new tab -21. The user must have the opportunity to conveniently write 2-3 lines of text in the message field -22. OPTIONAL: After everything is done, you can implement the slider on the hero page (you can find images for it on Unsplash) - +3. Links in the header and footer menus should lead to the corresponding blocks of the landing page +4. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) +5. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number +6. Make sure everything looks neat on mobile and without horizontal scrolling +7. Add favicon +8. Add a smooth scroll for the whole page +9. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded +10. The form shouldn’t submit empty +11. The "Learn more" button should lead to the closest block (Our expertise) +12. The "Hire Us" button in the header menu should lead to the contact form +13. In the PROCESS section add a hover effect to cards (for example, let them increase in size a little) +14. Inside the cards in PROCESS sections, make a link out of the "Learn More" text, so that it hovers simultaneously with the arrow button on the left +15. In the Vision, Passion, Results section, the “Apply” button also should lead to the contact form +16. In the Testimonials and Our expertise section add hover effects for each review +17. After clicking the menu buttons, the landing page will scroll exactly to the beginning of the desired block (exactly where its section begins) +18. The arrows at the bottom of the first block should not respond slowly to pressing (this is possible if the pictures are too large) +19. When a user clicks on Address Google Maps is opened in a new tab +20. The user must have the opportunity to conveniently write 2-3 lines of text in the message field +21. OPTIONAL: After everything is done, you can implement the slider on the hero page (you can find images for it on Unsplash) ## Github flow + 1. **Fork** the repo. 2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) 3. Run `npm install` (or just `npm i`). @@ -65,7 +67,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://Vitaligna.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index 1eca937738..96048ba794 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,477 @@ - + - - Dia + + + Air + + + - -

Dia

- + +
+
+
+
+
+ + + +
+ + + + + Hire us + +
+
+ +
+

Strategic Agency

+ +

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

+ + Learn more +
+
+ +
+ Watch + + Gadgets + + Laptop + +
+
+ + + +
+ +
+

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

+ +
+ Catalogs +

Branding

+

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

+
+ +
+ Posters +

Communication

+

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

+
+ +
+ Presentation +

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

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

+
+ +
+
+ First client +
+ +

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

+
+
+ +
+
+ Second client +
+ +

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

+ +
+

Azadeh Hawkins

+

+ Hawkins Consulting +

+
+
+ +
+
+ Third client +
+ +

+ 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/package-lock.json b/package-lock.json index 1b7e1f550b..0d916d7b41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,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 aebda906fc..ffc8ac6e62 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null 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/icons/close-icon.svg b/src/images/icons/close-icon.svg new file mode 100644 index 0000000000..1d71453368 --- /dev/null +++ b/src/images/icons/close-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icons/menu-icon.svg b/src/images/icons/menu-icon.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icons/menu-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + 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/favicon.png b/src/images/logo/favicon.png new file mode 100644 index 0000000000..eb03cc391d Binary files /dev/null and b/src/images/logo/favicon.png differ diff --git a/src/images/services/services-arrow.svg b/src/images/services/services-arrow.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/services/services-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..e0e78c500f 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..4319096bd3 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,3 @@ - - + + 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/slider/slide-img-1.png b/src/images/slider/slide-img-1.png new file mode 100644 index 0000000000..10706dd719 Binary files /dev/null and b/src/images/slider/slide-img-1.png differ diff --git a/src/images/slider/slide-img-2.png b/src/images/slider/slide-img-2.png new file mode 100644 index 0000000000..063874f084 Binary files /dev/null and b/src/images/slider/slide-img-2.png differ diff --git a/src/images/slider/slide-img-3.png b/src/images/slider/slide-img-3.png new file mode 100644 index 0000000000..b1591137f9 Binary files /dev/null and b/src/images/slider/slide-img-3.png differ diff --git a/src/images/social-media/facebook.svg b/src/images/social-media/facebook.svg new file mode 100644 index 0000000000..edd7a48714 --- /dev/null +++ b/src/images/social-media/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media/instagram.svg b/src/images/social-media/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/social-media/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media/x.svg b/src/images/social-media/x.svg new file mode 100644 index 0000000000..b7142b7b23 --- /dev/null +++ b/src/images/social-media/x.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/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-1.png b/src/images/testimonials/testimonial-ava-1.png new file mode 100644 index 0000000000..e82ce168d6 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-1.png 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-2.png b/src/images/testimonials/testimonial-ava-2.png new file mode 100644 index 0000000000..6b780e8382 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-2.png 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/testimonials/testimonial-ava-3.png b/src/images/testimonials/testimonial-ava-3.png new file mode 100644 index 0000000000..062933674f Binary files /dev/null and b/src/images/testimonials/testimonial-ava-3.png differ diff --git a/src/images/testimonials/testimonial-quote.svg b/src/images/testimonials/testimonial-quote.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/testimonials/testimonial-quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/testimonials/testimonial-rectangle.svg b/src/images/testimonials/testimonial-rectangle.svg new file mode 100644 index 0000000000..a142082ffc --- /dev/null +++ b/src/images/testimonials/testimonial-rectangle.svg @@ -0,0 +1,3 @@ + + + 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-1.png b/src/images/what-we-do/what-we-do-1.png new file mode 100644 index 0000000000..afb364b831 Binary files /dev/null and b/src/images/what-we-do/what-we-do-1.png 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-2.png b/src/images/what-we-do/what-we-do-2.png new file mode 100644 index 0000000000..12c15f0971 Binary files /dev/null and b/src/images/what-we-do/what-we-do-2.png 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/images/what-we-do/what-we-do-3.png b/src/images/what-we-do/what-we-do-3.png new file mode 100644 index 0000000000..edc1706753 Binary files /dev/null and b/src/images/what-we-do/what-we-do-3.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..af6d83fe91 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,23 @@ 'use strict'; + +const leftButton = document.querySelector('.arrow--left'); +const rightButton = document.querySelector('.arrow--right'); +const list = document.querySelectorAll('.slider__img'); +const listLength = list.length; +let current = 0; + +const changeSlide = (step) => { + list[current].classList.remove('slider__img--active'); + + current = (current + step + listLength) % listLength; + + list[current].classList.add('slider__img--active'); +}; + +rightButton.addEventListener('click', () => { + changeSlide(1); +}); + +leftButton.addEventListener('click', () => { + changeSlide(-1); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 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 deleted file mode 100644 index 3280c3fe10..0000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..2d87368d03 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,60 @@ +.about-us { + scroll-margin-top: 20px; + margin-block: 120px; + color: $main-text-color; + + @include on-tablet { + scroll-margin-top: 100px; + margin-block: 148px; + } + + @include on-s-desktop { + scroll-margin-top: 0; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px 20px; + justify-items: center; + + padding-inline: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 16px 30px; + padding-inline: 40px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 16px 20px; + + max-width: 1146px; + margin-inline: auto; + padding-inline: 55px; + } + + @include on-m-desktop { + padding-inline: 0; + } + } + + &__title { + grid-column: 1 / -1; + } + + &__description { + grid-column: 1 / -1; + + font-family: $second-font; + font-size: 24px; + font-weight: 600; + line-height: 150%; + text-align: center; + + @include on-s-desktop { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/blocks/arrow.scss b/src/styles/blocks/arrow.scss new file mode 100644 index 0000000000..2d80e77384 --- /dev/null +++ b/src/styles/blocks/arrow.scss @@ -0,0 +1,23 @@ +.arrow { + cursor: pointer; + + display: inline-block; + + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + + background-color: $headfoot-text-main-bg-color; + background-repeat: no-repeat; + background-position: center; + background-size: 6px; + + &--left { + background-image: url('../images/slider/arrow-left.svg'); + } + + &--right { + background-image: url('../images/slider/arrow-right.svg'); + } +} diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 0000000000..5607eeab42 --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,4 @@ +.body { + min-width: 320px; + background-color: $main-bg-color; +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..bd29c7269c --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,31 @@ +.button { + cursor: pointer; + + width: 90%; + padding-block: 14px; + border: none; + border-radius: 8px; + + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: inherit; + text-align: center; + text-decoration: none; + + background-color: $button-color; + + transition: all $duration-effect; + + @include on-tablet { + width: 264px; + } + + &:hover { + background-color: $button-hover-color; + } + + &:active { + transform: translateY(1px) scale(0.96); + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..91603ddd07 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,97 @@ +.expertise { + scroll-margin-top: -70px; + + padding-block: 72px; + border-radius: 30px; + + color: $main-text-color; + + background-color: $headfoot-text-main-bg-color; + + @include on-tablet { + scroll-margin-top: 0; + padding-block: 128px; + } + + @include on-s-desktop { + padding-block: 128px 134px; + } + + @include on-m-desktop { + scroll-margin-top: 60px; + } + + &__container { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 56px 20px; + padding-inline: 20px; + + @include on-tablet { + gap: 64px 30px; + padding-inline: 40px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 64px 20px; + + max-width: 1146px; + margin-inline: auto; + padding-inline: 55px; + } + + @include on-m-desktop { + gap: 64px 30px; + padding-inline: 0; + } + } + + &__service { + grid-column: 2 / -2; + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + + @include on-tablet { + margin-bottom: 8px; + } + + @include on-s-desktop { + grid-column: auto; + grid-row: 2 / 3; + margin-bottom: 0; + + &--1 { + grid-column: 1 / span 3; + } + + &--2 { + grid-column: 5 / span 4; + width: 75%; + margin-inline: auto; + } + + &--3 { + grid-column: 10 / span 3; + } + } + } + + &__title { + grid-column: 1 / -1; + + font-size: 44px; + font-weight: 600; + line-height: 120%; + text-align: center; + + @include on-tablet { + grid-column: 2 / -2; + font-size: 52px; + line-height: 150%; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..750eefa636 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,242 @@ +.footer { + margin-top: 120px; + padding-block: 72px 80px; + border-radius: 30px 30px 0 0; + + color: $headfoot-text-main-bg-color; + + background-color: $headfoot-menu-bg-color; + + @include on-tablet { + margin-top: -20px; + padding-block: 180px 80px; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 80px 20px; + justify-items: center; + + margin-inline: auto; + padding-inline: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 120px 30px; + padding-inline: 40px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 120px 20px; + max-width: 1146px; + padding-inline: 55px; + } + + @include on-m-desktop { + gap: 120px 30px; + } + } + + &__form-container { + scroll-margin-top: 20px; + grid-column: 1 / -1; + justify-self: stretch; + + @include on-tablet { + scroll-margin-top: 0; + grid-column: 1 / span 4; + width: 100%; + } + + @include on-s-desktop { + grid-column: 1 / span 5; + } + } + + &__title { + margin-bottom: 48px; + + font-size: 32px; + font-weight: 600; + line-height: 130%; + text-align: left; + + @include on-tablet { + margin-bottom: 56px; + line-height: 150%; + } + } + + &__contact-us { + grid-column: 1 / -1; + width: 100%; + + @include on-tablet { + margin-bottom: 20px; + } + + @include on-s-desktop { + grid-column: 7 / -1; + margin-bottom: 0; + } + + @include on-m-desktop { + grid-column: 8 / -1; + } + } + + &__socials { + display: flex; + flex-direction: column; + gap: 40px; + color: $headfoot-text-main-bg-color; + + @include on-tablet { + gap: 48px; + } + } + + &__intro-title { + margin-bottom: 8px; + color: inherit; + opacity: 50%; + } + + &__contact { + width: 90%; + + font-family: $second-font; + font-size: 24px; + font-weight: 600; + line-height: 150%; + color: inherit; + text-decoration: none; + + transition: color $duration-effect ease-in-out; + + &:hover { + color: $button-color; + } + } + + &__social-media { + display: flex; + gap: 32px; + + &__icon { + width: 32px; + height: 32px; + background-size: contain; + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + filter: brightness(0) saturate(100%) invert(30%) sepia(97%) + saturate(3791%) hue-rotate(218deg) brightness(98%) contrast(96%); + } + } + + &--facebook { + background-image: url('../images/social-media/facebook.svg'); + } + + &--x { + background-image: url('../images/social-media/x.svg'); + } + + &--instagram { + background-image: url('../images/social-media/instagram.svg'); + } + } + + &__navigation { + display: flex; + grid-column: 1 / 2; + flex-direction: column; + gap: 48px; + justify-self: flex-start; + + @include on-tablet { + grid-column: 1 / -1; + gap: 24px; + justify-self: stretch; + } + + @include on-s-desktop { + flex-direction: row; + gap: 0; + align-items: center; + justify-content: space-between; + } + } + + &__icon-logo { + display: flex; + width: 45px; + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + + &__nav { + display: flex; + flex-direction: column; + gap: 16px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + align-items: center; + } + + @include on-s-desktop { + gap: 64px; + } + } + + &__link { + position: relative; + + display: inline-block; + + width: max-content; + padding-block: 8px; + + font-size: 13px; + font-weight: 700; + line-height: 150%; + color: $headfoot-text-main-bg-color; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + display: none; + + width: 0; + height: 2px; + + background-color: $button-color; + + transition: width $duration-effect; + + @include on-s-desktop { + display: block; + } + } + + &:hover::after { + width: 100%; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..1fcd69a9d9 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,60 @@ +.form { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + gap: 48px; + } + + &__input { + padding-bottom: 16px; + border: none; + border-bottom: 1px solid $headfoot-text-main-bg-color; + + font-family: inherit; + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: $headfoot-text-main-bg-color; + + background-color: $headfoot-menu-bg-color; + outline: none; + caret-color: $headfoot-text-main-bg-color; + + &::placeholder { + color: $headfoot-text-main-bg-color; + opacity: 0.7; + } + + &:focus { + padding-bottom: 15px; + border-bottom: 2px solid $button-hover-color; + } + + &--textarea { + resize: none; + margin-bottom: 16px; + + @include on-tablet { + margin-bottom: 32px; + } + } + } + + &__button { + width: 100%; + padding-inline: 121px; + border: none; + + font-family: inherit; + + outline: none; + + @include on-tablet { + width: 264px; + margin-right: auto; + padding-inline: 114px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..5dcab631f4 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,140 @@ +.header { + position: relative; + + padding-top: 20px; + border-radius: 0 0 30px 30px; + + color: $headfoot-text-main-bg-color; + + background-color: $headfoot-menu-bg-color; + + @include on-s-desktop { + padding-top: 48px; + } + + &__top { + grid-column: 1 / -1; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 48px 20px; + padding-inline: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 56px 30px; + padding-inline: 40px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 164px 20px; + + max-width: 1146px; + margin-inline: auto; + padding-inline: 54px; + } + + @include on-m-desktop { + gap: 164px 30px; + padding-inline: 0; + } + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 32px; + + margin-bottom: 48px; + padding-inline: 0; + + @include on-tablet { + display: grid; + gap: 24px 30px; + margin-bottom: 148px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 32px 30px; + margin-bottom: 0; + } + } + + &__title { + font-size: 52px; + font-weight: 600; + line-height: 120%; + letter-spacing: -2px; + + @include on-tablet { + grid-column: 1 / -1; + font-size: 64px; + line-height: 68px; + } + + @include on-s-desktop { + grid-column: 1 / span 4; + } + } + + &__description { + max-width: 362px; + margin-bottom: 40px; + + font-family: $second-font; + font-size: 18px; + font-weight: 400; + line-height: 150%; + + @include on-tablet { + grid-column: 1 / span 4; + margin-bottom: 22px; + } + + @include on-s-desktop { + grid-column: 1 / span 4; + margin-bottom: 50px; + } + } + + &__button { + grid-column: 1 / span 3; + align-self: center; + + @include on-s-desktop { + grid-column: 1 / span 4; + margin-bottom: 205px; + } + + @include on-m-desktop { + grid-column: 1 / span 3; + } + } + + &__slider { + position: relative; + + overflow: hidden; + display: flex; + + border-radius: 30px; + + background-color: $main-bg-color; + + @include on-s-desktop { + position: absolute; + top: 120px; + right: 0; + bottom: 0; + + width: 49vw; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + } + } +} diff --git a/src/styles/blocks/intro-title.scss b/src/styles/blocks/intro-title.scss new file mode 100644 index 0000000000..2297ed983e --- /dev/null +++ b/src/styles/blocks/intro-title.scss @@ -0,0 +1,8 @@ +.intro-title { + font-size: 13px; + font-weight: 700; + line-height: 100%; + color: $intro-color; + text-transform: uppercase; + letter-spacing: 3px; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..d0aeb12416 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,43 @@ +.menu { + display: flex; + flex-direction: column; + gap: 102px; + + box-sizing: border-box; + height: 100vh; + padding-top: 20px; + + color: $headfoot-text-main-bg-color; + + background-color: $headfoot-menu-bg-color; + + @include on-s-desktop { + display: none; + padding-top: 48px; + } + + &__top-bar { + display: block; + } + + &__icons { + justify-content: space-between; + height: 35px; + } + + &__icon-close { + background-image: url('../images/icons/close-icon.svg'); + } + + &__nav { + display: flex; + flex-direction: column; + gap: 25px; + align-items: center; + justify-self: flex-start; + } + + &__link { + padding: 0; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..6c5df95baa --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,37 @@ +.page { + scroll-behavior: smooth; + font-family: Poppins, OpenSans, sans-serif; + + &:has(&__menu:target) { + overflow: hidden; + } + + &__menu { + pointer-events: none; + + position: fixed; + z-index: 2; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + padding-inline: 20px; + + opacity: 0; + + transition: + transform $duration-effect, + opacity $duration-effect; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + + @include on-tablet { + padding-inline: 40px; + } + } +} diff --git a/src/styles/blocks/service-card.scss b/src/styles/blocks/service-card.scss new file mode 100644 index 0000000000..021d0d441e --- /dev/null +++ b/src/styles/blocks/service-card.scss @@ -0,0 +1,80 @@ +.service-card { + display: flex; + flex-direction: column; + gap: 24px; + align-items: flex-start; + + box-sizing: border-box; + width: 264px; + height: 264px; + padding: 32px; + border-radius: 24px; + + font-size: 13px; + font-weight: 600; + line-height: 150%; + + background-color: $headfoot-text-main-bg-color; + box-shadow: 0 9px 18px 0 $shadow-color; + + @include on-s-desktop { + width: 100%; + } + + &__number { + position: relative; + + display: inline-block; + + padding: 2px 12px; + border-radius: 23px; + + color: $button-color; + + background: rgba($button-color, 0.1); + } + + &__list { + display: flex; + flex-direction: column; + margin-bottom: 8px; + list-style: none; + + &-item { + font-family: $second-font; + font-weight: 600; + } + } + + &__learn-more { + display: flex; + gap: 16px; + align-items: center; + } + + &__arrow { + width: 40px; + height: 40px; + border-radius: 50%; + + background-color: $button-color; + background-image: url('../images/services/services-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: 16px; + + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + + &__link { + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: $services-link-color; + text-decoration: none; + } +} diff --git a/src/styles/blocks/service.scss b/src/styles/blocks/service.scss new file mode 100644 index 0000000000..b5da6dbb4f --- /dev/null +++ b/src/styles/blocks/service.scss @@ -0,0 +1,32 @@ +.service { + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; + + &__img { + width: 166px; + height: 166px; + margin-bottom: 16px; + border-radius: 16px; + + @include on-s-desktop { + margin-bottom: 24px; + } + } + + &__title { + font-size: 20px; + font-weight: 600; + line-height: 140%; + text-align: center; + } + + &__description { + font-family: $second-font; + font-size: 14px; + font-weight: 400; + line-height: 150%; + text-align: center; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..201978d4de --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,202 @@ +.services { + padding-block: 120px; + color: $main-text-color; + + @include on-tablet { + padding-block: 148px; + } + + @include on-s-desktop { + padding-block: 148px 108px; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px 20px; + justify-items: center; + + padding-inline: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + padding-inline: 40px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 20px; + + max-width: 1146px; + margin-inline: auto; + padding-inline: 55px; + } + + @include on-m-desktop { + gap: 30px; + padding-inline: 0; + } + } + + &__exposition { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 16px; + + margin-bottom: 24px; + + @include on-tablet { + grid-column: 1 / span 3; + margin-bottom: 26px; + } + + @include on-s-desktop { + transform: translateY(18%); + grid-column: 1 / span 4; + grid-row: 1 / 3; + margin-bottom: 0; + } + } + + &__title { + margin-bottom: 8px; + + font-size: 32px; + font-weight: 600; + line-height: 130%; + color: $main-title-text-color; + } + + &__description { + font-family: $second-font; + font-size: 14px; + font-weight: 400; + line-height: 150%; + } + + &__service { + grid-column: 1 / -1; + + &--1 { + @include on-tablet { + grid-column: 1 / span 3; + justify-self: flex-end; + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + + @include on-s-desktop { + transform: translateY(50%); + grid-column: 7 / span 3; + grid-row: 1 / 2; + transition: + transform $duration-effect ease-in-out, + scale $duration-effect ease-in-out; + + &:hover { + transform: translateY(45%); + scale: 1.1; + } + } + } + + &--2 { + @include on-tablet { + transform: translateY(-45%); + + grid-column: 4 / span 3; + grid-row: 2 / 3; + justify-self: flex-start; + + transition: + transform $duration-effect ease-in-out, + scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + + @include on-s-desktop { + transform: translateY(0%); + grid-column: 10 / span 3; + grid-row: 1 / 2; + transition: + transform $duration-effect ease-in-out, + scale $duration-effect ease-in-out; + + &:hover { + transform: translateY(0%); + scale: 1.1; + } + } + } + + &--3 { + @include on-tablet { + grid-column: 1 / span 3; + grid-row: 3 / 4; + justify-self: flex-end; + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + + @include on-s-desktop { + transform: translateY(50%); + + grid-column: 7 / span 3; + grid-row: 2 / 3; + + margin-bottom: 0; + + transition: + transform $duration-effect ease-in-out, + scale $duration-effect ease-in-out; + + &:hover { + transform: translateY(45%); + scale: 1.1; + } + } + } + + &--4 { + @include on-tablet { + transform: translateY(-45%); + + grid-column: 4 / span 3; + grid-row: 3 / 4; + justify-self: flex-start; + + transition: + transform $duration-effect ease-in-out, + scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + + @include on-s-desktop { + transform: translateY(0%); + grid-column: 10 / span 3; + grid-row: 2 / 3; + transition: + transform $duration-effect ease-in-out, + scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..9aca98a833 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,84 @@ +.slider { + position: relative; + height: 390px; + background-color: $headfoot-menu-bg-color; + + @include on-s-desktop { + position: absolute; + height: auto; + } + + &__img { + position: absolute; + + width: 100%; + height: 390px; + + opacity: 0; + object-fit: cover; + object-position: center; + + transition: + opacity 0.5s ease-in-out, + transform 0.5s ease-in-out; + + @include on-s-desktop { + height: 100%; + } + + &--active { + position: relative; + opacity: 1; + } + } + + &__interaction { + position: absolute; + bottom: 24px; + left: 20px; + + display: flex; + flex-direction: column; + gap: 16px; + + @include on-tablet { + bottom: 32px; + left: 40px; + } + + @include on-s-desktop { + bottom: 48px; + left: 72px; + flex-direction: row; + gap: 24px; + } + + @include on-m-desktop { + left: 48px; + } + } + + &__arrow { + display: flex; + gap: 16px; + align-items: center; + } + + &__title { + margin-bottom: 8px; + + font-size: 13px; + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__description { + font-family: $second-font; + font-size: 14px; + font-weight: 400; + line-height: 140%; + text-align: left; + } +} diff --git a/src/styles/blocks/testimonial-card.scss b/src/styles/blocks/testimonial-card.scss new file mode 100644 index 0000000000..6a89e7b9bb --- /dev/null +++ b/src/styles/blocks/testimonial-card.scss @@ -0,0 +1,113 @@ +.testimonial-card { + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; + + box-sizing: border-box; + width: 100%; + height: 456px; + margin-inline: 30px; + padding: 32px 40px; + border-radius: 24px; + + font-size: 13px; + font-weight: 600; + line-height: 150%; + + background-color: $headfoot-text-main-bg-color; + box-shadow: 0 9px 18px 0 $shadow-color; + + @include on-tablet { + height: 478px; + } + + @include on-s-desktop { + width: 292px; + height: 456px; + margin-inline: 0; + padding: 32px 50px; + } + + @include on-m-desktop { + width: 362px; + height: 494px; + } + + &__img-container { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 196px; + height: 196px; + margin-bottom: 8px; + + &::before, + &::after { + content: ''; + + position: absolute; + + width: 55%; + height: 55%; + + background-image: url('../images/testimonials/testimonial-rectangle.svg'); + background-repeat: no-repeat; + } + + &::before { + margin: 0 27% 36% 0; + } + + &::after { + margin: 0 -49% -38% 0; + } + } + + &__photo { + z-index: 1; + width: 111px; + border-radius: 50%; + } + + &__comment { + max-width: 360px; + + font-family: $second-font; + font-size: 13px; + font-weight: 600; + line-height: 150%; + text-align: center; + + &::before { + content: ''; + + display: block; + + width: 24px; + height: 24px; + margin: 0 auto 8px; + + background-image: url('../images/testimonials/testimonial-quote.svg'); + } + } + + &__person { + width: 105%; + text-align: center; + } + + &__person-name { + margin-bottom: 4px; + + font-family: $second-font; + font-size: 13px; + font-weight: 600; + line-height: 150%; + color: $main-title-text-color; + text-align: center; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..707a988bf1 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,109 @@ +.testimonials { + scroll-margin-top: 30px; + margin-bottom: 120px; + color: $main-text-color; + + @include on-tablet { + margin-bottom: 148px; + } + + @include on-s-desktop { + margin-block: 150px 186px; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px 20px; + justify-items: center; + + padding-inline: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + padding-inline: 40px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 85px 20px; + + max-width: 1146px; + margin-inline: auto; + padding-inline: 55px; + } + + @include on-m-desktop { + gap: 85px 30px; + padding-inline: 0; + } + } + + &__exposition { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 16px; + + width: 100%; + margin-bottom: 24px; + + @include on-tablet { + grid-column: 1 / span 3; + margin-bottom: 26px; + } + + @include on-s-desktop { + transform: translateY(18%); + grid-column: 1 / span 4; + grid-row: 1 / 3; + margin-bottom: 0; + } + } + + &__title { + margin-bottom: 8px; + + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: $main-title-text-color; + } + + &__span { + @include on-tablet { + margin-right: 100%; + } + } + + &__person { + grid-column: 1 / -1; + + @include on-s-desktop { + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.05; + } + } + + &--1 { + @include on-s-desktop { + grid-column: 1 / span 4; + } + } + + &--2 { + @include on-s-desktop { + grid-column: 5 / span 4; + } + } + + &--3 { + @include on-s-desktop { + grid-column: 9 / span 4; + } + } + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 0000000000..4843cbdd97 --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,6 @@ +.title { + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: $main-title-text-color; +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..f1155ae4ba --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,104 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + &__icons { + display: flex; + gap: 32px; + align-items: center; + } + + &__icon-logo { + display: flex; + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + } + + &__icon-menu { + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/menu-icon.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: 18px; + + transition: scale $duration-effect ease-in-out; + + &:hover { + scale: 1.1; + } + + @include on-s-desktop { + display: none; + } + } + + &__nav { + display: none; + + @include on-s-desktop { + display: flex; + gap: 48px; + } + } + + &__link { + position: relative; + + padding-block: 8px; + + font-size: 13px; + font-weight: 700; + line-height: 150%; + color: $headfoot-text-main-bg-color; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 2px; + + background-color: $button-color; + + transition: width $duration-effect; + + @include on-s-desktop { + display: block; + } + } + + &:hover::after { + width: 100%; + } + } + + &__hire-us { + transition: + transform $duration-effect ease-in-out, + scale $duration-effect ease-in-out; + + &::after { + content: ''; + width: 100%; + height: 2px; + } + + &:hover { + scale: 1.1; + } + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..1e16efaf80 --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,94 @@ +.vision { + padding-block: 72px; + color: $main-text-color; + background-color: $headfoot-text-main-bg-color; + + @include on-tablet { + padding-block: 200px 220px; + + background-image: url('../images/Shapes.png'); + background-repeat: no-repeat; + background-position: center 40%; + background-size: 1150px; + } + + @include on-s-desktop { + background-size: 1280px; + } + + @include on-m-desktop { + background-size: 1500px; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px 20px; + justify-items: center; + + margin-inline: auto; + padding-inline: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 24px 30px; + padding-inline: 40px; + } + + @include on-s-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 24px 20px; + max-width: 1146px; + padding-inline: 0; + } + + @include on-m-desktop { + gap: 24px 30px; + } + } + + &__title { + grid-column: 1 / -1; + + max-width: 482px; + + font-size: 44px; + font-weight: 600; + line-height: 120%; + text-align: center; + + @include on-tablet { + max-width: 100%; + font-size: 52px; + } + } + + &__description { + grid-column: 1 / -1; + + max-width: 482px; + margin-bottom: 32px; + + font-family: $second-font; + font-size: 22px; + font-weight: 600; + line-height: 150%; + text-align: center; + + @include on-tablet { + max-width: 725px; + margin-bottom: 40px; + font-size: 24px; + } + } + + &__button { + grid-column: 1 / -1; + align-self: center; + color: $headfoot-text-main-bg-color; + + @include on-s-desktop { + grid-column: 5 / span 4; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..7f724009da 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,23 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'utils/variables'; +@import 'utils/mixins'; +@import 'utils/reset'; +@import 'blocks/page'; +@import 'blocks/body'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/slider'; +@import 'blocks/arrow'; +@import 'blocks/button'; +@import 'blocks/menu'; +@import 'blocks/title'; +@import 'blocks/intro-title'; +@import 'blocks/about-us'; +@import 'blocks/expertise'; +@import 'blocks/service'; +@import 'blocks/service-card'; +@import 'blocks/services'; +@import 'blocks/testimonial-card'; +@import 'blocks/testimonials'; +@import 'blocks/vision'; +@import 'blocks/footer'; +@import 'blocks/form'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..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/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780dc..0000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffbb..0000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..b3e38934ec --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,35 @@ +@mixin on-mobile { + @media screen and (min-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media screen and (min-width: 640px) { + @content; + } +} + +@mixin on-s-desktop { + @media screen and (min-width: 1024px) { + @content; + } +} + +@mixin on-m-desktop { + @media screen and (min-width: 1280px) { + @content; + } +} + +@mixin on-l-desktop { + @media screen and (min-width: 1600px) { + @content; + } +} + +@mixin on-xl-desktop { + @media screen and (min-width: 2560px) { + @content; + } +} diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000000..7a8486a381 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,32 @@ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +textarea:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 50px $headfoot-menu-bg-color inset !important; + transition: background-color $duration-effect ease-in-out 0s; + + -webkit-text-fill-color: $headfoot-text-main-bg-color !important; +} + +input:-webkit-autofill:focus, +input:-webkit-autofill:active, +textarea:-webkit-autofill:focus, +textarea:-webkit-autofill:active { + border-bottom: 2px solid $button-hover-color !important; +} + +body, +html, +ul, +p, +h1, +h2, +h3, +h4 { + margin: 0; + padding: 0; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..2bb77ebc31 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,12 @@ +$headfoot-text-main-bg-color: #fff; +$headfoot-menu-bg-color: #2c2c2c; +$main-bg-color: #f2f6fa; +$main-title-text-color: #253757; +$main-text-color: #6c788b; +$button-color: #2060f6; +$button-hover-color: #144ed4; +$services-link-color: #334563; +$shadow-color: #25293108; +$intro-color: #c0cdd7; +$duration-effect: 0.3s; +$second-font: 'Open Sans', sans-serif;