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{ .infoboxes-sub-wrapper{
width: 70%; width: 70%;
flex-direction: row; flex-direction: row;
margin: 5% 0;
} }
.div-infobox{ .div-infobox{
width: 40%; width: 40%;
margin: 5% 0;
} }
.image-note-desktop{ .image-note-desktop{
width: 100%; width: 100%;
@ -110,7 +112,7 @@
color: #000000; color: #000000;
} }
.title-three{ .title-three{
width: 40%; width: 80%;
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -168,9 +170,25 @@
width: 100%; width: 100%;
margin: 5% 0; margin: 5% 0;
} }
.page-header-footer{ .page-footer{
width: 100%;
display: flex;
flex-direction: row; 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; 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

81
index.html
View File

@ -42,17 +42,20 @@
<div class="infoboxes-wrapper"> <div class="infoboxes-wrapper">
<div class="infoboxes-sub-wrapper"> <div class="infoboxes-sub-wrapper">
<div class="div-infobox"> <div class="div-infobox">
<img class ="infobox-image"src="./assets/images/loja-online.png" alt="Logo da loja online"> <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>
<div class="div-infobox"> <div class="div-infobox">
<img class ="infobox-image"src="./assets/images/loja-online.png" alt="Logo da compra segura"> <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>
<div class="div-infobox"> <div class="div-infobox">
<img class ="infobox-image"src="./assets/images/gorjeta.png" alt="Logo da compra"> <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> </div>
</div> </div>
@ -61,8 +64,8 @@
<section class="mobile-hidden"> <section class="mobile-hidden">
<div class="imagem-note-wrapper"> <div class="imagem-note-wrapper">
<div class="image-note-mobile"> <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-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-2.png" alt="Imagem 2 do notebook">
</div> </div>
<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-3.png" alt="Imagem 3 do notebook">
@ -74,13 +77,13 @@
<div class="imagem-note-wrapper"> <div class="imagem-note-wrapper">
<div class="image-note-desktop"> <div class="image-note-desktop">
<div> <div>
<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-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">
</div> </div>
<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> </div>
</div> </div>
@ -90,25 +93,29 @@
<div class="infoboxes-wrapper"> <div class="infoboxes-wrapper">
<div class="infoboxes-sub-wrapper"> <div class="infoboxes-sub-wrapper">
<div class="div-infobox"> <div class="div-infobox">
<img class ="infobox-image"src="./assets/images/loja-online.png" alt="Logo da loja online"> <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
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div> </div>
<div class="div-infobox"> <div class="div-infobox">
<img class ="infobox-image"src="./assets/images/loja-online.png" alt="Logo da compra segura"> <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
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div> </div>
<div class="div-infobox"> <div class="div-infobox">
<img class ="infobox-image"src="./assets/images/gorjeta.png" alt="Logo da compra"> <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
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div> </div>
<div class="div-infobox"> <div class="div-infobox">
<img class ="infobox-image"src="./assets/images/gorjeta.png" alt="Logo da compra"> <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
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div> </div>
</div> </div>
</div> </div>
@ -117,26 +124,28 @@
<section> <section>
<div class="div-title"> <div class="div-title">
<h2 class="title-two">Lorem ipsum dolor sit amet</h2> <h2 class="title-two">Lorem ipsum dolor sit amet</h2>
<h3 class="title-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <h3 class="title-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit.
Curabitur venenatis felis vitae sagittis venenatis. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. </h3> Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. </h3>
</div> </div>
</section> </section>
</main> </main>
<footer class="page-header-footer"> <footer class="page-footer">
<a href="/"> <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>
<a href="/"> <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>
<a href="/"> <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> </a>
<div>
<h2 class="text-footer">texto</h2>
</div>
</footer> </footer>
</body> </body>