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

feat: cria conteiner de banner mosaico para versao desktop e mobile

Browse Source 
Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela.
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-10-13 06:25:24 -03:00
parent a9866b611f
commit ca81dc340b
2 changed files with 107 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -32,7 +32,7 @@
alt="Notebook aberto com codigos HTML e CSS.">
</figure>
</div>
<!-- CONTAINER ABAIXO DO BANNER -->
<!-- REGIAO ABAIXO DO BANNER PRINCIPAL-->
<div class="container-midle">
<section class="container-midle-flex">
<h2 class="container-midle-subtitle">Lorem ipsum</h2>
@ -73,8 +73,33 @@
</div>
</section>
</div>
<!-- REGIAO DO BANNER MOSAICO -->
<div class="wrapper-banner">
<div class="banner-mosaic">
<div class="mosaic-img1">
<figure>
<img class="mosaic-wrapper-img img1" src="assets/img/computer-img-1.png"
alt="Notebook, posicionado de frente. Aberto em cerca de 45 graus>">
</figure>
</div>
<div class="mosaic-img2">
<figure>
<img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png"
alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus>"
</figure>
</div>
<div class="mosaic-img3">
<figure>
<img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png"
alt="Notebook, posicionado de angulo lateal. Aberto em 60">
</div>
</figure>
</div>
</section>
</div>
<div style="width: 100%; height: 300px; ">
</div>
</main>
</body>

98
style/style.css
View File

@ -5,7 +5,6 @@
font-family: 'Inter', sans-serif;
}
/* variaveis de cores */
:root {
@ -16,7 +15,6 @@
--grey-footer: #BDBDBD;
}
/* HEADER DA PAGINA */
header {
@ -32,10 +30,6 @@ header {
display: block;
}
main {
background-color: var(--white);
}
/* BANNER DESKTOP */
@ -48,7 +42,6 @@ main {
display: none;
}
/* AREA ABAIXO DO BANNER */
.container-midle-flex {
@ -149,19 +142,55 @@ main {
}
/* Banner Mosaico */
.wrapper-banner {
width: 100%;
background-color: var(--grey);
display: flex;
justify-content: center;
align-items: center;
}
.banner-mosaic {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-template-areas: "mosaic-img1 mosaic-img2 mosaic-img3";
gap: 40px;
padding: 0 72px;
transform: translateY(60px);
z-index: 999;
}
.mosaic-img1 {
grid-area: mosaic-img1;
}
.mosaic-img2 {
grid-area: mosaic-img2;
}
.mosaic-img3 {
grid-area: mosaic-img3;
}
.mosaic-wrapper-img {
width: 100%;
display: block;
}
/* Medias Queries*/
@media (min-width:2500px) {
.container-cards{
@media screen and (min-width:2500px) {
.container-cards {
padding: 6% 30% 4%;
}
}
@media (max-width:1024px) {
@media screen and (max-width:1024px) {
/* BANNER MOBILE */
.banner-img-desktop {
@ -172,9 +201,6 @@ main {
display: block;
}
main {
background-color: var(--grey-footer);
}
/* AREA ABAIXO DO BANNER */
@ -227,14 +253,46 @@ main {
"card-2"
"card-3";
justify-content: center;
padding:90px 32px 80px;
padding: 90px 32px 80px;
}
.subtitle-card {
max-width: 72%;
margin: 0 auto;
text-align: center;
}
.subtitle-card {
max-width: 72%;
margin: 0 auto;
text-align: center;
}
/*REGIAO DO BANNER MOSAICO */
.banner-mosaic {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 2fr;
grid-template-areas:
"mosaic-img2 mosaic-img1"
"mosaic-img3 mosaic-img3";
gap: 24px 14px;
padding: 0 24px;
transform: translateY(32px);
}
.img1,
.img2 {
width: 100%;
height: 100%;
min-width: 50%;
min-height: 50%;
}
.img3 {
min-width: 90%;
min-height: 90%;
}
}