ueberjames/challenge-landing-page-ueber-james
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reorganização de nomes de classes

Browse Source
This commit is contained in:
Ueber James Santos 2022-10-09 21:16:44 -03:00
parent bc367c3765
commit ca95e5502c
2 changed files with 60 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -8,6 +8,7 @@
<title>Landing Page M3</title> <title>Landing Page M3</title>
</head> </head>
<body> <body>
<!-- /* header-logo */ -->
<header class="page-header"> <header class="page-header">
<figure> <figure>
<a href="/" <a href="/"
@ -16,6 +17,8 @@
</figure> </figure>
</header> </header>
<main> <main>
<!-- Banner-principal -->
<div class="banner-principal-container"> <div class="banner-principal-container">
<figure> <figure>
<img <img
@ -30,7 +33,7 @@
/> />
</figure> </figure>
</div> </div>
<!-- inforcar principal -->
<section class="descricao-container"> <section class="descricao-container">
<div class="texto-inforcard"> <div class="texto-inforcard">
<h2>Lorem ipsum</h2> <h2>Lorem ipsum</h2>
@ -42,9 +45,13 @@
dui. dui.
</p> </p>
</div> </div>
<div > <div>
<figure> <figure>
<img class="imagem-infor-computadores" src="/src/img/imagem-infor-computadores.png" alt="" /> <img
class="imagem-infor-computadores"
src="/src/img/imagem-infor-computadores.png"
alt=""
/>
</figure> </figure>
</div> </div>
@ -73,21 +80,32 @@
</figure> </figure>
</div> </div>
</section> </section>
<!-- Container Middle banner -->
<div class="mini-banner"> <div class="mini-banner">
<div class="card-wrpper"> <div class="card-wrpper">
<figure class="mini-card" > <figure class="middle-card">
<img class="mini-card-img" <img class="middle-img" src="/src/img/mini-banner1.png" alt="" />
src="/src/img/mini-banner1.png" alt=""> <img
<img class="min-card-img" src="/src/img/min-banner1.png" alt=""> class="middle-mini-img"
src="/src/img/min-banner1.png"
alt=""
/>
</figure> </figure>
<figure class="mini-card"> <figure class="middle-card">
<img class="mini-card-img" src="/src/img/mini-banner2.png" alt=""> <img class="middle-img" src="/src/img/mini-banner2.png" alt="" />
<img class="min-card-img" src="/src/img/min-banner2.png" alt=""> <img
class="middle-mini-img"
src="/src/img/min-banner2.png"
alt=""
/>
</figure> </figure>
<figure class="mini-card"> <figure class="middle-card">
<img class="mini-card-img" src="/src/img/mini-banner3.png" alt=""> <img class="middle-img" src="/src/img/mini-banner3.png" alt="" />
<img class="min-card-img" src="/src/img/min-banner3.png" alt=""> <img
class="middle-mini-img"
src="/src/img/min-banner3.png"
alt=""
/>
</figure> </figure>
</div> </div>
</div> </div>

55
src/style/style.css
View File

@ -89,12 +89,12 @@ body {
text-align: center; text-align: center;
} }
/* Container mini banner */ /* Container Middle banner */
.mini-card-img, .min-card-img { .middle-img,
.middle-mini-img {
display: block; display: block;
width: 100%; width: 100%;
} }
.mini-banner { .mini-banner {
@ -111,7 +111,7 @@ body {
position: relative; position: relative;
bottom: -60px; bottom: -60px;
} }
.mini-card { .middle-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -119,11 +119,8 @@ body {
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.descktop-banner, .descktop-banner,
.mini-card-img { .middle-img {
display: none; display: none;
} }
.imagem-infor-computadores { .imagem-infor-computadores {
width: 100%; width: 100%;
@ -131,66 +128,50 @@ body {
} }
.top-cards, .top-cards,
.texto-inforcard{ .texto-inforcard {
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin: 0 32px; margin: 0 32px;
} }
.mini-card{ .middle-card {
margin: 0 26px; margin: 0 26px;
padding: 0 36px; padding: 0 36px;
} }
.card-wrpper {
.card-wrpper flex-direction: column;
{
flex-direction: column ;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.texto-inforcard h2 { .texto-inforcard h2 {
font-size: 20px; font-size: 20px;
} }
.texto-inforcard h1 { .texto-inforcard h1 {
font-size: 28px; font-size: 28px;
} }
} }
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
.mobile-banner, .mobile-banner,
.min-card-img { .middle-mini-img {
display: none; display: none;
} }
} }
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.texto-inforcard h2 {
.texto-inforcard h2{
font-size: 40px; font-size: 40px;
} }
.texto-inforcard h1 { .texto-inforcard h1 {
font-size: 48px; font-size: 48px;
} }
.top-card-text,
.texto-inforcard p {
.top-card-text,
.texto-inforcard p {
font-size: 28px; font-size: 28px;
}
} }
}