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

Adicionando cards inferiores e medias

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2022-10-13 12:03:15 -03:00
parent 2d99bbf810
commit f50d8d833a
7 changed files with 417 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assests/bottom-banner-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

BIN
assests/bottom-banner-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
assests/facebook-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

BIN
assests/instagram-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
assests/youtube-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 B

83
index.html
View File

@ -11,17 +11,18 @@
<head> <head>
<figure class="head-logo"> <figure class="head-logo">
<a href="/" target="_blank"> <a href="/" target="_blank">
<img class="head-image" src="./assests/logo-m3.svg" alt="logo da m3 Academy"> <img class="head-image" src="./assests/logo-m3.svg" alt="logo da m3 Academy"/>
</a> </a>
</figure> </figure>
</head> </head>
<main> <main>
<div> <div>
<figure> <figure>
<img class="main-banner main-banner-desktop" src="./assests/main-banner-desktop.png" alt="Banner do topo Desktop"> <img class="main-banner main-banner-desktop" src="./assests/main-banner-desktop.png" alt="Banner do topo Desktop"/>
<img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile"> <img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile"/>
</figure> </figure>
</div> </div>
<section class="middle-information"> <section class="middle-information">
<div class="middle-text"> <div class="middle-text">
<h2 class="middle-information-subtitle">Lorem ipsum</h2> <h2 class="middle-information-subtitle">Lorem ipsum</h2>
@ -30,35 +31,91 @@
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. 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>
</div> </div>
<figure> <figure>
<img class="main-image-desktop" src="./assests/main-image-desktop.png" alt="Imagem da main Desktop"> <img class="main-image-desktop" src="./assests/main-image-desktop.png" alt="Imagem da main Desktop"/>
<img class="main-image-mobile"src="./assests/main-image-mobile.png" alt="Imagem da main Mobile"> <img class="main-image-mobile"src="./assests/main-image-mobile.png" alt="Imagem da main Mobile"/>
</figure> </figure>
<div class="middle-cards"> <div class="middle-cards">
<figure class="middle-card"> <figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio"> <img class="middle-card-image" src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio"/>
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p> <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
</figure> </figure>
<figure class="middle-card"> <figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-02.png" alt="Imagem do segundo card do meio"> <img class="middle-card-image" src="./assests/middle-card-02.png" alt="Imagem do segundo card do meio"/>
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</figure> </figure>
<figure class="middle-card"> <figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-03.png" alt="Imagem do terceiro card do meio"> <img class="middle-card-image" src="./assests/middle-card-03.png" alt="Imagem do terceiro card do meio"/>
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</figure> </figure>
</div> </div>
</section> </section>
<figure class="middle-banners">
<img class="middle-banners-image" src="./assests/middle-banner-01.png" alt="Imagem do primeiro banner do meio">
<img class="middle-banners-image" src="./assests/middle-banner-02.png" alt="Imagem do segundo banner do meio">
<img class="middle-banners-image" src="./assests/middle-banner-03.png" alt="Imagem do terceiro banner do meio">
</figure> <section class="grid grid-template-banners middle-banners">
<img class="middle-banners-image image-banner-one" src="./assests/middle-banner-01.png" alt="Imagem do primeiro banner do meio"/>
<img class="middle-banners-image image-banner-two" src="./assests/middle-banner-02.png" alt="Imagem do segundo banner do meio"/>
<img class="middle-banners-image image-banner-three" src="./assests/middle-banner-03.png" alt="Imagem do terceiro banner do meio"/>
</section>
<section class="bottom-cards">
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-01.png" alt="Imagem do primeiro card de baixo"/>
<p 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. </p>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-02.png" alt="Imagem do segundo card de baixo"/>
<p 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. </p>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-03.png" alt="Imagem do terceiro card de baixo"/>
<p 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. </p>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="./assests/bottom-card-04.png" alt="Imagem do quarto card de baixo"/>
<p 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.</p>
</div>
</section>
<section class="bottom-box">
<div class="bottom-informations">
<h2 class="bottom-information-subtitle">Lorem ipsum dolor sit amet</h2>
<p class="bottom-information-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>
<img class="bottom-image-desktop" src="./assests/bottom-banner-desktop.png" alt="Imagem do banner de baixo"/>
<img class="bottom-image-mobile" src="./assests/bottom-banner-mobile.png" alt="Imagem do banner de baixo"/>
</section>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="/" target="_blank">
<img src="./assests/instagram-icon.png" alt="icone do Instagram"/>
</a>
</li>
<li class="footer-icon">
<a href="/" target="_blank">
<img src="./assests/facebook-icon.png" alt="icone do Facebook"/>
</a>
</li>
<li class="footer-icon">
<a href="/" target="_blank">
<img src="./assests/youtube-icon.png" alt="icon do Youtube"/>
</a>
</li>
</ul>
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-0</p>
</footer>
</main> </main>
</body> </body>
</html> </html>

383
main.css
View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
* { * {
margin: 0; margin: 0;
@ -9,14 +9,15 @@
body { body {
font-family: 'inter', sans-serif; font-family: 'inter', sans-serif;
} }
/* estilização do fundo */
.head-logo { .head-logo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: black; background-color: black;
} }
/* posicionamento da imagem */
.head-image { .head-image {
width: 100%; width: 100%;
padding: 28px 0 ; padding: 28px 0 ;
@ -39,7 +40,6 @@ body {
padding: 74px 0 80px; padding: 74px 0 80px;
} }
/* estilização para caixa do texto ( não coloquei em 40% para quebrar no paragrafo do figma */
.middle-text { .middle-text {
display:flex; display:flex;
flex-direction: column; flex-direction: column;
@ -48,7 +48,6 @@ body {
margin-bottom: 74px; margin-bottom: 74px;
} }
.middle-information-subtitle { .middle-information-subtitle {
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
@ -64,25 +63,29 @@ body {
margin-bottom: 28px; margin-bottom: 28px;
} }
.middle-information-description {
font-size: 16px;
line-height: 24px;
}
.middle-cards { .middle-cards {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 22px; gap: 22px;
width: 100%;
} }
.middle-card { .middle-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-width: 18%; width: 18%;
background-color:#FFFFFF; background-color:#FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 36px 26px 28px; padding: 36px 26px 28px;
} }
.middle-card-image { .middle-card-image {
display: block;
margin-bottom: 26px; margin-bottom: 26px;
} }
@ -92,60 +95,298 @@ body {
text-align: center; text-align: center;
} }
.middle-banners { .grid {
display:flex; display: grid;
align-items: center; }
justify-content: center;
background: #E0E0E0;
.grid-template-banners {
grid-template-areas: "one two three";
grid-column-gap: 40px;
}
.middle-banners {
width: 100%;
height: 530px;
position: relative;
background-color: #BDBDBD;
padding: 0 72px;
margin-bottom: 40px;
} }
.middle-banners-image { .middle-banners-image {
width: 100%;
margin-top: 62px; margin-top: 62px;
max-width: 30%; }
.image-banner-one {
grid-area: one;
}
.image-banner-two {
grid-area: two;}
.image-banner-three {
grid-area: three;
}
.bottom-cards {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 130px 0 108px 0;
} }
.middle-banners-image:nth-child(2) { .bottom-card {
margin: 62px 40px 0 40px ; display:flex;
flex-direction: column;
align-items: center;
width: 24%;
padding: 34px 32px 64px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
margin: 16px;
} }
.bottom-card-image {
margin-bottom: 14px;
@media screen and (min-width: 1025px) {
.main-banner-mobile, .main-image-mobile {
display: none;
} }
} .bottom-card-description {
font-size: 16px;
/* @media screen and (max-width:1024px) { line-height: 24px;
.main-banner-desktop, .main-image-desktop {
display: none;
}
.middle-text {
width: 100%;
max-width: 112%;
text-align: center; text-align: center;
} }
.bottom-box {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 116px;
}
.bottom-informations {
width: 30%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
}
.bottom-information-subtitle {
font-size: 32px;
line-height: 39px;
font-weight: 600;
text-align: center;
}
.bottom-information-description {
font-size: 16px;
line-height: 24px;
text-align: center;
}
.page-footer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 0;
background-color: #000000;
}
.footer-icons {
list-style: none;
display: flex;
}
.footer-icon {
margin: 0 8px;
margin-bottom: 16px;
}
.footer-icon:nth-child(3) {
margin-top: 4px;
}
.footer-text {
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
}
.main-image-desktop {
display: flex;
}
.main-image-mobile {
display: none;
}
.main-banner-desktop {
display: flex;
}
.main-banner-mobile {
display: none;
}
.bottom-image-desktop {
width: 70%;
display: flex;
}
.bottom-image-mobile {
width: 100%;
display: none;
}
@media (min-width:4000px) {
.middle-banners {
height: 1200px;
}
.head-image {
width: 300%;
}
.middle-text {
width: 150%;
}
.middle-information-subtitle {
font-size: 80px;
line-height: 85px;
}
.middle-information-title {
font-size: 80px;
line-height: 85px;
}
.middle-information-description {
font-size: 35px;
line-height: 38px;
}
.main-image-desktop {
width: 200%;
}
.middle-card {
width: 100%;
}
.middle-card-description {
font-size: 40px;
line-height: 42px;
text-align: center;
}
.bottom-card-description {
font-size: 40px;
line-height: 42px;
text-align: center;
}
.bottom-information-subtitle {
font-size: 40px;
line-height: 42px;
}
.bottom-information-description {
font-size: 40px;
line-height: 42px;
text-align: center;
}
.footer-text {
font-size: 32px;
line-height: 35px;
text-transform: uppercase;
color: #BDBDBD;
}
}
@media (max-width: 1024px) {
.main-image-desktop {
display: none;
}
.main-image-mobile {
display: flex;
}
.main-banner-desktop {
display: none;
}
.main-banner-mobile {
display: flex;
}
.bottom-image-desktop {
display: none;
}
.bottom-image-mobile {
display: flex;
margin-bottom: 50px;
}
.bottom-box {
flex-direction: column-reverse;
margin-bottom: 88px;
}
.bottom-cards {
flex-direction: column;
margin: 80px 0 98px 0;
}
.bottom-card {
width: 89%;
}
.bottom-card-description {
font-size: 14px;
line-height: 24px;
text-align: center;
}
.bottom-information-subtitle {
font-weight: 600;
font-size: 24px;
line-height: 29px;
text-align: center;
}
.bottom-information-description {
font-size: 16px;
line-height: 24px;
text-align: center;
}
.footer-text {
width: 63%;
text-align: center;
}
.middle-cards {
flex-direction: column;
align-items: center;
margin: 90px 0 80px 0;
}
.middle-card {
width: 84%;
}
.middle-information { .middle-information {
padding: 74px 28px 90px; padding-bottom: 0px;
} }
.middle-information-subtitle { .middle-information-subtitle {
@ -154,9 +395,59 @@ body {
} }
.middle-information-title { .middle-information-title {
font-weight: 500;
font-size: 28px; font-size: 28px;
line-height: 34px; line-height: 34px;
} }
}
@media (max-width: 768px) {
.middle-banners {
height: 1030px;
padding: 0 23px;
}
.grid-template-banners {
grid-template-areas:
"one two"
"three three";
grid-column-gap: 7px;
grid-row-gap: 23px;
}
.middle-banners-image {
margin-top: 32px;
}
.middle-banners-image:nth-child(3) {
margin-top: 0;
}
}
@media (max-width: 520px) {
.middle-banners {
height: 574px;
}
}
@media (max-width: 480px) {
.bottom-informations {
width: 85%;
}
.middle-banners {
height: 550px;
}
.middle-text {
width: 86%;
} }
*/ }
@media (max-width:320px) {
.middle-banners {
height: 400px;
}
}