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{
display: flex;
justify-content: center;
text-align: center;
padding: 29px 0;
background-color: #000;
}
.header-logo{
width: 12vw;
min-width: 226px;
width: 12%;
}
.header-logo-image{
width: 100%;
}
/* main-banner */
.main-banner-desktop{
@ -177,19 +180,25 @@ body{
.footer-icons{
display: flex;
list-style: none;
justify-content: center;
gap: 16px;
}
.icons{
width: 100%;
}
.icons-image{
width: 5%;
min-width: 24px;
}
.footer-text{
text-align: center;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
}
.icons{
width: 1vw;
min-width: 24px;
}
/* layout 4K */
@media screen and (min-width: 2500px) {
.page-header{
@ -227,9 +236,14 @@ body{
font-size: 20px;
line-height: 24px;
}
.icons-image{
min-width: 48px;}
}
/* layaut mobile */
@media screen and (max-width: 1024px) {
.header-logo{
width: 55%;
}
.main-banner-desktop{
display: none;
}
@ -240,9 +254,11 @@ body{
/* top infocard */
.top-inforcard-subtitle{
font-size: 20px;
line-height: 34px;
}
.top-infocard-title{
font-size: 28px;
line-height: 24px;
}
.top-infocard-text{
text-align: center;
@ -259,7 +275,7 @@ body{
padding: 90px 0;
}
.top-card{
width: 84%;
width: 85%;
gap: 37px;
}
.top-card-image{
@ -272,7 +288,7 @@ body{
"b1 b2"
"b3 b3";
justify-items: center;
padding: 0px 23px 0px;
padding: 0px 23px;
gap: 14px;
top: 32px;
}
@ -298,7 +314,7 @@ body{
width: 29%;
}
.bottom-figures-card{
width: 94%;
width: 89%;
}
/* bottom-banner */
.bottom-banner{
@ -321,16 +337,32 @@ body{
.bottom-banner-subtitle{
font-size: 24px;
line-height: 29px;
margin-bottom: 9px;
}
/* footer-text */
.page-footer{
padding: 32px 0;
}
.footer-text{
text-align: center;
width: 63%;
}
}
@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>
<header class="page-header">
<a href="./index.html">
<img class="header-logo" src="./assets/imagens/Logo-M3Academy 1.svg" alt="Logo M3Academy"/>
<a href="./index.html" class="header-logo">
<img class="header-logo-image" src="./assets/imagens/Logo-M3Academy 1.svg" alt="Logo M3Academy"/>
</a>
</header>
<main>
@ -131,17 +131,17 @@
<footer>
<div class="page-footer">
<ul class="footer-icons">
<li>
<li class="icons">
<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 class="icons">
<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>
<a href="#" target="_blank">
<img class="icons" src="./assets/imagens/icon-youtube.svg" alt="Icone Youtube" /> </a>
<li class="icons">
<a class="icons" href="#" target="_blank">
<img class="icons-image" src="./assets/imagens/icon-youtube.svg" alt="Icone youtube"/> </a>
</li>
</ul>
<p class="footer-text">