feat: cria a regiao do botton da pagina, responsiva para mobile e desktop, antes do footer.

criação seguindo o layout, qu eno mobile o texto com a imagem troca de posição e a imagem troca de estilo
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-10-13 09:25:33 -03:00
parent 4ee0eb4f7a
commit c18a1de615
3 changed files with 86 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

View File

@ -97,8 +97,7 @@
</div> </div>
</section> </section>
</div> </div>
<!-- REGIAO ABAIXO DO BANNER MOSAICO --> <!-- REGIAO ABAIXO DO BANNER MOSAICO(CONTAINER CARD QUADRUPLO) -->
<!-- CONTAINER CARD QUADRUPLO-->
<div class="container-cards container-infocard"> <div class="container-cards container-infocard">
<div class="card-1"> <div class="card-1">
<figure> <figure>
@ -133,6 +132,27 @@
</figure> </figure>
</div> </div>
</div> </div>
<div class="bottom-flex">
<section class="bottom-text">
<h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
<p class="bottom-paraphase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</section>
<figure>
<img src="assets/banner/banner-footer.png"
alt="imagem de um oculos. de frente para uma tela de computador."
class="botton-img-desktop"></img>
</figure>
<figure>
<img src="assets/banner/banne-footer-mobile.png"
alt="imagem de um oculos. de frente para uma tela de computador."
class="botton-img-mobile"></img>
</figure>
</div>
</main> </main>
</body> </body>

View File

@ -26,6 +26,10 @@ header {
background-color: var(--black); background-color: var(--black);
} }
img {
display: block;
}
.header-logo { .header-logo {
display: block; display: block;
} }
@ -35,7 +39,6 @@ header {
.banner-img { .banner-img {
width: 100%; width: 100%;
display: block;
} }
.banner-img-mobile { .banner-img-mobile {
@ -192,16 +195,48 @@ header {
display: block; display: block;
} }
/* AREA BOTTON, ANTES DO FOOTER */
.bottom-flex,
.bottom-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bottom-subtitle {
width: 100%;
max-width: 22%;
font-weight: 600;
font-size: 32px;
margin: 0 40% 5px;
}
.bottom-paraphase {
width: 100%;
max-width: 28%;
margin-bottom: 50px;
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.botton-img-mobile {
display: none;
}
/* Medias Queries*/ /* Medias Queries*/
@media screen and (min-width:2500px) { @media screen and (min-width:2500px) {
.container-cards { .container-cards {
padding: 6% 30% 4%; padding: 6% 30% 4%;
} }
.container-infocard {
padding: 130px 72px;
}
} }
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
@ -313,9 +348,30 @@ header {
min-height: 90%; min-height: 90%;
} }
/* AREA BOTTON, ANTES DO FOOTER */
.botton-img-desktop {
display: none;
} }
.botton-img-mobile {
display: block;
width: 100%;
}
.bottom-paraphase{
max-width: 84%;
}
.bottom-subtitle{
max-width: 76%;
margin: 50px 50px 10px;
font-size: 24px;
line-height: 30px;
}
.bottom-flex{
flex-direction: column-reverse;
}
}