DaviKlein/challenge-landing-page-Davi-Klein
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Site versao desktop completo

Browse Source
This commit is contained in:
DaviHKlein 2022-10-12 19:17:58 -03:00
parent 47e0e594fa
commit af192883f7
7 changed files with 151 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 345 B

103
assets/styles/main.css
View File

@ -28,7 +28,6 @@ body{
.top-infocard{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 100%;
padding-top: 4%;
@ -96,6 +95,7 @@ body{
background-color: #E0E0E0;
display: flex;
justify-content: center;
margin-bottom: 10.02%
}
.middle-banners{
@ -111,3 +111,104 @@ body{
width: 29.28%;
}
.botton-cards{
display: flex;
justify-content: center;
width: 92.4%;
gap: 1%;
}
.botton-card{
background: #FFFFFF;
display: flex;
flex-direction: column;
width: 30%;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.botton-card-img{
width: 24%;
margin-top: 7.4%;
align-self: center;
}
.botton-card-description{
text-align: center;
font-size: 16px;
line-height: 24px;
padding: 3.3% 7.63% 15%;
}
.botton-card-img-cell{
margin-top: 7.4%;
width: 19.5%;
align-self: center;
}
.botton-crd{
display: flex;
justify-content: center;
margin-bottom: 5.68%;
}
.bottom-infocard{
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 6.1%;
}
.bottom-infocard-img{
width: 71.5%;
}
.bottom-infocard-title{
font-size: 32px;
line-height: 38px;
text-align: center;
}
.bottom-infocard-text{
max-width: 29%;
text-align: center;
font-size: 16px;
line-height: 24px;
padding-bottom: 2.63%;
}
.bottom-infocard-description{
font-size: 16px;
line-height: 130%;
height: 94%;
}
.footer{
background-color: #000;
display: flex;
flex-direction: column;
padding: 2.23% 0;
}
.texto-footer{
color: #BDBDBD;
align-self: center;
font-size: 10px;
}
.logos{
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-bottom: 0.4%;
}
.lista-logo{
margin: 0 0.5%;
display: flex;
}
.imagens-logo{
width: 1.25vw;
}

50
index.html
View File

@ -63,8 +63,56 @@
</figure>
</section>
<section class="botton-crd">
<div class="botton-cards">
<div class="botton-card">
<img class="botton-card-img" src="./assets/images/money.png" alt="Imagem 1 do card de baixo">
<p class="botton-card-description">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. </p>
</div>
<div class="botton-card">
<img class="botton-card-img" src="./assets/images/coin 2.png" alt="Imagem 2 do card de baixo">
<p class="botton-card-description">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. </p>
</div>
<div class="botton-card">
<img class="botton-card-img" src="./assets/images//laptop 1.png" alt="Imagem 3 do card de baixo">
<p class="botton-card-description">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. </p>
</div>
<div class="botton-card">
<img class="botton-card-img-cell" src="./assets/images/Group.png" alt="Imagem 4 do card de baixo">
<p class="botton-card-description">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. </p>
</div>
</div>
</section>
<section class="bottom-infocard">
<div class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-description">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.</p>
</div>
<img class="bottom-infocard-img" src="./assets/images/oculosdesktop.png" alt="Banner do inforcard de baixo">
</section>
</main>
<footer class="footer">
<ul class="logos">
<li class="lista-logo">
<a class="logo" href="">
<img class="imagens-logo" src="./assets/images/instagram.png" alt="logo instagram">
</a>
</li>
<li class="lista-logo">
<a class="logo" href="">
<img class="imagens-logo" src="./assets/images/facebook.png" alt="logo facebook">
</a>
</li>
<li class="lista-logo">
<a class="logo" href="">
<img class="imagens-logo" src="./assets/images/youtube.png" alt="logo youtube">
</a>
</li>
</ul>
<p class="texto-footer">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
</footer>
</body>
</html>