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

56
index.html
View File

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

65
src/style/style.css
View File

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