forked from M3-Academy/challenge-landing-page
development #5
@ -64,6 +64,32 @@ background: #000000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,max-content);
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
padding: 142px 0 180px;
|
||||
}
|
||||
.CardBox{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
max-width: 300px;
|
||||
font-size: 16px;
|
||||
height: 288px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.CardDescription{
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
.MainBannerDesktop{
|
||||
display: none;
|
||||
@ -92,6 +118,12 @@ background: #000000;
|
||||
max-width: 358px;
|
||||
max-height: 116px;
|
||||
}
|
||||
.Cards{
|
||||
grid-template-columns: 1fr;
|
||||
padding: 90px 32px ;
|
||||
gap:24px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
@ -120,4 +152,18 @@ background: #000000;
|
||||
max-height: 704px;
|
||||
height: 704px;
|
||||
}
|
||||
.CardBox{
|
||||
max-width: 600px;
|
||||
font-size: 64px;
|
||||
height: 578px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.imageCard{
|
||||
width: 204px;
|
||||
height: 206px;
|
||||
}
|
||||
.CardDescription{
|
||||
font-size: 38px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
BIN
assets/Image/coin 1.png
Normal file
BIN
assets/Image/coin 1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.0 KiB |
BIN
assets/Image/shop 1.png
Normal file
BIN
assets/Image/shop 1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 959 B |
BIN
assets/Image/shopping-bag (1) 1.png
Normal file
BIN
assets/Image/shopping-bag (1) 1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
24
index.html
24
index.html
@ -34,6 +34,30 @@
|
||||
<figure class="PcContainer">
|
||||
<img class="ImageTop" src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/Computers.png" alt="Computadores">
|
||||
</figure>
|
||||
<div class="Cards">
|
||||
<figure class="CardBox">
|
||||
<img class="imageCard" src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/shop 1.png" alt="icone de Loja">
|
||||
<figcaption class="CardDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
|
||||
</figure>
|
||||
<figure class="CardBox">
|
||||
<img class="imageCard" src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/shopping-bag (1) 1.png" alt="icone de sacola">
|
||||
<figcaption class="CardDescription">
|
||||
Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit.
|
||||
Cras euismod enim non dui
|
||||
fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="CardBox">
|
||||
<img class="imageCard"src="/challenge-landing-page-Gustavo_Rallenson/assets/Image/coin 1.png" alt="icone de mão com moeda">
|
||||
<figcaption class="CardDescription">
|
||||
Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit.
|
||||
Cras euismod enim non dui fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
</body>
|
||||
|
Loading…
Reference in New Issue
Block a user