diff --git a/README.md b/README.md index 93d9738cc4..b5ae5788f6 100644 --- a/README.md +++ b/README.md @@ -1,71 +1,13 @@ # 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 -Adapt the page to the following screens: +[DEMO LINK](https://sheva10barca.github.io/layout_dia/) + +[Figma design](https://www.figma.com/file/7qwsWggv9BAxMi2VPhBuPr/Air-(formerly-Dia)?node-id=9138%3A35) - Use BEM and SCSS + +The page is adapted to the following screens: - Large screens 2560px - The design 1600px - Desktop 1280px - Small desktop 1024px - Tablet 640px - Mobile (> 320px) - -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. - -## 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) - - -## 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`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. diff --git a/src/images/Shapes.png b/src/images/Vision/Shapes.png similarity index 100% rename from src/images/Shapes.png rename to src/images/Vision/Shapes.png diff --git a/src/images/arrow.svg b/src/images/arrow.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/expertise/branding.jpg b/src/images/expertise/branding.jpg new file mode 100644 index 0000000000..f442761d03 Binary files /dev/null and b/src/images/expertise/branding.jpg differ diff --git a/src/images/expertise/communication.jpg b/src/images/expertise/communication.jpg new file mode 100644 index 0000000000..1bdffc9468 Binary files /dev/null and b/src/images/expertise/communication.jpg differ diff --git a/src/images/expertise/strategy.jpg b/src/images/expertise/strategy.jpg new file mode 100644 index 0000000000..b03c188b2c Binary files /dev/null and b/src/images/expertise/strategy.jpg 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/header/arrow-left.svg b/src/images/header/arrow-left.svg new file mode 100644 index 0000000000..2055a17bbc --- /dev/null +++ b/src/images/header/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header/arrow-right.svg b/src/images/header/arrow-right.svg new file mode 100644 index 0000000000..71e16adb61 --- /dev/null +++ b/src/images/header/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header/header.jpg b/src/images/header/header.jpg new file mode 100644 index 0000000000..dbe1898b16 Binary files /dev/null and b/src/images/header/header.jpg differ diff --git a/src/images/header/slide2.jpg b/src/images/header/slide2.jpg new file mode 100644 index 0000000000..dbb8e9ffa5 Binary files /dev/null and b/src/images/header/slide2.jpg differ diff --git a/src/images/header/slide3.jpg b/src/images/header/slide3.jpg new file mode 100644 index 0000000000..788c2341c6 Binary files /dev/null and b/src/images/header/slide3.jpg differ diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/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/menu-close.svg b/src/images/menu-close.svg new file mode 100644 index 0000000000..f43a579a42 --- /dev/null +++ b/src/images/menu-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 0000000000..48fc38e477 --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/quotes.svg b/src/images/quotes.svg new file mode 100644 index 0000000000..14efa5df60 --- /dev/null +++ b/src/images/quotes.svg @@ -0,0 +1,3 @@ + + + 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/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-blue.svg b/src/images/socials/facebook-blue.svg new file mode 100644 index 0000000000..c918771621 --- /dev/null +++ b/src/images/socials/facebook-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/facebook.svg b/src/images/socials/facebook.svg new file mode 100644 index 0000000000..9c6468fe04 --- /dev/null +++ b/src/images/socials/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/instagram-blue.svg b/src/images/socials/instagram-blue.svg new file mode 100644 index 0000000000..8ce0c47736 --- /dev/null +++ b/src/images/socials/instagram-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/instagram.svg b/src/images/socials/instagram.svg new file mode 100644 index 0000000000..769fcd5763 --- /dev/null +++ b/src/images/socials/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/twitter-blue.svg b/src/images/socials/twitter-blue.svg new file mode 100644 index 0000000000..c2c172c833 --- /dev/null +++ b/src/images/socials/twitter-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/twitter.svg b/src/images/socials/twitter.svg new file mode 100644 index 0000000000..baee0f5fab --- /dev/null +++ b/src/images/socials/twitter.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/Azadeh.jpg b/src/images/testimonials/Azadeh.jpg new file mode 100644 index 0000000000..ae9b67b811 Binary files /dev/null and b/src/images/testimonials/Azadeh.jpg differ diff --git a/src/images/testimonials/Michel.jpg b/src/images/testimonials/Michel.jpg new file mode 100644 index 0000000000..f421acb308 Binary files /dev/null and b/src/images/testimonials/Michel.jpg differ diff --git a/src/images/testimonials/Tal.jpg b/src/images/testimonials/Tal.jpg new file mode 100644 index 0000000000..4c64f21626 Binary files /dev/null and b/src/images/testimonials/Tal.jpg differ diff --git a/src/images/testimonials/rectangle.svg b/src/images/testimonials/rectangle.svg new file mode 100644 index 0000000000..3823bf5793 --- /dev/null +++ b/src/images/testimonials/rectangle.svg @@ -0,0 +1,3 @@ + + + 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..663c7b6afa 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,474 @@ - + - Dia + Air + + + + - -

Dia

- + +
+
+
+
+
+ + + + menu icon + +
+ + + + Hire us +
+ +
+

Strategic Agency

+

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

+ Learn more +
+ +
+
+
+ img + + img + + img +
+ +
+
+ + +
+
+

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

+
+
+ Branding image +

Branding

+

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

+
+ +
+ Communication image +

Communication

+

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

+
+ +
+ Strategy 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 & Website 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

+
+ +
+
+
+
+
+ Tal +
+ quotes +

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

+
+ +
+
+
+
+ Tal +
+ quotes +

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

+
Azadeh Hawkins
+

Hawkins Consulting

+
+ +
+
+
+
+ Tal +
+ quotes +

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..6cc68f377d 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,63 @@ 'use strict'; + +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page__body--with-menu'); + } else { + document.body.classList.remove('page__body--with-menu'); + } +}); + +const form = document.getElementById('form'); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + + const emailInput = form.querySelector('input[name="email"]'); + const nameInput = form.querySelector('input[name="name"]'); + const messageInput = form.querySelector('textarea[name="message"]'); + + if ( + !emailInput.value.trim() + || !nameInput.value.trim() + || !messageInput.value.trim() + ) { + // eslint-disable-next-line no-undef + alert('Please fill in all the fields before submitting the form.'); + + return; + } + + form.reset(); +}); + +const prevButton = document.querySelector('.slider__button--left'); +const nextButton = document.querySelector('.slider__button--right'); +let slideIndex = 0; + +showSlides(slideIndex); + +function plusSlide(n) { + showSlides((slideIndex += n)); +} + +function showSlides(n) { + const slides = document.querySelectorAll('.slider__image'); + + if (n > slides.length - 1) { + slideIndex = 0; + } + + if (n < 0) { + slideIndex = slides.length - 1; + } + + for (let i = 0; i < slides.length; i++) { + slides[i].style.display = 'none'; + } + + slides[slideIndex].style.display = 'block'; +} + +prevButton.addEventListener('click', () => plusSlide(-1)); +nextButton.addEventListener('click', () => plusSlide(1)); 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 deleted file mode 100644 index 1366a06aa5..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..05fba21493 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,52 @@ +.about-us { + padding: 120px 0; + + @include onTablet { + padding: 148px 0; + } + + &__content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + &__title { + font-weight: 600; + font-size: 32px; + line-height: 48px; + + color: #253757; + + margin-bottom: 24px; + + @include onTablet { + margin-bottom: 16px; + } + } + + &__description { + font-family: $fontOpenSans; + font-weight: 600; + font-size: 18px; + line-height: 150%; + + text-align: center; + + color: #6c788b; + + @include onTablet { + font-size: 24px; + line-height: 36px; + } + + @include onSmallDesktop { + width: 716px; + } + + @include onDesktop { + width: 754px; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..bfffeda12e --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,36 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + height: 56px; + width: 100%; + background-color: #144ed5; + border-radius: 8px; + cursor: pointer; + + border: transparent; + + color: #fff; + font-weight: 600; + font-size: 15px; + line-height: 22px; + + transition: all 0.5s; + + @include onTablet { + width: 264px; + height: 56px; + } + + &:hover { + background-color: #fff; + color: #144ed5; + } + + &--vision { + &:hover { + background-color: #253757; + color: #fff; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..c3d70b4163 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,17 @@ +.container { + margin: 0 auto; + max-width: 1146px; + padding: 0 20px; + + @include onTablet { + padding: 0 41px; + } + + @include onSmallDesktop { + padding: 0 54px; + } + + @include onDesktop { + padding: 0; + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..bff1707e4f --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,103 @@ +.expertise { + padding: 72px 0; + background-color: #fff; + border-radius: 30px; + + @include onTablet { + padding: 128px 0; + } + + &__title { + font-size: 44px; + line-height: 53px; + text-align: center; + + color: #253757; + margin-bottom: 56px; + + @include onTablet { + font-weight: 600; + font-size: 52px; + line-height: 78px; + + margin-bottom: 64px; + } + } + + &__cards { + display: flex; + flex-direction: column; + align-items: center; + gap: 56px; + + @include onSmallDesktop { + flex-direction: row; + justify-content: center; + gap: 137px; + } + + @include onDesktop { + gap: 177px; + } + } + + &__item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + max-width: 280px; + + @include onTablet { + max-width: 362px; + } + + @include onSmallDesktop { + max-width: 214px; + } + + @include onDesktop { + max-width: 264px; + } + } + + &__item-image { + width: 166px; + height: 166px; + border-radius: 16px; + + margin-bottom: 32px; + + transition: all 0.5s; + + &:hover { + transform: scale(1.1); + box-shadow: rgba(0, 0, 0, 0.3) 0 19px 38px, + rgba(0, 0, 0, 0.22) 0 15px 12px; + } + } + + &__item-title { + font-weight: 600; + font-size: 20px; + line-height: 28px; + + text-align: center; + + color: #253757; + + margin-bottom: 16px; + } + + &__item-description { + font-family: $fontOpenSans; + font-weight: 400; + font-size: 14px; + line-height: 21px; + + text-align: center; + + color: #6c788b; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..b568cdb0c5 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,224 @@ +.footer { + &__content { + display: flex; + flex-direction: column; + color: #fff; + + @include onSmallDesktop { + flex-direction: row; + gap: 98px; + flex-wrap: wrap; + } + + @include onDesktop { + gap: 0; + } + } + + &__message { + @include onTablet { + max-width: 362px; + } + } + + &__message-title { + font-weight: 600; + font-size: 32px; + line-height: 42px; + + margin-bottom: 48px; + + @include onTablet { + margin-bottom: 56px; + } + } + + &__contacts { + margin-bottom: 85px; + + @include onTablet { + margin-bottom: 140px; + } + + @include onDesktop { + margin-left: 225px; + margin-bottom: 188px; + } + } + + &__logo { + display: block; + margin-bottom: 48px; + width: 46px; + height: 28px; + + @include hover(transform, scale(1.2)); + + @include onTablet { + margin-bottom: 24px; + } + } + + &__bot { + @include onSmallDesktop { + display: flex; + gap: 200px; + } + + @include onDesktop { + gap: 450px; + } + } +} + +.form { + &__input { + width: 100%; + display: block; + font-family: inherit; + + font-weight: 600; + font-size: 15px; + line-height: 22px; + padding-bottom: 16px; + color: #fff; + + border: transparent; + border-bottom: 1px solid #fff; + background: none; + + transition: all 0.5s; + + margin-bottom: 40px; + + @include onTablet { + margin-bottom: 48px; + } + + &::placeholder { + opacity: 0.7; + } + + &:focus { + border-color: #144ed4; + outline: none; + } + } + + &__textarea { + margin-bottom: 56px; + + @include onTablet { + margin-bottom: 80px; + } + } + + &__btn { + margin-bottom: 80px; + + @include onTablet { + margin-bottom: 120px; + } + + @include onDesktop { + margin-bottom: 0; + } + } +} + +.contacts { + &__item { + margin-bottom: 40px; + + &:last-child { + margin-bottom: 0; + } + + @include onTablet { + margin-bottom: 48px; + + &:last-child { + margin-bottom: 0; + } + } + } + + &__title { + font-weight: 600; + font-size: 32px; + line-height: 48px; + + margin-bottom: 48px; + + @include onTablet { + margin-bottom: 56px; + } + } + + &__item-title { + font-weight: 700; + font-size: 13px; + line-height: 20px; + + letter-spacing: 3px; + text-transform: uppercase; + + opacity: 0.5; + + margin-bottom: 8px; + } + + &__item-link { + font-family: $fontOpenSans; + font-weight: 600; + font-size: 24px; + line-height: 36px; + + color: #fff; + + @include hover(color, #2060f6); + } + + &__item-socials { + display: flex; + gap: 36px; + padding-top: 8px; + } + + &__item-social { + height: 32px; + width: 32px; + + background-repeat: no-repeat; + background-position: center; + + transition: all 0.5s; + } + + &__item-facebook { + background-image: url(../images/socials/facebook.svg); + + &:hover { + background-image: url(../images/socials/facebook-blue.svg); + transform: scale(1.2); + } + } + + &__item-twitter { + background-image: url(../images/socials/twitter.svg); + + &:hover { + background-image: url(../images/socials/twitter-blue.svg); + transform: scale(1.2); + } + } + + &__item-instagram { + background-image: url(../images/socials/instagram.svg); + + &:hover { + background-image: url(../images/socials/instagram-blue.svg); + transform: scale(1.2); + } + } +} diff --git a/src/styles/blocks/grid.scss b/src/styles/blocks/grid.scss new file mode 100644 index 0000000000..7df4f58cd6 --- /dev/null +++ b/src/styles/blocks/grid.scss @@ -0,0 +1,60 @@ +.grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include onTablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include onSmallDesktop { + grid-template-columns: repeat(12, 1fr); + column-gap: 20px; + } + + @include onDesktop { + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + } + + &--flex { + display: flex; + + @include onTablet { + display: grid; + } + } + + &__item { + @for $start from 1 through 6 { + @for $end from $start through 6 { + &--tablet-#{$start}-#{$end} { + @include onTablet { + grid-column: #{$start} / #{$end + 1}; + } + } + } + } + + @for $start from 1 through 12 { + @for $end from $start through 12 { + &--small-desktop-#{$start}-#{$end} { + @include onSmallDesktop { + grid-column: #{$start} / #{$end + 1}; + } + } + } + } + + @for $start from 1 through 12 { + @for $end from $start through 12 { + &--desktop-#{$start}-#{$end} { + @include onDesktop { + 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..a5e43ed4ae --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,164 @@ +.logo { + &__image { + display: block; + width: 46px; + height: 28px; + + @include hover(transform, scale(1.1)); + } +} + +.header { + background-color: #2c2c2c; + color: #fff; + position: relative; + border-radius: 0 0 30px 30px; + + &__icons { + display: flex; + gap: 32px; + align-items: center; + } + + &__content { + height: 100vh; + padding-top: 20px; + + @include onDesktop { + padding-top: 48px; + } + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 48px; + + @include onSmallDesktop { + margin-bottom: 164px; + } + } + + &__menu-icon { + display: flex; + justify-content: center; + align-items: center; + width: 24px; + height: 24px; + margin-right: 40px; + + @include hover(transform, scale(1.3)); + + @include onTablet { + margin-right: 360px; + } + + @include onSmallDesktop { + display: none; + } + } + + &__hiring { + color: #fff; + font-weight: 700; + font-size: 13px; + line-height: 20px; + text-align: center; + letter-spacing: 3px; + text-transform: uppercase; + + @include hover(transform, scale(1.1)); + + &::after { + content: ""; + display: block; + height: 2px; + background-color: #2060f6; + margin-top: 5px; + border-radius: 4px; + } + } + + &__title { + font-weight: 600; + font-size: 52px; + line-height: 62px; + + letter-spacing: -2px; + + margin-bottom: 32px; + + @include onTablet { + font-size: 64px; + line-height: 68px; + margin-bottom: 24px; + } + + @include onSmallDesktop { + margin-bottom: 32px; + } + } + + &__subtitle { + font-family: $fontOpenSans; + font-weight: 400; + font-size: 18px; + line-height: 27px; + + margin-bottom: 42px; + + @include onTablet { + max-width: 362px; + margin-bottom: 56px; + } + + @include onSmallDesktop { + margin-bottom: 83px; + } + } + + &__button { + margin: 0 auto 48px; + + @include onTablet { + margin: 0; + } + } + + &__slider { + position: absolute; + right: 0; + left: 0; + bottom: 0; + height: 38vh; + + @include onTablet { + height: 45vh; + } + + @include onSmallDesktop { + top: 90px; + left: 50%; + height: auto; + } + + @include onDesktop { + top: 120px; + } + } + + &__nav { + display: none; + + @include onSmallDesktop { + display: block; + } + } + + &__info { + @include onSmallDesktop { + max-width: 362px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..ca7edadc21 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,53 @@ +.menu { + height: 100vh; + background-color: #2c2c2c; + z-index: 1; + padding-top: 25px; + overflow: auto; + + &__top { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__icon-close { + height: 32px; + width: 32px; + + @include hover(transform, scale(1.3)); + } + + &__icon-close > img { + height: 100%; + } + + &__list { + margin-top: 150px; + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + + @include onTablet { + gap: 50px; + margin-top: 200px; + } + } + + &__link { + font-weight: 700; + font-size: 26px; + line-height: 32px; + + text-align: center; + letter-spacing: 3px; + text-transform: uppercase; + + color: #fff; + } + + &__item { + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..239a9f5555 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,44 @@ +.nav { + &__list { + display: flex; + gap: 48px; + + &--footer { + flex-direction: column; + gap: 24px; + + @include onTablet { + flex-direction: row; + gap: 40px; + } + + @include onSmallDesktop { + gap: 64px; + } + } + } + + &__link { + font-weight: 700; + font-size: 13px; + line-height: 20px; + + text-align: center; + letter-spacing: 3px; + text-transform: uppercase; + + color: #fff; + } + + &__item { + transition: all 0.5s; + padding: 4px 0; + border-bottom: 1px solid transparent; + width: max-content; + + &:hover { + transform: scale(1.05); + border-color: #2060f6; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..dd9bc3f162 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,66 @@ +.page { + font-family: "Poppins", sans-serif; + scroll-behavior: smooth; + + &__body { + background-color: #f2f6fa; + &--with-menu { + overflow: hidden; + } + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1; + + transform: translateY(-100%); + transition: transform 0.5s; + + &:target { + transform: translateY(0); + } + } + + &__testimonials { + margin-bottom: 120px; + + @include onTablet { + margin-bottom: 148px; + } + + @include onSmallDesktop { + margin-bottom: 186px; + } + + @include onDesktop { + margin-bottom: 148px; + } + } + + &__vision { + @include onTablet { + padding: 200px 0; + background-image: url(../images/Vision/Shapes.png); + background-repeat: no-repeat; + background-size: cover; + background-position: left; + } + + @include onSmallDesktop { + background-size: contain; + } + } + + &__footer { + background-color: #2c2c2c; + border-radius: 30px 30px 0 0; + padding: 72px 0 80px; + + @include onTablet { + padding-top: 180px; + } + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..7c2d9ce469 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,218 @@ +.services { + padding: 120px 0; + display: flex; + flex-direction: column; + + @include onSmallDesktop { + padding: 148px 0 0; + } + + &__info { + display: flex; + flex-direction: column; + width: 264px; + margin-bottom: 48px; + + @include onTablet { + grid-column: 1 / 2; + grid-row: 1 / 2; + margin-bottom: 0; + } + + @include onSmallDesktop { + width: 292px; + grid-column: 1 / 5; + margin-top: 100px; + } + + @include onDesktop { + width: 362px; + } + } + + &__subtitle { + font-weight: 700; + font-size: 13px; + line-height: 20px; + + letter-spacing: 3px; + text-transform: uppercase; + + color: #c0cdd7; + margin-bottom: 16px; + } + + &__title { + font-weight: 600; + font-size: 32px; + line-height: 42px; + + color: #253757; + margin-bottom: 24px; + } + + &__description { + font-family: $fontOpenSans; + font-weight: 400; + font-size: 14px; + line-height: 21px; + + color: #6c788b; + } + + &__card { + padding: 30px; + background: #fff; + box-shadow: 0 9px 18px rgba(37, 41, 49, 0.03); + border-radius: 16px; + height: 264px; + width: 264px; + + transition: all 0.5s; + + margin-bottom: 24px; + + &:hover { + box-shadow: rgba(14, 30, 37, 0.12) 0 2px 4px 0, + rgba(14, 30, 37, 0.32) 0 2px 16px 0; + } + + &:last-child { + margin-bottom: 0; + } + + @include onTablet { + margin-bottom: 0; + } + + @include onSmallDesktop { + width: 214px; + } + + @include onDesktop { + width: 264px; + } + } + + &__card-number { + color: #2060f6; + width: 46px; + height: 24px; + text-align: center; + + font-weight: 600; + font-size: 13px; + line-height: 24px; + text-transform: uppercase; + + background-color: #bbcfff; + border-radius: 23px; + + margin-bottom: 24px; + } + + &__card-description { + font-family: $fontOpenSans; + font-weight: 600; + font-size: 13px; + line-height: 20px; + + color: #6c788b; + margin-bottom: 32px; + } + + &__card-button { + display: flex; + align-items: center; + line-height: 22px; + gap: 16px; + + @include hover(transform, scale(1.1)); + } + + &__card-btn { + display: flex; + height: 40px; + width: 40px; + border-radius: 20px; + background-color: #2060f6; + background-image: url(../images/arrow.svg); + background-repeat: no-repeat; + background-position: center; + } + + &__card-link { + font-weight: 600; + font-size: 15px; + line-height: 22px; + + color: #334563; + } + + &__content { + @include onTablet { + display: grid; + gap: 30px; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(3, auto); + justify-content: center; + } + + @include onSmallDesktop { + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(3, auto); + gap: 20px; + justify-content: space-between; + } + } + + &__card--1 { + @include onTablet { + grid-column: 1 / 2; + grid-row: 2 / 3; + } + + @include onSmallDesktop { + grid-column: 7 / 10; + } + } + + &__card--3 { + @include onTablet { + grid-column: 1 / 2; + grid-row: 3 / 4; + } + + @include onSmallDesktop { + grid-column: 7 / 10; + } + } + + &__card--2 { + @include onTablet { + transform: translateY(240px); + } + @include onSmallDesktop { + grid-column: 10 / 13; + transform: translateY(10px); + } + } + + &__card--4 { + @include onTablet { + transform: translateY(210px); + } + + @include onSmallDesktop { + grid-column: 10 / 13; + transform: translateY(-75px); + } + } + + &__card--1, + &__card--3 { + @include onSmallDesktop { + transform: translateY(-220px); + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..37b2323177 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,89 @@ +.slider { + &__content { + display: flex; + height: 100%; + } + + &__images { + width: 100%; + position: relative; + } + + &__image { + display: block; + height: 100%; + width: 100%; + position: absolute; + border-radius: 30px; + object-fit: cover; + object-position: center; + } + + &__menu { + position: absolute; + bottom: 24px; + left: 20px; + + @include onSmallDesktop { + display: flex; + align-items: center; + left: 82px; + bottom: 51px; + gap: 24px; + } + } + + &__buttons { + display: flex; + gap: 16px; + margin-bottom: 16px; + + @include onSmallDesktop { + margin-bottom: 0; + } + } + + &__button { + width: 32px; + height: 32px; + border-radius: 50%; + border: 1px solid transparent; + background-position: 50%; + background-repeat: no-repeat; + + cursor: pointer; + transition: all 0.5s; + + &--left { + background-image: url(../images/header/arrow-left.svg); + } + + &--right { + background-image: url(../images/header/arrow-right.svg); + } + + &:hover { + transform: scale(1.1); + box-shadow: -5px -5px 30px 5px rgb(24, 109, 165), + 5px 5px 30px 5px rgb(60, 60, 202); + } + } + + &__title { + font-weight: 700; + font-size: 13px; + line-height: 20px; + + letter-spacing: 3px; + text-transform: uppercase; + + margin-bottom: 8px; + } + + &__subtitle { + font-family: $fontOpenSans; + font-weight: 400; + font-size: 14px; + line-height: 20px; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..8749604a43 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,234 @@ +.testimonials { + &__text { + margin-bottom: 48px; + + @include onTablet { + margin-bottom: 56px; + } + + @include onSmallDesktop { + margin-bottom: 85px; + } + } + + &__subtitle { + font-weight: 700; + font-size: 13px; + line-height: 20px; + + letter-spacing: 3px; + text-transform: uppercase; + + color: #c0cdd7; + margin-bottom: 16px; + } + + &__title { + font-weight: 600; + font-size: 32px; + line-height: 48px; + + color: #253757; + + @include onTablet { + max-width: 205px; + } + } + + &__cards { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + justify-content: center; + + @include onTablet { + gap: 30px; + } + + @include onSmallDesktop { + flex-direction: row; + gap: 20px; + } + + @include onDesktop { + gap: 30px; + } + } +} + +.testimonials-card { + width: 280px; + height: 456px; + padding: 32px 37px; + + background: #fff; + box-shadow: 0 9px 18px rgba(37, 41, 49, 0.03); + border-radius: 16px; + + transition: all 0.5s; + + @include onTablet { + width: 558px; + height: 478px; + padding: 32px 98px; + } + + @include onSmallDesktop { + width: 292px; + height: 456px; + padding: 32px 48px; + } + + @include onDesktop { + width: 362px; + height: 494px; + padding: 32px 56px; + } + + &__avatar { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 63px; + margin-bottom: 80px; + + @include onTablet { + margin: 80px 0; + } + + @include onSmallDesktop { + margin-top: 53px; + margin-bottom: 80px; + } + + @include onDesktop { + margin: 80px 0; + } + } + + &__image { + width: 109px; + height: 109px; + border-radius: 50%; + position: absolute; + + transition: transform 0.5s; + + @include onTablet { + width: 140px; + height: 140px; + } + + @include onSmallDesktop { + width: 109.76px; + height: 109.76px; + } + + @include onDesktop { + width: 140px; + height: 140px; + } + } + + &__rectangle { + width: 108.98px; + height: 43.9px; + background-color: #2060f6; + border-radius: 12px; + position: relative; + transform: matrix(0.5, -0.87, 0.87, 0.5, 0, 0); + + transition: transform 0.5s; + + @include onTablet { + width: 139px; + height: 56px; + } + + @include onSmallDesktop { + width: 108.98px; + height: 43.9px; + } + + @include onDesktop { + width: 139px; + height: 56px; + } + } + + &__rectangle-top { + top: -18px; + left: -40px; + } + + &__rectangle-bot { + top: 8px; + left: 44px; + } + + &__quote-icon { + display: block; + margin: 0 auto 8px; + height: 24px; + width: 24px; + + @include onTablet { + margin-bottom: 16px; + } + } + + &__text { + font-family: $fontOpenSans; + font-weight: 600; + font-size: 13px; + line-height: 20px; + + text-align: center; + + color: #6c788b; + + margin-bottom: 16px; + } + + &__name { + font-family: $fontOpenSans; + font-weight: 600; + font-size: 13px; + line-height: 20px; + + text-align: center; + + color: #253757; + + margin-bottom: 4px; + } + + &__job { + font-weight: 700; + font-size: 13px; + line-height: 20px; + + text-align: center; + letter-spacing: 3px; + text-transform: uppercase; + + color: #c0cdd7; + } + + &:hover { + transform: scale(1.07); + box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, + rgba(17, 17, 26, 0.1) 0 8px 24px, + rgba(17, 17, 26, 0.1) 0 16px 56px; + } + + &:hover &__rectangle { + transform: rotate(120deg); + } + + &:hover &__image { + transform: scale(1.1); + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..0cdfa6468e --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,57 @@ +.vision { + &__content { + padding: 72px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include onTablet { + max-width: 754px; + margin: 0 auto; + } + + @include onSmallDesktop { + padding: 135px 0 0; + } + } + + &__title { + font-weight: 600; + font-size: 44px; + line-height: 53px; + text-align: center; + + color: #253757; + + margin-bottom: 24px; + + @include onTablet { + font-size: 52px; + line-height: 62px; + } + + @include onSmallDesktop { + line-height: 78px; + } + } + + &__subtitle { + font-family: $fontOpenSans; + font-style: normal; + font-weight: 600; + font-size: 22px; + line-height: 33px; + + text-align: center; + + color: #6c788b; + + margin-bottom: 56px; + + @include onTablet { + font-size: 24px; + line-height: 36px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d7..edcd7182fd 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,18 @@ -@import "utils"; -@import "fonts"; -@import "typography"; +@import "utils/mixins"; +@import "utils/variables"; +@import "utils/reset"; -body { - background: $c-gray; -} +@import "blocks/container.scss"; +@import "blocks/button.scss"; +@import "blocks/grid.scss"; +@import "blocks/page.scss"; +@import "blocks/header.scss"; +@import "blocks/slider.scss"; +@import "blocks/nav.scss"; +@import "blocks/menu.scss"; +@import "blocks/about-us.scss"; +@import "blocks/expertise.scss"; +@import "blocks/services.scss"; +@import "blocks/testimonials.scss"; +@import "blocks/vision.scss"; +@import "blocks/footer.scss"; 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/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..3b4595dc4e 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,30 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} 0.5s; &:hover { #{$_property}: $_toValue; } } + +@mixin onTablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin onSmallDesktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: 1600px) { + @content; + } +} + +@mixin onLargeDesktop { + @media (min-width: 2560px) { + @content; + } +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 0000000000..a0993143c3 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,45 @@ +* { + box-sizing: border-box; +} + +body, +h1, +h2, +h3, +h4, +h5, +p, +ul, +li, +textarea { + margin: 0; + padding: 0; +} + +input { + all: unset; +} + +ul { + list-style-type: none; +} + +a { + text-decoration: none; +} + +textarea { + border: none; + overflow: auto; + outline: none; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + + resize: none; +} + +input:-webkit-autofill { + transition: all 5000s ease; +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 0000000000..fc21633216 --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,2 @@ +$c-gray: #eee; +$fontOpenSans: "Open Sans"; 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;