feat: cria conteiner de banner mosaico para versao desktop e mobile
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:
parent
a9866b611f
commit
ca81dc340b
29
index.html
29
index.html
@ -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>
|
||||
|
||||
|
@ -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) {
|
||||
@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 */
|
||||
|
||||
@ -237,4 +263,36 @@ main {
|
||||
|
||||
}
|
||||
|
||||
/*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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user