practice-time-landing-page-.../styles.css

342 lines
5.4 KiB
CSS
Raw Permalink Normal View History

2022-10-07 19:49:46 +00:00
* {
box-sizing: border-box;
margin: 0;
padding: 0;
2022-10-08 04:27:10 +00:00
2022-10-07 19:49:46 +00:00
}
body{
font-family: 'Inter', sans-serif;
2022-10-08 04:27:10 +00:00
color: #000000;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.header{
2022-10-07 19:49:46 +00:00
background-color: #000000;
width: 100%;
text-align: center;
2022-10-08 04:27:10 +00:00
padding: 2vmin;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.header img{
width: 8.6vmin;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.top-banner-desktop,
.middle-banner-desktop,
.top-banner-mobile,
.middle-banner-mobile{
2022-10-07 19:49:46 +00:00
display: block;
2022-10-08 04:27:10 +00:00
width: 100%;
2022-10-07 19:49:46 +00:00
}
.top-desc{
2022-10-08 04:27:10 +00:00
display: flex;
align-items:center;
2022-10-07 19:49:46 +00:00
justify-content: center;
2022-10-08 04:27:10 +00:00
width: 100%;
margin: 8vh 0;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.top-texts{
2022-10-07 19:49:46 +00:00
2022-10-08 04:27:10 +00:00
margin-left:10vmin;
}
.top-texts h2{
font-size: 2.8vmin;
2022-10-07 19:49:46 +00:00
font-weight: 400;
}
2022-10-08 04:27:10 +00:00
.top-texts h1{
font-size: 3vw;
2022-10-07 19:49:46 +00:00
font-weight: 500;
2022-10-08 04:27:10 +00:00
text-transform: uppercase;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.top-texts p{
2022-10-07 19:49:46 +00:00
margin-top: 24px;
2022-10-08 04:27:10 +00:00
margin-right: 15.5vmin;
font-weight: 400;
font-size: 1.75vh;
}
.top-desc img{
width: 17vw;
margin-right: 8vw;
2022-10-07 19:49:46 +00:00
}
.cards{
display: grid;
grid-template-columns: repeat(3, max-content);
background:#F0F0F0;
justify-content: center;
2022-10-08 04:27:10 +00:00
padding:7.3vh 0;
gap: 2vmin;
2022-10-07 19:49:46 +00:00
width: 100%;
}
.cards div{
display: flex;
flex-direction: column;
align-items: center;
background: white;
2022-10-08 04:27:10 +00:00
padding: 3.5vmin 3.4vmin 2.7vmin;
width: 18.6vw;
2022-10-07 19:49:46 +00:00
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.cards div img{
display: block;
margin-bottom: 26px;
2022-10-08 04:27:10 +00:00
width: 11vh;
height: auto;
2022-10-07 19:49:46 +00:00
}
.cards div p{
text-align: center;
2022-10-08 04:27:10 +00:00
font-size: 1.75vh;
2022-10-07 19:49:46 +00:00
}
.bottom-cards{
2022-10-08 04:27:10 +00:00
margin-top: 13.5vh;
2022-10-07 19:49:46 +00:00
background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
2022-10-08 04:27:10 +00:00
padding-bottom: 8vmin;
2022-10-07 19:49:46 +00:00
}
.bottom-cards-wrapper{
position: relative;
2022-10-08 04:27:10 +00:00
display: grid;
grid-template-columns: repeat(2,max-content);
justify-content: center;
gap: 2vmin;
top: -4vmin;
2022-10-07 19:49:46 +00:00
}
.bottom-card{
display: flex;
2022-10-08 04:27:10 +00:00
padding: 4vmin 4vmin 5vmin;
2022-10-07 19:49:46 +00:00
flex-direction: column;
align-items: center;
background: white;
2022-10-08 04:27:10 +00:00
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
2022-10-07 19:49:46 +00:00
}
.bottom-card img{
display: block;
2022-10-08 04:27:10 +00:00
width: 5.3vw;
2022-10-07 19:49:46 +00:00
margin-bottom: 14px;
}
.bottom-card p{
2022-10-08 04:27:10 +00:00
max-width: 20vw;
2022-10-07 19:49:46 +00:00
text-align: center;
2022-10-08 04:27:10 +00:00
font-size: 1.75vh;
2022-10-07 19:49:46 +00:00
}
2022-10-07 20:33:16 +00:00
.bottom-banner{
display:flex;
justify-content: center;
align-items: center;
2022-10-08 04:27:10 +00:00
padding: 14vmin 0 18vmin;
2022-10-07 20:33:16 +00:00
}
2022-10-07 19:49:46 +00:00
2022-10-07 20:33:16 +00:00
.bottom-banner img{
2022-10-08 04:27:10 +00:00
width: 60vmin;
margin-right: 4vmin;
2022-10-07 20:33:16 +00:00
}
.bottom-banner-text{
max-width: 550px;
}
.bottom-banner-text p{
font-size: 16px;
2022-10-08 04:27:10 +00:00
font-size: 1.75vh;
2022-10-07 20:33:16 +00:00
}
.bottom-banner-text h2{
margin-bottom: 18px;
2022-10-08 04:27:10 +00:00
font-size: 2.8vmin;
2022-10-07 20:33:16 +00:00
font: 600;
}
2022-10-07 20:51:31 +00:00
.footer{
display: flex;
flex-direction: column;
align-items: center;
background: #000000;
2022-10-08 04:27:10 +00:00
padding:3.5vmin;
2022-10-07 20:51:31 +00:00
}
.footer-desc{
text-transform: uppercase;
list-style: 12px;
2022-10-08 04:27:10 +00:00
font-size: 1vmin;
2022-10-07 20:51:31 +00:00
color: #bdbdbd;
}
.footer-icons{
display: flex;
list-style: none;
2022-10-08 04:27:10 +00:00
margin-bottom: 1.6vmin;
2022-10-07 20:51:31 +00:00
}
.footer-icons li{
2022-10-08 04:27:10 +00:00
margin: 0 0.8vmin;
}
.footer-icons img{
width: 2.5vh;
2022-10-07 20:51:31 +00:00
}
2022-10-08 04:27:10 +00:00
2022-10-07 19:49:46 +00:00
@media screen and (max-width: 414px) {
2022-10-08 04:27:10 +00:00
.top-banner-desktop,
2022-10-07 19:49:46 +00:00
.middle-banner-desktop{
display:none;
}
}
2022-10-08 04:27:10 +00:00
@media screen and (min-width: 415px){
.top-banner-mobile,
.middle-banner-mobile{
display: none;
}
}
2022-10-07 19:49:46 +00:00
@media screen and (max-width: 768px){
.cards{
2022-10-08 04:27:10 +00:00
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cards div{
margin-top: 15px;
width: 80%;
height: 250px;
}
.cards div p{
margin: 0 2vmin;
}
.bottom-card p{
max-width: 368px;
text-align: center;
line-height: 24px;
font-size: 16px;
}
.bottom-card img{
margin-top:20px;
width: 105px;
2022-10-07 19:49:46 +00:00
}
.bottom-cards{
margin-top: 114px;
padding: 0 26px;
}
.bottom-cards-wrapper{
grid-template-columns: 1fr;
2022-10-08 04:27:10 +00:00
top: -60px;
2022-10-07 19:49:46 +00:00
gap:16px;
}
2022-10-07 20:51:31 +00:00
.footer{
padding-bottom: 26px;
}
.footer-desc{
2022-10-08 04:27:10 +00:00
font-size: 10px;
2022-10-07 20:51:31 +00:00
max-width: 280px;
text-align: center;
}
2022-10-07 19:49:46 +00:00
}
@media screen and (max-width: 992px) {
.top-desc{
flex-direction: column;
}
2022-10-08 04:27:10 +00:00
.top-texts{
margin: 0 5vmin;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.top-texts h2{
margin:0;
font-size: 20px;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.top-texts h1{
font-size: 28px;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.top-texts p{
margin:0;
font-size: 16px;
margin-bottom:76px;
2022-10-07 19:49:46 +00:00
}
2022-10-08 04:27:10 +00:00
.top-desc img{
margin:0;
width: 239px;
}
2022-10-07 20:33:16 +00:00
.bottom-banner{
flex-direction: column;
padding: 80px 0 136px;
}
.bottom-banner-text{
padding: 0 26px;
}
.bottom-banner img{
width: 100%;
max-width: 596px;
margin: 0 0 50px;
}
.bottom-banner-text h2{
font-size: 24px;
}
2022-10-08 04:27:10 +00:00
.footer{
padding-bottom: 26px;
}
.footer-desc{
max-width: 280px;
text-align: center;
}
.footer-icons{
display: flex;
list-style: none;
margin: 38px 00 26px 0;
}
.footer-icons li{
margin: 0 8px;
}
2022-10-07 20:33:16 +00:00
2022-10-07 19:49:46 +00:00
}
@media screen and (min-width: 993px) and (max-width: 1280px){
.top-desc p{
max-width: 520px;
margin-right: 70px;
}
}
@media screen and (min-width: 769px) and (max-width: 992px){
.bottom-card p{
max-width: 280px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px){
.cards{
2022-10-08 04:27:10 +00:00
display: grid;
grid-template-columns: repeat(2, max-content);
background:#F0F0F0;
justify-content: center;
padding:74px 0;
gap: 20px;
width: 100%;
}
.cards div img{
display: block;
margin-bottom: 26px;
}
.cards div p{
max-width: 300px;
text-align: center;
line-height: 24px;
font-size: 16px;
}
2022-10-07 19:49:46 +00:00
2022-10-07 20:33:16 +00:00
.bottom-banner img{
max-width: 480px;
}
.bottom-banner-text{
max-width: 400px;
}
2022-10-08 04:27:10 +00:00
.top-texts{
margin-right: 0;
2022-10-07 19:49:46 +00:00
}
}