Thais_Ferreira/practice-time-landing-page
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adaptacao: telas mobile e desktop

Browse Source
This commit is contained in:
Thaís Ferreira Caetano de Jesus 2022-10-10 11:22:13 -03:00
parent 17ca65484d
commit 0616e41a74
2 changed files with 91 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
css/index.css
View File

@ -213,3 +213,44 @@ body{
}
}
@media screen and (min-width: 1700px) {
.top-infocard-subtitulo{
font-size: 60px;
}
.top-infocard-titulo{
font-size: 70px;
}
.top-infocard-descriçao,
.top-card-descriçao,
.bottom-card-descriçao,
.bottom-infocard-descriçao{
font-size: 30px;
}
.top-card{
width: 500px;
height: 450px;
}
.top-infocard{
padding: 110px 0;
}
.bottom-card{
width: 600px;
height: 450px;
}
.bottom-cards-wrapper{
gap: 200px;
row-gap: 40px;
margin-right: 167px;
}
.banner-bottom-desktop{
max-width: 750px;
margin: 37px 0 0px;
}
.bottom-infocard-titulo{
font-size: 38px;
}
.bottom-infocard-text{
padding: unset;
}
}

61
index.html
View File

@ -30,7 +30,9 @@
</div>
<section class="top-infocard">
<div class="top-infocard-text">
<h2 class="top-infocard-subtitulo">Lorem ipsum</h2>
<h1 class="top-infocard-titulo">dolor sit amet</h1>
@ -41,24 +43,42 @@
</div>
<img src="./Assets/Images/infocard-image.svg" alt="banner top infocard"/>
<img class="top-infocard-imagem" src="./Assets/Images/infocard-image.svg" alt="banner top infocard"/>
</section>
<section class="top-cards">
<div class="top-card">
<div class="top-card">
<img src="./Assets/Images/card-shop.svg" alt="icone card shop"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
<p class="top-card-descriçao">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<img src="./Assets/Images/card-shopping-bag.svg" alt="icone card shopping bag"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
<p class="top-card-descriçao">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<img src="./Assets/Images/card-coin.svg" alt="icone card coin"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
<p class="top-card-descriçao">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
<div class="banner-midle-contener">
@ -67,49 +87,66 @@
</div>
<section class="bottom-cards">
<div class="bottom-cards-wrapper">
<div class="bottom-card">
<img src="./Assets/Images/card-money.svg" alt="icone money"/>
<p>
<p class="bottom-card-descriçao">
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="bottom-card">
<img src="./Assets/Images/card-laptop.svg" alt="icone laptop"/>
<p>
<p class="bottom-card-descriçao">
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="bottom-card">
<img src="./Assets/Images/card-coin.svg" alt="icone coin"/>
<p>
<p class="bottom-card-descriçao">
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="bottom-card">
<img src="./Assets/Images/card-cellphone.svg" alt="icone cellphone"/>
<p>
<p class="bottom-card-descriçao">
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">
<img class="banner-bottom banner-bottom-desktop" src="./Assets/Images/Banner-bottom-desktop.png" alt="banner infocard bottom desktop"/>
<img class="banner-bottom banner-bottom-mobile" src="./Assets/Images/Banner-bottom-mobile.png" alt="banner infocard bottom mobile"/>
<div class="bottom-infocard-text">
<h2>Lorem ipsum dolor sit amet</h2>
<h2 class="bottom-infocard-titulo">
Lorem ipsum dolor sit amet
</h2>
<p>
<p class="bottom-infocard-descriçao">
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>
@ -119,6 +156,7 @@
</main>
<footer class="page-footer">
<div class="footer-icon">
<img src="./Assets/Images/logo-instagram.svg" alt="logo instagram"/>
<img src="./Assets/Images/facebook-logo.svg" alt="logo facebook"/>
@ -128,6 +166,7 @@
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
</p>
</footer>
</body>
</html>