diff --git a/src/pages/Landing/Landing.jsx b/src/pages/Landing/Landing.jsx index 278c89dd..16317bda 100644 --- a/src/pages/Landing/Landing.jsx +++ b/src/pages/Landing/Landing.jsx @@ -98,6 +98,9 @@ export const Landing = () => { Экосистема для диджитализации бизнеса

+ + войти в систему +

ITGuild

diff --git a/src/pages/Landing/landing.scss b/src/pages/Landing/landing.scss index 34bd975f..e3d71215 100644 --- a/src/pages/Landing/landing.scss +++ b/src/pages/Landing/landing.scss @@ -11,6 +11,7 @@ flex-direction: column; position: relative; height: 100%; + width: 100%; } &__head { @@ -248,6 +249,12 @@ margin-top: 75px; column-gap: 45px; + @media (max-width: 431px) { + margin-top: 217px; + justify-content: center; + flex-direction: column; + } + .info { &__title { font-weight: 900; @@ -257,6 +264,14 @@ line-height: 1; position: relative; + @media (max-width: 431px) { + font-weight: 900; + font-size: 42px; + line-height: 46.62px; + text-align: center; + z-index: 2; + } + .code { position: absolute; left: -260px; @@ -268,6 +283,16 @@ } } + &__signIn { + padding: 12px 30px 15px; + color: rgba(30, 30, 30, 1); + font-size: 13px; + background: rgba(167, 202, 96, 1); + font-weight: 400; + border-radius: 32px; + margin-top: 45px; + } + &__block { backdrop-filter: blur(8.699999809265137px); box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03); @@ -287,33 +312,65 @@ position: relative; z-index: 1; + @media (max-width: 431px) { + backdrop-filter: none; + box-shadow: none; + background: none; + border: none; + border-image-source: none; + // border-radius: none; + padding: 46px 40px 63px 40px; + text-align: center; + } + p { font-weight: 250; font-size: 14px; line-height: 137%; color: #4a4a4a; + @media (max-width: 431px) { + font-size: 17px; + line-height: 23.29px; + } + span { font-weight: 400; } } } } - @media (max-width: 431px) { - display: none; - } } &__background { position: absolute; right: -200px; top: -100px; + + @media (max-width: 431px) { + right: auto; + top: 100px; + display: flex; + justify-content: center; + } + h3 { font-family: "Geraspoheko"; color: rgba(255, 255, 255, 1); font-size: 343px; font-weight: 400; margin-bottom: 0; + + @media (max-width: 431px) { + font-size: 180px; + font-weight: 700; + z-index: 1; + background: linear-gradient(to bottom, #fffefe, #eeeeee); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: 2px; + } } .clue { width: 130px; @@ -321,6 +378,13 @@ top: 165px; position: absolute; right: 147px; + + @media (max-width: 431px) { + right: auto; + top: auto; + bottom: -150px; + left: -105px; + } } .code { @@ -328,6 +392,12 @@ width: 360px; height: 134px; right: -5px; + + @media (max-width: 431px) { + right: auto; + top: -30px; + left: -30px; + } } &:after { @@ -339,15 +409,11 @@ background: rgba(167, 202, 96, 0.8); right: 160px; bottom: -75px; - } - @media (max-width: 431px) { - right: 0px; - top: 0px; - - h3 { - font-size: 180px; - font-weight: 700; + @media (max-width: 431px) { + right: auto; + bottom: auto; + top: -25px; } } } @@ -358,12 +424,14 @@ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); @media (max-width: 431px) { - grid-template-columns: 50% 50%; - padding: 0 40px; - column-gap: 30px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + column-gap: 20px; row-gap: 19px; - align-items: center; - justify-items: center; + width: 100%; + margin: 0 0 86px 0; } } @@ -372,15 +440,17 @@ @media (max-width: 431px) { padding: 0; + width: 40%; div { display: flex; justify-content: center; flex-direction: column; align-items: center; - background-color: #4a4a4a; + background: linear-gradient(95.54deg, #ffffff 5.13%, #f1f1f1 97.48%); + border: 0.5px solid #ffffff; border-radius: 18px; - padding: 30px 10px 5px 10px; + padding: 10px; } } @@ -468,6 +538,7 @@ @media (max-width: 431px) { padding: 0; + width: 40%; } div { @@ -480,8 +551,12 @@ justify-content: space-between; @media (max-width: 431px) { - height: 262px; + height: 100%; padding: 0; + flex-direction: column; + justify-content: space-evenly; + border-radius: 18px; + border: 0.5px solid #ffffff; } p { @@ -490,6 +565,13 @@ font-size: 20px; line-height: 21.4px; max-width: 215px; + + @media (max-width: 431px) { + font-weight: 500; + font-size: 16px; + line-height: 17.12px; + text-align: center; + } } img {