Adaptive main page
This commit is contained in:
parent
c079a2722b
commit
e9497902eb
@ -98,6 +98,9 @@ export const Landing = () => {
|
||||
<SVG className="code" src={codeBg} />
|
||||
<span>Экосистема</span> для диджитализации бизнеса
|
||||
</p>
|
||||
<Link className="info__signIn" to="/auth">
|
||||
войти в систему
|
||||
</Link>
|
||||
<div className="landing__background">
|
||||
<h3>ITGuild</h3>
|
||||
<SVG className="clue" src={clue} />
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user