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

Cria segunda seção de cards desktop

Browse Source
This commit is contained in:
tiago medeiros rodrigues 2022-10-13 15:21:28 -03:00
parent 70611cfd0a
commit ccc1c0b3be
6 changed files with 74 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/image/image-fs-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/image/image-fs-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/image/image-fs-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/image/image-fs-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

47
assets/styles/main.css
View File

@ -82,7 +82,7 @@ text-align: center;
display:flex;
flex-direction: column;
align-items: center;
padding: 26px 26px 37px;
padding: 35px 26px 26px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
@ -91,34 +91,53 @@ text-align: center;
.cousin-image{
display: block;
margin-bottom: 20px;
}
.cousin-text{
max-width: 300px;
font-size: 16px;
line-height: 24px;
text-align: center;
text-align: center
}
.uncle-section-image{
}
.third-section{
.third-section{
display: grid;
gap: 40px;
grid-template-columns: repeat(3, 3fr);
justify-content: center;
background: #E0E0E0;
background: #E0E0E0;
}
.fourth-section{
margin-top: 130px;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, max-content);
justify-content: center;
margin-bottom: 108px;
}
.nephew-section{
display:flex;
flex-direction: column;
align-items: center;
padding: 35px 32px 37px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.nephew-image{
display: block;
margin-bottom: 31px;
}
.uncle-section-image{
.nephew-text{
max-width: 367px;
font-size: 16px;
line-height: 32px;
text-align: center;
}

42
index.html
View File

@ -87,7 +87,47 @@
</section>
<section class="fourth-section">
<div class="nephew-section">
<img class="nephew-image" src="assets/image/image-fs-01.png" alt="">
<p class="nephew-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.
</p>
</div>
<div class="nephew-section">
<img class="nephew-image" src="assets/image/image-fs-02.png" alt="">
<p class="nephew-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.
</p>
</div>
<div class="nephew-section">
<img class="nephew-image" src="assets/image/image-fs-03.png" alt="">
<p class="nephew-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.
</p>
</div>
<div class="nephew-section">
<img class="nephew-image" src="assets/image/image-fs-04.png" alt="">
<p class="nephew-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.
</p>
</div>
</section>
</main>
</body>