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

develop #13

Merged
Rhayllon_Daudt merged 29 commits from develop into main 2022-10-13 19:32:02 +00:00
Conversation 0 Commits 29 Files Changed 21 +23 -13
2 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 89cb6dd2be - Show all commits

20
assets/styles/main.css
View File

@ -122,7 +122,7 @@ body{
grid-template-columns: repeat(4, 23%); grid-template-columns: repeat(4, 23%);
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
padding: 0 0 108px; margin: 0 0 108px;
} }
.bottom-card{ .bottom-card{
@ -131,18 +131,20 @@ body{
align-items: center; align-items: center;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
gap: 15px;
padding: 36px 32px 65px;
} }
.bottom-card-image{ .bottom-card-image{
display: block; display: block;
padding: 36px 164px 0; width: 24%;
height: 100%;
} }
.bottom-card-description{ .bottom-card-description{
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
padding: 16px 32px 66px;
} }
.bottom-section{ .bottom-section{
@ -187,8 +189,11 @@ body{
background: #000000; background: #000000;
} }
.page-footer-conent{ .page-footer-content{
display: flex;
flex-direction: column;
width: 21%; width: 21%;
align-items: center;
} }
.footer-icons{ .footer-icons{
@ -196,10 +201,13 @@ body{
list-style: none; list-style: none;
margin-bottom: 16px; margin-bottom: 16px;
justify-content: center; justify-content: center;
gap: 16px;
width: 100%;
} }
.footer-icon{ .footer-link{
margin: 0 8px; display: flex;
width: 6%;
} }
.footer-text{ .footer-text{

16
index.html
View File

@ -113,6 +113,7 @@
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> </p>
</div> </div>
<div class="bottom-card"> <div class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Imagem 4" /> <img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Imagem 4" />
@ -121,6 +122,7 @@
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> </p>
</div> </div>
</section> </section>
<section class="bottom-section"> <section class="bottom-section">
@ -141,22 +143,22 @@
</section> </section>
<footer class="page-footer"> <footer class="page-footer">
<div class="page-footer-conent"> <div class="page-footer-content">
<ul class="footer-icons"> <ul class="footer-icons">
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-instagram.png" alt="Icone do Instgram"> <img src="./assets/images/icon-instagram.png" alt="Icone do Instgram">
</a> </a>
</li> </li>
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-facebook.png" alt="Icone do Facebook"> <img src="./assets/images/icon-facebook.png" alt="Icone do Facebook">
</a> </a>
</li> </li>
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-youtube.png" alt="Icone do Youtube"> <img src="./assets/images/icon-youtube.png" alt="Icone do Youtube">
</a> </a>
</li> </li>