forked from M3-Academy/challenge-landing-page
feature/footer #1
@ -97,6 +97,68 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-banner {
|
||||
background: #E0E0E0;
|
||||
margin: 80px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.middle-banner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
gap: 40px;
|
||||
width: 100%;
|
||||
padding: 0 72px;
|
||||
bottom: -62px;
|
||||
}
|
||||
|
||||
.middle-banner-image img {
|
||||
width: 100%;
|
||||
max-width: 566px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:1024px) {
|
||||
.middle-banner-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"b a"
|
||||
"c c";
|
||||
row-gap: 24px;
|
||||
column-gap: 14px;
|
||||
padding: 0 24px;
|
||||
bottom: -32px;
|
||||
}
|
||||
|
||||
.middle-banner-image img {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.middle-banner-image.a {
|
||||
grid-area: a;
|
||||
}
|
||||
|
||||
.middle-banner-image.b {
|
||||
grid-area: b;
|
||||
}
|
||||
|
||||
.middle-banner-image.c {
|
||||
grid-area: c;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:992px) {
|
||||
.middle-banner {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1200px) {
|
||||
.top-cards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
|
||||
.top-infocard {
|
||||
@ -129,11 +191,10 @@ body {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0 32px ;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1200px) {
|
||||
.top-cards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
.middle-banner {
|
||||
padding: 32px 43px 32px 24x;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user