diff --git a/README.md b/README.md index 93d9738cc4..4c72a89d8b 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://naviailpach.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/favicon/apple-touch-icon.png b/src/images/favicon/apple-touch-icon.png new file mode 100644 index 0000000000..d5910521ca Binary files /dev/null and b/src/images/favicon/apple-touch-icon.png differ diff --git a/src/images/favicon/favicon-96x96.png b/src/images/favicon/favicon-96x96.png new file mode 100644 index 0000000000..0d972fb5d8 Binary files /dev/null and b/src/images/favicon/favicon-96x96.png differ diff --git a/src/images/favicon/favicon.ico b/src/images/favicon/favicon.ico new file mode 100644 index 0000000000..d50bf12d0c Binary files /dev/null and b/src/images/favicon/favicon.ico differ diff --git a/src/images/favicon/favicon.svg b/src/images/favicon/favicon.svg new file mode 100644 index 0000000000..9c4fad9a5a --- /dev/null +++ b/src/images/favicon/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/favicon/site.webmanifest b/src/images/favicon/site.webmanifest new file mode 100644 index 0000000000..1bdccf52e5 --- /dev/null +++ b/src/images/favicon/site.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "MyWebSite", + "short_name": "MySite", + "icons": [ + { + "src": "/web-app-manifest-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/web-app-manifest-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "theme_color": "#000000", + "background_color": "#ffffff", + "display": "standalone" +} \ No newline at end of file diff --git a/src/images/favicon/web-app-manifest-192x192.png b/src/images/favicon/web-app-manifest-192x192.png new file mode 100644 index 0000000000..69c8253da1 Binary files /dev/null and b/src/images/favicon/web-app-manifest-192x192.png differ diff --git a/src/images/favicon/web-app-manifest-512x512.png b/src/images/favicon/web-app-manifest-512x512.png new file mode 100644 index 0000000000..7f7c029dde Binary files /dev/null and b/src/images/favicon/web-app-manifest-512x512.png differ diff --git a/src/images/icon/icon-close-menu.svg b/src/images/icon/icon-close-menu.svg new file mode 100644 index 0000000000..4799024f04 --- /dev/null +++ b/src/images/icon/icon-close-menu.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/images/icon/icon-menu-burger-2x.png b/src/images/icon/icon-menu-burger-2x.png new file mode 100644 index 0000000000..3d11b4182c Binary files /dev/null and b/src/images/icon/icon-menu-burger-2x.png differ diff --git a/src/images/logo/favicon.png b/src/images/logo/favicon.png new file mode 100644 index 0000000000..070168ec89 Binary files /dev/null and b/src/images/logo/favicon.png differ diff --git a/src/images/logo/logo-2x.png b/src/images/logo/logo-2x.png new file mode 100644 index 0000000000..ad26a47a38 Binary files /dev/null and b/src/images/logo/logo-2x.png differ diff --git a/src/images/logo/logo.png b/src/images/logo/logo.png new file mode 100644 index 0000000000..0561a759f0 Binary files /dev/null and b/src/images/logo/logo.png differ diff --git a/src/images/services/icon-arrow.svg b/src/images/services/icon-arrow.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/services/icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-next.svg b/src/images/slider/arrow-next.svg new file mode 100644 index 0000000000..6ff406d8fe --- /dev/null +++ b/src/images/slider/arrow-next.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/slider/arrow-prev.svg b/src/images/slider/arrow-prev.svg new file mode 100644 index 0000000000..7272b2b4a9 --- /dev/null +++ b/src/images/slider/arrow-prev.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/slider/slide-1.png b/src/images/slider/slide-1.png new file mode 100644 index 0000000000..930ff04b9a Binary files /dev/null and b/src/images/slider/slide-1.png differ diff --git a/src/images/social/facebook.svg b/src/images/social/facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/social/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/social/instagram.svg b/src/images/social/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/social/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social/twitter.svg b/src/images/social/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/social/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/testimonials/Azadeh-Hawkins.png b/src/images/testimonials/Azadeh-Hawkins.png new file mode 100644 index 0000000000..2dd0f4c5ae Binary files /dev/null and b/src/images/testimonials/Azadeh-Hawkins.png differ diff --git a/src/images/testimonials/Michel-Grover.png b/src/images/testimonials/Michel-Grover.png new file mode 100644 index 0000000000..e78fcd9f3c Binary files /dev/null and b/src/images/testimonials/Michel-Grover.png differ diff --git a/src/images/testimonials/Tal-Gilad.png b/src/images/testimonials/Tal-Gilad.png new file mode 100644 index 0000000000..a63ae79d07 Binary files /dev/null and b/src/images/testimonials/Tal-Gilad.png differ diff --git a/src/images/testimonials/azadeh-hawkins-2x.png b/src/images/testimonials/azadeh-hawkins-2x.png new file mode 100644 index 0000000000..7fb6720057 Binary files /dev/null and b/src/images/testimonials/azadeh-hawkins-2x.png differ diff --git a/src/images/testimonials/michel-grover-2x.png b/src/images/testimonials/michel-grover-2x.png new file mode 100644 index 0000000000..2004475c7a Binary files /dev/null and b/src/images/testimonials/michel-grover-2x.png differ diff --git a/src/images/testimonials/quotes.png b/src/images/testimonials/quotes.png new file mode 100644 index 0000000000..e6804943e1 Binary files /dev/null and b/src/images/testimonials/quotes.png differ diff --git a/src/images/testimonials/tal-gilad-2x.png b/src/images/testimonials/tal-gilad-2x.png new file mode 100644 index 0000000000..b143adc24b Binary files /dev/null and b/src/images/testimonials/tal-gilad-2x.png differ diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg deleted file mode 100644 index d487a51ddf..0000000000 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg deleted file mode 100644 index 04288940f3..0000000000 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg deleted file mode 100644 index 24c0f2b94b..0000000000 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and /dev/null differ diff --git a/src/images/work/branding.png b/src/images/work/branding.png new file mode 100644 index 0000000000..9b53e3a173 Binary files /dev/null and b/src/images/work/branding.png differ diff --git a/src/images/work/communication.png b/src/images/work/communication.png new file mode 100644 index 0000000000..d2367a07ce Binary files /dev/null and b/src/images/work/communication.png differ diff --git a/src/images/work/strategy.png b/src/images/work/strategy.png new file mode 100644 index 0000000000..95847179c1 Binary files /dev/null and b/src/images/work/strategy.png differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd54008..22e70c26a5 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,2 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} +$font-base: 'Open Sans', sans-serif; +$font-heading: 'Poppins', sans-serif; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 0000000000..9a35c2047c --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,11 @@ +.about { + &__text { + font-size: 22px; + font-weight: 600; + text-align: center; + + @include on-tablet { + font-size: 24px; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..8208c7ccd3 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,36 @@ +.button { + cursor: pointer; + + display: inline-block; + + width: 100%; + height: 100%; + padding: 14px 20px; + border: none; + border-radius: 8px; + + font-family: $font-heading; + font-size: 15px; + font-weight: 600; + line-height: 1.5; + color: $white; + text-align: center; + text-decoration: none; + + background-color: $blue; + + transition: background-color $effectDuration ease-in-out; + + &:hover { + background-color: $button-color-hover; + } + + @include on-tablet { + max-width: 264px; + } + + &--results { + grid-column: 1 / -1; + padding-block: 17px; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..3c5ef67ca4 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,18 @@ +.container { + width: 100%; + max-width: $container-max; + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 227px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..216d2c4d50 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,116 @@ +.footer { + padding: 72px 0 80px; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + background-color: $black; + + @include on-tablet { + padding-top: 180px; + } + + &__content { + @include page-grid; + + row-gap: 80px; + + @include on-tablet { + row-gap: 120px; + } + } + + &__form { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-small-desktop { + grid-column: span 5; + } + } + + &__title { + margin-bottom: 48px; + + font-family: $font-heading; + font-size: 32px; + font-weight: 600; + line-height: 1.3; + color: $white; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__contacts { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-small-desktop { + grid-column: 7 / -2; + } + + @include on-desktop { + grid-column: 8 / -2; + } + } + + &__contacts-item { + margin-bottom: 40px; + + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + margin-bottom: 48px; + } + } + + &__contacts-title { + margin-bottom: 8px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + line-height: 1; + color: rgba($white, 0.5); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + &--social { + margin-bottom: 16px; + } + } + + &__contacts-contact { + display: block; + + font-family: $font-base; + font-size: 24px; + font-weight: 600; + line-height: 1.5; + color: $white; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + &__nav { + grid-column: 1 / -1; + + @include on-small-desktop { + display: flex; + align-items: center; + justify-content: space-between; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..48ebed8142 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,57 @@ +.form { + &__field { + margin-bottom: 40px; + + &:last-of-type { + margin-bottom: 56px; + } + } + + &__input { + width: 100%; + padding-bottom: 17px; + border: none; + border-bottom: 1px solid $white; + + font-family: $font-heading; + font-size: 15px; + font-weight: 600; + line-height: 1; + color: $white; + + background: none; + outline: none; + + &::placeholder { + font-family: $font-heading; + font-size: 15px; + font-weight: 600; + line-height: 1; + color: $white; + + opacity: 0.7; + } + + &:focus { + border-bottom: 1px solid $blue; + box-shadow: 0 1px 0 0 $blue; + } + + &--textarea { + resize: none; + height: 100%; + padding-bottom: 9px; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px transparent inset; + -webkit-text-fill-color: $white; + caret-color: $white; + transition: background-color 5000s ease-in-out 0s; + + border-bottom: 1px solid $white; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..dca466880e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,13 @@ +.header { + position: relative; + + min-height: 893px; + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + + background-color: $black; + + @include on-small-desktop { + min-height: 800px; + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 0000000000..5f858dda77 --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,65 @@ +.hero { + &__content { + @include on-small-desktop { + max-width: 362px; + margin-top: 120px; + } + } + + &__title { + margin-bottom: 32px; + + font-family: $font-heading; + font-size: 52px; + font-weight: 600; + line-height: 1.2; + color: $white; + letter-spacing: -2px; + + @include on-tablet { + font-size: 64px; + } + } + + &__text { + margin-bottom: 72px; + font-size: 18px; + font-weight: 400; + color: $white; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desktop { + margin-bottom: 83px; + } + } + + &__slider { + pointer-events: auto; + + position: absolute; + z-index: 1; + right: 0; + bottom: 0; + + width: 100%; + height: 390px; + + @include on-small-desktop { + max-width: 502px; + height: 100%; + max-height: 680px; + margin-top: 0; + } + + @include on-desktop { + max-width: 687px; + } + + @include on-big-desktop { + max-width: 1167px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..f90474e37a --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,10 @@ +.menu { + height: $size-height; + font-weight: 600; + text-transform: uppercase; + background-color: $black; + + @include on-desktop { + font-weight: 700; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..a80e453198 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,72 @@ +.nav { + display: none; + + &__list { + display: flex; + gap: 48px; + align-items: center; + + &--menu-list { + flex-direction: column; + row-gap: 24px; + align-items: normal; + } + + &--footer-list { + @include on-tablet { + flex-direction: row; + gap: 40px; + } + } + } + + &__item { + position: relative; + list-style: none; + } + + &__link { + padding-block: 20px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + line-height: 1.5; + color: $white; + text-align: center; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 2px; + border-radius: 4px; + + background-color: #2060f6; + + transition: transform $effectDuration ease-in-out; + } + + &:hover::after { + transform: scale(1); + } + } + + &--menu { + display: flex; + } + + @include on-small-desktop { + display: flex; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..e58639ea69 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,62 @@ +.page { + scroll-behavior: smooth; + overflow-x: hidden; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + min-width: 320px; + margin: 0; + + font-family: $font-base; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: $text-color; + + background: $c-gray; + } + + &__menu { + pointer-events: none; + + position: fixed; + z-index: 2; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + opacity: 0; + + transition: all $effectDuration ease; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + + @include on-small-desktop { + display: none; + } + } + + &__main { + background-color: $main-color-bg; + } + + &__main-content { + display: grid; + row-gap: 120px; + padding-block: 120px; + + @include on-tablet { + row-gap: 148px; + padding-top: 148px; + padding-bottom: 0; + } + } +} diff --git a/src/styles/blocks/reset.scss b/src/styles/blocks/reset.scss new file mode 100644 index 0000000000..7da9fef52c --- /dev/null +++ b/src/styles/blocks/reset.scss @@ -0,0 +1,22 @@ +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +ul, +ol { + margin: 0; + padding: 0; + list-style: none; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} diff --git a/src/styles/blocks/results.scss b/src/styles/blocks/results.scss new file mode 100644 index 0000000000..fde8c141c4 --- /dev/null +++ b/src/styles/blocks/results.scss @@ -0,0 +1,57 @@ +.results { + padding-block: 72px; + background-color: $white; + + @include on-tablet { + padding-block: 200px; + background-image: url(/src/images/Shapes.png); + background-repeat: no-repeat; + background-position: center; + } + + &__content { + @include page-grid; + + justify-items: center; + } + + &__title { + grid-column: 1 / -1; + + margin-bottom: 24px; + + font-family: $font-heading; + font-size: 44px; + font-weight: 600; + line-height: 1.2; + color: $title-color; + text-align: center; + + @include on-tablet { + font-size: 52px; + } + + @include on-small-desktop { + grid-column: 3 / -3; + } + } + + &__text { + grid-column: 1 / -1; + + margin-bottom: 56px; + + font-size: 22px; + font-weight: 600; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + font-size: 24px; + } + + @include on-small-desktop { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..cf2571bcee --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,31 @@ +.section { + &__title { + margin-bottom: 24px; + + font-family: $font-heading; + font-size: 32px; + font-weight: 600; + color: $title-color; + text-align: center; + + &--text-left { + text-align: left; + } + + &--mb0 { + margin-bottom: 0; + } + } + + &__subtitle { + margin-bottom: 16px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + line-height: 1; + color: $light-gray; + text-transform: uppercase; + letter-spacing: 3px; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..fdf3b1c5a7 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,125 @@ +.services { + @include on-small-desktop { + padding-top: 148px; + } + + &__content { + @include page-grid; + + row-gap: 24px; + + @include on-tablet { + row-gap: 30px; + } + } + + &__info { + grid-column: 1 / -1; + margin-bottom: 24px; + + @include on-tablet { + grid-column: span 3; + margin-bottom: 26px; + } + + @include on-small-desktop { + grid-column: span 4; + } + } + + &__text { + &-first { + margin-bottom: 25px; + } + } + + &__card { + cursor: pointer; + + display: flex; + grid-column: 1 / -1; + flex-direction: column; + justify-content: space-between; + + width: 100%; + height: 100%; + min-height: 264px; + padding: 32px; + border-radius: 16px; + + background-color: $white; + + &-number { + width: 46px; + height: 24px; + padding: 6px 12px; + border-radius: 23px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 600; + line-height: 1; + color: $blue; + text-transform: uppercase; + + background-color: rgba($blue, 0.1); + } + + &-text { + font-size: 13px; + font-weight: 600; + } + + &-link { + display: flex; + gap: 16px; + align-items: center; + + font-family: $font-heading; + font-size: 15px; + font-weight: 600; + line-height: 1; + color: $color-link; + text-decoration: none; + } + + &-icon { + display: flex; + align-items: center; + justify-content: center; + + width: 40px; + height: 40px; + border-radius: 50%; + + color: white; + + background-color: $blue; + } + + &:nth-child(odd) { + @include on-tablet { + transform: translateY(-50%); + grid-column: 4 / -1; + } + + @include on-small-desktop { + grid-column: 10 / -1; + } + } + + &:nth-child(even) { + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 7 / -4; + } + } + + @include hover(box-shadow, 0 9px 18px rgba(37, 41, 49, 0.03)); + + @include hover-child('.services__card-icon', transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..ffbf4b09be --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,98 @@ +.slider { + position: relative; + overflow: hidden; + height: 100%; + border-radius: 30px; + + @include on-small-desktop { + border-radius: 0; + border-top-left-radius: 30px; + border-bottom-right-radius: 30px; + } + + &__image-wrapper { + width: 100%; + height: 100%; + } + + &__image { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__info { + position: absolute; + right: 0; + bottom: 0; + left: 0; + + padding-bottom: 24px; + padding-left: 20px; + + @include on-tablet { + padding-bottom: 32px; + padding-left: 41px; + } + + @include on-small-desktop { + display: flex; + gap: 24px; + align-items: center; + + padding-bottom: 48px; + padding-left: 78px; + } + } + + &__controls { + display: flex; + gap: 16px; + margin-bottom: 24px; + + @include on-small-desktop { + margin-bottom: 0; + } + } + + &__arrow { + cursor: pointer; + + position: relative; + + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + + background-color: $white; + + @include hover(transform, scale(1.2)); + } + + &__arrows { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + } + + &__content { + color: $white; + } + + &__title { + margin-bottom: 8px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__description { + line-height: 1.4; + } +} diff --git a/src/styles/blocks/social.scss b/src/styles/blocks/social.scss new file mode 100644 index 0000000000..cb4ef93a72 --- /dev/null +++ b/src/styles/blocks/social.scss @@ -0,0 +1,20 @@ +.social { + display: flex; + gap: 32px; + align-items: center; + + &__icon { + display: flex; + + width: 32px; + height: 32px; + + fill: $white; + + transition: fill $effectDuration ease; + + &:hover { + fill: $blue; + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..0d10fe2356 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,99 @@ +.testimonials { + &__info { + grid-column: 1 / -1; + margin-bottom: 18px; + + @include on-tablet { + width: 100%; + max-width: 200px; + margin-bottom: 26px; + } + + @include on-small-desktop { + margin-bottom: 55px; + } + } + + &__content { + @include page-grid; + + row-gap: 24px; + + @include on-tablet { + row-gap: 30px; + } + } + + &__item { + cursor: pointer; + + display: flex; + grid-column: 1 / -1; + flex-direction: column; + align-items: center; + justify-content: space-between; + + height: 100%; + min-height: 456px; + padding: 32px 42px; + border-radius: 16px; + + text-align: center; + + background-color: $white; + + @include hover(box-shadow, 0 9px 18px rgba(37, 41, 49, 0.03)); + + @include on-tablet { + min-height: 478px; + padding-inline: 98px; + } + + @include on-small-desktop { + grid-column: span 4; + padding-inline: 43px; + } + + @include on-desktop { + min-height: 494px; + padding-inline: 56px; + } + + @include hover-child('.testimonials__photo', transform, scale(1.2)); + } + + &__photo { + width: 196px; + height: 196px; + object-fit: cover; + + @include on-tablet { + width: 250px; + height: 250px; + } + } + + &__text { + font-size: 13px; + font-weight: 600; + } + + &__quotes { + display: flex; + } + + &__name { + font-size: 13px; + font-weight: 600; + color: $title-color; + } + + &__prof { + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + color: $light-gray; + text-transform: uppercase; + letter-spacing: 3px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..9e33cc8519 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,70 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + padding-top: 20px; + padding-bottom: 48px; + + @include on-tablet { + padding-bottom: 44px; + } + + @include on-small-desktop { + padding-top: 48px; + } + + &__left { + display: flex; + gap: 32px; + align-items: center; + + @include on-small-desktop { + gap: 0; + } + } + + &__logo-link { + display: flex; + } + + &__logo { + width: 46px; + height: 28px; + + @include hover(transform, scale(1.2)); + } + + &__icon { + display: flex; + + width: 24px; + height: 24px; + + background: url(/src/images/icon/icon-menu-burger-2x.png) center no-repeat; + background-size: cover; + + @include hover(transform, scale(1.2)); + + @include on-small-desktop { + display: none; + } + + &--close { + background: url(/src/images/icon/icon-close-menu.svg) center no-repeat; + background-size: cover; + } + } + + &--footer { + padding-top: 0; + + @include on-tablet { + padding-bottom: 24px; + } + + @include on-small-desktop { + padding-bottom: 0; + } + } +} diff --git a/src/styles/blocks/work.scss b/src/styles/blocks/work.scss new file mode 100644 index 0000000000..914cd56b49 --- /dev/null +++ b/src/styles/blocks/work.scss @@ -0,0 +1,99 @@ +.work { + padding-block: 72px; + border-radius: 30px; + background-color: $white; + + @include on-tablet { + padding-block: 128px; + } + + @include on-small-desktop { + padding-bottom: 134px; + } + + &__content { + @include page-grid; + + row-gap: 56px; + justify-items: center; + + @include on-tablet { + row-gap: 72px; + } + } + + &__photo { + display: block; + + width: 184px; + max-width: 100%; + height: auto; + margin-bottom: 32px; + margin-inline: auto; + border-radius: 16px; + + object-fit: cover; + + transition: transform $effectDuration ease-in-out; + + @include on-tablet { + margin-bottom: 40px; + } + } + + &__item { + cursor: pointer; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-small-desktop { + grid-column: span 4; + max-width: 214px; + } + + @include on-desktop { + max-width: 264px; + } + + &:hover { + .work__photo { + transform: scale(1.1); + } + } + } + + &__title { + margin-bottom: 56px; + + font-family: $font-heading; + font-size: 44px; + font-weight: 600; + line-height: 1.2; + color: $title-color; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + font-size: 52px; + line-height: 1.5; + } + } + + &__item-title { + margin-bottom: 16px; + + font-family: $font-heading; + font-size: 20px; + font-weight: 600; + line-height: 1.4; + color: $title-color; + text-align: center; + } + + &__item-text { + text-align: center; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..02f82ebce8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,24 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'sprite'; -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/reset'; +@import 'blocks/container'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/hero'; +@import 'blocks/button'; +@import 'blocks/slider'; +@import 'blocks/section'; +@import 'blocks/about'; +@import 'blocks/work'; +@import 'blocks/services'; +@import 'blocks/testimonials'; +@import 'blocks/results'; +@import 'blocks/footer'; +@import 'blocks/form'; +@import 'blocks/social'; diff --git a/src/styles/sprite.scss b/src/styles/sprite.scss new file mode 100644 index 0000000000..a70eb38632 --- /dev/null +++ b/src/styles/sprite.scss @@ -0,0 +1,3 @@ +.sprite { + display: none; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..0a1208c03c 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,67 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effectDuration ease; + &:hover { #{$_property}: $_toValue; } } + +@mixin hover-child($_child, $_property, $_toValue) { + #{$_child} { + transition: #{$_property} $effectDuration ease; + } + + &:hover { + #{$_child} { + #{$_property}: $_toValue; + } + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-big-desktop { + @media (min-width: $big-desktop-min-width) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + + column-gap: 20px; + } + + @include on-desktop { + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..0e2645fc09 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,17 @@ +$tablet-min-width: 640px; +$small-desktop-min-width: 1024px; +$desktop-min-width: 1600px; +$big-desktop-min-width: 2560px; +$size-height: 100vh; +$container-max: 1600px; $c-gray: #eee; +$white: #fff; +$black: #2c2c2c; +$blue: #2060f6; +$button-color-hover: #144ed4; +$title-color: #253757; +$text-color: #6c788b; +$main-color-bg: #f2f6fa; +$light-gray: #c0cdd7; +$color-link: #334563; +$effectDuration: 0.3s;