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

feat: Cria sessao de infocard e incia a responsividade mobile

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-10-09 22:31:36 -03:00
parent edfdeaac41
commit 19f785b1d1
2 changed files with 87 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -2,6 +2,11 @@
<html lang="pt-br"> <html lang="pt-br">
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -26,18 +31,13 @@
</div> </div>
<div class="container-infocard"> <div class="container-infocard">
<div class="infocard-text"> <div class="infocard-text">
<h1>Lorem ipsum</h1> <h2>Lorem ipsum</h2>
<h2>dolor sit amet</h2> <h1>dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p> dui. </p>
</div> </div>
<div class="infocard-img"> <img src="assets/fxemoji_threenetworkedcomputers.png" alt="Computadores" class="banner-infocard">
<figure>
<img src="assets/fxemoji_threenetworkedcomputers.png" alt="Computadores" class="banner-infocard">
</figure>
</div>
</div> </div>
</main> </main>
</body> </body>

79
style/style.css
View File

@ -4,6 +4,10 @@
box-sizing: border-box; box-sizing: border-box;
} }
body {
font-family: 'Inter', sans-serif;
}
header { header {
display: flex; display: flex;
@ -24,7 +28,31 @@ header {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 80px 0; padding: 80px 0 96px;
}
.infocard-text {
width: 47.875rem;
margin-right: 7.75rem;
}
.infocard-text h1 {
font-weight: 500;
font-size: 3rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.infocard-text h2 {
font-weight: 400;
font-size: 2em;
text-transform: uppercase;
}
.infocard-text p {
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
} }
.banner-infocard { .banner-infocard {
@ -33,9 +61,50 @@ header {
display: block; display: block;
} }
@media (max-width:414px) {
@media screen and (min-width:280px) and (max-width: 768px) {
.banner-principal-desktop { .banner-principal-desktop {
display: none; display: none;
}
.container-infocard {
display: flex;
flex-direction: column;
align-items: center;
}
.infocard-text {
width: 100%;
max-width: 357px;
margin: 1.875rem;
}
.infocard-text h1 {
width: 100%;
max-width: 14.6875rem;
font-size: 1.75rem;
font-weight: 500;
}
.infocard-text h2 {
max-width: 14.6875rem;
font-size: 20px;
font-weight: 400;
}
.infocard-text p {
font-size: 1rem;
line-height: 1.5rem;
}
.banner-infocard {
height: 15rem;
width: 15rem;
margin: 68px 88px 157px;
} }
} }
@ -44,4 +113,10 @@ header {
.banner-principal-mobile { .banner-principal-mobile {
display: none; display: none;
} }
}
@media screen and (min-width:2500px) {
body {
background: red;
}
} }