practice-time-landing-page-.../css/layout/main.css

275 lines
5.0 KiB
CSS
Raw Normal View History

2022-10-07 18:27:29 +00:00
.main_banner_desktop, .main_banner_mobile {
2022-10-07 17:27:44 +00:00
width: 100%;
height: auto;
2022-10-07 18:27:29 +00:00
position: relative;
}
.first-content-information {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 80px;
2022-10-07 19:30:14 +00:00
margin-bottom: 95px;
2022-10-07 18:27:29 +00:00
}
.three-computers {
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 315px;
2022-10-07 18:27:29 +00:00
margin-left: 124px;
}
.first-content-text {
2022-10-08 10:29:38 +00:00
width: 100%;
2022-10-07 18:27:29 +00:00
max-width: 766px;
2022-10-07 17:27:44 +00:00
}
2022-10-07 19:30:14 +00:00
.content-card-container {
max-width: 1092px;
2022-10-08 10:29:38 +00:00
width: 100%;
2022-10-07 19:30:14 +00:00
height: 435px;
2022-10-08 11:18:59 +00:00
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
2022-10-07 19:30:14 +00:00
align-items: center;
2022-10-08 11:18:59 +00:00
gap: 20px;
2022-10-07 19:30:14 +00:00
position: relative;
margin: auto;
}
.first-content-card {
width: 100%;
height: 435px;
background: #F0F0F0;
}
.first-card, .second-card, .three-card {
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 350.33px;
height: 100%;
max-height: 287.95px;
2022-10-07 19:30:14 +00:00
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
2022-10-08 10:29:38 +00:00
margin: 0px auto;
2022-10-08 11:18:59 +00:00
padding: 27px;
2022-10-07 19:30:14 +00:00
}
.first-card p, .second-card p, .three-card p {
2022-10-08 11:18:59 +00:00
max-width: 299px;
width: 100%;
height: 100%;
2022-10-07 19:30:14 +00:00
text-align: center;
2022-10-08 11:18:59 +00:00
margin-top: 14px;
2022-10-07 19:30:14 +00:00
}
.banner-desktop, .banner-mobile {
width: 100%;
height: auto;
position: relative;
}
2022-10-07 20:37:57 +00:00
.grid-container {
width: 100%;
height: 750px;
background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
top: 142px;
position: relative;
}
.grid-container-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 884px;
justify-content: space-around;
margin: auto;
top: -60px;
position: relative;
}
.grid-one, .grid-two, .grid-three, .grid-four {
width: 432px;
height: 332px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
}
.grid-one p, .grid-two p, .grid-three p, .grid-four p {
width: 367px;
text-align: center;
margin-top: 14px;
}
.content-text-final {
display: flex;
justify-content: center;
align-items: center;
position: relative;
max-width: 1186px;
2022-10-08 10:29:38 +00:00
width: 100%;
height: 100%;
max-height: 596px;
margin: auto;
top: 242px;
}
.content-text-final img {
margin-right: 40px;
}
.content-text-final h3 {
font-weight: 600;
font-size: 32px;
line-height: 20px;
color: #000000;
margin-bottom: 18px;
}
.content-text-final p {
max-width: 550px;
2022-10-08 10:29:38 +00:00
width: 100%;
height: 120px;
line-height: 24px;
}
2022-10-08 10:29:38 +00:00
@media screen and (max-width: 1024px) {
2022-10-07 17:27:44 +00:00
.main_banner_desktop {
display: none;
}
2022-10-07 18:27:29 +00:00
2022-10-08 10:29:38 +00:00
.main_banner_mobile {
width: 100%;
}
2022-10-07 18:27:29 +00:00
.first-content-information {
flex-direction: column;
margin-top: 84px;
padding-left: 31px;
padding-right: 29px;
2022-10-07 19:30:14 +00:00
margin-bottom: 158px;
2022-10-07 18:27:29 +00:00
}
.three-computers {
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 239px;
2022-10-07 19:30:14 +00:00
margin-top: 137px;
2022-10-07 18:27:29 +00:00
margin-left: 0;
2022-10-07 19:30:14 +00:00
position: relative;
2022-10-07 18:27:29 +00:00
}
.first-content-text {
max-width: 357px;
2022-10-07 19:30:14 +00:00
}
.first-content-card {
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 1092px;
2022-10-07 19:30:14 +00:00
height: 966px;
display: flex;
justify-content: center;
align-items: center;
}
.content-card-container {
2022-10-08 10:29:38 +00:00
width: 100%;
2022-10-07 19:30:14 +00:00
height: 894px;
2022-10-08 11:18:59 +00:00
grid-template-columns: repeat(1, 1fr);
2022-10-07 19:30:14 +00:00
justify-content: space-around;
2022-10-08 11:18:59 +00:00
margin: 0 30px;
2022-10-07 18:27:29 +00:00
}
.banner-desktop {
display: none;
}
2022-10-07 20:37:57 +00:00
.grid-container-content {
grid-template-columns: repeat(1, 1fr);
gap: 20px;
2022-10-08 10:29:38 +00:00
margin: 0 23px;
2022-10-07 20:37:57 +00:00
}
.grid-one, .grid-two, .grid-three, .grid-four {
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 368px;
height: 100%;
2022-10-08 11:18:59 +00:00
min-height: 332px;
2022-10-08 10:29:38 +00:00
padding: 32px;
2022-10-08 11:18:59 +00:00
2022-10-07 20:37:57 +00:00
}
.grid-one p, .grid-two p, .grid-three p, .grid-four p {
font-weight: 400;
font-size: 14px;
line-height: 24px;
text-align: center;
2022-10-07 20:37:57 +00:00
color: #000000;
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 367px;
height: 100%;
2022-10-08 11:18:59 +00:00
margin-top: 14px;
2022-10-07 20:37:57 +00:00
}
.grid-container {
2022-10-08 10:29:38 +00:00
width: 100%;
2022-10-08 11:18:59 +00:00
height: 100%;
min-height: 1394px;
2022-10-07 20:37:57 +00:00
}
.content-text-final {
flex-direction: column;
}
2022-10-08 11:18:59 +00:00
.text-final-container {
padding: 0 14px;
}
.content-text-final img {
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 414px;
margin-right: 0;
margin-bottom: 51px;
}
.content-text-final h3 {
font-weight: 600;
font-size: 24px;
line-height: 20px;
}
.content-text-final p {
2022-10-08 10:29:38 +00:00
width: 100%;
max-width: 350px;
height: 192px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
2022-10-07 20:37:57 +00:00
2022-10-07 17:27:44 +00:00
}
2022-10-08 10:29:38 +00:00
@media screen and (min-width: 1024px) {
2022-10-07 17:27:44 +00:00
.main_banner_mobile {
display: none;
}
.banner-mobile {
display: none;
}
2022-10-07 17:27:44 +00:00
}