feat: Criou infocard meio desktop
This commit is contained in:
parent
c708a5078e
commit
9e00e5cc2b
BIN
assets/Images/mid-card-centro.png
Normal file
BIN
assets/Images/mid-card-centro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/Images/mid-card-direita.png
Normal file
BIN
assets/Images/mid-card-direita.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
assets/Images/mid-card-esquerda.png
Normal file
BIN
assets/Images/mid-card-esquerda.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 962 B |
@ -1,4 +1,4 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
|
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -7,9 +7,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: "Inter", sans-serif;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
@ -17,7 +16,6 @@ body {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #000000;
|
background: #000000;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-cima {
|
.logo-cima {
|
||||||
@ -50,7 +48,6 @@ body {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-titulo-h1 {
|
.top-titulo-h1 {
|
||||||
@ -61,11 +58,39 @@ body {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.top-img {
|
||||||
margin-top: 73px;
|
margin: 73px 0 179px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1024px) {
|
.infocard-meio {
|
||||||
|
padding: 80px 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, max-content);
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.card-meio {
|
||||||
|
padding: 27px 27px 36px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-do-meio {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragrafos-meio {
|
||||||
|
max-width: 299px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 820px) {
|
||||||
.top-titulo-h2 {
|
.top-titulo-h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -78,30 +103,30 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-paragrafo {
|
.top-paragrafo {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
max-width: 357px;
|
max-width: 357px;
|
||||||
width: 96%;
|
width: 96%;
|
||||||
height: 115px;
|
height: 115px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 auto ;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.top-img {
|
||||||
width: 239px;
|
width: 239px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
margin: 65px 0 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 414px) {
|
||||||
@media screen and (max-width:414px) {
|
.banner-principal-desktop {
|
||||||
.banner-principal-desktop{
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 415px) {
|
@media screen and (min-width: 415px) {
|
||||||
.banner-principal-mobile{
|
.banner-principal-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
77
index.html
77
index.html
@ -1,38 +1,95 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="pt-BR">
|
<html lang="pt-BR">
|
||||||
<head>
|
<head>
|
||||||
<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" />
|
||||||
<title>M3 Challenge - Patrick Reis</title>
|
<title>M3 Challenge - Patrick Reis</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
|
|
||||||
<link rel="stylesheet" href="./assets/Styles/main.css">
|
<link rel="stylesheet" href="./assets/Styles/main.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="page-header">
|
<header class="page-header">
|
||||||
<a href="index.html">
|
<a href="index.html">
|
||||||
<img class="logo-cima" src="./assets/Images/Logo-M3Academy1.png" alt="Logo M3 Academy" />
|
<img
|
||||||
|
class="logo-cima"
|
||||||
|
src="./assets/Images/Logo-M3Academy1.png"
|
||||||
|
alt="Logo M3 Academy"
|
||||||
|
/>
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<img class="banner-principal banner-principal-desktop" src="./assets/Images/banner-principal-desktop.jpg" alt="Banner principal desktop">
|
<img
|
||||||
<img class="banner-principal banner-principal-mobile" src="./assets/Images/banner-principal-mobile.jpg" alt="Banner principal mobile">
|
class="banner-principal banner-principal-desktop"
|
||||||
|
src="./assets/Images/banner-principal-desktop.jpg"
|
||||||
|
alt="Banner principal desktop"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="banner-principal banner-principal-mobile"
|
||||||
|
src="./assets/Images/banner-principal-mobile.jpg"
|
||||||
|
alt="Banner principal mobile"
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="infocard-cima">
|
<section class="infocard-cima">
|
||||||
<div class="top-texto">
|
<div class="top-texto">
|
||||||
<h2 class="top-titulo-h2">Lorem ipsum</h2>
|
<h2 class="top-titulo-h2">Lorem ipsum</h2>
|
||||||
<h1 class="top-titulo-h1">dolor sit amet</h1>
|
<h1 class="top-titulo-h1">dolor sit amet</h1>
|
||||||
<p class="top-paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
|
<p class="top-paragrafo">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum. Curabitur ut tortor sed
|
||||||
|
lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
|
||||||
|
dui.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="img" src="./assets/Images/infocard-cima.png" alt="Infocard de cima">
|
<img
|
||||||
|
class="top-img"
|
||||||
|
src="./assets/Images/infocard-cima.png"
|
||||||
|
alt="Infocard de cima"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="infocard-meio">
|
||||||
|
<div class="card-meio">
|
||||||
|
<img
|
||||||
|
class="cards-do-meio"
|
||||||
|
src="./assets/Images/mid-card-esquerda.png"
|
||||||
|
alt="Inforcard da esquerda"
|
||||||
|
/>
|
||||||
|
<p class="paragrafos-meio">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-meio">
|
||||||
|
<img
|
||||||
|
class="cards-do-meio"
|
||||||
|
src="./assets/Images/mid-card-centro.png"
|
||||||
|
alt="Infocard do centro"
|
||||||
|
/>
|
||||||
|
<p class="paragrafos-meio">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-meio">
|
||||||
|
<img
|
||||||
|
class="cards-do-meio"
|
||||||
|
src="./assets/Images/mid-card-direita.png"
|
||||||
|
alt="Infocard da direita"
|
||||||
|
/>
|
||||||
|
<p class="paragrafos-meio">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user