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

feature/responsividade #3

Merged
MateusLopes merged 5 commits from feature/responsividade into main 2022-10-12 21:24:09 +00:00
Conversation 0 Commits 5 Files Changed 3 +116 -27
3 changed files with 116 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -11,6 +11,7 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css"> <link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/responsive.css">
<title>Landing Page</title> <title>Landing Page</title>
</head> </head>
<body> <body>
@ -122,6 +123,9 @@
</section> </section>
<!-- Artigo da pagina --> <!-- Artigo da pagina -->
<article class="container-article"> <article class="container-article">
<figure class="article-image-mobile">
<img class="image-mobile" src="./assets/images/article-image-mobile.png" alt="Um oculos na frente de um monitor com a tela desfocada">
</figure>
<div class="article-text"> <div class="article-text">
<h3 class="article-title">Lorem ipsum dolor sit amet</h3> <h3 class="article-title">Lorem ipsum dolor sit amet</h3>
<p class="article-description"> <p class="article-description">
@ -130,9 +134,8 @@
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p> </p>
</div> </div>
<figure class="article-image"> <figure class="article-image-desktop">
<img src="./assets/images/article-image.png" alt="Varias telas de monitores desfocada"> <img src="./assets/images/article-image.png" alt="Varias telas de monitores desfocada">
<img class="image-mobile" src="./assets/images/article-image-mobile.png" alt="Um oculos na frente de um monitor com a tela desfocada">
</figure> </figure>
</article> </article>
</main> </main>

81
styles/responsive.css Normal file
View File

@ -0,0 +1,81 @@
/* Adicionando responsividade para tela 4k */
@media (min-width: 1920px) {
* {
font-size: 1.13em;
}
}
/* Adicionando responsividade para celulares */
@media (max-width: 425px) {
/* Banner principal da pagina */
main .banner-container .banner-desktop{
display: none;
}
main .banner-container .banner-mobile{
display: block;
}
/* Titulo e descricao do site */
main section.container-description{
padding: 73px 0 90px;
gap: 24px;
}
main section.container-description .description-text h2.description-title{
font-size: 1.25rem;
}
main section.container-description .description-text h2.description-title span.description-subtitle{
font-size: 1.75rem;
}
main section.container-description .description-text p.description{
width: 86%;
padding: 16px 0 65px;
}
main section.container-description .description-text p.description .image-description{
width: 58%;
}
/* Container com tres imagens */
main .container-three-images {
margin-bottom: 112px;
}
main .container-three-images .three-images-wrapper {
gap: 3%;
padding: 0 23px;
top: 41px;
}
main .container-three-images .three-images-wrapper figure:nth-child(1),
main .container-three-images .three-images-wrapper figure:nth-child(2) {
display: flex;
width: 48.1%;
padding-bottom: 9px;
}
/* Artigo da pagina */
main article.container-article{
align-items: unset;
padding: 98px 0px 87px;
}
main article.container-article .article-text{
padding: 0 32px;
}
main article.container-article figure.article-image-mobile{
display: block;
padding-bottom: 50px;
}
main article.container-article figure.article-image-desktop{
display: none;
}
main article.container-article .article-text h3.article-title{
font-size: 1.5em;
}
main article.container-article .article-text p.article-description{
padding-top: 9px;
width: 100%;
}
/* Footer da pagina */
footer span.footer-description{
text-align: center;
width: 69%;
}
}

53
styles/style.css
View File

@ -3,10 +3,20 @@
box-sizing: border-box; box-sizing: border-box;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
} }
body{ body{
width: 100%; width: 100%;
} }
figure{
display: flex;
justify-content: center;
}
img{
width: 100%;
}
.card{ .card{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -54,6 +64,12 @@ main section.container-description{
padding: 73px 0 178px; padding: 73px 0 178px;
} }
main section.container-description .description-text{
display: flex;
flex-direction: column;
align-items: center;
}
main section.container-description .description-text h2.description-title{ main section.container-description .description-text h2.description-title{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -61,18 +77,17 @@ main section.container-description .description-text h2.description-title{
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 2em;
text-transform: uppercase; text-transform: uppercase;
} }
main section.container-description .description-text h2.description-title span.description-subtitle{ main section.container-description .description-text h2.description-title span.description-subtitle{
font-size: 48px; font-size: 1.5em;
font-weight: 500; font-weight: 500;
} }
main section.container-description .description-text p.description{ main section.container-description .description-text p.description{
width: 40%; width: 40%;
line-height: 24px;
font-weight: 400; font-weight: 400;
padding: 28px 0 73px; padding: 28px 0 73px;
} }
@ -90,15 +105,15 @@ main section.container-cards{
main section.container-cards .card{ main section.container-cards .card{
width: 350px; width: 350px;
height: 287px; height: fit-content;
} }
main section.container-cards .card img.card-image{ main section.container-cards .card img.card-image{
width: fit-content;
padding-top: 35px; padding-top: 35px;
} }
main section.container-cards .card figcaption.card-description{ main section.container-cards .card figcaption.card-description{
line-height: 24px;
padding: 30px 25px 27px 26px; padding: 30px 25px 27px 26px;
} }
@ -120,18 +135,17 @@ main .container-three-images .three-images-wrapper{
padding: 0 62px; padding: 0 62px;
} }
main .container-three-images .three-images-wrapper img{ /* Segundo container com cards */
width: 566px; main section.container-cards.second{
padding-bottom: 0;
} }
/* Segundo container com cards */
main section.container-cards.second .card{ main section.container-cards.second .card{
width: 432px; width: 432px;
height: 332px height: fit-content;
} }
main section.container-cards.second .card figcaption.card-description{ main section.container-cards.second .card figcaption.card-description{
line-height: 24px;
padding: 30px 32px 65px 33px; padding: 30px 32px 65px 33px;
} }
@ -149,35 +163,26 @@ main article.container-article .article-text{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
line-height: 24px;
padding-bottom: 50px; padding-bottom: 50px;
} }
main article.container-article .article-text h3.article-title{ main article.container-article .article-text h3.article-title{
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 2em;
line-height: 39px; line-height: 39px;
} }
main article.container-article .article-text p.article-description{ main article.container-article .article-text p.article-description{
padding-top: 35px;
width: 100%; width: 100%;
max-width: 550px; width: 40%;
} }
main article.container-article figure.article-image{ main article.container-article figure.article-image-mobile{
display: flex;
justify-content: center;
}
main article.container-article figure.article-image img.image-mobile{
display: none; display: none;
} }
main article.container-article figure.article-image img{
width: 100%;
}
/* Footer da pagina */ /* Footer da pagina */
footer{ footer{
display: flex; display: flex;
@ -196,7 +201,7 @@ footer .social-links{
} }
footer span.footer-description{ footer span.footer-description{
font-size: 10px; font-size: 0.625em;
text-transform: uppercase; text-transform: uppercase;
color: #BDBDBD; color: #BDBDBD;
line-height: 12px; line-height: 12px;