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

feat(icons) Adicionado section icons descktop

Browse Source
This commit is contained in:
Vinicius Gabriel do Amaral Pereira 2022-10-10 15:53:16 -03:00
parent 060db63d94
commit 1610ff5d9e
2 changed files with 62 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/styles/style.css
View File

@ -84,6 +84,41 @@ html, body{
.img-pc{
width: 100%;
display: block;
margin-bottom: 142px;
}
/*------------------------------------------------------------------*/
.section-icon{
background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
}
.section-wrapper{
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: center;
gap: 20px;
position: relative;
top: -60px;
}
.section-icons{
display: flex;
flex-direction: column;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
padding: 36px 32px 66px;
}
.img-section-icon{
margin-bottom: 14px;
display: block;
}
.section-icons-p{
max-width: 368px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media screen and (max-width: 1024px) {
@ -168,5 +203,6 @@ html, body{
margin-right: 70px;
}
}
}
/**/

24
index.html
View File

@ -70,6 +70,30 @@
<img class="img-pc img-pc-mobile" src="./assets/images/img-pc-mobile.png" alt="Imagem notebook tela colorida">
</div>
<div class="section-icon">
<div class="section-wrapper">
<section class="section-icons">
<img class="img-section-icon" src="./assets/images/Icons/notaDinheiro.png" alt="Iagem dinheiro">
<p class="section-icons-p">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>
</section>
<section class="section-icons">
<img class="img-section-icon" src="./assets/images/Icons/mao.png" alt="Iagem de uma mão">
<p class="section-icons-p">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>
</section>
<section class="section-icons">
<img class="img-section-icon" src="./assets/images/Icons/sacola.png" alt="Iagem dinheiro">
<p class="section-icons-p">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>
</section>
<section class="section-icons">
<img class="img-section-icon" src="./assets/images/Icons/celular.png" alt="Iagem dinheiro">
<p class="section-icons-p">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>
</section>
</div>
</div>
</body>
</html>