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

colocando as imagens do notebook

Browse Source
This commit is contained in:
matheusjardimgarcia 2022-10-12 21:32:59 -03:00
parent fa1e0104f7
commit c771a8a1a8
6 changed files with 81 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/css/style.css
View File

@ -39,6 +39,19 @@
width: 96%;
height: 70%;
}
.imagem-note-wrapper{
width: 100%;
flex-direction: column;
}
.image-note-mobile{
width: 50%;
flex-direction: row;
display: flex;
}
.imagem-note{
width: 96%;
height: 70%;
}
}
@media screen and (min-width: 415px) {
.mobile-hidden{
@ -56,7 +69,13 @@
}
.div-infobox{
width: 40%;
height: 60%;
}
.imagem-note-wrapper{
width: 70%;
flex-direction: row;
}
.imagem-note{
width: 100%;
}
}
.div-title{
@ -106,7 +125,6 @@
.infoboxes-wrapper{
display: flex;
width: 100%;
height: 28em;
justify-content: space-around;
gap: 2%;
}
@ -117,7 +135,35 @@
gap: 2%;
}
.div-infobox{
border: 1px solid red;
flex-direction: column;
display: flex;
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: #000000;
box-shadow: 0 0 8px #E0E0E0;;
}
.infobox-image{
display: flex;
width: 35%;
margin: 15% 0;
}
.imagem-note-wrapper{
margin: 5% 0;
display: flex;
width: 100%;
justify-content: space-around;
gap: 2%;
background-color: #E0E0E0;;
}
.imagem-note{
margin: 15% 0;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

BIN
assets/images/image-note-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
assets/images/image-note-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
assets/images/image-note-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

35
index.html
View File

@ -42,12 +42,41 @@
<div class="infoboxes-wrapper">
<div class="infoboxes-sub-wrapper">
<div class="div-infobox">
<img 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.
</div>
<div class="div-infobox">teste2</div>
<div class="div-infobox">teste3</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.
</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.
</div>
</div>
</div>
</section>
<section>
<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">
</div>
</div>
</section>
<section>
<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">
<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">
</div>
</div>
</section>