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

integrations #1

Merged
naianfelix merged 13 commits from integrations into main 2022-10-12 22:25:23 +00:00
Conversation 0 Commits 13 Files Changed 22 +86 -9
5 changed files with 86 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dd0207bc1a - Show all commits

BIN
assets/image/middle-banner1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
assets/image/middle-banner2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
assets/image/middle-banner3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

63
assets/styles/main.css
View File

@ -97,6 +97,30 @@ body {
max-width: 300px;
}
.middle-banner {
display: flex;
margin-top: 80px;
background: #E0E0E0;
justify-content: center;
padding: 0 72px;
}
.middle-banner-image-wrapper {
display: flex;
gap: 40px;
justify-content: center;
position: relative;
bottom: -62px;
}
.middle-banner-image img {
max-width: 566px;
width: 100%;
}
@media screen and (max-width: 414px) {
.main-banner {
@ -133,7 +157,44 @@ body {
.top-cards {
grid-template-columns: 1fr;
padding: 0 32px;
}
}
.middle-banner {
padding: 0 23px;
}
.middle-banner-image-wrapper {
display: grid;
grid-area: auto;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"b a"
"c c";
column-gap: 14px;
row-gap: 24px;
}
.middle-banner-image img {
max-width: unset;
}
.middle-banner-image.a {
grid-area: a;
width: 100%;
}
.middle-banner-image.b {
grid-area: b;
width: 100%;
}
.middle-banner-image.c {
grid-area: c;
width: 100%;
}
}
@media screen and (max-width: 290px) {

32
index.html
View File

@ -22,7 +22,7 @@
<main>
<div>
<img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner Principal">
<img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner exibindo imagem com códigos de programação">
</div>
<section class="top-infocard">
@ -37,32 +37,48 @@
</div>
<div class="top-infocard-image" >
<img src="assets/image/top-inforcard-image.png" alt="Banner do Infocard do Topo">
<img src="assets/image/top-inforcard-image.png" alt="Figura representando conexão entre computadores">
</div>
</section>
<section class="top-cards">
<div class="top-cards">
<figure class="top-card">
<img class="top-card-image" src="assets/image/top-cards-image01.svg" alt="">
<img class="top-card-image" src="assets/image/top-cards-image01.svg" alt="Figura representando uma loja">
<figcaption class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="top-card">
<img class="top-card-image" src="assets/image/top-cards-image02.svg" alt="">
<img class="top-card-image" src="assets/image/top-cards-image02.svg" alt="Figura representando uma sacola de compras">
<figcaption class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="top-card">
<img class="top-card-image" src="assets/image/top-cards-image03.svg" alt="">
<img class="top-card-image" src="assets/image/top-cards-image03.svg" alt="Figura representando uma mão com uma moeda acima">
<figcaption class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figcaption>
</figure>
</section>
</div>
<div class="middle-banner">
<div class="middle-banner-image-wrapper">
<div class="middle-banner-image a" >
<img src="assets/image/middle-banner1.png" alt="Imagem de um Laptop">
</div>
<div class="middle-banner-image b">
<img src="assets/image/middle-banner2.png" alt="Imagem de um Laptop">
</div>
<div class="middle-banner-image c">
<img src="assets/image/middle-banner3.png" alt="Imagem de um Laptop">
</div>
</div>
</div>
</main>
</body>
</html>