challenge-landing-page-nico.../assets/styles.css

121 lines
1.7 KiB
CSS
Raw Normal View History

2022-10-10 12:54:37 +00:00
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #000000;
font-family: 'Inter', sans-serif;
}
.page__header {
2022-10-10 12:54:37 +00:00
display: flex;
justify-content: center;
background: #000000;
padding: 1.87rem 0;
}
.header__logo {
2022-10-10 12:54:37 +00:00
display: block;
}
.main__banner {
display: block;
width: 100%;
}
.top__text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 84px 30px;
gap: 72px;
}
.top__infocard-text {
width: 40%;
margin: 0 auto;
}
.top__infocard-subtitle {
text-transform: uppercase;
font-weight: 400;
font-size: 32px;
text-align: center;
}
.top__infocard-title,
.top__infocard-subtitle {
text-align: center;
}
.top__infocard-title {
margin-bottom: 24px;
text-transform: uppercase;
font-weight: 500;
font-size: 48px;
}
.top__infocard-description {
line-height: 24px;
font-size: 16px;
}
/* MEDIAS QUERIES */
@media screen and (max-width: 414px) {
.main__banner-desktop,
.middle__banner-desktop {
display: none;
}
}
@media screen and (min-width: 415px) {
.main__banner-mobile,
.middle__banner-mobile {
display: none;
}
}
@media screen and (max-width: 992px) {
.top__text {
flex-direction: column;
padding: 73px 30px 158px;
gap: 65px;
}
.top__infocard-text {
width: 100%;
margin-right: 0;
}
.top__infocard-subtitle {
font-size: 20px;
}
.top__infocard-title {
margin-bottom: 20px;
font-size: 28px;
}
.top__infocard-image {
width: 100%;
max-width: 240px;
}
.top__infocard-description {
text-align: center;
}
}