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..e76f0bcd9e 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ Adapt the page to the following screens: 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_dia/). + [DEMO LINK](https://polina3107.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/fpkewsdjk.olfewjuefo b/fpkewsdjk.olfewjuefo new file mode 100644 index 0000000000..9f2d5648ad --- /dev/null +++ b/fpkewsdjk.olfewjuefo @@ -0,0 +1,28 @@ +diff.astextplain.textconv=astextplain +filter.lfs.clean=git-lfs clean -- %f +filter.lfs.smudge=git-lfs smudge -- %f +filter.lfs.process=git-lfs filter-process +filter.lfs.required=true +http.sslbackend=schannel +core.autocrlf=false +core.fscache=true +core.symlinks=false +core.editor=nano.exe +pull.rebase=false +credential.helper=manager +credential.https://dev.azure.com.usehttppath=true +init.defaultbranch=master +user.name=polina3107 +user.email=polinadavidenko3107@gmail.com +core.editor=code --wait +core.repositoryformatversion=0 +core.filemode=false +core.bare=false +core.logallrefupdates=true +core.symlinks=false +core.ignorecase=true +remote.origin.url=https://github.com/polina3107/layout_dia.git +remote.origin.fetch=+refs/heads/*:refs/remotes/origin/* +branch.master.remote=origin +branch.master.merge=refs/heads/master +branch.master.vscode-merge-base=origin/master diff --git a/index.html b/index.html index 1eca937738..1c012875bf 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,393 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + Air + + + + - -

Dia

- + +
+
+
+ + + Menu link + +
+ + + + + + + Hire us +
+ +

Strategic Agency

+

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

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

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 & Webite Design
Packaging

+
+ + Service 1 + +

Learn more

+ + +
+
+
+

002

+

Сontent Production
Graphic Design
Video Production
Post Production

+
+ + Service 2 + +

Learn more

+ + +
+
+
+

003

+

Marketing Strategy
Email Marketing
Paid Advertising
Blog Content & SEO

+
+ + Service 3 + +

Learn more

+ + +
+
+
+

004

+

Digital Communications
Influencer Marketing
Product Placements
Strategic Partnerships

+
+ + Service 4 + +

Learn more

+ + +
+
+
+
+
+

Testimonials

+

What people say

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

+
+
+
+ Person 2 +
+ Quotes +

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

+
+

Azadeh Hawkins

+

Hawkins Consulting

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

+ + + +
+
+
+
+

Send us a message

+
+ + + +
+ +
+
+ +
+

Contact us

+
+
+

Call us

+

654 321 987

 +
+
+

Visit us

+

2905 West Drive, Buffalo Grove

 +
+
+

our socials

+
+ + facebook icon + + + twitter icon + + + instagram icon + +
+
+
+
+
+
+ + 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/Poppins-Bold.ttf b/src/fonts/Poppins-Bold.ttf new file mode 100644 index 0000000000..00559eeb29 Binary files /dev/null and b/src/fonts/Poppins-Bold.ttf differ diff --git a/src/fonts/Poppins-Regular.ttf b/src/fonts/Poppins-Regular.ttf new file mode 100644 index 0000000000..9f0c71b70a Binary files /dev/null and b/src/fonts/Poppins-Regular.ttf differ diff --git a/src/fonts/Poppins-SemiBold.ttf b/src/fonts/Poppins-SemiBold.ttf new file mode 100644 index 0000000000..74c726e327 Binary files /dev/null and b/src/fonts/Poppins-SemiBold.ttf differ 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/block-arrow.svg b/src/images/block-arrow.svg new file mode 100644 index 0000000000..14283291fa --- /dev/null +++ b/src/images/block-arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + 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/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg deleted file mode 100644 index a81933296e..0000000000 --- a/src/images/logo/dia-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/our-expertise/1.png b/src/images/our-expertise/1.png new file mode 100644 index 0000000000..5d92f8178b Binary files /dev/null and b/src/images/our-expertise/1.png differ diff --git a/src/images/our-expertise/2.png b/src/images/our-expertise/2.png new file mode 100644 index 0000000000..deef4a5c23 Binary files /dev/null and b/src/images/our-expertise/2.png differ diff --git a/src/images/our-expertise/3.png b/src/images/our-expertise/3.png new file mode 100644 index 0000000000..6b048687c4 Binary files /dev/null and b/src/images/our-expertise/3.png differ 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/slider-1.jpg b/src/images/slider/slider-1.jpg new file mode 100644 index 0000000000..7fc390324c Binary files /dev/null and b/src/images/slider/slider-1.jpg differ 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/testemonials/person-1.png b/src/images/testemonials/person-1.png new file mode 100644 index 0000000000..b143adc24b Binary files /dev/null and b/src/images/testemonials/person-1.png differ diff --git a/src/images/testemonials/person-2.png b/src/images/testemonials/person-2.png new file mode 100644 index 0000000000..7fb6720057 Binary files /dev/null and b/src/images/testemonials/person-2.png differ diff --git a/src/images/testemonials/person-3.png b/src/images/testemonials/person-3.png new file mode 100644 index 0000000000..2004475c7a Binary files /dev/null and b/src/images/testemonials/person-3.png differ diff --git a/src/images/testemonials/quotes.svg b/src/images/testemonials/quotes.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/testemonials/quotes.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/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.scss b/src/styles/blocks.scss new file mode 100644 index 0000000000..184dda9259 --- /dev/null +++ b/src/styles/blocks.scss @@ -0,0 +1,16 @@ +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/slider'; +@import 'blocks/about-us'; +@import 'blocks/containers'; +@import 'blocks/services'; +@import 'blocks/block'; +@import 'blocks/testimonials'; +@import 'blocks/person'; +@import 'blocks/vision'; +@import 'blocks/contact-us'; +@import 'blocks/form'; +@import 'blocks/contacts'; +@import 'blocks/footer'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..a739729ee8 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,68 @@ +.about-us { + @include margin-top-sections; + + text-align: center; + + &__title { + margin: 0; + font-weight: 600; + color: $titles-text-color; + } + + &__description { + margin: 0; + margin-top: 24px; + + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 150%; + color: $description-text-color; + } + + &__who-we-are { + @include content-padding-inline; + + @include on-small-desktop { + padding-inline: 100px; + } + + @include on-desktop { + padding-inline: 200px; + } + + @include on-large-screens { + padding-inline: 900px; + } + } + + &__our-expertise { + @include margin-top-sections; + + border-radius: 30px; + background-color: #fff; + + &__title { + margin: 0; + padding-top: 72px; + + font-size: 44px; + font-weight: 600; + line-height: 120%; + color: $titles-text-color; + } + } + + &__containers { + display: flex; + flex-direction: column; + + @include on-small-desktop { + flex-direction: row; + } + + @include on-large-screens { + padding-inline: 500px; + } + } +} diff --git a/src/styles/blocks/block.scss b/src/styles/blocks/block.scss new file mode 100644 index 0000000000..4c01af5e4a --- /dev/null +++ b/src/styles/blocks/block.scss @@ -0,0 +1,51 @@ +.block { + &__number { + display: inline-block; + + width: 46px; + height: 24px; + margin: 0; + border-radius: 23px; + + font-size: 13px; + font-weight: 600; + line-height: 24px; + color: $buttons-color; + text-align: center; + + background-color: #ebf1f8; + } + + &__description { + margin: 0; + margin-top: 24px; + + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + color: $description-text-color; + } + + &__links { + transform-origin: left; + + display: flex; + gap: 16px; + + margin-top: 32px; + + transition: all $transition-time; + + &:hover { + transform: scale(1.1); + } + } + + &__link { + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: #334563; + text-decoration: none; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..08f87f4bb1 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,41 @@ +.contact-us { + margin-bottom: -2px; + + @include content-padding-inline; + + border-top-left-radius: 16px; + border-top-right-radius: 16px; + background-color: $header-footer-color; + + @include on-small-desktop { + @include page-grid; + + padding-top: 180px; + } + + &__form { + @include margin-top-sections; + + @include on-small-desktop { + grid-column: 1 / 6; + margin-top: 0; + } + } + + &__contacts { + margin-top: 80px; + + @include on-tablet { + margin-top: 120px; + } + + @include on-small-desktop { + grid-column: 7 / span 5; + margin-top: 0; + } + + @include on-desktop { + grid-column: 8 / 12; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 0000000000..ae1678f882 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,79 @@ +.contacts { + &__title { + margin: 0; + + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: $header-footer-text-color; + } + + &__wrapper { + display: grid; + gap: 40px; + margin-top: 48px; + + @include on-tablet { + gap: 48px; + margin-top: 56px; + } + } + + &__name { + margin: 0; + + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + color: $header-footer-text-color; + text-transform: uppercase; + letter-spacing: 3px; + + opacity: 0.5; + } + + &__text { + margin: 0; + padding-top: 8px; + + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 150%; + color: $header-footer-text-color; + text-decoration: none; + + &__link { + transform-origin: left; + margin: 0; + padding: 0; + transition: all $transition-time; + + &:hover { + transform: scale(1.04); + } + } + } + + &__link { + text-decoration: none; + } + + &__icon { + height: 32px; + transition: all $transition-time; + + &:hover { + transform: scale(1.3); + filter: brightness(0) saturate(100%) invert(32%) sepia(99%) + saturate(2478%) hue-rotate(221deg) brightness(97%) contrast(98%); + } + } + + &__icons { + display: flex; + gap: 32px; + margin-top: 16px; + } +} diff --git a/src/styles/blocks/containers.scss b/src/styles/blocks/containers.scss new file mode 100644 index 0000000000..93ef41aea2 --- /dev/null +++ b/src/styles/blocks/containers.scss @@ -0,0 +1,55 @@ +.containers { + &__container { + &:last-child { + padding-bottom: 72px; + } + } + + &__image { + width: 166px; + height: 166px; + margin-top: 56px; + border-radius: 16px; + + transition: all $transition-time; + + &:hover { + cursor: pointer; + transform: scale(1.2); + } + } + + &__name { + margin: 0; + margin-top: 32px; + + font-size: 20px; + font-weight: 600; + line-height: 140%; + color: $titles-text-color; + } + + &__text { + margin: 0; + margin-top: 16px; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 139px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 150px; + } + + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: $description-text-color; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..2498c7e544 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,83 @@ +.footer { + // position: relative; + // bottom: 5px; + + @include content-padding-inline; + + background-color: $header-footer-color; + + @include on-small-desktop { + @include page-grid; + + margin-top: -1px; + padding-top: 125px; + } + + &__image { + margin-top: 85px; + transition: all $transition-time; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + margin-top: 145px; + } + + @include on-small-desktop { + grid-column: 1; + margin-top: 0; + } + } + + &__list { + display: grid; + gap: 24px; + + margin: 0; + margin-top: 53px; + padding: 0; + + list-style: none; + + @include on-tablet { + grid-auto-flow: column; + gap: 20px; + margin-top: 29px; + } + + @include on-small-desktop { + grid-column: 5 / -1; + margin-top: 0; + } + } + + &__link { + font-size: 13px; + font-weight: 700; + line-height: 150%; + color: $header-footer-text-color; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__item { + transition: all $transition-time; + + &:hover { + transform: scale(1.05); + } + } + + &__item:last-child { + margin-bottom: 85px; + } + + &__logo { + height: 25px; + margin: 0; + padding: 0; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..cfdd8da288 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,117 @@ +.form { + @include on-tablet { + @include page-grid; + } + + @include on-small-desktop { + display: block; + } + + &__title { + width: 60%; + margin: 0; + padding-top: 72px; + + font-size: 32px; + font-weight: 600; + line-height: 130%; + color: $header-footer-text-color; + + @include on-tablet { + grid-column: 1 / 5; + width: 100%; + padding-top: 180px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + padding-top: 0; + } + } + + &__inputs { + display: grid; + gap: 40px; + padding-top: 48px; + + @include on-tablet { + grid-column: 1 / 5; + gap: 48px; + padding-top: 56px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + } + + &__input { + width: 100%; + padding: 0; + padding-bottom: 17px; + border: none; + border-bottom: 1px solid #fff; + + font-family: inherit; + font-size: 15px; + font-weight: 600; + color: #fff; + + background-color: $header-footer-color; + outline: none; + + transition: all $transition-time; + + &:focus { + border-bottom: 2px solid #144ed4; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + caret-color: #fff; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: #fff; + } + } + + &__button { + width: 100%; + height: 56px; + margin-top: 56px; + border: none; + border-radius: 8px; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + color: $header-footer-text-color; + + background-color: #144ed4; + + transition: all $transition-time; + + &:hover { + cursor: pointer; + transform: scale(1.02); + } + + @include on-tablet { + grid-column: 1 / 4; + margin-top: 80px; + } + + @include on-small-desktop { + width: 70%; + margin-bottom: 5px; + } + } + + &__textarea { + resize: vertical; + height: 23px; + min-height: 23px; + max-height: 46px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..46e2bf8567 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,191 @@ +.header { + display: grid; + background-color: $header-footer-color; + + @include on-small-desktop { + @include page-grid; + + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + } + + &__content { + @include content-padding-inline; + + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 20px; + + @include on-small-desktop { + grid-column: 1 / -1; + margin-top: 52px; + } + } + + &__top { + display: flex; + gap: 32px; + align-items: center; + } + + &__logo { + cursor: pointer; + transition: all $transition-time; + + &:hover { + transform: scale(1.05); + } + } + + &__menu { + width: 24px; + height: 24px; + + @include on-small-desktop { + display: none; + } + } + + &__link { + position: relative; + + font-family: inherit; + font-size: 13px; + font-weight: 700; + line-height: 150%; + color: $header-footer-text-color; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + &::after { + content: ''; + + position: absolute; + + display: block; + + width: 100%; + height: 2px; + margin-top: 8px; + + background-color: $buttons-color; + + transition: transform 0.3s; + } + + &:hover::after { + animation: line 1s; + } + + @keyframes line { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(0); + } + + 100% { + transform: scale(1); + } + } + } + + &__title { + @include content-padding-inline; + + margin: 0; + margin-top: 48px; + + font-family: inherit; + font-size: 52px; + font-weight: 600; + line-height: 120%; + color: $header-footer-text-color; + + @include on-tablet { + margin-top: 56px; + font-size: 64px; + line-height: 68px; + letter-spacing: -2px; + } + + @include on-small-desktop { + grid-column: 1 / 5; + margin-top: 153px; + } + } + + &__text { + @include content-padding-inline; + + margin: 0; + margin-top: 32px; + + font-family: 'Open Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: $header-footer-text-color; + + @include on-tablet { + margin-top: 24px; + font-size: 18px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + margin-top: 32px; + } + } + + &__button { + cursor: pointer; + + width: 100%; + height: 50px; + margin: 0; + padding: 0; + border: none; + border-radius: 8px; + + font-family: inherit; + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: $header-footer-text-color; + letter-spacing: 0; + + background-color: $buttons-color; + + transition: all $transition-time; + + &__container { + @include content-padding-inline; + + margin-top: 72px; + + @include on-tablet { + width: 264px; + margin-top: 56px; + } + + @include on-small-desktop { + grid-column: 1 / 5; + margin-top: 83px; + margin-bottom: 205px; + } + } + + &:hover { + transform: scale(1.05); + } + + &:active { + transform: scale(1.1); + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..0bcd17b960 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,26 @@ +.menu { + z-index: 1; + + overflow: auto; + + width: 100%; + height: 100vh; + + text-transform: uppercase; + letter-spacing: 25%; + + background-color: $header-footer-color; + + &__list { + list-style: none; + } + + &__item { + padding: 20px; + } + + &__link { + color: $header-footer-text-color; + text-decoration: none; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..4ceab43c6c --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,37 @@ +.nav { + display: none; + + &__list { + margin: 0; + list-style: none; + + @include on-small-desktop { + display: flex; + flex-direction: row; + gap: 48px; + } + } + + &__link { + font-family: inherit; + font-size: 13px; + font-weight: 700; + color: $header-footer-text-color; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__item { + cursor: pointer; + transition: all $transition-time; + + &:hover { + transform: scale(1.05); + } + } + + @include on-small-desktop { + display: block; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..ce0bdff19a --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,37 @@ +.page { + margin: 0; + font-family: Poppins, sans-serif; + background-color: $page-color; + + &__body { + min-width: 320px; + margin: 0; + } + + &__menu { + pointer-events: none; + + position: fixed; + right: 0; + transform: translateX(-100%); + + opacity: 0; + + transition: all $transition-time; + + &:target { + pointer-events: all; + top: 0; + transform: translateX(0); + opacity: 1; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} + +* { + scroll-behavior: smooth; +} diff --git a/src/styles/blocks/person.scss b/src/styles/blocks/person.scss new file mode 100644 index 0000000000..de1e9b9425 --- /dev/null +++ b/src/styles/blocks/person.scss @@ -0,0 +1,65 @@ +.person { + &__image { + width: 196px; + max-width: 100%; + margin-top: 32px; + transition: all $transition-time; + + &:hover { + cursor: pointer; + transform: scale(1.2); + } + } + + &__quotes { + width: 24px; + max-width: 100%; + margin-top: 24px; + } + + &__description { + margin: 0; + margin-top: 8px; + padding-inline: 42px; + + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + color: $description-text-color; + + @include on-tablet { + padding-inline: 98px; + } + + @include on-small-desktop { + padding-inline: 48px; + } + + @include on-desktop { + padding-inline: 56px; + } + } + + &__name { + margin: 0; + margin-top: 16px; + + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + color: $titles-text-color; + } + + &__work { + margin: 0; + margin-top: 4px; + + @include introduction-style; + } + + &__bottom { + margin-bottom: 32px; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..d8563223f8 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,89 @@ +.services { + @include content-padding-inline; + + @include margin-top-sections; + + @include on-tablet { + margin-top: 148px; + } + + @include on-small-desktop { + @include page-grid; + + margin-top: 250px; + } + + @include on-large-screens { + padding-inline: 750px; + } + + &__content { + @include on-tablet { + width: 50%; + } + + @include on-small-desktop { + grid-column: 1 / 5; + width: 100%; + } + } + + &__introduction { + margin: 0; + + @include introduction-style; + } + + &__title { + margin: 0; + margin-top: 16px; + + font-size: 32px; + font-weight: 600; + line-height: 130%; + color: $titles-text-color; + } + + &__description { + margin: 0; + margin-top: 24px; + + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: $description-text-color; + } + + &__blocks { + display: grid; + flex-direction: column; + gap: 24px; + margin-top: 48px; + + @include on-tablet { + grid-auto-flow: row; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + margin-top: 56px; + } + + @include on-small-desktop { + grid-column: -1 / -7; + grid-row: 1 / 2; + } + } + + &__block { + padding: 32px; + border-radius: 16px; + background-color: #fff; + box-shadow: 0 9px 18px 0 #25293108; + + &--up { + @include on-tablet { + transform: translateY(-50%); + } + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..1565116341 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,104 @@ +.slider { + position: relative; + top: 30px; + + max-width: 1600px; + height: 390px; + margin-top: 18px; + border-radius: 30px; + + background-image: url('../images/slider/slider-1.jpg'); + background-position: 50%; + background-size: cover; + + @include on-tablet { + margin-top: 117px; + } + + @include on-small-desktop { + top: 0; + + grid-column: -1 / -8; + grid-row: 2 / 5; + align-self: end; + + height: 680px; + margin: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + } + + @include on-large-screens { + right: 0; + bottom: 0; + } + + &__content { + @include content-padding-inline; + + padding-top: 250px; + color: $header-footer-text-color; + + @include on-tablet { + padding-top: 242px; + } + + @include on-small-desktop { + display: flex; + gap: 24px; + align-items: center; + justify-content: center; + + padding-top: 564px; + } + + @include on-desktop { + justify-content: flex-start; + padding-left: 48px; + } + } + + &__title { + margin: 0; + margin-top: 16px; + + font-family: inherit; + font-size: 13px; + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__text { + margin: 0; + margin-top: 8px; + + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 140%; + letter-spacing: 0; + } + + &__arrow { + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + + background-color: #fff; + + transition: all $transition-time; + + &:hover { + cursor: pointer; + transform: scale(1.1); + } + } + + &__arrows { + display: flex; + gap: 16px; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..1b913c3971 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,51 @@ +.testimonials { + @include content-padding-inline; + + @include margin-top-sections; + + &__introduction { + margin: 0; + + @include introduction-style; + } + + &__title { + margin: 0; + margin-top: 16px; + + @include on-tablet { + width: 33%; + } + + @include on-desktop { + width: 20%; + } + } + + &__people { + display: flex; + flex-direction: column; + gap: 24px; + + margin-top: 48px; + + text-align: center; + + @include on-tablet { + gap: 30px; + margin-top: 56px; + } + + @include on-small-desktop { + display: grid; + grid-auto-flow: row; + grid-template-columns: repeat(3, 1fr); + } + } + + &__person { + border-radius: 16px; + background-color: #fff; + box-shadow: 0 9px 18px 0 #25293108; + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..971785242b --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,71 @@ +.vision { + @include content-padding-inline; + + @include margin-top-sections; + + text-align: center; + background-color: #fff; + + @include on-tablet { + background-image: url('../images/Shapes.png'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } + + &__title { + margin: 0; + padding-top: 72px; + + font-size: 44px; + font-weight: 600; + line-height: 120%; + color: $titles-text-color; + + @include on-tablet { + padding-top: 200px; + } + } + + &__description { + margin: 0; + margin-top: 24px; + + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 150%; + color: $description-text-color; + } + + &__button { + width: 100%; + height: 56px; + margin-top: 56px; + margin-bottom: 72px; + padding: 0; + border: none; + border-radius: 8px; + + font-family: inherit; + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: #fff; + + background-color: $buttons-color; + + transition: all $transition-time; + + &:hover { + cursor: pointer; + transform: scale(1.02); + } + + @include on-tablet { + width: 50%; + margin-top: 64px; + margin-bottom: 200px; + } + } +} diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss new file mode 100644 index 0000000000..fc42ab771b --- /dev/null +++ b/src/styles/fonts.scss @@ -0,0 +1,20 @@ +@font-face { + font-family: Poppins; + font-weight: 400; + font-style: normal; + src: url('../fonts/Poppins-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: Poppins; + font-weight: 600; + font-style: normal; + src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); +} + +@font-face { + font-family: Poppins; + font-weight: 700; + font-style: normal; + src: url('../fonts/Poppins-Bold.ttf') format('truetype'); +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..144df3bb9f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,4 @@ -@import 'utils'; +@import 'utils/vars'; +@import 'utils/mixins'; @import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index 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..051d567d42 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,92 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1600px) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: 2560px) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 227px; + } + + @include on-large-screens { + padding-inline: 500px; + } +} + +.container { + margin: 0; + padding: 0; + + @include content-padding-inline; +} + +@mixin page-grid { + --columns: 2; + --gap: 20px; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: var(--gap); + + @include on-tablet { + --columns: 6; + --gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + } +} + +@mixin introduction-style { + font-size: 13px; + font-weight: 700; + line-height: 100%; + color: $introduction-color; + text-transform: uppercase; + letter-spacing: 3px; +} + +@mixin margin-top-sections { + margin-top: 120px; + + @include on-tablet { + margin-top: 148px; + } +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 0000000000..1b772a3653 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,9 @@ +$header-footer-color: #2c2c2c; +$buttons-color: #2060f6; +$header-footer-text-color: #fff; +$titles-text-color: #253757; +$description-text-color: #6c788b; +$main-background-color: #f2f6fa; +$transition-time: 0.3s; +$page-color: #f2f6fa; +$introduction-color: #c0cdd7;