anacarolinaduartecavalcante/challenge-landing-page-Ana-Carolina-Duarte-Cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: remoção de espaços desnecessários

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-10-10 12:19:07 -03:00
parent d926480557
commit caab75c00f
4 changed files with 98 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -80,8 +80,7 @@
<img src="./assets/imgs/card-3.png" alt="imagem vista de perto e de lado de um macbook"> <img src="./assets/imgs/card-3.png" alt="imagem vista de perto e de lado de um macbook">
</figure> </figure>
</div> </div>
</div> </div>
</div> </div>
<div class="bottom-cards"> <div class="bottom-cards">
<div class="bottom-cards-container"> <div class="bottom-cards-container">
@ -135,12 +134,11 @@
</main> </main>
<footer> <footer>
<div class="social-media"> <div class="social-media">
<a href="#"><img src="./assets/svg/instagram.svg" alt="ícone instagram"></a> <a href="/"><img src="./assets/svg/instagram.svg" alt="ícone instagram"></a>
<a href="#"><img src="./assets/svg/facebook.svg" alt="ícone facebook"></a> <a href="/"><img src="./assets/svg/facebook.svg" alt="ícone facebook"></a>
<a href="#"><img src="./assets/svg/youtube.svg" alt="ícone youtube"></a> <a href="/"><img src="./assets/svg/youtube.svg" alt="ícone youtube"></a>
</div> </div>
<span>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 <span>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</span>
</span>
</footer> </footer>
</body> </body>
</html> </html>

20
styles/footer.css
View File

@ -1,4 +1,4 @@
footer { footer{
width: 100%; width: 100%;
height: 128px; height: 128px;
bottom: 0; bottom: 0;
@ -10,7 +10,7 @@ footer {
flex-direction: column; flex-direction: column;
} }
footer .social-media { footer .social-media{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -18,7 +18,7 @@ footer .social-media {
width: 104px; width: 104px;
} }
footer span { footer span{
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
@ -26,28 +26,28 @@ footer span {
color: #BDBDBD; color: #BDBDBD;
} }
@media screen and (max-width: 1025px) { @media screen and (max-width: 1025px){
footer span { footer span{
width: 261px; width: 261px;
text-align: center; text-align: center;
} }
} }
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px){
footer { footer{
height: 256px; height: 256px;
} }
footer .social-media { footer .social-media{
margin-bottom: 32px; margin-bottom: 32px;
width: 208px; width: 208px;
} }
footer .social-media a img { footer .social-media a img{
width: 48px; width: 48px;
} }
footer span { footer span{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }

13
styles/header.css
View File

@ -1,4 +1,4 @@
header { header{
width: 100%; width: 100%;
height: 101px; height: 101px;
left: 0; left: 0;
@ -7,21 +7,18 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
header a img { header a img{
display: block; display: block;
} }
@media screen and (min-width: 2500px){
@media screen and (min-width: 2500px) { header{
header {
height: 202px; height: 202px;
} }
header a img { header a img{
width: 452px; width: 452px;
} }
} }

159
styles/main.css
View File

@ -1,15 +1,14 @@
/* primeiro background */ /* primeiro background */
.background-main figure img { .background-main figure img{
width: 100%; width: 100%;
height: 700px; height: 700px;
top: 0; top: 0;
max-height: 700px; max-height: 700px;
object-fit: cover; object-fit: cover;
} }
/* primeira seção com imagem e texto */ /* primeira seção com imagem e texto */
.first-section { .first-section{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -18,7 +17,7 @@
position: relative; position: relative;
} }
.first-section h2 { .first-section h2{
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
@ -26,7 +25,7 @@
color: #000000; color: #000000;
} }
.first-section h1 { .first-section h1{
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
line-height: 58px; line-height: 58px;
@ -35,13 +34,13 @@
margin-bottom: 28px; margin-bottom: 28px;
} }
.first-section figure { .first-section figure{
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.first-section figcaption { .first-section figcaption{
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
@ -52,13 +51,13 @@
} }
/* primeiros cards */ /* primeiros cards */
.first-content-card { .first-content-card{
margin-top: 179px; margin-top: 179px;
margin-bottom: 62px; margin-bottom: 62px;
width: 100%; width: 100%;
} }
.content-card-container { .content-card-container{
max-width: 1092px; max-width: 1092px;
width: 100%; width: 100%;
height: 350px; height: 350px;
@ -71,7 +70,7 @@
margin: auto; margin: auto;
} }
.first-card figure, .second-card figure, .three-card figure { .first-card figure,.second-card figure,.three-card figure{
width: 100%; width: 100%;
max-width: 350px; max-width: 350px;
height: 287.68px; height: 287.68px;
@ -85,7 +84,7 @@
padding: 27px; padding: 27px;
} }
.first-card figcaption, .second-card figcaption, .three-card figcaption { .first-card figcaption,.second-card figcaption,.three-card figcaption{
max-width: 299px; max-width: 299px;
width: 100%; width: 100%;
height: auto; height: auto;
@ -98,13 +97,13 @@
} }
/* cards com imagem de macbook */ /* cards com imagem de macbook */
.cards-macbook { .cards-macbook{
width: 100%; width: 100%;
height: 530px; height: 530px;
background: #E0E0E0; background: #E0E0E0;
} }
.cards-macbook-container { .cards-macbook-container{
max-width: 1776px; max-width: 1776px;
width: 100%; width: 100%;
height: 530px; height: 530px;
@ -119,19 +118,19 @@
top: 62px; top: 62px;
} }
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img { .first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
max-width: 566px; max-width: 566px;
width: 100%; width: 100%;
} }
/* área final com 4 cards */ /* área final com 4 cards */
.bottom-cards { .bottom-cards{
margin-top: 191px; margin-top: 191px;
margin-bottom: 108px; margin-bottom: 108px;
width: 100%; width: 100%;
} }
.bottom-cards-container { .bottom-cards-container{
max-width: 1776px; max-width: 1776px;
width: 100%; width: 100%;
height: 332px; height: 332px;
@ -144,7 +143,7 @@
margin: auto; margin: auto;
} }
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure { .first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure,.four-bottom-card figure{
width: 100%; width: 100%;
max-width: 432px; max-width: 432px;
height: 332px; height: 332px;
@ -158,7 +157,7 @@
padding: 27px; padding: 27px;
} }
.first-bottom-card figcaption, .second-bottom-card figcaption, .three-bottom-card figcaption, .four-bottom-card figcaption { .first-bottom-card figcaption,.second-bottom-card figcaption,.three-bottom-card figcaption,.four-bottom-card figcaption{
max-width: 367px; max-width: 367px;
width: 100%; width: 100%;
height: auto; height: auto;
@ -171,12 +170,12 @@
} }
/* seção final com título, texto e imagem */ /* seção final com título, texto e imagem */
.banner-final { .banner-final{
width: 100%; width: 100%;
padding: 36px 7% 116px 7%; padding: 36px 7% 116px 7%;
} }
.banner-final figure { .banner-final figure{
max-width: 1360px; max-width: 1360px;
height: 484px; height: 484px;
display: flex; display: flex;
@ -187,14 +186,14 @@
margin: auto; margin: auto;
} }
.banner-final figure img { .banner-final figure img{
width: 100%; width: 100%;
height: 276px; height: 276px;
object-fit: cover; object-fit: cover;
object-position: 25% 55%; object-position: 25% 55%;
} }
.banner-final figure .banner-final-text h3 { .banner-final figure .banner-final-text h3{
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
@ -202,7 +201,7 @@
color: #000000; color: #000000;
} }
.banner-final .banner-final-text figcaption { .banner-final .banner-final-text figcaption{
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
@ -214,38 +213,37 @@
text-align: center; text-align: center;
} }
@media screen and (max-width: 1025px) { @media screen and (max-width: 1025px){
.background-main figure img { .background-main figure img{
height: 100%; height: 100%;
min-height: 598px; min-height: 598px;
} }
.first-section { .first-section{
padding: 0 28px; padding: 0 28px;
} }
.first-section h2 { .first-section h2{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }
.first-section h1 { .first-section h1{
font-size: 28px; font-size: 28px;
line-height: 34px; line-height: 34px;
text-align: center; text-align: center;
} }
.first-section figure img { .first-section figure img{
width: 100%; width: 100%;
max-width: 239px; max-width: 239px;
} }
.first-section figcaption { .first-section figcaption{
text-align: center; text-align: center;
} }
.first-content-card{
.first-content-card {
margin-top: 91px; margin-top: 91px;
width: 100%; width: 100%;
max-width: 1092px; max-width: 1092px;
@ -255,7 +253,7 @@
align-items: center; align-items: center;
} }
.content-card-container { .content-card-container{
width: 100%; width: 100%;
height: 894px; height: 894px;
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
@ -264,7 +262,7 @@
gap: 24px; gap: 24px;
} }
.cards-macbook { .cards-macbook{
grid-gap: 10px; grid-gap: 10px;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
@ -274,7 +272,7 @@
position: relative; position: relative;
} }
.cards-macbook-container { .cards-macbook-container{
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
grid-template-areas: grid-template-areas:
@ -289,13 +287,13 @@
padding: 0 23px; padding: 0 23px;
} }
.first-card-macbook { .first-card-macbook{
grid-area: A; grid-area: A;
max-width: 177px; max-width: 177px;
height: auto; height: auto;
} }
.first-card-macbook figure img { .first-card-macbook figure img{
width: 100%; width: 100%;
} }
@ -305,21 +303,21 @@
height: auto; height: auto;
} }
.second-card-macbook figure img { .second-card-macbook figure img{
width: 100%; width: 100%;
} }
.third-card-macbook { .third-card-macbook{
grid-area: C; grid-area: C;
max-width: 368px; max-width: 368px;
height: auto; height: auto;
} }
.third-card-macbook figure img { .third-card-macbook figure img{
width: 100%; width: 100%;
} }
.bottom-cards { .bottom-cards{
margin-top: 80px; margin-top: 80px;
width: 100%; width: 100%;
max-height: 1376px; max-height: 1376px;
@ -328,7 +326,7 @@
align-items: center; align-items: center;
} }
.bottom-cards-container { .bottom-cards-container{
width: 100%; width: 100%;
height: 100%; height: 100%;
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
@ -340,7 +338,7 @@
gap: 16px; gap: 16px;
} }
.first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img { .first-bottom-card figure img,.second-bottom-card figure img,.three-bottom-card figure img,.four-bottom-card figure img{
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -349,7 +347,7 @@
padding: 0; padding: 0;
} }
.banner-final figure { .banner-final figure{
max-width: 414px; max-width: 414px;
width: 100%; width: 100%;
height: auto; height: auto;
@ -361,27 +359,27 @@
margin: auto; margin: auto;
} }
.banner-final figure img { .banner-final figure img{
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 50px; margin-bottom: 50px;
} }
.banner-final-text { .banner-final-text{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.banner-final figure .banner-final-text h3 { .banner-final figure .banner-final-text h3{
font-weight: 600; font-weight: 600;
font-size: 24px; font-size: 24px;
line-height: 29px; line-height: 29px;
margin-bottom: 9px; margin-bottom: 9px;
} }
.banner-final .banner-final-text figcaption { .banner-final .banner-final-text figcaption{
margin-bottom: 87px; margin-bottom: 87px;
max-width: 350px; max-width: 350px;
width: 100%; width: 100%;
@ -389,53 +387,53 @@
} }
@media screen and (max-width: 281px) { @media screen and (max-width: 281px){
.cards-macbook { .cards-macbook {
height: auto; height: auto;
} }
.cards-macbook-container { .cards-macbook-container{
height: auto; height: auto;
top: 32px; top: 32px;
} }
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure { .first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure, .four-bottom-card figure{
height: auto; height: auto;
} }
.bottom-cards { .bottom-cards{
max-height: 1640px; max-height: 1640px;
} }
.banner-final .banner-final-text figcaption { .banner-final .banner-final-text figcaption{
margin-bottom: 87px; margin-bottom: 87px;
padding: 0 32px 0 32px; padding: 0 32px 0 32px;
} }
} }
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px){
.background-main figure img { .background-main figure img {
height: 70%; height: 70%;
max-height: 700px; max-height: 700px;
} }
.first-section h2 { .first-section h2{
font-size: 64px; font-size: 64px;
line-height: 78px; line-height: 78px;
} }
.first-section h1 { .first-section h1{
font-size: 96px; font-size: 96px;
line-height: 116px; line-height: 116px;
} }
.first-section figcaption { .first-section figcaption{
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
max-width: 55%; max-width: 55%;
} }
.first-section figure img { .first-section figure img{
width: 16%; width: 16%;
} }
@ -444,7 +442,7 @@
margin-bottom: 124px; margin-bottom: 124px;
} }
.content-card-container { .content-card-container{
width: 100%; width: 100%;
max-width: 60%; max-width: 60%;
height: 574px; height: 574px;
@ -453,29 +451,29 @@
gap: 42px; gap: 42px;
} }
.first-card figure, .second-card figure, .three-card figure { .first-card figure,.second-card figure,.three-card figure{
width: 650px; width: 650px;
height: 574px; height: 574px;
max-width: none; max-width: none;
} }
.first-card figure img, .second-card figure img, .three-card figure img { .first-card figure img,.second-card figure img,.three-card figure img{
width: 100%; width: 100%;
max-width: 25%; max-width: 25%;
} }
.first-card figcaption, .second-card figcaption, .three-card figcaption { .first-card figcaption,.second-card figcaption,.three-card figcaption{
max-width: 90%; max-width: 90%;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
} }
.cards-macbook { .cards-macbook{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.cards-macbook-container { .cards-macbook-container{
max-width: none; max-width: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -483,14 +481,14 @@
padding: 0 72px; padding: 0 72px;
} }
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img { .first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
max-width: 754px; max-width: 754px;
height: 706px; height: 706px;
width: 100%; width: 100%;
} }
.bottom-cards { .bottom-cards{
margin-top: 382px; margin-top: 382px;
margin-bottom: 216px; margin-bottom: 216px;
max-width: none; max-width: none;
@ -499,7 +497,7 @@
padding: 0 72px; padding: 0 72px;
} }
.bottom-cards-container { .bottom-cards-container{
max-width: none; max-width: none;
width: 100%; width: 100%;
height: 664px; height: 664px;
@ -510,52 +508,52 @@
margin: auto; margin: auto;
} }
.first-bottom-card , .second-bottom-card , .three-bottom-card , .four-bottom-card { .first-bottom-card ,.second-bottom-card ,.three-bottom-card ,.four-bottom-card{
width: 100%; width: 100%;
max-width: 840px; max-width: 840px;
height: 664px; height: 664px;
} }
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure { .first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure,.four-bottom-card figure{
width: 100%; width: 100%;
max-width: 840px; max-width: 840px;
height: 664px; height: 664px;
padding: 27px; padding: 27px;
} }
.first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img{ .first-bottom-card figure img,.second-bottom-card figure img,.three-bottom-card figure img,.four-bottom-card figure img{
width: 100%; width: 100%;
max-width: 25%; max-width: 25%;
} }
.first-bottom-card figcaption, .second-bottom-card figcaption, .three-bottom-card figcaption, .four-bottom-card figcaption { .first-bottom-card figcaption,.second-bottom-card figcaption,.three-bottom-card figcaption,.four-bottom-card figcaption{
max-width: 734px; max-width: 734px;
width: 100%; width: 100%;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
} }
.banner-final { .banner-final{
padding: 144px 14% 464px 14%; padding: 144px 14% 464px 14%;
} }
.banner-final figure { .banner-final figure{
max-width: 2720px; max-width: 2720px;
height: 484px; height: 484px;
} }
.banner-final figure img { .banner-final figure img{
width: 100%; width: 100%;
height: 484px; height: 484px;
} }
.banner-final figure .banner-final-text h3 { .banner-final figure .banner-final-text h3{
font-size: 64px; font-size: 64px;
line-height: 78px; line-height: 78px;
} }
.banner-final .banner-final-text figcaption { .banner-final .banner-final-text figcaption{
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
margin-bottom: 100px; margin-bottom: 100px;
@ -563,17 +561,16 @@
} }
} }
@media screen and (min-width: 3500px) { @media screen and (min-width: 3500px){
.background-main figure img { .background-main figure img{
height: 100%; height: 100%;
max-height: 1400px; max-height: 1400px;
} }
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img { .first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img{
max-width: 1132px; max-width: 1132px;
height: 1060px; height: 1060px;
width: 100%; width: 100%;
} }
} }