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:
parent
4ee0eb4f7a
commit
c18a1de615
BIN
assets/banner/banne-footer-mobile.png
Normal file
BIN
assets/banner/banne-footer-mobile.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 246 KiB |
30
index.html
30
index.html
@ -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,7 +132,28 @@
|
|||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
<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>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user