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

<fix>(280px e 4k): modifiquei pra ajustar melhor nos tamanhos

Browse Source 
280px e 4k
This commit is contained in:
Gabriel Ferraz Nogueira 2022-10-12 14:32:03 -03:00
parent 74d18121ec
commit 2579306f1a
2 changed files with 52 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/styles/main.css
View File

@ -10,12 +10,15 @@ body{
.page-header{ .page-header{
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center;
padding: 29px 0; padding: 29px 0;
background-color: #000; background-color: #000;
} }
.header-logo{ .header-logo{
width: 12vw; width: 12%;
min-width: 226px; }
.header-logo-image{
width: 100%;
} }
/* main-banner */ /* main-banner */
.main-banner-desktop{ .main-banner-desktop{
@ -177,19 +180,25 @@ body{
.footer-icons{ .footer-icons{
display: flex; display: flex;
list-style: none; list-style: none;
justify-content: center;
gap: 16px; gap: 16px;
} }
.icons{
width: 100%;
}
.icons-image{
width: 5%;
min-width: 24px;
}
.footer-text{ .footer-text{
text-align: center;
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
text-transform: uppercase; text-transform: uppercase;
color: #BDBDBD; color: #BDBDBD;
} }
.icons{
width: 1vw;
min-width: 24px;
}
/* layout 4K */ /* layout 4K */
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.page-header{ .page-header{
@ -227,9 +236,14 @@ body{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }
.icons-image{
min-width: 48px;}
} }
/* layaut mobile */ /* layaut mobile */
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.header-logo{
width: 55%;
}
.main-banner-desktop{ .main-banner-desktop{
display: none; display: none;
} }
@ -240,9 +254,11 @@ body{
/* top infocard */ /* top infocard */
.top-inforcard-subtitle{ .top-inforcard-subtitle{
font-size: 20px; font-size: 20px;
line-height: 34px;
} }
.top-infocard-title{ .top-infocard-title{
font-size: 28px; font-size: 28px;
line-height: 24px;
} }
.top-infocard-text{ .top-infocard-text{
text-align: center; text-align: center;
@ -259,7 +275,7 @@ body{
padding: 90px 0; padding: 90px 0;
} }
.top-card{ .top-card{
width: 84%; width: 85%;
gap: 37px; gap: 37px;
} }
.top-card-image{ .top-card-image{
@ -272,7 +288,7 @@ body{
"b1 b2" "b1 b2"
"b3 b3"; "b3 b3";
justify-items: center; justify-items: center;
padding: 0px 23px 0px; padding: 0px 23px;
gap: 14px; gap: 14px;
top: 32px; top: 32px;
} }
@ -298,7 +314,7 @@ body{
width: 29%; width: 29%;
} }
.bottom-figures-card{ .bottom-figures-card{
width: 94%; width: 89%;
} }
/* bottom-banner */ /* bottom-banner */
.bottom-banner{ .bottom-banner{
@ -321,16 +337,32 @@ body{
.bottom-banner-subtitle{ .bottom-banner-subtitle{
font-size: 24px; font-size: 24px;
line-height: 29px; line-height: 29px;
margin-bottom: 9px;
} }
/* footer-text */ /* footer-text */
.page-footer{ .page-footer{
padding: 32px 0; padding: 32px 0;
} }
.footer-text{ .footer-text{
text-align: center;
width: 63%; width: 63%;
} }
} }
@media screen and (max-width: 280px) { @media screen and (max-width: 280px) {
.top-card {
width: 95%;
padding: 36px 7px 26px;
}
.top-infocard-text {
max-width: 87%;
}
.banners-middle {
padding: 0px 10px;
}
.bottom-figures-card {
width: 95%;
padding: 35px 16px 65px;
}
.bottom-banner-text {
width: 90%;
}
} }

18
index.html
View File

@ -18,8 +18,8 @@
<body> <body>
<header class="page-header"> <header class="page-header">
<a href="./index.html"> <a href="./index.html" class="header-logo">
<img class="header-logo" src="./assets/imagens/Logo-M3Academy 1.svg" alt="Logo M3Academy"/> <img class="header-logo-image" src="./assets/imagens/Logo-M3Academy 1.svg" alt="Logo M3Academy"/>
</a> </a>
</header> </header>
<main> <main>
@ -131,17 +131,17 @@
<footer> <footer>
<div class="page-footer"> <div class="page-footer">
<ul class="footer-icons"> <ul class="footer-icons">
<li> <li class="icons">
<a href="#" target="_blank"> <a href="#" target="_blank">
<img class="icons" src="./assets/imagens/icon-instagram.svg" alt="Icone Instagram"/> </a> <img class="icons-image" src="./assets/imagens/icon-instagram.svg" alt="Icone Instagram"/> </a>
</li> </li>
<li> <li class="icons">
<a href="#" target="_blank"> <a href="#" target="_blank">
<img class="icons" src="./assets/imagens/icon-facebook.svg" alt="Icone facebook"/> </a> <img class="icons-image" src="./assets/imagens/icon-facebook.svg" alt="Icone facebook"/> </a>
</li> </li>
<li> <li class="icons">
<a href="#" target="_blank"> <a class="icons" href="#" target="_blank">
<img class="icons" src="./assets/imagens/icon-youtube.svg" alt="Icone Youtube" /> </a> <img class="icons-image" src="./assets/imagens/icon-youtube.svg" alt="Icone youtube"/> </a>
</li> </li>
</ul> </ul>
<p class="footer-text"> <p class="footer-text">