diff --git a/src/components/main/components/main-form.module.scss b/src/components/main/components/main-form.module.scss index cb725d8..e573d98 100644 --- a/src/components/main/components/main-form.module.scss +++ b/src/components/main/components/main-form.module.scss @@ -4,6 +4,10 @@ width: 100%; height: 650px; + @media screen and (min-width: 2500px) { + height: 900px; + } + .main-form { width: 100%; height: 600px; @@ -23,6 +27,11 @@ margin-left: 15px; margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } input { @@ -31,6 +40,23 @@ border-radius: 25px; margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + input::placeholder { + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: variables.$color-grey6; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } .form-feedback { @@ -41,6 +67,13 @@ font-size: 12px; line-height: 14px; color: variables.$color-red; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + + bottom: 80px; + } } } @@ -49,9 +82,19 @@ align-items: center; justify-content: center; margin-bottom: 12px; + margin-top: 12px; + + label { + display: flex; + } input { margin-left: 4.28px; + + @media screen and (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + } } .main-form-dot, @@ -59,6 +102,11 @@ font-weight: 400; font-size: 14px; line-height: 16px; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } .main-form-dot { @@ -72,13 +120,18 @@ .form-feedback { position: absolute; - // right: 100px; - // bottom: 0px; font-weight: 400; font-size: 12px; line-height: 14px; color: variables.$color-red; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + + right: 15%; + } + @media screen and (max-width: 360px) { display: flex; } @@ -86,6 +139,7 @@ } .main-form-button { + font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; @@ -99,6 +153,11 @@ background: variables.$color-black; border-radius: 25px; + @media screen and (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + } + @media screen and (max-width: 360px) { margin-top: 4px; } diff --git a/src/components/newsletter.module.scss b/src/components/newsletter.module.scss index 54368c2..2fbb439 100644 --- a/src/components/newsletter.module.scss +++ b/src/components/newsletter.module.scss @@ -79,6 +79,9 @@ @media screen and (min-width: 2500px) { min-width: 668px; + + font-size: 28px; + line-height: 33px; } @media screen and (max-width: 1024px) { @@ -106,6 +109,13 @@ font-size: 12px; line-height: 14px; color: variables.$color-red; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + + right: -95px; + } } } diff --git a/src/variables.module.scss b/src/variables.module.scss index b5018c4..4b5354a 100644 --- a/src/variables.module.scss +++ b/src/variables.module.scss @@ -18,6 +18,7 @@ $color-grey2: #e5e5e5; $color-grey3: #7d7d7d; $color-grey4: #f2f2f2; $color-grey5: #c6c6c6; +$color-grey6: #b9b7b7; $color-red: #ff0000;