wellingtonCarlos/challenge-landing-page
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mobile) primeiro commit da parte responsiva

Browse Source 
refactor(mudança de class) estava com problema em dois grupos com mesma class linha (41 e 85) não conseguia dar o flex-direction:column;
This commit is contained in:
wellington carlos 2022-10-12 16:42:31 -03:00
parent 03f6c89901
commit 5df2c7c7fe
3 changed files with 85 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
imagens/notebookresponsivo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

7
index.html
View File

@ -15,13 +15,16 @@
<figure class="logo">
<a href="/">
<img class="m3" src="imagens/Logo-M3Academy 1.svg" alt="Logo-M3Academy" width="100%">
</a>
</figure>
</header>
<main>
<figure>
<img src="imagens/Rectangle 9 (6).png" alt="imagem de computador" width="100%">
<img class="img-header" src="imagens/Rectangle 9 (6).png" alt="imagem de computador" width="100%">
<img class="img-responsivo" src="imagens/notebookresponsivo.png" alt="imagem notebook" width="100%">
</figure>
<div class="texto1">
<h3>Lorem ipsum</h3>
@ -79,7 +82,7 @@
</div>
<section class="card-compra">
<section class="card-compra2">
<div class="cards">
<img src="imagens/dinheiro.png" alt="imagem de dinheiro">

79
style.css
View File

@ -88,6 +88,19 @@ h3{
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;
@ -178,4 +191,70 @@ h3{
.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;
}
}