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

Correcao geral

Browse Source
This commit is contained in:
carloswinter 2022-10-11 10:25:28 -03:00
parent 8322f5de14
commit 33c73bda78
2 changed files with 20 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/styles/main.css
View File

@ -12,9 +12,6 @@ body{
width: 100%; width: 100%;
height: 100px; height: 100px;
padding:28px; padding:28px;
}
.header img{
} }
.topbannerdesktop{ .topbannerdesktop{
width: 100%; width: 100%;
@ -30,26 +27,20 @@ body{
} }
.topinfo-texts{ .topinfo-texts{
text-align: center; text-align: center;
margin-top: 73px; margin-top: 6.5vh;
width: 43%; width: 43%;
} }
.topinfo-subtitle{ .topinfo-subtitle{
text-transform: uppercase; text-transform: uppercase;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
} }
.topinfo-title{ .topinfo-title{
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
line-height: 58px; line-height: 58px;
text-transform: uppercase; text-transform: uppercase;
} }
.topinfo-text{ .topinfo-text{
font-weight: 400; font-weight: 400;
@ -57,7 +48,6 @@ body{
line-height: 24px; line-height: 24px;
margin-top: 28px; margin-top: 28px;
text-align: left; text-align: left;
} }
.topinfo-img{ .topinfo-img{
margin-top:70px; margin-top:70px;
@ -70,7 +60,7 @@ body{
margin-bottom: 80px; margin-bottom: 80px;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap:21px; gap:1.09vw;
} }
.topcard{ .topcard{
padding: 46px 26px 27px; padding: 46px 26px 27px;
@ -94,10 +84,9 @@ body{
justify-content: center; justify-content: center;
top:62px; top:62px;
width: 100%; width: 100%;
} }
.gridimg{ .gridimg{
margin:0 72px; margin:0 3.75vw;
display: grid; display: grid;
flex-wrap:nowrap; flex-wrap:nowrap;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
@ -115,12 +104,11 @@ body{
.middle-img3{ .middle-img3{
display: block; display: block;
width: 100%; width: 100%;
} }
.middlecards{ .middlecards{
display:flex; display:flex;
margin: 129px 72px 0 72px; margin: 129px 3.75vw 0 3.75vw;
gap:16px; gap: 0.85vw;
background: #FFFFFF; background: #FFFFFF;
} }
.middlecard{ .middlecard{
@ -141,13 +129,11 @@ body{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.bottombanner figure figcaption{ .bottombanner figure figcaption{
width: 35%; max-width: 28%;
} }
.bottombanner-subtitle{ .bottombanner-subtitle{
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
@ -175,7 +161,6 @@ body{
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: 17px; gap: 17px;
} }
.footer a{ .footer a{
text-decoration: none; text-decoration: none;
@ -183,10 +168,8 @@ body{
.footer nav figure{ .footer nav figure{
display: flex; display: flex;
gap:21px; gap:21px;
}
}
.footerimg{
}
.footer-text{ .footer-text{
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
@ -195,7 +178,6 @@ body{
color: #BDBDBD; color: #BDBDBD;
} }
@media screen and (max-width: 767px){ @media screen and (max-width: 767px){
.topbannerdesktop{ .topbannerdesktop{
display:none; display:none;
@ -206,8 +188,6 @@ body{
} }
} }
@media screen and (max-width: 1439px){ @media screen and (max-width: 1439px){
.topinfo-texts{ .topinfo-texts{
min-width: 86%; min-width: 86%;
@ -218,7 +198,6 @@ body{
line-height: 24px; line-height: 24px;
} }
.topinfo-title{ .topinfo-title{
font-weight: 500; font-weight: 500;
font-size: 28px; font-size: 28px;
@ -245,15 +224,12 @@ body{
flex-direction:column; flex-direction:column;
gap:24px; gap:24px;
} }
.topcard-text{ .topcard-text{
min-width: 0; min-width: 0;
} }
.middle-wrapper{ .middle-wrapper{
top:32px; top:32px;
} }
.gridimg{ .gridimg{
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
@ -267,7 +243,6 @@ body{
grid-area: 1 / 3 / 2 / 5; grid-area: 1 / 3 / 2 / 5;
} }
.middle-img2{ .middle-img2{
grid-area: 1 / 1 / 2 / 3; grid-area: 1 / 1 / 2 / 3;
} }
.middle-img3{ .middle-img3{
@ -278,13 +253,9 @@ body{
margin: 80px 23px; margin: 80px 23px;
flex-direction: column; flex-direction: column;
} }
.middlecard{
}
.middlecard-text{ .middlecard-text{
font-size: 14px; font-size: 14px;
} }
.bottombanner-desktop{ .bottombanner-desktop{
display: none; display: none;
} }
@ -301,7 +272,7 @@ body{
text-align: center; text-align: center;
} }
.bottombanner figure figcaption{ .bottombanner figure figcaption{
width:auto; max-width:100%;
margin: 0 7%; margin: 0 7%;
} }
.bottombanner-subtitle{ .bottombanner-subtitle{
@ -320,12 +291,10 @@ body{
display:block; display:block;
width: 100%; width: 100%;
} }
.footer{ .footer{
margin-top: 87px; margin-top: 87px;
padding: 32px; padding: 32px;
} }
.footer-text{ .footer-text{
text-align: center; text-align: center;
font-size: 10px; font-size: 10px;
@ -346,7 +315,6 @@ body{
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
margin-top: 28px; margin-top: 28px;
} }
.figuretopinfo{ .figuretopinfo{
width: 100%; width: 100%;
@ -378,10 +346,12 @@ body{
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
} }
.footer-text{ .footer-text{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }
.footerimg{
width: 1.35vw;
}
} }

10
index.html
View File

@ -14,7 +14,7 @@
<body> <body>
<header class="header"> <header class="header">
<figure> <figure>
<a href="#"> <a href="/">
<img src="./assets/images/svg/Logo-M3Academy.svg" alt="Logo-M3Academy"> <img src="./assets/images/svg/Logo-M3Academy.svg" alt="Logo-M3Academy">
</a> </a>
</figure> </figure>
@ -99,7 +99,7 @@
</div> </div>
</section> </section>
<section class="bottombanner"> <section class="bottombanner">
<figure> <figure class="bottombanner-fig">
<figcaption> <figcaption>
<h2 class="bottombanner-subtitle"> <h2 class="bottombanner-subtitle">
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
@ -118,13 +118,13 @@
<footer class="footer"> <footer class="footer">
<nav> <nav>
<figure> <figure>
<a href="#"> <a href="/">
<img class="footerimg" src="./assets/images/img/iglogo.png" alt="Ícone Instagram"> <img class="footerimg" src="./assets/images/img/iglogo.png" alt="Ícone Instagram">
</a> </a>
<a href="#"> <a href="/">
<img class="footerimg" src="./assets/images/img/fblogo.png" alt="Ícone Facebook"> <img class="footerimg" src="./assets/images/img/fblogo.png" alt="Ícone Facebook">
</a> </a>
<a href="#"> <a href="/">
<img class="footerimg" src="./assets/images/img/ytlogo.png" alt="Ícone Youtube"> <img class="footerimg" src="./assets/images/img/ytlogo.png" alt="Ícone Youtube">
</a> </a>
</figure> </figure>