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

122 lines
1.8 KiB
CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
}
header {
display: flex;
justify-content: center;
padding: 28px 0;
background-color: #000;
}
.logo-header {
display: block;
}
.banner-principal {
width: 100%;
}
.container-infocard {
display: flex;
justify-content: center;
align-items: center;
padding: 80px 0 96px;
}
.infocard-text {
width: 47.875rem;
margin-right: 7.75rem;
}
.infocard-text h1 {
font-weight: 500;
font-size: 3rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.infocard-text h2 {
font-weight: 400;
font-size: 2em;
text-transform: uppercase;
}
.infocard-text p {
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
}
.banner-infocard {
width: 315px;
height: 315px;
display: block;
}
@media screen and (min-width:280px) and (max-width: 768px) {
.banner-principal-desktop {
display: none;
}
.container-infocard {
display: flex;
flex-direction: column;
align-items: center;
}
.infocard-text {
width: 100%;
max-width: 357px;
margin: 1.875rem;
}
.infocard-text h1 {
width: 100%;
max-width: 14.6875rem;
font-size: 1.75rem;
font-weight: 500;
}
.infocard-text h2 {
max-width: 14.6875rem;
font-size: 20px;
font-weight: 400;
}
.infocard-text p {
font-size: 1rem;
line-height: 1.5rem;
}
.banner-infocard {
height: 15rem;
width: 15rem;
margin: 68px 88px 157px;
}
}
@media (min-width:415px) {
.banner-principal-mobile {
display: none;
}
}
@media screen and (min-width:2500px) {
body {
background: red;
}
}