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

adcionando imagens fase inicial

Browse Source
This commit is contained in:
Gustavo_Rallenson 2022-10-08 06:45:42 -03:00
parent 93d3216251
commit 059bbd5afb
5 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/Image/coin 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assets/Image/shop 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/Image/shopping-bag (1) 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

13
assets/css/main.css
View File

@ -48,6 +48,19 @@ body{
font-size: 16px;
line-height: 24px;
}
.top-cards{
background: #f0f0f0;
display: grid;
gap: 20px;
grid-template-columns: repeat(3,1fr);
}
.top-card{
display: flex;
flex-direction: column;
align-items:center;
background: #ffffff;
box-shadow: 0px 4px 20px rgba(0,0,0,0);
}
@media screen and (max-width: 414px) {
.main-banner-desktop{
display: none;

14
index.html
View File

@ -31,6 +31,20 @@
</div>
<img class="top-infocard-image" src="/assets/Image/top-infocard-image.png" alt="Banner do infocard no topo">
</section>
<section class="top-cards">
<div class="top-card">
<img src="/assets/Image/shop 1.png"alt=="icone do shopping">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="top-card">
<img src="/assets/Image/shopping-bag (1) 1.png" alt="icone da sacola">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="top-card">
<img src="/assets/Image/coin 1.png"alt=="icone da moeda">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
</main>
<footer></footer>
</body>