anacarolinaduartecavalcante/challenge-landing-page-Ana-Carolina-Duarte-Cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adicionando cards com imagem de macbook

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-10-09 10:44:28 -03:00
parent b880060f9f
commit 5c4e722320
2 changed files with 106 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -62,6 +62,26 @@
</div> </div>
</div> </div>
</div> </div>
<div class="cards-macbook">
<div class="cards-macbook-container">
<div class="first-card-macbook">
<figure>
<img src="./assets/imgs/card-1.png" alt="imagem de frente de um macbook">
</figure>
</div>
<div class="second-card-macbook">
<figure>
<img src="./assets/imgs/card-2.png" alt="imagem vista de cima de um macbook ">
</figure>
</div>
<div class="third-card-macbook">
<figure>
<img src="./assets/imgs/card-3.png" alt="imagem vista de perto e de lado de um macbook">
</figure>
</div>
</div>
</div>
</main> </main>
</body> </body>
</html> </html>

89
styles/main.css
View File

@ -73,7 +73,7 @@
width: 100%; width: 100%;
} }
.first-card figure, .second-card figure, .three-card figure{ .first-card figure, .second-card figure, .three-card figure {
width: 100%; width: 100%;
max-width: 350px; max-width: 350px;
height: 287.68px; height: 287.68px;
@ -92,12 +92,40 @@
width: 100%; width: 100%;
height: auto; height: auto;
text-align: center; text-align: center;
} }
/* cards com imagem de macbook */
.cards-macbook {
width: 100%;
height: 530px;
background: #E0E0E0;
}
.cards-macbook-container {
max-width: 1776px;
width: 100%;
height: 530px;
display: grid;
grid-template-areas:
"A B C";
justify-content: center;
align-items: center;
gap: 39px;
position: relative;
margin: auto;
top: 62px;
padding-left: 72px;
padding-right: 72px;
padding-bottom: 0;
padding-top: 62px;
}
@media screen and (max-width: 1024px) { .first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
max-width: 566px;
width: 100%;
}
@media screen and (max-width: 1025px) {
.background-main figure img { .background-main figure img {
height: 100%; height: 100%;
min-height: 598px; min-height: 598px;
@ -147,6 +175,61 @@
gap: 24px; gap: 24px;
} }
.cards-macbook {
grid-gap: 10px;
justify-items: center;
align-items: center;
width: 100%;
height: 574px;
margin: auto;
position: relative;
}
.cards-macbook-container {
display: grid;
grid-auto-flow: column;
grid-template-areas:
"A B"
"C C";
column-gap: 14px;
row-gap: 24px;
justify-items: center;
align-items: center;
margin: auto;
position: relative;
padding: 0 23px;
}
.first-card-macbook {
grid-area: A;
max-width: 177px;
height: auto;
}
.first-card-macbook figure img {
width: 100%;
}
.second-card-macbook {
grid-area: B;
max-width: 177px;
height: auto;
}
.second-card-macbook figure img {
width: 100%;
}
.third-card-macbook {
grid-area: C;
max-width: 368px;
height: auto;
}
.third-card-macbook figure img {
width: 100%;
}
} }
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {