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

feat: estilização dos três primeiros cards

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-10-13 02:02:56 -03:00
parent a0ef943a3f
commit 3f84222d37
2 changed files with 49 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assets/styles/landing-page.css
View File

@ -50,4 +50,37 @@ header {
.network{
display: flex;
justify-content: center;
width: 16%;
}
.network img{
width: 100%;
}
.card-section{
display: flex;
justify-content: space-evenly;
padding: 178px 0px 80px 0px;
}
.card, .card-small{
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.card{
width: 18%;
height: 287.68px;
}
.img-card{
width: 29%;
}
.img-card img{
width: 100%;
}

29
landing-page.html
View File

@ -21,29 +21,30 @@
<h2 class="sub-title">Lorem ipsum</h2>
<h1 class="title">dolor sit amet</h1>
<p class="descriptiom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
<figure class="network">
<img src="./assets/images/networkcomputters.png"/>
</figure>
</section>
<figure class="network">
<img src="./assets/images/networkcomputters.png"/>
</figure>
<section>
<div>
<figure>
<section class="card-section">
<div class="card">
<figure class="img-card">
<img src="./assets/images/shop 1.png">
</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</div>
<div>
<figure>
<div class="card">
<figure class="img-card">
<img src="./assets/images/shopping-bag.png">
</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</div>
<div>
<figure>
<div class="card">
<figure class="img-card">
<img src="./assets/images/coin 1.png">
</figure>
<figcaption>
@ -64,7 +65,7 @@
</figure>
</section>
<section>
<div>
<div class="card-small">
<figure>
<img src="./assets/images/money.png">
</figure>
@ -72,7 +73,7 @@
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.
</figcaption>
</div>
<div>
<div class="card-small">
<figure>
<img src="./assets/images/coin 1.png">
</figure>
@ -80,7 +81,7 @@
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.
</figcaption>
</div>
<div>
<div class="card-small">
<figure>
<img src="./assets/images/laptop.png">
</figure>
@ -88,7 +89,7 @@
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.
</figcaption>
</div>
<div>
<div class="card-small">
<figure>
<img src="./assets/images/cel.png">
</figure>