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

67
index.html
View File

@ -58,30 +58,87 @@
</div>
</section>
<section>
<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">
</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>
</section>
<section>
<section class="desktop-hidden">
<div class="imagem-note-wrapper">
<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-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>
<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>
</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>
<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>
</html>