PatrickSouzaSilva/practice-time-landing-page-patrick-souza
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

patricksouza #1

Merged
PatrickSouzaSilva merged 7 commits from patricksouza into main 2022-10-12 18:32:15 +00:00
Conversation 0 Commits 7 Files Changed 17 +115 -9
6 changed files with 115 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c8ea05a580 - Show all commits

BIN
assents/imagens/bottom-card-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assents/imagens/bottom-card-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assents/imagens/bottom-card-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assents/imagens/bottom-card-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

34
index.html
View File

@ -75,6 +75,40 @@
</section> </section>
<section class="bottom-cards" >
<div class="bottom-card-wrapper" >
<div class="bottom-card">
<img class="bottom-card-image" src="assents/imagens/bottom-card-01.png" alt="imagem do segundo card topo"/>
<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="assents/imagens/bottom-card-02.png" alt="imagem do segundo card topo"/>
<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="assents/imagens/bottom-card-03.png" alt="imagem do segundo card topo"/>
<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="assents/imagens/bottom-card-04.png" alt="imagem do segundo card topo"/>
<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>
</section>
</main> </main>

88
main.styles/style.css
View File

@ -18,7 +18,7 @@
display: block; display: block;
} }
/*///////////// SECTION 01 + @media desktop e mobile /////////////////// */ /*///////////// SECTION 01 e 02 com banner /////////////////// */
.main-banner, .main-banner,
.middle-banner { .middle-banner {
@ -105,6 +105,49 @@
} }
/*/////////// Bottom Area com imagens e background//////////////*/
.bottom-cards {
margin-top: 140px;
background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
}
.bottom-card-wrapper {
position: relative;
top: -60px;
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: center;
gap: 20px;
}
.bottom-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 32px 66px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.bottom-card-image {
display: block;
margin-bottom: 14px;
}
.bottom-card-description {
max-width: 368px;
text-align: center;
line-height: 24px;
font-size: 16px;
}
/*///////////////// ABAIXO DE 414PX /////////////////*/ /*///////////////// ABAIXO DE 414PX /////////////////*/
@media screen and (max-width: 414px){ @media screen and (max-width: 414px){
@ -114,6 +157,16 @@
} }
} }
/*///////////////// ABAIXO DE 415PX /////////////////*/
@media screen and (min-width: 415px ) {
.main-banner-mobile,
.middle-banner-mobile{
display: none;
}
}
/*///////////////// ACIMA DE 768PX /////////////////*/ /*///////////////// ACIMA DE 768PX /////////////////*/
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -122,6 +175,20 @@
padding: 36px 26px; padding: 36px 26px;
} }
.bottom-cards{
padding: 0 16px;
margin-top: 114px;
}
.bottom-card-wrapper{
grid-template-columns: 1fr;
gap: 16px;
}
.bottom-card-description{
font-size: 14px;
}
} }
/*///////////////// ACIMA DE 992PX /////////////////*/ /*///////////////// ACIMA DE 992PX /////////////////*/
@ -164,20 +231,25 @@
} }
} }
@media screen and (min-width: 769px) and (max-width: 992px) {
.bottom-card-description{
max-width: 280px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) { @media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards { .top-cards {
grid-template-columns: repeat(2 , max-content); grid-template-columns: repeat(2 , max-content);
} }
}
/*///////////////// ABAIXO DE 415PX /////////////////*/ .bottom-card-wrapper{
grid-template-columns: repeat(2 , max-content);
@media screen and (min-width: 415px ) {
.main-banner-mobile,
.middle-banner-mobile{
display: none;
} }
} }