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

colocanndo o texto abaixo dos icones

Browse Source
This commit is contained in:
matheusjardimgarcia 2022-10-12 22:28:07 -03:00
parent 699f14fc3b
commit 8556f4a343
3 changed files with 67 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/style.css
View File

@ -66,9 +66,11 @@
.infoboxes-sub-wrapper{
width: 70%;
flex-direction: row;
margin: 5% 0;
}
.div-infobox{
width: 40%;
margin: 5% 0;
}
.image-note-desktop{
width: 100%;
@ -110,7 +112,7 @@
color: #000000;
}
.title-three{
width: 40%;
width: 80%;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
@ -168,9 +170,25 @@
width: 100%;
margin: 5% 0;
}
.page-header-footer{
width: 100%;
display: flex;
.page-footer{
flex-direction: row;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: white;
gap: 4%;
background: #000000;
}
.text-footer{
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
}

BIN
assets/images/imagem-baixo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB

33
index.html
View File

@ -43,16 +43,19 @@
<div class="infoboxes-sub-wrapper">
<div class="div-infobox">
<img class="infobox-image" src="./assets/images/loja-online.png" alt="Logo da loja online">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</div>
<div class="div-infobox">
<img class="infobox-image" src="./assets/images/loja-online.png" alt="Logo da compra segura">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</div>
<div class="div-infobox">
<img class="infobox-image" src="./assets/images/gorjeta.png" alt="Logo da compra">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</div>
</div>
</div>
@ -91,23 +94,27 @@
<div class="infoboxes-sub-wrapper">
<div class="div-infobox">
<img class="infobox-image" src="./assets/images/loja-online.png" alt="Logo da loja online">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div>
<div class="div-infobox">
<img class="infobox-image" src="./assets/images/loja-online.png" alt="Logo da compra segura">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div>
<div class="div-infobox">
<img class="infobox-image" src="./assets/images/gorjeta.png" alt="Logo da compra">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div>
<div class="div-infobox">
<img class="infobox-image" src="./assets/images/gorjeta.png" alt="Logo da compra">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div>
</div>
@ -126,17 +133,19 @@
</section>
</main>
<footer class="page-header-footer">
<footer class="page-footer">
<a href="/">
<img class="header-logo-footer" src="./assets/images/instagram.png" alt="Logo M3">
<img class="logo-footer" src="./assets/images/instagram.png" alt="Logo M3">
</a>
<a href="/">
<img class="header-logo-footer" src="./assets/images/facebook.png" alt="Logo M3">
<img class="logo-footer" src="./assets/images/facebook.png" alt="Logo M3">
</a>
<a href="/">
<img class="header-logo-footer" src="./assets/images/youtube.png" alt="Logo M3">
<img class="logo-footer" src="./assets/images/youtube.png" alt="Logo M3">
</a>
<div>
<h2 class="text-footer">texto</h2>
</div>
</footer>
</body>