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 rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/responsive.css">
<title>Landing Page</title>
</head>
<body>
@ -122,6 +123,9 @@
</section>
<!-- Artigo da pagina -->
<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">
<h3 class="article-title">Lorem ipsum dolor sit amet</h3>
<p class="article-description">
@ -130,9 +134,8 @@
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</div>
<figure class="article-image">
<figure class="article-image-desktop">
<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>
</article>
</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%;
}
}

55
styles/style.css
View File

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