diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index bb4848f..c5d21b1 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -495,3 +495,148 @@ footer { } } } + +//Newsletter +.Newsletter { + width: 100%; + height: 102.02px; + background: $white; + border-width: 1px 0px; + border-style: solid; + border-color: $black; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin: 0; + padding: 0; + @media (min-width: 2500px) { + height: 141.24px; + } + @media (max-width: 1025px) { + height: 180.01px; + } + &__Content { + width: 84.378%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; + @media (min-width: 2500px) { + width: 92.002%; + } + @media (max-width: 1025px) { + width: 96.875%; + } + @media (max-width: 376px) { + width: 91.484%; + // width: 91.284%; + } + &__Block { + width: 43.878%; + @media (min-width: 2500px) { + width: 40.075%; + } + @media (max-width: 1025px) { + width: 100%; + } + &__Message { + margin: 0 0 8px; + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $primary-200; + @media (min-width: 2500px) { + font-size: 36px; + line-height: 42px; + } + @media (max-width: 1025px) { + margin: 0 0 16px; + font-size: 14px; + line-height: 16px; + } + } + &__Register { + display: flex; + @media (max-width: 1025px) { + flex-direction: column; + } + & input { + padding: 12.06px 16px; + width: 64.57%; + background: $white; + border: 1px solid $primary-300; + border-radius: 4px; + margin-right: 8px; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $primary-600; + @media (min-width: 2500px) { + width: 68.766%; + font-size: 28px; + line-height: 33px; + } + @media (max-width: 1025px) { + margin-right: 0; + width: calc(100% - 34.2px); + border-radius: unset; + margin-bottom: 16px; + } + @media (max-width: 376px) { + width: auto; + } + &::placeholder { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $primary-600; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + } + & button { + padding: 14px 20px; + width: 26.59%; + height: 42px; + background: $black; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 4px; + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-align: center; + letter-spacing: 0.05em; + color: $white; + text-transform: uppercase; + @media (min-width: 2500px) { + width: 26.681%; + height: 59px; + font-size: 24px; + line-height: 28px; + } + @media (max-width: 1025px) { + width: 100%; + border-radius: unset; + font-size: 14px; + line-height: 16px; + border: none; + } + } + } + } + } +} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 603567c..f96d4cc 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,11 +1,14 @@ import styles from "./Footer.module.scss"; import { FooterBottom } from "./FooterBottom"; import { FooterTop } from "./FooterTop"; +import { Newsletter } from "./Newsletter"; const Footer = () => { return (