diff --git a/README.md b/README.md index 93d9738cc4..11ea230934 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://jooaasss.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. 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/favicons/android-chrome-96x96.png b/src/images/favicons/android-chrome-96x96.png new file mode 100644 index 0000000000..6653ca5a03 Binary files /dev/null and b/src/images/favicons/android-chrome-96x96.png differ diff --git a/src/images/favicons/apple-touch-icon.png b/src/images/favicons/apple-touch-icon.png new file mode 100644 index 0000000000..f67071588f Binary files /dev/null and b/src/images/favicons/apple-touch-icon.png differ diff --git a/src/images/favicons/browserconfig.xml b/src/images/favicons/browserconfig.xml new file mode 100644 index 0000000000..b3930d0f04 --- /dev/null +++ b/src/images/favicons/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git a/src/images/favicons/favicon-16x16.png b/src/images/favicons/favicon-16x16.png new file mode 100644 index 0000000000..ad85f3f93a Binary files /dev/null and b/src/images/favicons/favicon-16x16.png differ diff --git a/src/images/favicons/favicon-32x32.png b/src/images/favicons/favicon-32x32.png new file mode 100644 index 0000000000..df781663df Binary files /dev/null and b/src/images/favicons/favicon-32x32.png differ diff --git a/src/images/favicons/favicon.ico b/src/images/favicons/favicon.ico new file mode 100644 index 0000000000..e3e6ba7dd2 Binary files /dev/null and b/src/images/favicons/favicon.ico differ diff --git a/src/images/favicons/mstile-150x150.png b/src/images/favicons/mstile-150x150.png new file mode 100644 index 0000000000..c8b79246d7 Binary files /dev/null and b/src/images/favicons/mstile-150x150.png differ diff --git a/src/images/favicons/safari-pinned-tab.svg b/src/images/favicons/safari-pinned-tab.svg new file mode 100644 index 0000000000..6ef65fe02f --- /dev/null +++ b/src/images/favicons/safari-pinned-tab.svg @@ -0,0 +1,26 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + + diff --git a/src/images/favicons/site.webmanifest b/src/images/favicons/site.webmanifest new file mode 100644 index 0000000000..c42d1a5454 --- /dev/null +++ b/src/images/favicons/site.webmanifest @@ -0,0 +1,14 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-96x96.png", + "sizes": "96x96", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/src/images/footer/facebook.svg b/src/images/footer/facebook.svg new file mode 100644 index 0000000000..edd7a48714 --- /dev/null +++ b/src/images/footer/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/instagram.svg b/src/images/footer/instagram.svg new file mode 100644 index 0000000000..bb61d39d3f --- /dev/null +++ b/src/images/footer/instagram.svg @@ -0,0 +1,14 @@ + + + diff --git a/src/images/footer/twitter.svg b/src/images/footer/twitter.svg new file mode 100644 index 0000000000..d3cbe423e7 --- /dev/null +++ b/src/images/footer/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/Logo-2x.png b/src/images/logo/Logo-2x.png new file mode 100644 index 0000000000..1665f68559 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..1573d0db64 Binary files /dev/null and b/src/images/logo/Logo.png differ diff --git a/src/images/menu/Menu-2x.png b/src/images/menu/Menu-2x.png new file mode 100644 index 0000000000..ca83b07f12 Binary files /dev/null and b/src/images/menu/Menu-2x.png differ diff --git a/src/images/menu/Menu.png b/src/images/menu/Menu.png new file mode 100644 index 0000000000..7f38365c55 Binary files /dev/null and b/src/images/menu/Menu.png differ diff --git a/src/images/our-expertise/item-1-2x.png b/src/images/our-expertise/item-1-2x.png new file mode 100644 index 0000000000..b07c2eb60b Binary files /dev/null and b/src/images/our-expertise/item-1-2x.png differ diff --git a/src/images/our-expertise/item-1.png b/src/images/our-expertise/item-1.png new file mode 100644 index 0000000000..164a7e1a4d Binary files /dev/null and b/src/images/our-expertise/item-1.png differ diff --git a/src/images/our-expertise/item-2-2x.png b/src/images/our-expertise/item-2-2x.png new file mode 100644 index 0000000000..58d4c3d69b Binary files /dev/null and b/src/images/our-expertise/item-2-2x.png differ diff --git a/src/images/our-expertise/item-2.png b/src/images/our-expertise/item-2.png new file mode 100644 index 0000000000..736cb3af6b Binary files /dev/null and b/src/images/our-expertise/item-2.png differ diff --git a/src/images/our-expertise/item-3-2x.png b/src/images/our-expertise/item-3-2x.png new file mode 100644 index 0000000000..1fe07edef1 Binary files /dev/null and b/src/images/our-expertise/item-3-2x.png differ diff --git a/src/images/our-expertise/item-3.png b/src/images/our-expertise/item-3.png new file mode 100644 index 0000000000..62c6e6adb5 Binary files /dev/null and b/src/images/our-expertise/item-3.png differ diff --git a/src/images/services/arrow.svg b/src/images/services/arrow.svg new file mode 100644 index 0000000000..5441afe52b --- /dev/null +++ b/src/images/services/arrow.svg @@ -0,0 +1,12 @@ + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..2055a17bbc 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 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/arrow.svg b/src/images/slider/arrow.svg new file mode 100644 index 0000000000..71e16adb61 --- /dev/null +++ b/src/images/slider/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/cutted-purple-main-2x.png b/src/images/slider/cutted-purple-main-2x.png new file mode 100644 index 0000000000..05284b22a3 Binary files /dev/null and b/src/images/slider/cutted-purple-main-2x.png differ diff --git a/src/images/slider/gray-main-2x.png b/src/images/slider/gray-main-2x.png new file mode 100644 index 0000000000..4fcdc6c67e Binary files /dev/null and b/src/images/slider/gray-main-2x.png differ diff --git a/src/images/slider/gray-main.png b/src/images/slider/gray-main.png new file mode 100644 index 0000000000..975e7ad138 Binary files /dev/null and b/src/images/slider/gray-main.png differ diff --git a/src/images/slider/purple-main-2x.png b/src/images/slider/purple-main-2x.png new file mode 100644 index 0000000000..5e9691dc39 Binary files /dev/null and b/src/images/slider/purple-main-2x.png differ diff --git a/src/images/slider/second-slide-2x.png b/src/images/slider/second-slide-2x.png new file mode 100644 index 0000000000..d9f3df2bac Binary files /dev/null and b/src/images/slider/second-slide-2x.png differ diff --git a/src/images/slider/third-slide-2x.png b/src/images/slider/third-slide-2x.png new file mode 100644 index 0000000000..19b4654b55 Binary files /dev/null and b/src/images/slider/third-slide-2x.png differ diff --git a/src/images/testimonials/quotes-2x.png b/src/images/testimonials/quotes-2x.png new file mode 100644 index 0000000000..94eae1fe52 Binary files /dev/null and b/src/images/testimonials/quotes-2x.png differ diff --git a/src/images/testimonials/quotes-blue-2x.png b/src/images/testimonials/quotes-blue-2x.png new file mode 100644 index 0000000000..2d03f916dc Binary files /dev/null and b/src/images/testimonials/quotes-blue-2x.png differ diff --git a/src/images/testimonials/quotes-red-2x.png b/src/images/testimonials/quotes-red-2x.png new file mode 100644 index 0000000000..99d8c35973 Binary files /dev/null and b/src/images/testimonials/quotes-red-2x.png differ diff --git a/src/images/testimonials/quotes-yellow-2x.png b/src/images/testimonials/quotes-yellow-2x.png new file mode 100644 index 0000000000..ad01744cd4 Binary files /dev/null and b/src/images/testimonials/quotes-yellow-2x.png differ diff --git a/src/images/testimonials/quotes.png b/src/images/testimonials/quotes.png new file mode 100644 index 0000000000..9cf3030870 Binary files /dev/null and b/src/images/testimonials/quotes.png differ diff --git a/src/images/testimonials/testimonial-1-2x.png b/src/images/testimonials/testimonial-1-2x.png new file mode 100644 index 0000000000..7eacd78e8d Binary files /dev/null and b/src/images/testimonials/testimonial-1-2x.png differ diff --git a/src/images/testimonials/testimonial-1.png b/src/images/testimonials/testimonial-1.png new file mode 100644 index 0000000000..529fd07b58 Binary files /dev/null and b/src/images/testimonials/testimonial-1.png differ diff --git a/src/images/testimonials/testimonial-2-2x.png b/src/images/testimonials/testimonial-2-2x.png new file mode 100644 index 0000000000..0271db0c9e Binary files /dev/null and b/src/images/testimonials/testimonial-2-2x.png differ diff --git a/src/images/testimonials/testimonial-2.png b/src/images/testimonials/testimonial-2.png new file mode 100644 index 0000000000..7b712ec15d Binary files /dev/null and b/src/images/testimonials/testimonial-2.png differ diff --git a/src/images/testimonials/testimonial-3-2x.png b/src/images/testimonials/testimonial-3-2x.png new file mode 100644 index 0000000000..9c821b0436 Binary files /dev/null and b/src/images/testimonials/testimonial-3-2x.png differ diff --git a/src/images/testimonials/testimonial-3.png b/src/images/testimonials/testimonial-3.png new file mode 100644 index 0000000000..d3c88a3800 Binary files /dev/null and b/src/images/testimonials/testimonial-3.png differ diff --git a/src/images/testimonials/testimonial-blue-2x.png b/src/images/testimonials/testimonial-blue-2x.png new file mode 100644 index 0000000000..e1862ea5d4 Binary files /dev/null and b/src/images/testimonials/testimonial-blue-2x.png differ diff --git a/src/images/testimonials/testimonial-red-2x.png b/src/images/testimonials/testimonial-red-2x.png new file mode 100644 index 0000000000..b811e18a71 Binary files /dev/null and b/src/images/testimonials/testimonial-red-2x.png differ diff --git a/src/images/testimonials/testimonial-yellow-2x.png b/src/images/testimonials/testimonial-yellow-2x.png new file mode 100644 index 0000000000..73a8aa9947 Binary files /dev/null and b/src/images/testimonials/testimonial-yellow-2x.png differ diff --git a/src/images/vision/colorful-shapes-2x.png b/src/images/vision/colorful-shapes-2x.png new file mode 100644 index 0000000000..0551bb4865 Binary files /dev/null and b/src/images/vision/colorful-shapes-2x.png differ diff --git a/src/images/vision/colorful-shapes.png b/src/images/vision/colorful-shapes.png new file mode 100644 index 0000000000..96254ab9e0 Binary files /dev/null and b/src/images/vision/colorful-shapes.png differ diff --git a/src/images/Shapes.png b/src/images/vision/shapes.png similarity index 100% rename from src/images/Shapes.png rename to src/images/vision/shapes.png diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/what-people-say/what-we-do-1.jpg similarity index 100% rename from src/images/what-we-do/what-we-do-1.jpg rename to src/images/what-people-say/what-we-do-1.jpg diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/what-people-say/what-we-do-2.jpg similarity index 100% rename from src/images/what-we-do/what-we-do-2.jpg rename to src/images/what-people-say/what-we-do-2.jpg diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/what-people-say/what-we-do-3.jpg similarity index 100% rename from src/images/what-we-do/what-we-do-3.jpg rename to src/images/what-people-say/what-we-do-3.jpg diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..9dd35b668c 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,762 @@ - + - Dia + Air + + + + + - -

Dia

- + + + +
+
+

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

+ +
+ item 1 + +
Branding
+

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

+
+ +
+ item 2 + +
Communication
+

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

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

+ + +
+ +
+

002

+

+ Content Production +
+ Graphic Design +
+ Video Production +
+ Post Production +
+

+ + +
+ +
+

003

+

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

+ + +
+ +
+

004

+

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

+ + +
+
+
+ +
+
Testimonials
+

+ What +
+ people say +

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

+
+
+ +
+
+ Testomonial 2 +
+ +
+ Quotes + +

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

+

Azadeh Hawkins

+

Hawkins Consulting

+
+
+ +
+
+ Testomonial +
+ +
+ Quotes + +

+ AIR raises the agency bar to stratospheric heights on both + creative output and client service. +

+

Michel Grover

+

Hulu

+
+
+
+ +
+

Vision, Passion, Results

+

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

+ + Apply + +
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..98e7268b85 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,324 @@ 'use strict'; + +import purpleMainImage from '../images/slider/purple-main-2x.png'; +import grayMainImage from '../images/slider/gray-main.png'; +import blueTestimonial1 from '../images/testimonials/testimonial-blue-2x.png'; +import yellowTestimonial2 from '../images/testimonials/testimonial-yellow-2x.png'; +import redTestimonial3 from '../images/testimonials/testimonial-red-2x.png'; +import testimonial1 from '../images/testimonials/testimonial-1-2x.png'; +import testimonial2 from '../images/testimonials/testimonial-2-2x.png'; +import testimonial3 from '../images/testimonials/testimonial-3-2x.png'; +import quotesBlue from '../images/testimonials/quotes-blue-2x.png'; +import quotesYellow from '../images/testimonials/quotes-yellow-2x.png'; +import quotesRed from '../images/testimonials/quotes-red-2x.png'; +import quotesDefault from '../images/testimonials/quotes-2x.png'; +import visionDefault from '../images/vision/shapes.png'; +import visionColorful from '../images/vision/colorful-shapes.png'; + +const cWhite = '#FFFFFF'; +const cPink = '#FF9C8E'; +const cBlueBackground = '#008AFF'; +const cBlueInitial = '#2060F6'; +const cBlueFooter = '#144ED4'; +const cDarkGray = '#2C2C2C'; +const cGray = '#6C788B'; +const cGrayishBlue = '#C0CDD7'; + +document.addEventListener('DOMContentLoaded', function () { + let slideIndex = 0; + let isThemeGray = true; + const buttons = document.querySelectorAll('.theme-changer'); + + function showSlide(index) { + const slides = document.querySelectorAll('.slide'); + const totalSlides = slides.length; + + if (index >= totalSlides) { + slideIndex = 0; + } else if (index < 0) { + slideIndex = totalSlides - 1; + } else { + slideIndex = index; + } + + slides.forEach((slide, i) => { + if (i === slideIndex) { + slide.style.transform = 'translateX(0%)'; + } else { + slide.style.transform = `translateX(${(i - slideIndex) * 100}%)`; + } + }); + } + + function moveSlide(n) { + showSlide(slideIndex + n); + } + + document + .querySelector('.scrollers__ellipse--right') + .addEventListener('click', () => { + moveSlide(1); + }); + + document + .querySelector('.scrollers__ellipse--left') + .addEventListener('click', () => { + moveSlide(-1); + }); + + showSlide(slideIndex); + + buttons.forEach((button) => { + button.addEventListener('click', function () { + if (isThemeGray) { + const inputs = document.querySelectorAll('.form__input'); + const elements = document.querySelectorAll('.theme-changer'); + + slideIndex = 0; + showSlide(slideIndex); + isThemeGray = false; + + elements.forEach((element) => { + element.style.setProperty('--color-text', cGrayishBlue, 'important'); + element.style.setProperty('--color-after', cGrayishBlue, 'important'); + }); + + document.querySelector('.menu').style.backgroundColor = cBlueBackground; + document.querySelector('.header').style.borderBottomLeftRadius = + '200px'; + document.querySelector('.header').style.borderBottomRightRadius = '0'; + document.querySelector('.header').style.backgroundColor = + cBlueBackground; + document.querySelector('.top-bar__hire').classList.add('pink'); + document.querySelector('.header__button').style.borderRadius = '64px'; + document.querySelector('.header__button').style.backgroundColor = cPink; + document.querySelectorAll('.button').forEach(function (button) { + button.classList.add('button--pink-animated'); + button.classList.remove('button--animated'); + }); + document.querySelectorAll('.slide').forEach(function (slide) { + if (window.matchMedia('(max-width: 1023px)').matches) { + if (isThemeGray === true) { + slide.style.borderRadius = '30px'; + } else { + slide.style.borderTopLeftRadius = '200px'; + slide.style.borderTopRightRadius = '0'; + slide.style.borderBottomRightRadius = '0'; + slide.style.borderBottomLeftRadius = '0'; + } + } else { + if (isThemeGray === true) { + slide.style.borderBottomRightRadius = '30px'; + slide.style.borderTopLeftRadius = '30px'; + } else { + slide.style.borderTopLeftRadius = '200px'; + slide.style.borderTopRightRadius = '0'; + slide.style.borderBottomRightRadius = '0'; + slide.style.borderBottomLeftRadius = '0'; + } + } + }); + + document.querySelector('.slide--1').src = purpleMainImage; + document.querySelector( + '.card__number--1', + ).style.backgroundColor = 'rgba(86, 204, 242, 0.1)'; + document.querySelector( + '.card__number--1', + ).style.color = 'rgb(86, 204, 242)'; + document.querySelector( + '.learn-more__ellipse--1', + ).style.backgroundColor = 'rgb(86, 204, 242)'; + document.querySelector( + '.card__number--2', + ).style.backgroundColor = 'rgba(252, 201, 29, 0.1)'; + document.querySelector( + '.card__number--2', + ).style.color = 'rgb(252, 201, 29)'; + document.querySelector( + '.learn-more__ellipse--2', + ).style.backgroundColor = 'rgb(252, 201, 29)'; + document.querySelector( + '.card__number--3', + ).style.backgroundColor = 'rgba(21, 216, 80, 0.1)'; + document.querySelector( + '.card__number--3', + ).style.color = 'rgb(21, 216, 80)'; + document.querySelector( + '.learn-more__ellipse--3', + ).style.backgroundColor = 'rgb(21, 216, 80)'; + document.querySelector( + '.card__number--4', + ).style.backgroundColor = 'rgba(243, 99, 99, 0.1)'; + document.querySelector( + '.card__number--4', + ).style.color = 'rgb(243, 99, 99)'; + document.querySelector( + '.learn-more__ellipse--4', + ).style.backgroundColor = 'rgb(243, 99, 99)'; + document.querySelector('.testimonial__picture--1').src = + blueTestimonial1; + document.querySelector('.testimonial__picture--2').src = + yellowTestimonial2; + document.querySelector('.testimonial__picture--3').src = + redTestimonial3; + document.querySelector('.testimonial__decoration-figure--1').src = + quotesBlue; + document.querySelector('.testimonial__decoration-figure--2').src = + quotesYellow; + document.querySelector('.testimonial__decoration-figure--3').src = + quotesRed; + document + .querySelector('.vision') + .style.setProperty( + '--bg-image', + `url(${visionColorful})`, + ); + document.querySelector('.vision__button').style.borderRadius = '64px'; + document.querySelector('.vision__button').style.backgroundColor = cPink; + document.querySelector('.footer').style.backgroundColor = + cBlueBackground; + document.querySelector('.footer').style.borderTopLeftRadius = '0'; + document.querySelector('.footer').style.borderTopRightRadius = '200px'; + document.querySelector('.footer').style.borderTopRightRadius = '200px'; + + inputs.forEach(function (input) { + input.style.borderBottom = `1px solid ${cWhite}`; + input.style.backgroundColor = cBlueBackground; + + input.addEventListener('focus', function () { + this.style.borderBottom = `2px solid ${cWhite}`; + }); + + input.addEventListener('blur', function () { + this.style.borderBottom = `1px solid ${cWhite}`; + }); + }); + + document.querySelector('.form__button').style.borderRadius = '64px'; + document.querySelector('.form__button').style.backgroundColor = cPink; + document.querySelectorAll('.media__icon').forEach(function (icon) { + icon.classList.add('media__icon--pink'); + icon.classList.remove('media__icon--gray'); + }); + } else { + const inputs = document.querySelectorAll('.form__input'); + const elements = document.querySelectorAll('.theme-changer'); + + slideIndex = 0; + showSlide(slideIndex); + isThemeGray = true; + + elements.forEach((element) => { + element.style.setProperty('--color-text', cGray, 'important'); + element.style.setProperty('--color-after', cGray, 'important'); + }); + + document.querySelector('.menu').style.backgroundColor = cDarkGray; + document.querySelector('.header').style.borderBottomLeftRadius = '30px'; + document.querySelector('.header').style.borderBottomRightRadius = + '30px'; + document.querySelector('.header').style.backgroundColor = cDarkGray; + document.querySelector('.top-bar__hire').classList.remove('pink'); + document.querySelector('.header__button').style.borderRadius = '8px'; + document.querySelector('.header__button').style.backgroundColor = + cBlueInitial; + document.querySelectorAll('.button').forEach(function (button) { + button.classList.remove('button--pink-animated'); + button.classList.add('button--animated'); + }); + document.querySelectorAll('.slide').forEach(function (slide) { + if (window.matchMedia('(max-width: 1023px)').matches) { + if (isThemeGray === true) { + slide.style.borderRadius = '30px'; + } else { + slide.style.borderTopLeftRadius = '200px'; + slide.style.borderTopRightRadius = '0'; + slide.style.borderBottomLeftRadius = '0'; + slide.style.borderBottomRightRadius = '0'; + } + } else { + if (isThemeGray === true) { + slide.style.borderBottomRightRadius = '30px'; + slide.style.borderTopLeftRadius = '30px'; + } else { + slide.style.borderTopLeftRadius = '200px'; + slide.style.borderTopRightRadius = '0'; + slide.style.borderBottomLeftRadius = '0'; + slide.style.borderBottomRightRadius = '0'; + } + } + }); + + document.querySelector('.slide--1').src = grayMainImage; + document.querySelector('.card__number--1').style.backgroundColor = + 'rgba(32, 96, 246, 0.1)'; + document.querySelector('.card__number--1').style.color = + 'rgb(32, 96, 246)'; + document.querySelector( + '.learn-more__ellipse--1', + ).style.backgroundColor = 'rgb(32, 96, 246)'; + document.querySelector('.card__number--2').style.backgroundColor = + 'rgba(32, 96, 246, 0.1)'; + document.querySelector('.card__number--2').style.color = + 'rgb(32, 96, 246)'; + document.querySelector( + '.learn-more__ellipse--2', + ).style.backgroundColor = 'rgb(32, 96, 246)'; + document.querySelector('.card__number--3').style.backgroundColor = + 'rgba(32, 96, 246, 0.1)'; + document.querySelector('.card__number--3').style.color = + 'rgb(32, 96, 246)'; + document.querySelector( + '.learn-more__ellipse--3', + ).style.backgroundColor = 'rgb(32, 96, 246)'; + document.querySelector('.card__number--4').style.backgroundColor = + 'rgba(32, 96, 246, 0.1)'; + document.querySelector('.card__number--4').style.color = + 'rgb(32, 96, 246)'; + document.querySelector( + '.learn-more__ellipse--4', + ).style.backgroundColor = 'rgb(32, 96, 246)'; + document.querySelector('.testimonial__picture--1').src = testimonial1; + document.querySelector('.testimonial__picture--2').src = testimonial2; + document.querySelector('.testimonial__picture--3').src = testimonial3; + document.querySelector('.testimonial__decoration-figure--1').src = + quotesDefault; + document.querySelector('.testimonial__decoration-figure--2').src = + quotesDefault; + document.querySelector('.testimonial__decoration-figure--3').src = + quotesDefault; + document + .querySelector('.vision') + .style.setProperty('--bg-image', `url(${visionDefault})`); + document.querySelector('.vision__button').style.borderRadius = '8px'; + document.querySelector('.vision__button').style.backgroundColor = + cBlueInitial; + document.querySelector('.footer').style.backgroundColor = cDarkGray; + document.querySelector('.footer').style.borderTopLeftRadius = '30px'; + document.querySelector('.footer').style.borderTopRightRadius = '30px'; + + inputs.forEach(function (input) { + input.style.borderBottom = `2px solid ${cWhite}`; + input.style.backgroundColor = cDarkGray; + + input.addEventListener('focus', function () { + this.style.borderBottom = `2px solid ${cBlueFooter}`; + }); + + input.addEventListener('blur', function () { + this.style.borderBottom = `2px solid ${cWhite}`; + }); + }); + + document.querySelector('.form__button').style.borderRadius = '8px'; + document.querySelector('.form__button').style.backgroundColor = + cBlueInitial; + document.querySelectorAll('.media__icon').forEach(function (icon) { + icon.classList.add('media__icon--gray'); + icon.classList.remove('media__icon--pink'); + }); + } + }); + }); +}); 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/blocks/bottom-bar.scss b/src/styles/blocks/bottom-bar.scss new file mode 100644 index 0000000000..2e4d6a355f --- /dev/null +++ b/src/styles/blocks/bottom-bar.scss @@ -0,0 +1,55 @@ +.bottom-bar { + @include element-grid; + + place-content: center space-between; + margin: 120px 0 80px; + grid-column: span 12; + + @include on-tablet { + grid-column: span 6; + gap: 24px; + margin: 140px 0 80px; + } + + @include on-phone { + grid-column: 1 / -1; + gap: 48px; + margin: 80px 0; + } + + &__logo-link { + width: 46px; + height: 28px; + grid-column: span 1; + + @include on-tablet { + grid-row: 1; + } + } + + &__logo-image { + height: 28px; + + @include hover(transform, scale(1.2)); + } + + &__theme-changer { + display: none; + letter-spacing: 3px; + text-decoration: none; + text-transform: uppercase; + text-wrap: nowrap; + width: 136px; + + @include text-styler(Poppins, 700, 13px, 19.5px, $c-white); + + @include on-tablet { + display: initial; + grid-row: 3; + } + + @include on-phone { + display: none; + } + } +} diff --git a/src/styles/blocks/bottom-nav.scss b/src/styles/blocks/bottom-nav.scss new file mode 100644 index 0000000000..653e68fe1f --- /dev/null +++ b/src/styles/blocks/bottom-nav.scss @@ -0,0 +1,42 @@ +.bottom-nav { + display: flex; + align-items: center; + grid-column: -8 / -1; + justify-self: end; + flex-wrap: wrap; + + @include on-tablet { + grid-column: span 6; + grid-row: 2; + justify-self: start; + } + + &__list { + @include nav-list-styles(64px); + + @include on-tablet { + @include nav-list-styles(40px); + } + + @include on-phone { + flex-direction: column; + + @include nav-list-styles(24px); + } + } + + &__link { + @include nav-link-styles; + @include animated-undescore($c-white); + + &--theme-changer { + @include on-tablet { + display: none; + } + + @include on-phone { + display: initial; + } + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..35881aa102 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,31 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + color: $c-white; + + &--animated { + transition: 0.3s; + + &:hover { + background-color: $c-blue-footer !important; + } + + &:active { + filter: brightness(0.9); + } + } + + &--pink-animated { + transition: 0.3s; + + &:hover { + background-color: $c-orange !important; + } + + &:active { + filter: brightness(0.9); + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..62c1921249 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,99 @@ +.card { + background-color: $c-white; + width: 264px; + height: 264px; + border-radius: 16px; + box-shadow: 0 9px 18px 0 #25293108; + + @include on-desktop { + width: 214px; + } + + @include on-tablet { + width: 264px; + } + + @include on-phone { + width: 280px; + } + + &__number { + display: flex; + align-items: center; + justify-content: center; + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgba($color: $c-blue, $alpha: 0.1); + + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 13px; + text-align: center; + color: $c-blue; + margin: 32px 0 0 32px; + } + + &__content { + @include text-styler(Open Sans, 600, 13px, 19.5px, $c-gray); + + margin: 24px 0 0 32px; + } + + &__learn-more { + margin: 32px 0 0 32px; + transition: 0.01s; + + &:hover { + text-shadow: 0 0 0.01px 0 $c-black; + } + + &:active { + text-shadow: 0 0 1px 0 $c-black; + } + } + + &--1 { + grid-column: -7 / -4; + margin: 0; + transform: translateY(132px); + + @include on-tablet { + margin: 0; + transform: translateY(0); + } + } + + &--2 { + grid-column: -4 / -1; + + @include on-tablet { + transform: translateY(-132px); + } + + @include on-phone { + transform: translateY(0); + } + } + + &--3 { + grid-column: -7 / -4; + transform: translateY(132px); + + @include on-tablet { + transform: translateY(0); + } + } + + &--4 { + grid-column: -4 / -1; + + @include on-tablet { + transform: translateY(-132px); + } + + @include on-phone { + transform: translateY(0); + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..0c2e5eb069 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,42 @@ +.footer { + @include element-grid; + + background-color: $c-dark-gray; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + box-shadow: 0 -150px 0 10px $c-white; + + &__form-title { + @include text-styler(Poppins, 600, 32px, 48px, $c-white); + + grid-column: 1 / 6; + margin: 180px 0 56px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + } + + @include on-phone { + margin: 72px 0 48px; + grid-column: 1 / -1; + } + } + + &__info-title { + @include text-styler(Poppins, 600, 32px, 48px, $c-white); + + grid-column: -6 / -1; + margin: 180px 0 56px; + + @include on-tablet { + grid-column: 1 / 5; + margin: 120px 0 56px; + } + + @include on-phone { + grid-column: 1 / -1; + margin: 80px 0 48px; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..1b3b318969 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,87 @@ +.form { + display: flex; + flex-direction: column; + grid-column: span 5; + grid-row: 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-phone { + grid-column: 1 / -1; + } + + &__input { + box-sizing: border-box; + position: relative; + height: 41px; + border: none; + background-color: $c-dark-gray; + border-bottom: 2px solid $c-white; + transition: border-color 0.3s ease-in-out; + transform-origin: left; + padding: 0; + margin: 0 0 48px; + + @include text-styler(Poppins, 600, 15px, 22.5px, $c-white); + + @include on-phone { + margin: 0 0 40px; + } + + &:focus { + outline: none; + border-bottom-color: $c-blue; + transition: border-bottom-color 0.3s ease; + } + + &:not(:focus) { + border-bottom-color: initial; + } + + &:last-child { + margin: 0 0 80px; + + @include on-phone { + margin: 0 0 56px; + } + } + + &::placeholder { + color: rgba(255, 255, 255, 0.7); + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + border-bottom-color: $c-blue; + -webkit-text-fill-color: $c-white; + -webkit-box-shadow: 0 0 0px 1000px $c-dark-gray inset; + caret-color: $c-white; + } + } + + &__button { + cursor: pointer; + width: 264px; + height: 56px; + background-color: $c-blue; + border-radius: 8px; + color: $c-white; + outline: none; + border: none; + margin: 0; + + &:active { + filter: brightness(0.95); + } + + @include text-styler(Poppins, 600, 15px, 22.5px, $c-white); + @include hover(background-color, $c-blue-footer); + + @include on-phone { + width: 280px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..7eaf64a21f --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,84 @@ +.header { + width: 100%; + height: 100vh; + background-color: $c-dark-gray; + align-content: start; + border-bottom-left-radius: 32px; + border-bottom-right-radius: 32px; + + @include on-tablet { + height: 100%; + } + + &__content { + @include element-grid; + + grid-column: 1 / -1; + grid-row: 2; + + @include on-phone { + grid-column: span 2; + grid-row: unset; + } + } + + &__title { + @include text-styler(Poppins, 600, 64px, 68px, $c-white); + + letter-spacing: -2px; + grid-column: 1 / 5; + margin: 120px 0 0; + + @include on-tablet { + grid-column: span 6; + margin: 56px 0 0; + } + + @include on-phone { + grid-column: span 2; + margin: 48px 0 0; + + @include text-styler(Poppins, 600, 52px, 62.4px, $c-white); + } + } + + &__subtitle { + @include text-styler(Open Sans, 400, 18px, 27px, $c-white); + + grid-column: 1 / 5; + margin: 32px 0 0; + + @include on-tablet { + grid-column: span 4; + margin: 24px 0 0; + } + + @include on-phone { + grid-column: span 2; + margin: 32px 0 0; + } + } + + &__button { + cursor: pointer; + grid-column: 1 / 4; + height: 50px; + border-radius: 8px; + margin: 83px 0 0; + background-color: $c-blue; + outline: none; + border: none; + + @include text-styler(Poppins, 600, 15px, 22.5px, $c-white); + + @include on-tablet { + grid-column: span 3; + margin: 56px 0 0; + } + + @include on-phone { + grid-column: span 2; + margin: 72px 0 0; + } + } +} diff --git a/src/styles/blocks/info.scss b/src/styles/blocks/info.scss new file mode 100644 index 0000000000..17f3f4cadc --- /dev/null +++ b/src/styles/blocks/info.scss @@ -0,0 +1,75 @@ +.info { + grid-column: -6 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-phone { + grid-column: 1 / -1; + } + + &__call-section-title { + @include text-styler(Poppins, 700, 13px, 19.5px, $c-white); + + letter-spacing: 3px; + text-transform: uppercase; + margin: 0 0 8px; + opacity: 50%; + } + + &__call-contact { + margin: 0 0 48px; + + &-link { + color: $c-white; + text-decoration: none; + @include hover(text-shadow, 0 0 2px $c-white); + } + + @include text-styler(Open Sans, 600, 24px, 36px, $c-white); + + @include on-phone { + margin: 0 0 40px; + } + } + + &__address-section-title { + letter-spacing: 3px; + text-transform: uppercase; + margin: 0 0 8px; + opacity: 50%; + + @include text-styler(Poppins, 700, 13px, 19.5px, $c-white); + } + + &__address-content { + margin: 0 0 48px; + + &-link { + color: $c-white; + text-decoration: none; + } + + @include text-styler(Open Sans, 600, 24px, 36px, $c-white); + + @include on-phone { + margin: 0 0 40px; + } + } + + &__socials-section-title { + @include text-styler(Poppins, 700, 13px, 19.5px, $c-white); + + letter-spacing: 3px; + text-transform: uppercase; + margin: 0 0 16px; + opacity: 50%; + } + + &__socials { + display: flex; + height: 32px; + gap: 32px; + } +} diff --git a/src/styles/blocks/item.scss b/src/styles/blocks/item.scss new file mode 100644 index 0000000000..47f488f3ab --- /dev/null +++ b/src/styles/blocks/item.scss @@ -0,0 +1,77 @@ +.item { + display: flex; + grid-column: span 3; + flex-direction: column; + align-items: center; + width: 264px; + margin: 0 0 155px; + + @include on-desktop { + width: 214px; + } + + @include on-tablet { + width: 362px; + height: 305px; + } + + @include on-phone { + width: 280px; + grid-column: span 2; + } + + &__picture { + width: 166px; + height: 166px; + border-radius: 16px; + } + + &__title { + @include text-styler(Poppins, 600, 20px, 28px, $c-black); + + text-align: center; + margin: 40px 0 0; + } + + &__content { + @include text-styler(Open Sans, 400, 14px, 21px, $c-gray); + + text-align: center; + margin: 16px 0 0; + } + + &--position-1 { + grid-column: span 3; + + @include on-tablet { + grid-column: span 6; + justify-self: center; + } + + @include on-phone { + grid-column: span 2; + } + } + + &--position-2 { + grid-column: span 6; + justify-self: center; + + @include on-phone { + grid-column: span 2; + } + } + + &--position-3 { + grid-column: span 3; + + @include on-tablet { + grid-column: span 6; + justify-self: center; + } + + @include on-phone { + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/learn-more.scss b/src/styles/blocks/learn-more.scss new file mode 100644 index 0000000000..365dbaae5c --- /dev/null +++ b/src/styles/blocks/learn-more.scss @@ -0,0 +1,40 @@ +.learn-more { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + height: 40px; + gap: 16px; + border: none; + outline: none; + background-color: $c-white; + padding: 0; + + &__ellipse { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: $c-blue; + } + + &:hover { + .learn-more__ellipse { + transform: scale(1.1); + } + } + + &:active { + .learn-more__ellipse { + transform: scale(0.9); + } + } + + &__content { + @include text-styler(Poppons, 600, 15px, 22.5px, $c-black); + + margin: 0; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..f92598bfed --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,18 @@ +.main { + @include element-grid; + + row-gap: 148px; + margin-bottom: 144px; + + & > * { + grid-column: span 12; + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/media.scss b/src/styles/blocks/media.scss new file mode 100644 index 0000000000..2ddc335832 --- /dev/null +++ b/src/styles/blocks/media.scss @@ -0,0 +1,16 @@ +.media { + &__icon { + width: 32px; + height: 32px; + fill: $c-white; + transition: ease-out 0.01s; + + &--gray:hover { + fill: $c-blue-footer; + } + + &--pink:hover { + fill: $c-grayish-blue; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..2897e81271 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,57 @@ +.menu { + height: 100vh; + background-color: $c-dark-gray; + + &__top { + @include page-grid; + + place-content: center; + height: 120px; + } + + &__logo-link { + width: 46px; + height: 28px; + grid-column: 1 / 2; + } + + &__logo-image { + cursor: pointer; + height: 28px; + + @include hover(transform, scale(1.2)); + } + + &__close-link { + justify-self: end; + grid-column: -2 / -1; + + @include hover(transform, scale(1.2)); + } + + &__bottom { + display: flex; + justify-content: center; + align-items: center; + } + + &__nav { + display: flex; + justify-content: center; + align-items: center; + height: calc(100vh - 120px); + } + + &__list { + display: flex; + flex-direction: column; + align-items: center; + + @include nav-list-styles(48px); + } + + &__link { + @include nav-link-styles; + @include animated-undescore($c-white); + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..a56ee07417 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,19 @@ +.nav { + display: flex; + align-items: center; + + @include on-tablet { + display: none; + } + + &__list { + grid-column: span 6; + + @include nav-list-styles(48px); + } + + &__link { + @include nav-link-styles; + @include animated-undescore($c-white); + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..f130d829fa --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,20 @@ +.our-expertise { + @include element-grid; + @include white-bg(30px, 100%); + + &__title { + @include text-styler(Poppins, 600, 52px, 78px, $c-black); + + text-align: center; + grid-column: 3 / -3; + margin: 128px 0 64px; + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..82dda8b164 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,42 @@ +.page { + * { + box-sizing: border-box; + transition: all 0.3s ease; + } + + min-width: 320px; + scroll-behavior: smooth; + overflow-x: hidden; + + &:has(.page__menu:target) { + overflow: hidden; + + .top-bar__menu-link { + opacity: 0; + transform: scale(-1); + } + } + + &__body { + margin: 0; + padding: 0; + background: $c-light-gray; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + pointer-events: none; + z-index: 5; + transform: translateY(-100%); + + &:target { + opacity: 1; + transform: translate(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/scrollers.scss b/src/styles/blocks/scrollers.scss new file mode 100644 index 0000000000..e9b8fe38e8 --- /dev/null +++ b/src/styles/blocks/scrollers.scss @@ -0,0 +1,22 @@ +.scrollers { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 16px; + + &__ellipse { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + background-color: $c-white; + border-radius: 50%; + rotate: 180deg; + + @include hover(transform, scale(1.05)); + @include animated-unscaling; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..3b54f2d0e3 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,55 @@ +.services { + @include element-grid; + + @include on-tablet { + row-gap: 40px; + margin: 0 0 132px; + } + + &__content { + grid-column: span 4; + + @include on-tablet { + grid-column: span 3; + } + + @include on-tablet { + grid-column: span 2; + } + } + + &__section-title { + @include text-styler(Poppins, 700, 13px, 19.5px, $c-grayish-blue); + + text-transform: uppercase; + letter-spacing: 3px; + margin: 103px 0 0; + } + + &__title { + @include text-styler(Poppins, 600, 32px, 41.6px, $c-black); + + margin: 16px 0 0; + } + + &__description { + @include text-styler(Open Sans, 400, 14px, 21px, $c-gray); + + margin: 24px 0 0; + } + + &__cards { + display: flex; + flex-wrap: wrap; + grid-column: 7 / -1; + gap: 30px; + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/slide.scss b/src/styles/blocks/slide.scss new file mode 100644 index 0000000000..4a2679107d --- /dev/null +++ b/src/styles/blocks/slide.scss @@ -0,0 +1,16 @@ +.slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: calc(100vh - 120px); + border-bottom-right-radius: 30px; + border-top-left-radius: 30px; + object-fit: cover; + z-index: 0; + + @include on-tablet { + border-radius: 30px; + height: 100%; + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..6e8c8f7c5a --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,55 @@ +.slider { + position: absolute; + right: 0; + bottom: 0; + height: calc(100% - 120px); + width: calc(((100% - 1146px) / 2) + 427px); + overflow: hidden; + + @include on-tablet { + position: relative; + grid-column: span 6; + width: 100vw; + height: 390px; + justify-self: center; + margin: 147px 0 0; + } + + @include on-phone { + grid-column: span 2; + object-fit: contain; + margin: 48px 0 0; + } + + &__slides { + display: flex; + } + + &__wrapper { + display: flex; + align-items: center; + position: absolute; + margin: 0 0 48px 48px; + gap: 24px; + bottom: 0; + z-index: 1; + + @include on-tablet { + flex-direction: column; + align-items: flex-start; + } + } + + &__title { + @include text-styler(Poppins, 700, 13px, 19.5px, $c-white); + + letter-spacing: 3px; + margin: 0; + } + + &__subtitle { + @include text-styler(Open Sans, 400, 14px, 19.6px, $c-white); + + margin: 8px 0 0; + } +} diff --git a/src/styles/blocks/testimonial.scss b/src/styles/blocks/testimonial.scss new file mode 100644 index 0000000000..b48091672c --- /dev/null +++ b/src/styles/blocks/testimonial.scss @@ -0,0 +1,96 @@ +.testimonial { + cursor: pointer; + grid-column: span 4; + grid-row: 3; + background-color: $c-white; + border-radius: 16px; + box-shadow: 0 9px 18px 0 #25293108; + + &:not(:last-child) { + @include on-tablet { + margin-bottom: 30px; + } + } + + @include hover(transform, scale(1.01)); + + @include on-tablet { + grid-column: span 6; + grid-row: unset; + } + + @include on-phone { + grid-column: span 2; + } + + &__top { + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + &__picture { + width: 250px; + height: 250px; + margin: 32px 0 0; + } + + &__bottom { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + &__decoration-figure { + width: 24px; + height: 24px; + margin: 0; + } + + &__quote { + @include text-styler(Open Sans, 600, 13px, 19.5px, $c-gray); + + text-align: center; + margin: 8px 56px 0; + } + + &__name { + @include text-styler(Open Sans, 600, 13px, 19.5px, $c-black); + + text-align: center; + margin: 16px 0 0; + + @include on-desktop { + margin: 32px 0 0; + } + + @include on-tablet { + margin: 16px 0 0; + } + + @include on-phone { + margin: 32px 0 0; + } + + &--margin-modifier { + @include on-desktop { + margin: 16px 0 0; + } + + @include on-phone { + margin: 16px 0 0; + } + } + } + + &__organization { + @include text-styler(Poppins, 700, 13px, 19.5px, $c-grayish-blue); + + letter-spacing: 3px; + text-transform: uppercase; + text-align: center; + margin: 4px 0 32px; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..6a27b5ee9c --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,46 @@ +.testimonials { + @include element-grid; + + grid-column: span 12; + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + + &__section-title { + @include text-styler(Poppins, 700, 13px, 19.5px, $c-grayish-blue); + + text-transform: uppercase; + letter-spacing: 3px; + margin: 0 0 16px; + grid-column: 1 / 5; + + @include on-tablet { + grid-column: span 6; + grid-row: 2; + } + + @include on-phone { + grid-column: span 2; + } + } + + &__title { + @include text-styler(Poppins, 600, 32px, 48px, $c-black); + + margin: 0 0 85px; + grid-column: 1 / 5; + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/theme-changer.scss b/src/styles/blocks/theme-changer.scss new file mode 100644 index 0000000000..382311494f --- /dev/null +++ b/src/styles/blocks/theme-changer.scss @@ -0,0 +1,9 @@ +.theme-changer { + --color-text: #6c788b; + --color-after: #6c788b; + + cursor: pointer; + color: var(--color-text) !important; + + @include animated-undescore(var(--color-after) !important); +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..8ef33f3e63 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,103 @@ +.top-bar { + @include element-grid; + + place-content: center; + height: 120px; + grid-column: span 12; + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + justify-content: space-between; + } + + &__logo-link { + width: 46px; + height: 28px; + grid-column: span 1; + + @include on-phone { + grid-column: span 1; + } + } + + &__logo-image { + height: 28px; + cursor: pointer; + + @include hover(transform, scale(1.1)); + } + + &__hire { + position: relative; + display: flex; + align-items: center; + grid-column: -2 / -1; + + @include nav-link-styles; + + @include on-phone { + grid-column: span 1; + justify-self: flex-end; + width: 67px; + } + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + background-color: $c-blue; + transition: 0.3s; + } + + &:hover::after { + bottom: -2px; + } + + &:active::after { + bottom: 0; + } + + &.pink::after { + background-color: $c-pink; + } + } + + &__link-box { + display: flex; + justify-content: space-between; + align-items: center; + gap: 32px; + } + + &__menu-link { + display: none; + + @include on-tablet { + display: flex; + cursor: pointer; + transition: opacity 0.3s ease-in-out; + transform: scale(1); + } + } + + &__menu-button { + display: none; + + @include on-tablet { + display: flex; + + @include hover(transform, scale(1.2)); + } + } + + &__nav { + grid-column: 2 / -2; + justify-self: center; + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..e8004e20a1 --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,91 @@ +.vision { + @include element-grid; + + background-color: $c-white; + justify-items: center; + align-content: center; + position: relative; + height: calc(100% + 144px); + z-index: 1; + + @include white-bg(0, 100%); + + &::after { + content: ''; + position: absolute; + top: 72px; + width: 100vw; + height: calc(100% - 144px); + background-image: var(--bg-image, url(../images/vision/shapes.png)); + background-size: auto 100%; + background-position: center; + background-repeat: no-repeat; + justify-self: center; + z-index: 2; + + @include on-tablet { + background-size: auto 70%; + } + + @include on-phone { + display: none; + } + } + + &__title { + grid-column: span 12; + text-align: center; + margin: 199px 0 24px; + z-index: 3; + + @include text-styler(Poppins, 600, 52px, 78px, $c-black); + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } + + &__content { + grid-column: span 12; + text-align: center; + margin: 0 0 64px; + z-index: 3; + + @include text-styler(Open Sans, 600, 24px, 36px, $c-gray); + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } + + &__button { + cursor: pointer; + width: 264px; + height: 56px; + grid-column: span 12; + background-color: $c-blue; + border-radius: 8px; + border: none; + color: $c-white; + z-index: 3; + margin: 0 0 126px; + + @include text-styler(Poppins, 600, 15px, 22.5px, $c-white); + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..88463891eb --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,38 @@ +.who-we-are { + @include element-grid; + + margin-block-start: 148px; + + &__title { + grid-column: 5 / -5; + margin: 0; + text-align: center; + + @include text-styler(Poppins, 600, 32px, 48px, $c-black); + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } + + &__subtitle { + grid-column: 3 / -3; + + @include text-styler(Open Sans, 600, 24px, 36px, $c-gray); + + text-align: center; + margin: 16px 0 0; + + @include on-tablet { + grid-column: span 6; + } + + @include on-phone { + grid-column: span 2; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d128..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/styles.scss b/src/styles/styles.scss new file mode 100644 index 0000000000..cbd7bbe67d --- /dev/null +++ b/src/styles/styles.scss @@ -0,0 +1,28 @@ +@import 'utils'; +@import 'typography'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/button'; +@import 'blocks/top-bar'; +@import 'blocks/theme-changer'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/slider'; +@import 'blocks/slide'; +@import 'blocks/scrollers'; +@import 'blocks/main'; +@import 'blocks/who-we-are'; +@import 'blocks/our-expertise'; +@import 'blocks/item'; +@import 'blocks/services'; +@import 'blocks/card'; +@import 'blocks/learn-more'; +@import 'blocks/testimonials'; +@import 'blocks/testimonial'; +@import 'blocks/vision'; +@import 'blocks/footer'; +@import 'blocks/form'; +@import 'blocks/info'; +@import 'blocks/media'; +@import 'blocks/bottom-bar'; +@import 'blocks/bottom-nav'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..5541e1f3d4 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,188 @@ #{$_property}: $_toValue; } } + +@mixin on-large-screens { + @media (min-width: 2560px) { + @content; + } +} + +@mixin on-desktop-xl { + @media (max-width: 2559px) { + @content; + } +} + +@mixin on-desktop { + @media (max-width: 1599px) { + @content; + } +} + +@mixin on-tablet { + @media (max-width: 1080px) { + @content; + } +} + +@mixin on-phone { + @media (max-width: 639px) { + @content; + } +} + +@mixin page-grid { + --columns: 12; + + display: grid; + justify-content: center; + column-gap: 30px; + grid-template-columns: repeat(var(--columns), 68px); + + @include on-desktop-xl { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 54px; + column-gap: 20px; + } + + @include on-tablet { + --columns: 6; + + padding-inline: 41px; + column-gap: 30px; + } + + @include on-phone { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 130px); + padding-inline: 20px; + column-gap: 20px; + } +} + +@mixin element-grid { + --columns: 12; + + display: grid; + justify-content: center; + column-gap: 30px; + grid-template-columns: repeat(var(--columns), 68px); + + @include on-desktop { + column-gap: 20px; + } + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-phone { + --columns: 2; + + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 130px); + } +} + +@mixin paddings { + @include on-desktop-xl { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 54px; + } + + @include on-tablet { + padding-inline: 41px; + } + + @include on-phone { + padding-inline: 20px; + } +} + +@mixin text-styler( + $_fontFamily, + $_fontWeight, + $_fontSize, + $_lineHeight, + $_color +) { + font-family: + #{$_fontFamily}, + sans-serif; + font-weight: #{$_fontWeight}; + font-size: #{$_fontSize}; + line-height: #{$_lineHeight}; + color: #{$_color}; +} + +@mixin nav-link-styles { + @include text-styler(Poppins, 700, 13px, 19.5px, $c-white); + + letter-spacing: 3px; + text-decoration: none; + text-transform: uppercase; + text-wrap: nowrap; +} + +@mixin nav-list-styles($_gap) { + display: flex; + gap: #{$_gap}; + margin: 0; + padding: 0; + list-style: none; +} + +@mixin white-bg($_borderRadius, $_height) { + position: relative; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 100vw; + height: #{$_height}; + background-color: $c-white; + z-index: -1; + transform: translateX(-50%); // calc(((100% - 1146px) / 2) * -1) + border-radius: #{$_borderRadius}; + } +} + +@mixin animated-undescore($_BackgroundColor) { + position: relative; + + &::after { + content: ''; + position: absolute; + background-color: #{$_BackgroundColor}; + width: 100%; + height: 1px; + bottom: -2px; + left: 0; + transform: scale(0); + transform-origin: bottom right; + transition: transform 0.25s ease-in-out; + } + + &:hover::after { + transform: scaleX(1); + transform-origin: bottom left; + } +} + +@mixin animated-unscaling { + &:active { + transform: scale(0.9); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..91fd2bd0f5 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ -$c-gray: #eee; +$c-white: #fff; +$c-black: #253757; +$c-light-gray: #eee; +$c-grayish-blue: #c0cdd7; +$c-hover-blue--pink-theme: #d2ebff; +$c-slate-gray: #959595; +$c-gray: #6c788b; +$c-dark-gray: #2c2c2c; +$c-blue: #2060f6; +$c-blue-footer: #144ed4; +$c-pink: #ff9c8e; +$c-orange: #ff7e6c;