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

Feat(main): Cria Bottom-cards #7

Merged
Rhayllon_Daudt merged 1 commits from Feat/Bottom-cards into develop 2022-10-11 02:40:55 +00:00
Conversation 0 Commits 1 Files Changed 6 +66 -3
6 changed files with 66 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/bottom-card-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/images/bottom-card-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
assets/images/bottom-card-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/images/bottom-card-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

28
assets/styles/main.css
View File

@ -105,3 +105,31 @@ body{
.mid-banner-image{
width: 100%;
}
.bottom-cards{
display: grid;
grid-template-columns: repeat(4, 23%);
gap: 16px;
justify-content: center;
padding: 0 0 108px;
}
.bottom-card{
display: flex;
flex-direction: column;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.bottom-card-image{
display: block;
padding: 36px 164px 0;
}
.bottom-card-description{
font-size: 16px;
line-height: 24px;
text-align: center;
padding: 16px 32px 66px;
}

41
index.html
View File

@ -39,7 +39,7 @@
<section class="top-cards">
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-01.png" alt="Image 1" />
<img class="top-card-image" src="./assets/images/top-card-01.png" alt="Top Image 1" />
<p class="top-card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -48,7 +48,7 @@
</div>
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-02.png" alt="Image 2" />
<img class="top-card-image" src="./assets/images/top-card-02.png" alt="Top Image 2" />
<p class="top-card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -57,7 +57,7 @@
</div>
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-03.png" alt="Image 3" />
<img class="top-card-image" src="./assets/images/top-card-03.png" alt="Top Image 3" />
<p class="top-card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -82,6 +82,41 @@
</div>
</div>
<section class="bottom-cards">
<div class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-01.png" alt="Bottom Image 1" />
<p class="bottom-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="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-02.png" alt="Bottom Image 2" />
<p class="bottom-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="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-03.png" alt="Bottom Image 3" />
<p class="bottom-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="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Bottom Image 4" />
<p class="bottom-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>
</section>
</main>
</body>