challenge-landing-page/style.css

321 lines
5.2 KiB
CSS

*{
margin: 0;
box-sizing: border-box;
}
.logo{
width: 100%;
height: 101px;
background: #000000;
display: flex;
justify-content: center;
align-items: center;
}
.texto1{
margin: 73px auto;
max-width: 766px;
height: auto;
width: 100%;
}
h3{
display:flex;
justify-content: center;
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
color: #000000;
font-family:inter;
}
.sub-titulo{
display: flex;
justify-content: center;
font-weight: 500;
font-size: 48px;
line-height: 58px;
text-transform: uppercase;
font-family:inter;
}
.paragrafo1{
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: justify;
margin-top: 28px;
}
.pcs{
display: flex;
justify-content: center;
margin-top: 84px;
}
.card-compra{
margin-top: 179px;
display: flex;
text-align: center;
justify-content: center;
margin: 0 auto;
width: 100%;
height: 287.68px;
gap: 21px;
}
.card{
padding-top: 36px;
margin-top: 179px;
width: 20%;
height:287.68px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.card-compra2{
margin-top: 179px;
display: flex;
text-align: center;
justify-content: center;
margin: 0 auto;
width: 100%;
height: 287.68px;
gap: 21px;
}
.cards{
padding-top: 36px;
margin-top: 129px;
width: 23%;
height:287.68px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.fundo-cinza{
width: 100%;
background: linear-gradient(to bottom, #E0E0E0 85%,white 15%);
}
.notebooks{
padding-top: 62px;
display: flex;
justify-content: space-around;
margin-top: 250px;
}
.artigo{
margin: 200px auto;
width: 36%;
height: 158px;
}
h4{
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
}
article p{
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.footer{
margin-top: 116px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 128px;
background: #000000;
}
.redes-sociais{
display: flex;
justify-content: center;
gap: 21px;
height: 52px;
flex-direction: column;
}
footer p{
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
}
footer .redes-sociais .centralizar{
margin: 0 auto;
}
.centralizar a{
padding:21px;
}
/* início do responsivo*/
@media (max-width:1024px){
.img-header{
display: none;
}
.texto1{
display: flex;
flex-direction: column;
margin: 73px auto;
height: auto;
width: 70%;
}
h3{
font-size: 140%;
}
.sub-titulo{
margin-top: -15px;
font-size: 180%;
}
.paragrafo1{
font-size: 100%;
margin-top: 5px;
}
.pcs img{
width: 86%;
max-width: 239px;
display: flex;
justify-content: center;
margin-top: 84px;
}
.card-compra{
margin-top: 90.62px;
display: flex;
flex-direction: column ;
width:90%;
height: 900px;
justify-content: center;
align-items: center;
}
.card{
margin-top: -10px ;
width: 88.6%;
height:287.95px;
max-width: 350px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.fundo-cinza{
width: 100%;
background: linear-gradient(to bottom, #E0E0E0 85%,white 15%);
max-width: 414px;
margin: -200px auto;
}
.notebooks{
padding-top: -250px;
display: flex;
align-items: center;
max-width:414px;
padding-top: 62px;
display: flex;
justify-content: space-around;
margin-top: 250px;
flex-wrap: wrap;
}
.fundopc1{
width: 47.7%;
height: 178px;
max-width: 177px;
}
.fundopc2{
width: 47.7%;
height: 178px;
max-width: 177px;
}
.fundopc3{
padding-top: 24px;
width: 368px;
height: 372px;
width: 93%;
}
.card-compra2{
flex-direction: column;
max-width: 368px;
width: 100%;
height: 1500px;
margin-top: 88px;
}
.cards{
width: 100%;
max-width: 368px;
margin-top: -5px;
}
}