diff --git a/assets/logo-white.svg b/assets/logo-white.svg new file mode 100644 index 0000000..f05f105 --- /dev/null +++ b/assets/logo-white.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..aaaeaf0 --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/pos-image-large.svg b/assets/pos-image-large.svg new file mode 100644 index 0000000..166f1d5 --- /dev/null +++ b/assets/pos-image-large.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/pos-image.svg b/assets/pos-image.svg new file mode 100644 index 0000000..81484f6 --- /dev/null +++ b/assets/pos-image.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..089278e --- /dev/null +++ b/index.html @@ -0,0 +1,1241 @@ + + + + + + Posive | Home + + + + + + + + + + +
+
+ + +
+
+
+
+
+

1# Best all-in-one pos platform

+

+ Empower your business growth with our point of sale +

+

+ From managing inventory to tracking sales performance, our platform + provides you with the tools you need to succeed in today's + competitive market +

+
+ + +
+
+
+ pos image large + pos image small +
+
+ +
+
+
+
+

+ The POS system that fits your business +

+

+ Say goodbye to complexity and hello to efficiency with our + user-friendly Point of Sale dashboard. +

+
+
+
+
+ + + + + + + + + + + +
+ + Manage all outlets and channels at fingertips. + +
+ +
+
+ + + + + + + +
+ + Accept all payments through 1 app. + +
+ +
+
+ + + + + + + + +
+

Plug-and-play apps

+
+
+
+
+ +
+
+
+ +
+

The inner workings of our POS

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

POS software For all platform

+

+ Turn your mobile device into a point of sale and download the + shopify POS app onto any smartphone or tablet +

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

Customizable terminal

+

+ Personalize the home screen to keep popular products and + important discounts at your fingertips. +

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

Plug-and-play apps

+

+ Add functionality as your needs change, from loyalty apps to + logistics and time tracking. +

+
+
+
+
+
+ +
+
+

Our customers say about us

+

+ Build trust, increase conversions, and watch your business thrive. +

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

+ "User-friendly design coupled with powerful analytics tools. + Point of Sales Platform offers valuable insights to drive + business decisions." +

+
+ +
+

Eren Yaeger

+

Founder Carina Coffe

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

+ "User-friendly design coupled with powerful analytics tools. + Point of Sales Platform offers valuable insights to drive + business decisions." +

+
+ +
+

Eren Yaeger

+

Founder Carina Coffe

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

+ "User-friendly design coupled with powerful analytics tools. + Point of Sales Platform offers valuable insights to drive + business decisions." +

+
+ +
+

Eren Yaeger

+

Founder Carina Coffe

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

Frequently asked questions

+

+ Learn more about our FAQs list and if there is anything you want + to ask, get in touch with our Customer support +

+
+ + +
+
+
+
+
+

+ What is a Point of Sales (POS) platform? +

+ + + +
+

+ A Point of Sales platform is a software solution used by + businesses to process transactions, manage inventory, and + streamline sales operations. It typically includes features like + inventory management, sales reporting, and customer relationship + management (CRM) tools. +

+
+
+
+

+ How does a Point of Sales platform benefit my business? +

+ + + +
+

+
+
+
+

+ Is a Point of Sales platform suitable for my business size? +

+ + + +
+

+
+
+
+

+ How do I choose the right Point of Sales platform for my + business? +

+ + + +
+

+
+
+
+

+ Can a Point of Sales platform integrate with other business + systems? +

+ + + +
+

+
+
+
+

+ Is training required to use a Point of Sales platform? +

+ + + +
+

+
+
+
+
+ +
+
+
+

Stary selling better with Posive POS

+

+ Subscribe to our email list to receive advice from other business + owners, support articles, tips from industry experts, and more. +

+
+ + +
+

+ *This information may be transcribed, used, and stored by third + parties. learn our + Privacy Policy +

+
+ +
+ +
+
+
+
+ + + + diff --git a/scripts/header.js b/scripts/header.js new file mode 100644 index 0000000..8407781 --- /dev/null +++ b/scripts/header.js @@ -0,0 +1,17 @@ +const menuEl = document.querySelector(".hamburger"); +const icons = document.querySelectorAll(".hamburger__icon"); +const navEl = document.querySelector(".nav"); +const buttons = document.querySelector(".header__buttons"); + +menuEl.addEventListener("click", () => { + navEl.classList.toggle("show"); + buttons.classList.toggle("show"); + const isVisible = navEl.classList.contains("show"); + if (isVisible === true) { + icons[0].setAttribute("data-visible", "false"); + icons[1].setAttribute("data-visible", "true"); + } else { + icons[0].setAttribute("data-visible", "true"); + icons[1].setAttribute("data-visible", "false"); + } +}); diff --git a/styles/components/footer.css b/styles/components/footer.css new file mode 100644 index 0000000..01b134c --- /dev/null +++ b/styles/components/footer.css @@ -0,0 +1,120 @@ +.footer { + background-color: var(--secondary-500); + color: var(--primary-0); + padding: 65px 0px; + position: relative; +} + +.footer__list { + list-style: none; + display: flex; + justify-content: space-between; +} + +.company__description { + color: var(--secondary-300); + font-weight: 900; + line-height: 150%; + letter-spacing: -2%; + max-width: 45ch; + margin-block: 24px 53px; +} + +.social__list { + list-style: none; + display: flex; + gap: 10px; +} + +.social__item { + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid #23303e; + padding: 10px; + border-radius: 50%; + max-width: fit-content; +} + +.about__title, +.other__title, +.contact__title { + font-size: 1.125rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + margin-bottom: 32px; +} + +.about__list, +.other__list, +.contact__list { + list-style: none; + display: flex; + flex-direction: column; + gap: 16px; +} + +.contact__item { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.about__link, +.other__link, +.contact__link { + color: var(--secondary-300); + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + text-decoration: none; +} + +.contact__link--max-width { + max-width: 20ch; +} + +.footer__scroll { + background-color: var(--primary-500); + padding: 16px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 50px; + right: 50px; +} + +@media (max-width: 1024px) { + .footer__list { + flex-wrap: wrap; + gap: 56px; + } + + .company { + width: 100%; + } + + .footer__scroll { + padding: 10px; + top: 20px; + right: 25px; + } +} + +@media (max-width: 475px) { + .footer { + padding: 65px 24px; + } + + .about__link, + .other__link, + .contact__link { + font-size: 0.875rem; + font-weight: 500; + } + + .contact__link--max-width { + max-width: none; + } +} diff --git a/styles/components/header.css b/styles/components/header.css new file mode 100644 index 0000000..df3d1b0 --- /dev/null +++ b/styles/components/header.css @@ -0,0 +1,188 @@ +.header { + background-color: white; + width: 100%; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 999; +} + +.header__menu { + padding-block: 18px; + display: flex; + align-items: center; + gap: 56px; +} + +.hamburger { + display: none; + justify-content: center; + align-items: center; +} + +.nav { + flex: 1; + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav__list { + list-style: none; + display: flex; + align-items: center; + gap: 40px; +} + +.nav__link { + font-size: 0.875rem; + font-weight: 500; + line-height: 150%; + letter-spacing: -2%; + color: var(--secondary-400); + text-decoration: none; + cursor: pointer; +} + +.header__buttons { + display: flex; + gap: 10px; +} + +.btn { + background: none; + border: none; + outline: none; + border: 1px solid #dce4e8; + border-radius: 10px; + padding: 12px 24px; + font-size: 0.875rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + cursor: pointer; +} + +.btn--secondary { + background-color: var(--primary-0); +} + +.btn--primary { + background-color: var(--primary-500); + color: var(--primary-0); + border-color: var(--primary-600); +} + +.btn--lang { + border: none; + outline: none; + padding-right: 0.5rem; + font-size: 0.875rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + cursor: pointer; +} + +.btn--opt { + border: none; + background: none; +} + +/* lg */ +@media (max-width: 1024px) { + .header__menu { + gap: 32px; + } + + .nav__list { + gap: 12px; + } + + .nav__link { + font-size: 0.75rem; + } + + .btn { + padding: 8px 12px; + font-size: 0.75rem; + } + + .btn--lang { + font-size: 0.75rem; + } +} + +/* md */ +@media (max-width: 768px) { + .header__menu { + flex-direction: column; + align-items: initial; + gap: 20px; + } + + .logo { + display: flex; + justify-content: space-between; + align-items: center; + } + + .hamburger { + display: flex; + } + + .hamburger svg[data-visible="true"] { + display: block; + } + + .hamburger svg[data-visible="false"] { + display: none; + } + + .nav { + flex-direction: column; + justify-content: center; + align-items: initial; + gap: 2rem; + position: absolute; + width: 100%; + top: 64px; + left: 0; + right: 0; + z-index: -1; + background-color: white; + padding-bottom: 12px; + transform: translateY(-120%); + transition: transform 0.3s; + } + + .nav.show { + transform: translateY(0); + } + + .nav__list { + flex-direction: column; + gap: 24px; + } + + .nav__link { + font-size: 0.875rem; + } + + .header__buttons { + display: flex; + flex-direction: column; + padding-inline: 10%; + } + + .btn { + padding: 12px 24px; + font-size: 0.875rem; + } + + .btn--lang { + align-self: center; + font-size: 0.875rem; + } +} diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 0000000..cac7da2 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,78 @@ +@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"); + +:root { + /* colors */ + + --primary-900: #70170c; + --primary-800: #872814; + --primary-700: #a84020; + --primary-600: #c95d2f; + --primary-500: #ea7e41; + --primary-400: #f2a66f; + --primary-300: #f8c18c; + --primary-200: #fcdbb3; + --primary-100: #fdefd9; + --primary-0: #ffffff; + + --success-900: #345302; + --success-800: #055467; + --success-700: #097380; + --success-600: #0d9699; + --success-500: #12b3a8; + --success-400: #44d1bb; + --success-300: #6ae8c9; + --success-200: #9ef7d9; + --success-100: #cefbe7; + + --error-900: #5f103b; + --error-800: #721a43; + --error-700: #8e2a4e; + --error-600: #aa3d5a; + --error-500: #c65468; + --error-400: #dc7d85; + --error-300: #ed9c9b; + --error-200: #f9c6bf; + --error-100: #fce4df; + + --warning-900: #713f09; + --warning-800: #88520f; + --warning-700: #a96e18; + --warning-600: #ca8823; + --warning-500: #ecac31; + --warning-400: #f3c762; + --warning-300: #f9d982; + --warning-200: #fdeaac; + --warning-100: #fef5d5; + + --information-900: #0e216e; + --information-800: #183285; + --information-700: #2a60b7; + --information-600: #3863c6; + --information-500: #4d81e7; + --information-400: #78a5f0; + --information-300: #94bdf7; + --information-200: #b9d6fc; + --information-100: #dbecfd; + + --secondary-900: #04070e; + --secondary-800: #080b11; + --secondary-700: #0d1015; + --secondary-600: #131619; + --secondary-500: #1a1c1e; + --secondary-400: #6c7278; + --secondary-300: #acb5bb; + --secondary-200: #dce4e8; + --secondary-100: #edf1f3; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Manrope", sans-serif; +} diff --git a/styles/modern-normalize.css b/styles/modern-normalize.css new file mode 100644 index 0000000..f4dc963 --- /dev/null +++ b/styles/modern-normalize.css @@ -0,0 +1,264 @@ +/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ + font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji"; + line-height: 1.15; /* 1. Correct the line height in all browsers. */ + -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */ + -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */ + tab-size: 4; /* 3 */ +} + +/* +Sections +======== +*/ + +body { + margin: 0; /* Remove the margin in all browsers. */ +} + +/* +Grouping content +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + text-decoration: underline dotted; +} + +/** +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, + monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +Restore the focus styles unset by the previous rule. +*/ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + appearance: textfield; + outline-offset: -2px; /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..1ed0b62 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,800 @@ +.hero { + background-color: #e6e7e9; + background-image: url("https://images.unsplash.com/photo-1554908338-c9770e3acd0c?q=80&w=1078&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); + background-repeat: no-repeat; + background-position: bottom; + background-size: contain; + margin-top: 70px; + text-align: center; + padding-inline: 24px; +} + +.hero__content { + padding-block: 48px; +} + +.hero__badge { + color: var(--primary-500); + text-transform: uppercase; + font-size: 1.125rem; + font-weight: 700; + line-height: 150%; + letter-spacing: 9%; +} + +.hero__title { + color: var(--secondary-500); + text-transform: capitalize; + font-size: 3.5rem; + font-weight: 700; + line-height: 121%; + letter-spacing: -3%; + max-width: 25ch; + margin: 10px auto 14px; +} + +.hero__description { + color: var(--secondary-400); + font-size: 1rem; + font-weight: 500; + line-height: 150%; + letter-spacing: -2%; + max-width: 65ch; + margin-inline: auto; +} + +.hero__buttons { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + margin-top: 32px; +} + +.hero__btn { + background: none; + border: none; + outline: none; + border: 1px solid #dce4e8; + border-radius: 10px; + padding: 13px 24px; + font-size: 0.875rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + cursor: pointer; +} + +.hero__btn--primary { + background-color: var(--primary-500); + color: var(--primary-0); + border-color: var(--primary-600); +} + +.hero__btn--secondary { + background-color: var(--primary-0); + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +.hero__thumbnail { + text-align: center; + width: 100%; +} + +.hero__thumbnail img { + width: 100%; +} + +.hero__small-image { + display: none; +} + +.features { + background-color: var(--secondary-500); + color: var(--primary-0); + padding: 100px 72px; +} + +.features__wrapper { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.features__content { + width: 48%; +} + +.features__header { + padding-bottom: 32px; + border-bottom: 1px solid var(--secondary-400); + margin-bottom: 32px; +} + +.features__title { + font-size: 3rem; + font-weight: 700; + line-height: 130%; + letter-spacing: -3%; + max-width: 16ch; + margin-bottom: 24px; +} + +.features__description { + color: var(--secondary-300); + font-weight: 900; + line-height: 150%; + letter-spacing: -2%; + max-width: 45ch; +} + +.features__body { + display: flex; + flex-direction: column; + gap: 16px; +} + +.feature { + display: flex; + align-items: center; + gap: 16px; +} + +.feature__icon { + padding: 13px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 4px 4px 0 rgba(255, 255, 255, 0.16); + display: flex; + justify-content: center; + align-items: center; +} + +.feature__icon svg { + width: 20px; + height: 20px; +} + +.feature__description { + font-weight: 700; + line-height: 160%; + letter-spacing: -2%; +} + +.features__thumbnail { + width: 48%; +} + +.features__image { + width: 100%; + height: 482px; + object-fit: cover; + object-position: center; + border-radius: 10px; +} + +.work { + padding: 100px 72px; +} + +.work__title { + color: var(--secondary-500); + font-size: 3.5rem; + font-weight: 700; + line-height: 121%; + letter-spacing: -3%; + text-align: center; + margin-bottom: 60px; +} + +.work__body { + display: flex; + gap: 60px; +} + +.work__thumbnail { + flex: 1; +} + +.work__image { + width: 100%; + border-radius: 10px; +} + +.work__content { + flex: 1; +} + +.work__item { + display: flex; + align-items: center; + gap: 18px; + margin-bottom: 43px; +} + +.work__icon { + display: inline-block; + padding: 24px; + border-radius: 50%; + background-color: #fef7ec; + border: 1.5px solid var(--primary-500); + box-shadow: inset 0 -5px 4px 0 rgba(234, 126, 65, 0.2), + 0 4px 8px 0 rgba(0, 0, 0, 0.14); + display: flex; + justify-content: center; + align-items: center; +} + +.work__sub-title { + color: var(--secondary-500); + font-size: 1.5rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -3%; + margin-bottom: 12px; +} + +.work__description { + color: var(--secondary-400); + font-weight: 900; + line-height: 150%; + letter-spacing: -2%; + max-width: 40ch; +} + +.testimonials { + background-color: var(--secondary-500); + color: var(--primary-0); + padding: 80px 84px; +} + +.testimonials__title { + text-align: center; + font-size: 3.5rem; + font-weight: 700; + line-height: 121%; + letter-spacing: -3%; + max-width: 15ch; + margin: 0 auto 26px; +} + +.testimonials__description { + color: var(--secondary-100); + text-align: center; + font-weight: 900; + line-height: 150%; + letter-spacing: -2%; +} + +.cards { + padding-block: 64px; + display: flex; + gap: 24px; +} + +.card { + flex: 1; + background-color: var(--primary-0); + color: var(--secondary-500); + border: 0.9px solid var(--secondary-100); + padding: 24px; + border-radius: 7.2px; + display: flex; + flex-direction: column; +} + +.card__qoute { + font-weight: 700; + line-height: 160%; + letter-spacing: -2%; + max-width: 35ch; + padding-bottom: 24px; + border-bottom: 1px solid var(--secondary-100); + margin-block: 14px 24px; +} + +.author { + display: flex; + align-items: center; + gap: 12px; + margin-top: auto; +} + +.author__image { + width: 40px; + height: 40px; + border-radius: 50%; +} + +.author__name { + font-size: 0.875rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + margin-bottom: 4px; +} + +.author__title { + color: var(--secondary-400); + font-size: 0.75rem; + font-weight: 500; + letter-spacing: -2%; +} + +.arrows { + display: flex; + justify-content: center; + align-items: center; + gap: 24px; +} + +.arrow { + padding: 10px; + border: 1px solid var(--secondary-400); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.faq { + background-color: var(--secondary-100); + padding: 100px 0px; +} + +.faq__wrapper { + display: flex; + justify-content: space-between; + gap: 70px; +} + +.faq__title { + font-size: 3.5rem; + font-weight: 700; + line-height: 121%; + letter-spacing: -3%; + max-width: 15ch; +} + +.faq__description { + color: var(--secondary-400); + font-weight: 900; + line-height: 150%; + letter-spacing: -2%; + max-width: 60ch; + margin-block: 24px 40px; +} + +.faq__buttons { + display: flex; + gap: 16px; +} + +.faq__btn { + background: none; + outline: none; + border: 1px solid #dce4e8; + padding: 13px 24px; + border-radius: 10px; + font-size: 0.875rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + cursor: pointer; +} + +.faq__btn--primary { + background-color: var(--primary-500); + color: var(--primary-0); + border-color: var(--primary-600); +} + +.faq__btn--secondary { + background-color: var(--primary-0); +} + +.faq__accordions { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.accordion { + background-color: var(--primary-0); + padding: 24px; + border-radius: 14px; +} + +.accordion__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; +} + +.accordion__question { + color: var(--secondary-500); + font-size: 1.25rem; + font-weight: 700; + line-height: 150%; + letter-spacing: -2%; + max-width: 40ch; +} + +.accordion__icon { + width: 24px; + height: 24px; + transition: transform 0.5s; +} + +.accordion.active .accordion__icon { + transform: rotate(180deg); +} + +.accordion__answer { + color: var(--secondary-400); + font-weight: 900; + max-width: 52ch; + line-height: 150%; + letter-spacing: -2%; +} + +.cta { + background-color: var(--secondary-500); + color: var(--primary-0); + padding: 80px 0px; +} + +.cta__wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.cta__content { + max-width: fit-content; + flex: 1; +} + +.cta__title { + font-size: 3.5rem; + font-weight: 700; + line-height: 121%; + letter-spacing: -3%; + max-width: 15ch; +} + +.cta__description { + color: var(--secondary-100); + font-weight: 900; + line-height: 150%; + letter-spacing: -2%; + max-width: 50ch; + margin-block: 24px 40px; +} + +.cta__form { + display: flex; + gap: 14px; + margin-bottom: 16px; +} + +.cta__input { + flex: 1; + background: none; + outline: none; + border: 1px solid #dce4e8; + border-radius: 10px; + padding: 16px 20px; + font-size: inherit; +} + +.cta__btn { + background-color: var(--primary-0); + color: var(--secondary-500); + border: 1px solid #dce4e8; + padding: 13px 24px; + border-radius: 10px; + font-size: 1rem; + font-weight: 700; + line-height: 160%; + letter-spacing: -2%; +} + +.cta__terms { + color: var(--secondary-400); + font-size: 0.75rem; + font-weight: 500; + letter-spacing: -2%; +} + +.cta__terms--link { + color: var(--primary-0); + text-decoration: none; +} + +.cta__thumbnail { + max-width: 700px; +} + +.cta__image { + width: 100%; +} + +@media (max-width: 1024px) { + .hero__title { + font-size: 2.8rem; + } + + .features { + padding: 80px 16px; + } + + .features__title { + font-size: 2rem; + line-height: 121%; + } + + .features__description { + font-size: 0.8125rem; + max-width: 36ch; + } + + .work { + padding: 80px 16px; + } + + .work__title { + font-size: 2rem; + } + + .work__image { + height: 462px; + object-fit: cover; + object-position: top; + } + + .work__icon { + padding: 14px; + } + + .work__sub-title { + font-size: 1.125rem; + letter-spacing: -2%; + } + + .work__description { + font-size: 0.875rem; + font-weight: 500; + } + + .testimonials__title { + font-size: 2.5rem; + } + + .card__qoute { + font-size: 0.875rem; + } + + .faq__title { + font-size: 2.5rem; + } + + .faq__description { + font-weight: 500; + } + + .accordion__question { + font-size: 1rem; + } + + .accordion__answer { + font-size: 0.875rem; + font-weight: 500; + } + + .cta__title { + font-size: 2rem; + } + + .cta__description { + font-size: 0.875rem; + font-weight: 500; + } +} + +@media (max-width: 768px) { + .hero__badge { + font-size: 0.875rem; + } + + .hero__title { + font-size: 2.4rem; + max-width: 16ch; + } + + .hero__description { + font-size: 0.9375rem; + max-width: 50ch; + } + + .features { + padding: 80px 16px; + } + + .features__wrapper { + flex-direction: column; + gap: 48px; + } + + .features__content { + width: 100%; + } + + .features__title { + font-size: 2rem; + line-height: 121%; + } + + .features__description { + font-size: 0.8125rem; + max-width: 36ch; + } + + .features__thumbnail { + width: 100%; + } + + .cards { + flex-direction: column; + align-items: center; + } + + .card { + max-width: fit-content; + } + + .faq__wrapper { + flex-direction: column; + gap: 48px; + } + + .cta { + padding: 80px 16px; + } + + .cta__wrapper { + flex-direction: column; + gap: 72px; + } + + .cta__title { + font-size: 2.5rem; + } + + .cta__form { + flex-direction: column; + } +} + +@media (max-width: 640px) { + .work__body { + flex-direction: column; + gap: 32px; + } + + .work__thumbnail { + width: 100%; + } + + .work__item { + flex-direction: column; + align-items: flex-start; + gap: 20px; + } +} + +@media (max-width: 475px) { + .hero { + padding-bottom: 50px; + } + + .hero__badge { + font-size: 0.75rem; + } + + .hero__title { + font-size: 2rem; + } + + .hero__description { + font-size: 0.875rem; + max-width: 40ch; + } + + .hero__buttons { + flex-direction: column; + align-items: initial; + } + + .hero__large-image { + display: none; + } + + .hero__small-image { + display: block; + } + + .testimonials { + padding: 48px 24px; + } + + .testimonials__title { + text-align: left; + font-size: 2rem; + max-width: 12ch; + margin-inline: 0; + } + + .testimonials__description { + text-align: left; + font-size: 0.875rem; + font-weight: 500; + } + + .cards { + padding-block: 44px; + } + + .card__qoute { + line-height: 150%; + max-width: 29ch; + } + + .author__image { + width: 32px; + height: 32px; + } + + .faq { + padding: 80px 16px; + } + + .faq__title { + font-size: 2rem; + } + + .faq__description { + font-size: 0.875rem; + } + + .faq__btn { + flex: 1; + } + + .accordion { + padding: 20px; + } + + .accordion__question { + font-size: 1rem; + max-width: 24ch; + } + + .accordion__icon { + width: 15px; + height: 15px; + } + + .accordion__answer { + font-size: 0.875rem; + } + + .cta__title { + font-size: 2rem; + } +} diff --git a/styles/utilis.css b/styles/utilis.css new file mode 100644 index 0000000..c06cadd --- /dev/null +++ b/styles/utilis.css @@ -0,0 +1,65 @@ +/* 2xl */ +/* @media (max-width: 1440px) {} */ + +/* xl */ +/* @media (max-width: 1280px) {} */ + +/* lg */ +/* @media (max-width: 1024px) {} */ + +/* md */ +/* @media (max-width: 768px) {} */ + +/* sm */ +/* @media (max-width: 640px) {} */ + +/* xs */ +/* @media (max-width: 475px) {} */ + +.container { + max-width: 1440px; + margin-inline: auto; + padding-inline: 0.5rem; +} + +/* 2xl */ +@media (max-width: 1440px) { + .container { + max-width: 1280px; + } +} + +/* xl */ +@media (max-width: 1280px) { + .container { + max-width: 1024px; + } +} + +/* lg */ +@media (max-width: 1024px) { + .container { + max-width: 768px; + } +} + +/* md */ +@media (max-width: 768px) { + .container { + max-width: 640px; + } +} + +/* sm */ +@media (max-width: 640px) { + .container { + max-width: 475px; + } +} + +/* xs */ +@media (max-width: 475px) { + .container { + width: 100%; + } +}