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

feat: Adiciona footer desktop e mobile

Browse Source
This commit is contained in:
Cainã Milech 2022-10-12 19:11:42 -03:00
parent 89936110ae
commit b17a5e9ce5
2 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
assets/styles/main.css
View File

@ -1,22 +1,22 @@
* { *{
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; /*mantem a largura do elemento determinada no widht e nao adiciona o tamanho do padding no calculo, porem ele vai estar la*/ box-sizing: border-box;
} }
body { body{
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
color: #000; color: #000;
} }
.page-header { .page-header{
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 28px 0; padding: 28px 0;
background: #000; background: #000;
} }
.logo-header { .logo-header{
display: block; display: block;
width: 12%; width: 12%;
} }
@ -215,10 +215,18 @@ body {
.social-medias{ .social-medias{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 18px;
justify-content: center; justify-content: center;
} }
.social-media{
display: contents;
}
.icon-social-media{
width: 7%;
}
.footer-text{ .footer-text{
margin-top: 16px; margin-top: 16px;
} }
@ -230,7 +238,7 @@ body {
color: #BDBDBD; color: #BDBDBD;
} }
/*4k*/ /*4K*/
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.top-infocard-subtitle{ .top-infocard-subtitle{
font-size: 40px; font-size: 40px;
@ -271,10 +279,11 @@ body {
.footer-copyright{ .footer-copyright{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }
} }
/*MOBILE* */ /*MOBILE*/
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.logo-header{ .logo-header{
width: 55%; width: 55%;
@ -316,6 +325,7 @@ body {
.cards{ .cards{
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
margin-top: 90px;
} }
.card{ .card{
@ -387,6 +397,12 @@ body {
padding: 0; padding: 0;
margin-bottom: 87px; margin-bottom: 87px;
} }
.footer-content{
width: 63%;
margin-bottom: 32px;
margin-top: 32px;
}
} }

13
index.html
View File

@ -125,14 +125,14 @@
<footer class="footer"> <footer class="footer">
<div class="footer-content"> <div class="footer-content">
<div class="social-medias"> <div class="social-medias">
<a href="#"> <a class="social-media" href="#">
<img src="/assets/images/instagram.svg" alt="Icone do Instagram"> <img class="icon-social-media" src="/assets/images/instagram.svg" alt="Icone do Instagram" />
</a> </a>
<a href="#"> <a class="social-media" href="#">
<img src="/assets/images/facebook.svg" alt="Icone do Facebook"> <img class="icon-social-media" src="/assets/images/facebook.svg" alt="Icone do Facebook" />
</a> </a>
<a href="#"> <a class="social-media" href="#">
<img src="/assets/images/youtube.svg" alt="Icone do Youtube"> <img class="icon-social-media" src="/assets/images/youtube.svg" alt="Icone do Youtube" />
</a> </a>
</div> </div>
@ -141,5 +141,6 @@
</div> </div>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>