Adiciona top cards mobile e desktop
This commit is contained in:
parent
fda16ebfe5
commit
a80e43c164
@ -9,6 +9,8 @@ body {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/*Header da landing page M3 Academy*/
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -21,82 +23,178 @@ body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*Banner principal*/
|
||||
|
||||
.main-banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Infocard do topo */
|
||||
|
||||
.top-infocard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 178px;
|
||||
margin: 73px 0 178px;
|
||||
}
|
||||
|
||||
.top-infocard-text {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin-top: 74px;
|
||||
padding: 0 0 73px;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
||||
.top-infocard-title {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
padding: 0 0 28px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 74px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
max-width: 16%;
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 392px) {
|
||||
|
||||
/*Cards do Topo*/
|
||||
|
||||
.top-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
background: #FFFFFF;
|
||||
gap: 21px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 47px 25px 27px 26px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.top-card-image {
|
||||
display: block;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.top-card-description {
|
||||
max-width: 300px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*Versão mobile*/
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.header-logo {
|
||||
width: 180px
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.main-banner-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-banner-mobile {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-infocard {
|
||||
margin: 73px 0 90px;
|
||||
}
|
||||
|
||||
.top-infocard-text {
|
||||
width: 86%;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
padding: 0 0 18px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
margin-bottom: 65px;
|
||||
padding: 0 0 65px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
max-width: 58%;
|
||||
margin-bottom: 90px;
|
||||
width: 58%;
|
||||
|
||||
}
|
||||
|
||||
.top-cards {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.main-banner-mobile {
|
||||
display: none;
|
||||
/*Versão telas de 1025px até 1200px*/
|
||||
|
||||
@media screen and (min-width: 1025px) and (max-width: 1200px) {
|
||||
.top-cards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
padding: 36px 26px;
|
||||
}
|
||||
}
|
||||
|
||||
/*Versão telas 4k*/
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.top-infocard-text {
|
||||
width: 52%;
|
||||
margin: 95px 0 95px;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
font-size: 42px;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 63px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
font-size: 21px;
|
||||
line-height: 31px;
|
||||
padding: 0 0 36px;
|
||||
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
37
index.html
37
index.html
@ -17,6 +17,7 @@
|
||||
|
||||
<body>
|
||||
<!-- Header da landing page M3 Academy -->
|
||||
|
||||
<header class="page-header">
|
||||
<a href="/">
|
||||
<img class="header-logo" src="./assets/images/m3-academy-logo.svg" alt="Logo M3 m3-academy-logo" />
|
||||
@ -25,6 +26,7 @@
|
||||
|
||||
<main>
|
||||
<!-- Banner principal -->
|
||||
|
||||
<div>
|
||||
<figure class="main-banner">
|
||||
<img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner principal" />
|
||||
@ -33,6 +35,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Infocard do topo -->
|
||||
|
||||
<section class="top-infocard">
|
||||
<div class="top-infocard-text">
|
||||
<h2 class="top-infocard-subtitle">Lorem ipsum</h2>
|
||||
@ -41,6 +44,40 @@
|
||||
</div>
|
||||
|
||||
<img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Imagem do infocard do topo: 3 computadores" />
|
||||
</section>
|
||||
|
||||
<!-- Cards do topo -->
|
||||
|
||||
<section class="top-cards">
|
||||
<div class="top-card">
|
||||
<figure class="top-card-image">
|
||||
<img src="./assets/images/top-card-image-01.png" alt="Imagem do card do topo: Loja" />
|
||||
</figure>
|
||||
|
||||
<p class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="top-card">
|
||||
<figure class="top-card-image">
|
||||
<img src="./assets/images/top-card-image-02.png" alt="Imagem do card do topo: Bolsa de compras" />
|
||||
</figure>
|
||||
|
||||
<p class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="top-card">
|
||||
<figure class="top-card-image">
|
||||
<img src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo: Moeda" />
|
||||
</figure>
|
||||
|
||||
<p class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user