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

alinhando as imagens do note

Browse Source
This commit is contained in:
matheusjardimgarcia 2022-10-12 22:04:48 -03:00
parent c771a8a1a8
commit 4cbee5db17
5 changed files with 78 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/css/style.css
View File

@ -70,15 +70,19 @@
.div-infobox{ .div-infobox{
width: 40%; width: 40%;
} }
.imagem-note-wrapper{ .image-note-desktop{
width: 70%; width: 100%;
flex-direction: row; flex-direction: row;
display: flex;
} }
.imagem-note{ .imagem-note{
display: flex;
flex-direction: row;
width: 100%; width: 100%;
} }
} }
.div-title{ .div-title{
margin: 5% 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -106,7 +110,7 @@
color: #000000; color: #000000;
} }
.title-three{ .title-three{
width: 100%; width: 40%;
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -151,7 +155,6 @@
.infobox-image{ .infobox-image{
display: flex; display: flex;
width: 35%; width: 35%;
margin: 15% 0;
} }
.imagem-note-wrapper{ .imagem-note-wrapper{
margin: 5% 0; margin: 5% 0;
@ -162,9 +165,12 @@
background-color: #E0E0E0;; background-color: #E0E0E0;;
} }
.imagem-note{ .imagem-note{
margin: 15% 0; width: 100%;
flex-direction: column; margin: 5% 0;
display: flex; }
align-items: center; .page-header-footer{
justify-content: center; width: 100%;
display: flex;
flex-direction: row;
background: #000000;
} }

BIN
assets/images/facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 B

BIN
assets/images/instagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

BIN
assets/images/youtube.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 345 B

69
index.html
View File

@ -58,30 +58,87 @@
</div> </div>
</section> </section>
<section> <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-full-widget" 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">
</div> </div>
</div> </div>
</section> </section>
<section>
<section class="desktop-hidden">
<div class="imagem-note-wrapper"> <div class="imagem-note-wrapper">
<div class="image-note-desktop"> <div class="image-note-desktop">
<img class="imagem-note"src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook"> <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>
<div> <div>
<img class="imagem-note-full-widget" 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>
</section> </section>
<section>
<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.
</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 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>
</section>
<section>
<div class="div-title">
<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.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. </h3>
</div>
</section>
</main> </main>
<footer class="page-header-footer">
<a href="/">
<img class="header-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">
</a>
<a href="/">
<img class="header-logo-footer" src="./assets/images/youtube.png" alt="Logo M3">
</a>
</footer>
</body> </body>
</html> </html>