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

Adiciona o bottom infocard desktop, mobile e telas grandes

Browse Source
This commit is contained in:
Sabrina Miranda 2022-10-10 01:34:33 -03:00
parent b2850a36cc
commit a09ecf6414
3 changed files with 97 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/bottom-infocard-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 443 KiB

85
assets/styles/main.css
View File

@ -30,11 +30,11 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 80px 0 96px; padding: 80px 0 96px;
gap: 124px;
} }
.top-infocard-text { .top-infocard-text {
max-width: 40%; max-width: 40%;
margin-right: 124px;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -81,8 +81,8 @@ body {
.top-card-description { .top-card-description {
max-width: 85%; max-width: 85%;
text-align: center; text-align: center;
font-size: 16px;
line-height: 24px; line-height: 24px;
font-size: 16px;
} }
.bottom-cards { .bottom-cards {
@ -119,8 +119,32 @@ body {
.bottom-card-description { .bottom-card-description {
max-width: 85%; max-width: 85%;
text-align: center; text-align: center;
font-size: 16px;
line-height: 24px; line-height: 24px;
font-size: 16px;
}
.bottom-infocard {
display: flex;
align-items: center;
justify-content: center;
padding: 142px 0 180px;
gap: 40px;
}
.bottom-infocard-text {
max-width: 29%;
}
.bottom-infocard-title {
margin-bottom: 18px;
line-height: 32px;
font-size: 32px;
font-weight: 600;
}
.bottom-infocard-description {
line-height: 24px;
font-size: 16px;
} }
@media screen and (max-width: 340px) { @media screen and (max-width: 340px) {
@ -134,8 +158,8 @@ body {
} }
.top-card-description { .top-card-description {
font-size: 14px;
line-height: 22px; line-height: 22px;
font-size: 14px;
} }
.bottom-card { .bottom-card {
@ -145,6 +169,11 @@ body {
.bottom-card-image { .bottom-card-image {
max-width: 25%; max-width: 25%;
} }
.bottom-infocard-description {
line-height: 20px;
font-size: 14px;
}
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@ -204,6 +233,25 @@ body {
max-width: 82%; max-width: 82%;
font-size: 14px; font-size: 14px;
} }
.bottom-infocard {
flex-direction: column;
padding: 80px 0 135px;
}
.bottom-infocard-image {
width: 100%;
margin: 0 0 50px;
}
.bottom-infocard-text {
max-width: 85%;
}
.bottom-infocard-title {
line-height: 24px;
font-size: 24px;
}
} }
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
@ -215,10 +263,7 @@ body {
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.top-infocard { .top-infocard {
padding: 160px 0 192px; padding: 160px 0 192px;
} gap: 248;
.top-infocard-text {
margin-right: 10%;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -254,8 +299,8 @@ body {
} }
.top-card-description { .top-card-description {
font-size: 32px;
line-height: 48px; line-height: 48px;
font-size: 32px;
} }
.bottom-cards { .bottom-cards {
@ -281,7 +326,27 @@ body {
} }
.bottom-card-description { .bottom-card-description {
font-size: 32px;
line-height: 48px; line-height: 48px;
font-size: 32px;
}
.bottom-infocard {
padding: 284px 0 360px;
gap: 80px;
}
.bottom-infocard-image {
width: 1200px;
}
.bottom-infocard-title {
margin-bottom: 32px;
line-height: 64px;
font-size: 64px;
}
.bottom-infocard-description {
line-height: 48px;
font-size: 32px;
} }
} }

35
index.html
View File

@ -10,10 +10,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>M3 Landing Page</title> <title>M3 Landing Page</title>
<link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500;600 & display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./assets/styles/main.css">
<link rel="stylesheet" href="./assets/styles/main.css"/>
</head> </head>
<body> <body>
@ -49,28 +49,22 @@
<div class="top-cards"> <div class="top-cards">
<figure class="top-card"> <figure class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-01.svg" alt="Imagem do Primeiro Card do Topo"/> <img class="top-card-image" src="./assets/images/top-card-image-01.svg" alt="Imagem do Primeiro Card do Topo"/>
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption> <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure> </figure>
<figure class="top-card"> <figure class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-02.svg" alt="Imagem do Segundo Card do Topo"/> <img class="top-card-image" src="./assets/images/top-card-image-02.svg" alt="Imagem do Segundo Card do Topo"/>
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption> <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
<figure class="top-card"> <figure class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-03.svg" alt="Imagem do Terceiro Card do Topo"/> <img class="top-card-image" src="./assets/images/top-card-image-03.svg" alt="Imagem do Terceiro Card do Topo"/>
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
@ -92,34 +86,49 @@
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-02.svg" alt="Imagem do Segundo Card de Baixo"/> <img class="bottom-card-image" src="./assets/images/bottom-card-02.svg" alt="Imagem do Segundo Card de Baixo"/>
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-03.svg" alt="Imagem do Terceiro Card de Baixo"/> <img class="bottom-card-image" src="./assets/images/bottom-card-03.svg" alt="Imagem do Terceiro Card de Baixo"/>
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.svg" alt="Imagem do Quarto Card de Baixo"/> <img class="bottom-card-image" src="./assets/images/bottom-card-04.svg" alt="Imagem do Quarto Card de Baixo"/>
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
</div> </div>
<section class="bottom-infocard">
<figure>
<img class="bottom-infocard-image" src="./assets/images/bottom-infocard-image.png" alt="Banner do Infocard de Baixo"/>
</figure>
<div class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</div>
</section>
</main> </main>
</body> </body>
</html> </html>