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

Yan_Garriga #1

Merged
Yan_Garriga merged 20 commits from Yan_Garriga into main 2022-10-13 19:29:38 +00:00
Conversation 0 Commits 20 Files Changed 10 +63 -14
2 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c2957e055f - Show all commits

41
assets/styles.css/main.css
View File

@ -14,7 +14,7 @@ body {
display: flex;
justify-content: center;
background: #000000;
padding: 29px 0;
padding: 1.51vw 0;
}
.main-banner-row {
@ -125,11 +125,14 @@ body {
.bottom-card {
background: #FFFFFF;
grid-template-columns: repeat(4, max-content);
grid-template-columns: repeat(4, 1fr);
display: grid;
gap: 0.83vw;
justify-content: center;
padding: 6.71vw 3.75vw 5.625vw;
padding: 6.71875vw 0 0;
text-align: center;
margin: 0 3.75vw;
width: 92.5%;
}
.bottom-card-group {
@ -137,22 +140,46 @@ body {
align-items: center;
display: flex;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.23);
width: 22vw;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
max-width: 22.5vw;
justify-items: center;
}
.bottom-card-image {
padding: 1.82vw ;
padding: 1.82vw;
}
.bottom-card-text {
font-size: 16px;
line-height: 24px;
/* or 150% */
width: 15.572vw;
padding: 0 0 3.38vw;
}
.bottom-infocard {
display: flex;
margin: 5.625vw 0 2.604vw;
align-items: center;
justify-content: center;
}
.bottom-infocard-group {
max-width: 28.645vw;
}
.bottom-infocard-tittle {
font-weight: 600;
font-size: 32px;
line-height: 39px;
margin-bottom: 1.979vw;
}
.bottom-infocard-paragraph {
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 414px) {
.main-banner-desktop {
display: none;

36
index.html
View File

@ -1,5 +1,4 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
@ -104,7 +103,9 @@
<img class=" bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" />
<p class="bottom-card-text">
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.
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>
@ -112,23 +113,44 @@
<img class="bottom-card-image" src="./assets/images/bottom-card-02.png" alt="image02-bottomcard" />
<p class="bottom-card-text">
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.
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-group">
<img class="bottom-card-image" src="./assets/images/bottom-card-03.png" alt="image03-bottomcard">
<img class="bottom-card-image" src="./assets/images/bottom-card-03.png" alt="image03-bottomcard" />
<p class="bottom-card-text">
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.
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-group">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="image04-bottomcard">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="image04-bottomcard" />
<p class="bottom-card-text">
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.
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>
<section class="bottom-infocard">
<div class="bottom-infocard-group">
<h3 class="bottom-infocard-tittle">Lorem ipsum dolor sit amet</h3>
<p class="bottom-infocard-paragraph">
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>
</div>
</section>