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

77
index.html
View File

@ -42,17 +42,20 @@
<div class="infoboxes-wrapper">
<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.
<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.
</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.
<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.
</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.
<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.
</div>
</div>
</div>
@ -61,8 +64,8 @@
<section class="mobile-hidden">
<div class="imagem-note-wrapper">
<div class="image-note-mobile">
<img class="imagem-note"src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook">
<img class="imagem-note" src="./assets/images/image-note-2.png" alt="Imagem 2 do notebook">
<img class="imagem-note" src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook">
<img class="imagem-note" src="./assets/images/image-note-2.png" alt="Imagem 2 do notebook">
</div>
<div>
<img class="imagem-note" src="./assets/images/image-note-3.png" alt="Imagem 3 do notebook">
@ -74,13 +77,13 @@
<div class="imagem-note-wrapper">
<div class="image-note-desktop">
<div>
<img class="imagem-note" src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook">
</div>
<div>
<img class="imagem-note" src="./assets/images/image-note-2.png" alt="Imagem 2 do notebook">
<img class="imagem-note" src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook">
</div>
<div>
<img class="imagem-note" src="./assets/images/image-note-3.png" alt="Imagem 3 do notebook">
<img class="imagem-note" src="./assets/images/image-note-2.png" alt="Imagem 2 do notebook">
</div>
<div>
<img class="imagem-note" src="./assets/images/image-note-3.png" alt="Imagem 3 do notebook">
</div>
</div>
</div>
@ -90,25 +93,29 @@
<div class="infoboxes-wrapper">
<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.
<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,
<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.
<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 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>
@ -119,24 +126,26 @@
<h2 class="title-two">Lorem ipsum dolor sit amet</h2>
<h3 class="title-three">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.
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. </h3>
</div>
</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">
</a>
<img class="logo-footer" src="./assets/images/youtube.png" alt="Logo M3">
</a>
<div>
<h2 class="text-footer">texto</h2>
</div>
</footer>
</body>