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..d0989c81ea 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://lightdiller.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/checklist.md b/checklist.md index c24c685fb5..788c33e2c6 100644 --- a/checklist.md +++ b/checklist.md @@ -30,3 +30,96 @@ 8. The "Hire Us" button in the header menu should lead to the contact form 9. In the `Vision`, `Passion`, `Results` sections, the “Apply” button also should lead to the contact form 10. All the social icons in the footer should be clickable and open the social networks in a new tab + + + + + +Реализовать лендинг согласно дизайну в Figma — использовать BEM и SCSS. + +Адаптировать страницу под следующие экраны: + +Большие экраны — 2560px +Дизайн — 1600px +Desktop — 1280px +Маленький desktop — 1024px +Планшет — 640px +Mobile (> 320px) +Требования +Реализовать header с навигацией. +Реализовать блок Strategic agency. +Реализовать слайдер (можно начать с одного изображения). +Реализовать блок слайдера как абсолютно позиционированный элемент с right: 0 и bottom: 0 внутри черного контейнера. +На больших экранах ограничить ширину черного контейнера до 1600px, чтобы слева оставалось стандартное серое фоновое пространство. +Реализовать блок Who we are. +Реализовать блок Our expertise с карточкой, переиспользуемой 3 раза. +Реализовать блок Process с 4 карточками процесса. +Использовать translateY(-50%) для смещения карточек вверх. +Реализовать блок Testimonials. +Каждая карточка должна иметь фиксированную ширину, а на маленьких экранах весь блок должен переключаться в колонку. +Реализовать блок Vision, Passion, Results. +Использовать https://github.com/mate-academy/layout_dia/blob/master/src/images/Shapes.png как фоновое изображение. +Реализовать блок Send us a message. +Реализовать блок Contact us. +Реализовать footer. + +Чеклист для подготовки портфолио-проекта к HR review +Не забудь добавить заголовок “Air” для всей веб-страницы. +Лендинг должен быть реализован строго по дизайну из Figma. +Добавить favicon. +Стрелки внизу первого блока не должны медленно реагировать на нажатие (это возможно, если изображения слишком большие). +Пользователь должен иметь возможность удобно написать 2–3 строки текста в поле сообщения. +Опционально: после завершения всего можно реализовать слайдер на hero-экране (изображения можно взять с Unsplash). +Github flow +Сделать fork репозитория. +Клонировать fork. +(Ссылка проекта должна содержать твое имя, а не mate-academy) +Выполнить npm install (или просто npm i). +Выполнить npm start. +Открыть еще одно окно терминала для следующих шагов. + +Выполнить: + +git checkout -b develop + +чтобы создать новую ветку и переключиться на нее. + +Писать код в папке src. + +Выполнить: + +npm run lint + +и исправить ошибки стиля кода. + +Выполнить: + +npm run deploy + +чтобы задеплоить решение в gh-pages. + +Сохранить изменения: +git add . && git commit -m 'solution' +Отправить код: +git push origin develop +Создать Pull Request (PR) из ветки develop в ветку master оригинального репозитория. +Заменить на свой GitHub username в DEMO LINK. +Скопировать DEMO LINK в описание PR. + + + + +Добавить favicon +Все интерактивные элементы (ссылки, кнопки, изображения, иконки) должны иметь hover-эффект и cursor: pointer. Пользователь должен интуитивно понимать, что с ними можно взаимодействовать +НЕОБЯЗАТЕЛЬНО: после завершения всего можно реализовать слайдер в первой секции +Проверка HR +Чтобы рекрутеру было понятно, что это за лендинг, лучше назвать всю веб-страницу “Air” +Лендинг должен быть реализован строго по дизайну в Figma +Ссылки в меню header и footer должны вести к соответствующим блокам лендинга +Скорость анимаций должна быть одинаковой по всему лендингу (например, увеличение при hover или появление блоков при скролле) +Placeholder’ы в формах должны подсказывать, что вводить, а если есть валидация формы — должно быть понятно, в каком формате вводить номер телефона +Убедиться, что на мобильных устройствах всё выглядит аккуратно и нет горизонтального скролла +Кнопка “Learn more” должна вести к ближайшему блоку (Our expertise) +Кнопка “Hire Us” в header должна вести к контактной форме +В секциях Vision, Passion, Results кнопка “Apply” также должна вести к контактной форме +Все иконки социальных сетей в footer должны быть кликабельными и открывать соцсети в новой вкладке diff --git a/index.html b/index.html index 1eca937738..a3691e8a1e 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,10 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + + + + Dia -

Dia

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

Strategic Agency

+

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

+ + Learn more + +
+
+
+
+
+ + +
+ intro +

By the same illusion which lifts the horizon.

+
+
+
+
+
+
+ +
+
+
+

Who we are

+

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

+
+
+
+
+
+
+

Our expertise

+
+
+
+ Branding +
+

+ Branding +

+

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

+
+
+
+ Communication +
+

+ Communication +

+

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

+
+
+
+ Strategy +
+

+ Strategy +

+

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

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

Services

+

Air is a full service creative agency

+

+ Deep analytics, strong strategy and bright creative ideas. +

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

+
+
+
+

001

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

Learn more

+ +
+ +
+
+

002

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

Learn more

+ +
+ +
+
+

003

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

Learn more

+ +
+ +
+
+

004

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

Learn more

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

Testimonials

+

What people say

+
+
+
+
+ Voices Photo +
+ decore +

+ 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

+ +
+ + +
+
+ Voices Photo +
+ decore + +

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

+

Azadeh Hawkins

+

Hawkins Consulting

+ +
+
+
+ Voices Photo +
+ + decore + +

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

Send us a message

+
+ + + + +
+
+
+
+
+

Contact us

+
+
+

Call us

+ + 654 321 987 + +
+
+

Visit us

+ + 2905 West Drive, Buffalo Grove + +
+
+

our socials

+ + + + + + +
+
+
+
+
+
+
+
+ + 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/images/Shapes.png b/src/images/Shapes.png deleted file mode 100644 index 26ed3e89b0..0000000000 Binary files a/src/images/Shapes.png and /dev/null differ diff --git a/src/images/contacts/facebook.svg b/src/images/contacts/facebook.svg new file mode 100644 index 0000000000..ce2478fe7b --- /dev/null +++ b/src/images/contacts/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contacts/instagram.svg b/src/images/contacts/instagram.svg new file mode 100644 index 0000000000..769fcd5763 --- /dev/null +++ b/src/images/contacts/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contacts/twitter.svg b/src/images/contacts/twitter.svg new file mode 100644 index 0000000000..b27c847d77 --- /dev/null +++ b/src/images/contacts/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/expertise/exp-1.webp b/src/images/expertise/exp-1.webp new file mode 100644 index 0000000000..d8b6917769 Binary files /dev/null and b/src/images/expertise/exp-1.webp differ diff --git a/src/images/expertise/exp-2.webp b/src/images/expertise/exp-2.webp new file mode 100644 index 0000000000..c7b37504d0 Binary files /dev/null and b/src/images/expertise/exp-2.webp differ diff --git a/src/images/expertise/exp-3.webp b/src/images/expertise/exp-3.webp new file mode 100644 index 0000000000..01cfb14a3f Binary files /dev/null and b/src/images/expertise/exp-3.webp 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/Air.svg b/src/images/header/Air.svg new file mode 100644 index 0000000000..70e90d9356 --- /dev/null +++ b/src/images/header/Air.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/header/Menu.svg b/src/images/header/Menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/header/Menu.svg @@ -0,0 +1,3 @@ + + + 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/offer/arrow.svg b/src/images/offer/arrow.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/offer/arrow.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/first-slide.webp b/src/images/slider/first-slide.webp new file mode 100644 index 0000000000..95ec87c524 Binary files /dev/null and b/src/images/slider/first-slide.webp differ diff --git a/src/images/slider/left.svg b/src/images/slider/left.svg new file mode 100644 index 0000000000..e0e78c500f --- /dev/null +++ b/src/images/slider/left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/right.svg b/src/images/slider/right.svg new file mode 100644 index 0000000000..4319096bd3 --- /dev/null +++ b/src/images/slider/right.svg @@ -0,0 +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/sub-title/sub-title-icon-dark.svg b/src/images/sub-title/sub-title-icon-dark.svg deleted file mode 100644 index 9fcdfa10cd..0000000000 --- a/src/images/sub-title/sub-title-icon-dark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/sub-title/sub-title-icon-light.svg b/src/images/sub-title/sub-title-icon-light.svg deleted file mode 100644 index 5ec041c15e..0000000000 --- a/src/images/sub-title/sub-title-icon-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg deleted file mode 100644 index d487a51ddf..0000000000 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-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/vision/Shapes.webp b/src/images/vision/Shapes.webp new file mode 100644 index 0000000000..3a1fe6ad03 Binary files /dev/null and b/src/images/vision/Shapes.webp differ diff --git a/src/images/voices/kav.svg b/src/images/voices/kav.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/voices/kav.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/voices/voices-1.webp b/src/images/voices/voices-1.webp new file mode 100644 index 0000000000..47a0023444 Binary files /dev/null and b/src/images/voices/voices-1.webp differ diff --git a/src/images/voices/voices-2.webp b/src/images/voices/voices-2.webp new file mode 100644 index 0000000000..ea58b2dc50 Binary files /dev/null and b/src/images/voices/voices-2.webp differ diff --git a/src/images/voices/voices-3.webp b/src/images/voices/voices-3.webp new file mode 100644 index 0000000000..14c4958523 Binary files /dev/null and b/src/images/voices/voices-3.webp 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/about-us.scss b/src/styles/about-us.scss new file mode 100644 index 0000000000..debc69e10b --- /dev/null +++ b/src/styles/about-us.scss @@ -0,0 +1,50 @@ +.about-us { + border-radius: 30px; + background-color: $main-color; + + &__content { + box-sizing: border-box; + padding: 72px 0; + + @include on-tablet{ + padding: 128px 0; + } + } + + &__cards{ + display: grid; + gap: 56px; + margin-top: 56px; + + @include on-tablet{ + gap: 72px; + margin-top: 64px; + } + + @include on-s-desktop{ + grid-template-columns: repeat(3, 1fr); + gap: 136px; + justify-self: center; + width: fit-content; + } + + @include on-m-desktop{ + gap: 170px; + } + } + + &__main-title { + @include title-text(600, $blue-title); + + margin: 0; + + font-size: 44px; + line-height: 120%; + text-align: center; + letter-spacing: 0; + + @include on-tablet { + font-size: 52px; + } + } +} diff --git a/src/styles/contacts.scss b/src/styles/contacts.scss new file mode 100644 index 0000000000..c4c52ff4ee --- /dev/null +++ b/src/styles/contacts.scss @@ -0,0 +1,73 @@ +.contacts { + margin: 0; + background-color: $second-color; + + &__content{ + padding-top: 80px; + + @include on-tablet{ + padding-top: 180px + } + } + + &__title { + @include title-text(600, $main-color); + + margin: 0; + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + } + + &__info { + display: flex; + flex-direction: column; + gap: 40px; + padding-top: 48px; + + @include on-tablet{ + gap : 48px; + padding-top: 56px; + } + } + + &__eye-brown { + @include title-text(700, $grey-eye-brown); + + margin: 0; + padding-bottom: 8px; + + font-size: 13px; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__link { + display: block; + + font-size: 24px; + line-height: 150%; + text-decoration: none; + letter-spacing: 0; + + @include description-text(600, $main-color); + @include hover (scale, 1.05); + } + + &__social-link { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 32px; + height: 32px; + margin-right: 32px; + + @include hover (color, $button-color); + + &:last-child { + margin-right: 0; + } + } +} diff --git a/src/styles/expertise.scss b/src/styles/expertise.scss new file mode 100644 index 0000000000..eb90ba5b7f --- /dev/null +++ b/src/styles/expertise.scss @@ -0,0 +1,76 @@ +.expertise-card { + display: flex; + flex-direction: column; + align-items: center; + justify-self: center; + + @include on-s-desktop{ + width: 214px; + } + + @include on-m-desktop{ + width: 264px; + } + + &__border-img { + overflow: hidden; + + width: 166px; + height: 166px; + border-radius: 30px; + + transition: transform 0.3s; + } + + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__title { + @include title-text(600, $blue-title); + + margin: 0; + padding: 32px 0 16px; + + font-size: 20px; + line-height: 140%; + letter-spacing: 0; + + transition: transform 0.3s; + } + + &__description { + @include description-text(400, $grey-description); + + display: block; + + max-width: 360px; + margin: 0; + + font-size: 14px; + line-height: 150%; + text-align: center; + letter-spacing: 0; + + transition: transform 0.3s; + } + + + &:hover{ + .expertise-card__border-img{ + transform: rotate(8deg); + } + + .expertise-card__title{ + transform: scale(1.1); + } + + .expertise-card__description{ + transform: scale(1.1); + } + + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 0000000000..67300256ec --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,74 @@ +.footer { + background-color: $second-color; + + &__content { + align-items: center; + box-sizing: border-box; + padding: 80px 0; + + @include on-tablet { + padding: 140px 0 80px; + } + + @include on-s-desktop{ + display: flex; + justify-content: space-between; + padding: 108px 0 84px; + } + } + + &__nav-ul { + width: fit-content; + padding-top: 48px; + list-style: none; + + @include on-tablet{ + padding-top: 24px; + } + + @include on-s-desktop{ + padding-top: 0; + } + } + + &__nav-li { + padding-bottom: 24px; + + @include hover (scale, 1.2); + + &:last-child { + padding-bottom: 0; + } + + @include on-tablet{ + display: inline-block; + margin-right:30px; + padding-bottom: 0; + + &:last-child{ + margin-right: 0; + } + } + + @include on-s-desktop{ + margin-right:64px; + + &:last-child{ + margin-right: 0; + } + } + + } + + &__nav-link { + @include title-text(700, $main-color); + + font-size: 13px; + line-height: 150%; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + } + +} diff --git a/src/styles/forms.scss b/src/styles/forms.scss new file mode 100644 index 0000000000..4718a4d102 --- /dev/null +++ b/src/styles/forms.scss @@ -0,0 +1,81 @@ +.forms { + box-sizing: border-box; + margin-bottom: 0; + background-color: $second-color; + + @include on-s-desktop{ + grid-column: 1 / 6; + grid-row: 1/-1; + } + + + + &__content{ + padding-top: 80px; + + @include on-tablet{ + padding-top: 180px + } + } + + &__title { + @include title-text(600, $main-color); + + margin: 0; + padding-bottom: 48px; + + font-size: 32px; + line-height: 130%; + letter-spacing: 0; + } + + &__form { + display: flex; + flex-direction: column; + gap: 40px; + width: 100%; + } + + &__field { + resize: none; + + display: block; + + box-sizing: border-box; + min-width: 0; + max-width: 360px; + padding-bottom: 16px; + border: none; + border-bottom: 1px solid white; + + font-size: 15px; + line-height: 100%; + letter-spacing: 0; + + background-color: $second-color; + + @include title-text(600, $main-color); + + &:focus{ + border-color: $button-color; + outline: none; + } + } + + &__button { + max-width: 280px; + height: 56px; + border: none; + border-radius: 8px; + + background-color: $button-color; + } + + &__button-text { + @include title-text(600, $main-color); + + font-size: 15px; + line-height: 100%; + letter-spacing: 0; + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000000..c3ef2ff6ed --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,76 @@ +.header { + background-color: $second-color; + &__top { + box-sizing: border-box; + width: 100%; + } + + &__top-content { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + padding-top: 20px; + + + @include on-tablet { + padding-top: 20px; + } + + @include on-s-desktop{ + align-items: baseline; + padding-top: 48px; + } + + } + + &__left-content { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + + &__logo { + height: max-content; + margin-right: 32px; + } + + &__burger-button { + display: block; + align-self: center; + + width: 24px; + height: 24px; + + background-image: url(/src/images/header/Menu.svg); + background-repeat: no-repeat; + background-position: contain; + + @include on-s-desktop { + display: none; + } + } + + &__call-button { + border-bottom: solid 2px $button-color; + + @include hover(border-bottom,solid 2px #fff); + } + + &__link { + display: inline-block; + + padding-bottom: 8px; + + font-size: 13px; + line-height: 150%; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + list-style: none; + + @include title-text(700, $main-color); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..de4c8caa84 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,68 @@ @import 'utils'; -@import 'fonts'; @import 'typography'; +@import 'header'; +@import 'strategic'; +@import 'nav'; +@import 'slider'; +@import 'welcome'; +@import 'about-us'; +@import 'expertise'; +@import 'services'; +@import 'offer'; +@import 'testimonials'; +@import 'voices'; +@import 'vision'; +@import 'forms'; +@import 'contacts'; +@import 'footer'; + +html{ + scroll-behavior: smooth; +} body { - background: $c-gray; + margin: 0; + background-color: $bck-color; +} + +section { + margin-bottom: 120px; + + @include on-tablet{ + margin-bottom: 148px; + } +} + +.contacts-group{ + margin-bottom: 0; + border-radius: 30px 30px 0 0; + background-color: $second-color; + + &__wraper{ + @include on-s-desktop{ + display: flex; + gap: 98px; + } + } +} + + + +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-s-desktop { + box-sizing: border-box; + max-width: 1600px; + margin-inline: auto; + padding-inline: 54px; + } + + @include on-m-desktop { + padding-inline: 228px; + } } diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 0000000000..ed470a1fb2 --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,26 @@ +.nav { + display: none; + + @include on-s-desktop { + display: block; + } + &__ul { + display: flex; + gap: 48px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link{ + @include title-text(700, $main-color); + + font-size: 13px; + line-height: 150%; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + } +} diff --git a/src/styles/offer.scss b/src/styles/offer.scss new file mode 100644 index 0000000000..7954b1b12b --- /dev/null +++ b/src/styles/offer.scss @@ -0,0 +1,133 @@ +.offer { + box-sizing: border-box; + width: 280px; + height: fit-content; + padding: 32px; + border-radius: 30px; + + background-color: $main-color; + + @include hover(scale, 1.1); + + + @include on-tablet { + width: 264px; + height: 264px; + + &--one { + grid-area: card-1; + } + + &--two { + grid-area: card-2; + } + + &--three { + grid-area: card-3; + } + + &--four { + grid-area: card-4; + } + + @include on-s-desktop{ + width: auto; + + &--one { + grid-column: 6 / 9; + grid-row: 2 / 4; + } + + &--two { + grid-column: 9 / 12; + grid-row: 1 / 3; + } + + &--three { + grid-column: 6 / 9; + grid-row: 4 / 6; + } + + &--four { + grid-column: 9 / 12; + grid-row: 3 / 5; + } + + } +} + + &__num-border { + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgb(32 96 246 / 10%); + } + + &__num { + @include title-text(600, $button-color); + + margin: 0; + text-align: center; + } + + &__list { + margin: 0; + padding: 24px 0 32px; + list-style: none; + } + + &__text { + @include description-text(600, $grey-description); + + margin: 0; + padding: 0; + + font-size: 13px; + line-height: 150%; + letter-spacing: 0; + } + + + &__button { + width: 40px; + height: 40px; + border: none; + border-radius: 50%; + + background-color: $button-color; + background-image: url(/src/images/offer/arrow.svg); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s; + } + + &__link { + @include title-text(600, $blue-link); + + margin-left: 16px; + + font-size: 15px; + line-height: 100%; + text-decoration: none; + letter-spacing: 0; + + transition: transform 0.3s, background-color 0.3s; + } + + &__buttons { + cursor: pointer; + display: flex; + align-items: center; + &:hover{ + .offer__button{ + transform: scale(1.1); + background-color: $button-color-hover; + } + .offer__link{ + transform: scale(1.1); + } + } + } +} + diff --git a/src/styles/services.scss b/src/styles/services.scss new file mode 100644 index 0000000000..ce2423a994 --- /dev/null +++ b/src/styles/services.scss @@ -0,0 +1,76 @@ +.services { + &__content { + display: grid; + gap: 48px; + justify-content: center; + } + + &__text { + justify-self: center; + max-width: 280px; + + @include on-tablet { + grid-area: text; + } + + @include on-s-desktop{ + grid-column: 1 / 5; + grid-row: 2 / 4; + max-width: 360px ; + } + } + + &__eye-brown { + @include title-text(700, $grey-eye-brown); + + margin: 0; + + font-size: 13px; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__title { + @include title-text(600, $blue-title); + + margin: 0; + padding: 16px 0 24px; + + font-size: 32px; + line-height: 130%; + letter-spacing: 0; + } + + &__description { + @include description-text(400, $grey-description); + + margin: 0; + font-size: 14px; + line-height: 150%; + } + + &__cards{ + display: grid; + gap: 20px; + + @include on-tablet { + grid-template: repeat(6, 1fr) / repeat(2, 264px); + grid-template-areas: + 'text .' + 'text card-2' + 'card-1 card-2' + 'card-1 card-4' + 'card-3 card-4' + 'card-3 .'; + margin: 0; + } + + @include on-s-desktop{ + grid-template: repeat(5, 1fr) / repeat(12, 1fr); + grid-template-areas:none; + } + } + + +} diff --git a/src/styles/slider.scss b/src/styles/slider.scss new file mode 100644 index 0000000000..6f091db52e --- /dev/null +++ b/src/styles/slider.scss @@ -0,0 +1,76 @@ +.slider { + position: absolute; + right: 0; + bottom: 0; + + overflow: hidden; + + width: 100%; + height: 390px; + border-radius: 30px; + + background-image: url(/src/images/slider/first-slide.webp); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-s-desktop{ + width: 50%; + height: 94%; + border-radius: 30px 0; + } + + &__content { + position: absolute; + bottom: 0; + padding-bottom: 24px; + } + + &__title { + @include title-text(700, $main-color); + + font-size: 13px; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__description { + @include description-text(400, $main-color); + + max-width: 280px; + margin: 0; + padding-top: 8px; + + font-size: 14px; + line-height: 140%; + letter-spacing: 0; + } + + &__buttons-block { + width: fit-content; + padding-bottom: 16px; + } + + &__button { + width: 32px; + height: 32px; + padding: 0; + border: none; + border-radius: 50%; + + background-repeat: no-repeat; + background-position: center; + background-size: 5px 9px; + + &--left { + margin-right: 16px; + background-image: url(/src/images/slider/left.svg); + } + + &--right { + margin-right: 16px; + background-image: url(/src/images/slider/right.svg); + } + } +} diff --git a/src/styles/strategic.scss b/src/styles/strategic.scss new file mode 100644 index 0000000000..782c54e306 --- /dev/null +++ b/src/styles/strategic.scss @@ -0,0 +1,75 @@ +.strategic { + position: relative; + border-radius: 0 0 30px 30px; + background-color: $second-color; + + &__content { + box-sizing: border-box; + width: 100%; + height: 840px; + padding-top: 48px; + + @include on-s-desktop{ + padding-top: 164px; + } + } + + &__card{ + @include on-s-desktop{ + max-width: 490px; + } + } + + &__title { + @include title-text(600, $main-color); + + margin: 0; + font-size: 52px; + line-height: 120%; + letter-spacing: -2px; + + @include on-tablet { + font-size: 64px; + } + } + + &__description { + @include description-text(400, $main-color); + + max-width: 360px; + margin: 0; + padding: 32px 0 72px; + + font-size: 18px; + line-height: 150%; + letter-spacing: 0; + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + + width: 280px; + height: 50px; + border: none; + border-radius: 8px; + + font-size: 15px; + line-height: 100%; + text-decoration: none; + letter-spacing: 0; + + background-color: $button-color; + + @include title-text(600, $main-color); + + @include on-tablet { + width: 264px; + } + + @include hover(background-color,#144ed4); + + } + +} diff --git a/src/styles/testimonials.scss b/src/styles/testimonials.scss new file mode 100644 index 0000000000..c72e73270d --- /dev/null +++ b/src/styles/testimonials.scss @@ -0,0 +1,65 @@ +.testimonials { + + &__content{ + justify-self: center; + max-width: 560px; + + @include on-s-desktop{ + max-width: 920px; + } + + @include on-m-desktop{ + max-width: 1120px; + } + } + + &__titles{ + width: fit-content; + } + + &__eye-brown { + @include title-text(700, $grey-eye-brown); + + margin: 0; + + font-size: 13px; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__main-title { + @include title-text(600, $blue-title); + + grid-column: 1/-1; + + margin: 0; + padding: 16px 0 48px; + + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + + + @include on-tablet{ + max-width: 200px; + } + } + + &__cards{ + display: grid; + grid-column: 1/-1; + gap: 24px; + justify-self: center; + + @include on-tablet{ + gap: 30px;; + } + + @include on-s-desktop{ + grid-template-columns: repeat(3, 1fr); + column-gap: 30px; + width: fit-content; + } + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..de9793bfcf 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,65 @@ #{$_property}: $_toValue; } } + +@mixin page-grid{ + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap:20px; + + @include on-tablet{ + grid-template-columns: repeat(6, 1fr); + column-gap:30px; + } + + @include on-s-desktop{ + grid-template-columns: repeat(12, 1fr); + column-gap:20px; + } + + @include on-m-desktop{ + grid-template-columns: repeat(12, 1fr); + column-gap:30px; + } + + @include on-l-desktop{ + grid-template-columns: repeat(12, 1fr); + column-gap:30px; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-s-desktop { + @media (min-width: $s-desktop-min-width) { + @content; + } +} + +@mixin on-m-desktop { + @media (min-width: $m-desktop-min-width) { + @content; + } +} + +@mixin on-l-desktop { + @media (min-width: $l-desktop-min-width) { + @content; + } +} + +@mixin title-text($_style, $_color) { + font-family: Poppins, sans-serif; + font-weight: #{$_style}; + color: #{$_color}; +} + +@mixin description-text($_style, $_color) { + font-family: 'Open Sans', sans-serif; + font-weight: #{$_style}; + color: #{$_color}; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..908eb62e77 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$s-desktop-min-width: 1024px; +$m-desktop-min-width: 1600px; +$l-desktop-min-width: 2560px; +$main-color: #fff; +$second-color: #2c2c2c; +$blue-title: #253757; +$grey-description: #6c788b; +$grey-eye-brown: #c0cdd7; +$bck-color: #f2f6fa; +$button-color: #2060f6; +$button-color-hover: #144ed4; +$blue-link: #334563; diff --git a/src/styles/vision.scss b/src/styles/vision.scss new file mode 100644 index 0000000000..7a826dbb93 --- /dev/null +++ b/src/styles/vision.scss @@ -0,0 +1,80 @@ +.vision { + background-color: $main-color; + + @include on-tablet{ + position: relative; + + overflow: hidden; + + margin-bottom: 0; + + background-image: url(/src/images/vision/Shapes.webp); + background-repeat: no-repeat; + background-position: center; + background-size: 130%; + } + + &__content{ + display: flex; + flex-direction: column; + align-items: center; + + box-sizing: border-box; + padding: 72px 0; + + @include on-tablet{ + padding: 200px 0; + } + } + + &__title { + @include title-text(600, $blue-title); + + margin: 0; + + font-size: 44px; + line-height: 120%; + text-align: center; + letter-spacing: 0; + + @include on-tablet{ + font-size: 56px; + } + } + + &__description { + @include description-text(600, $grey-description); + + max-width: 726px; + margin: 0; + padding: 24px 0 56px; + + font-size: 22px; + line-height: 150%; + text-align: center; + letter-spacing: 0; + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + + width: 280px; + height: 56px; + border: none; + border-radius: 8px; + + font-size: 15px; + line-height: 100%; + text-decoration: none; + letter-spacing: 0; + + background-color: $button-color; + + @include title-text(600, $main-color); + @include hover(background-color,#144ed4); + } + + +} diff --git a/src/styles/voices.scss b/src/styles/voices.scss new file mode 100644 index 0000000000..f557b038a2 --- /dev/null +++ b/src/styles/voices.scss @@ -0,0 +1,141 @@ +.voices { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + justify-self: center; + + box-sizing: border-box; + width: 100%; + height: auto; + padding: 32px 42px; + border-radius: 16px; + + white-space: no-wrap; + + background-color: $main-color; + + @include on-tablet{ + width: 560px; + } + + @include on-s-desktop{ + width: 290px; + } + + @include on-m-desktop{ + width: 360px; + } + + &::before{ + content: ''; + + position: absolute; + z-index: 100; + inset: 0; + + border: 2px solid $button-color; + border-radius: inherit; + + clip-path: inset(0 0 100% 0); + + transition: clip-path 0.3s; + } + + &:hover::before{ + clip-path: inset(0 0 0 0); + } + + &__avatar { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 196px; + height: 196px; + + &::before, + &::after { + content: ''; + + position: absolute; + z-index: 1; + transform: rotate(30deg); + + width: 44px; + height: 110px; + border-radius: 12px; + + background-color: $button-color; + } + + &::before { + top: 10px; + left: 40px; + } + + &::after { + right: 40px; + bottom: 10px; + } + } + + &__img { + position: relative; + z-index: 2; + + width: 110px; + height: auto; + border-radius: 50%; + + } + + &__decore { + display: block; + margin: 24px auto 8px; + } + + &__decription { + @include description-text(600, $grey-description); + + max-width: 360px; + margin: 0; + + font-size: 13px; + line-height: 150%; + text-align: center; + + @include on-s-desktop{ + width: 250px; + } + } + + &__name { + @include description-text(600, $blue-title); + + margin: 0; + padding: 16px 0 4px; + + font-size: 13px; + line-height: 150%; + text-align: center; + letter-spacing: 0; + } + + &__job { + @include title-text(700, $grey-eye-brown); + + margin: 0; + + font-size: 13px; + line-height: 100%; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + white-space: nowrap; + } +} diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss new file mode 100644 index 0000000000..351148dbc9 --- /dev/null +++ b/src/styles/welcome.scss @@ -0,0 +1,34 @@ +.welcome { + &__content { + text-align: center; + } + + &__title { + @include title-text(600, $blue-title); + + margin: 0; + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + } + + &__description { + @include description-text(600, $grey-description); + + margin: 0; + margin-inline: auto; + padding-top: 24px; + + font-size: 22px; + line-height: 150%; + letter-spacing: 0; + + @include on-tablet{ + max-width: 540px; + } + + @include on-s-desktop{ + max-width: 660px; + } + } +}