Adicionando cards inferiores e medias
This commit is contained in:
parent
2d99bbf810
commit
f50d8d833a
BIN
assests/bottom-banner-desktop.png
Normal file
BIN
assests/bottom-banner-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
assests/bottom-banner-mobile.png
Normal file
BIN
assests/bottom-banner-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
assests/facebook-icon.png
Normal file
BIN
assests/facebook-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
BIN
assests/instagram-icon.png
Normal file
BIN
assests/instagram-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 490 B |
BIN
assests/youtube-icon.png
Normal file
BIN
assests/youtube-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 B |
83
index.html
83
index.html
@ -11,17 +11,18 @@
|
||||
<head>
|
||||
<figure class="head-logo">
|
||||
<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>
|
||||
</figure>
|
||||
</head>
|
||||
<main>
|
||||
<div>
|
||||
<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-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile">
|
||||
<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"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<section class="middle-information">
|
||||
<div class="middle-text">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<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-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"/>
|
||||
</figure>
|
||||
|
||||
<div class="middle-cards">
|
||||
<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>
|
||||
</figure>
|
||||
|
||||
<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>
|
||||
</figure>
|
||||
|
||||
<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>
|
||||
</figure>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
383
main.css
383
main.css
@ -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;
|
||||
@ -9,14 +9,15 @@
|
||||
body {
|
||||
font-family: 'inter', sans-serif;
|
||||
}
|
||||
/* estilização do fundo */
|
||||
|
||||
.head-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
}
|
||||
/* posicionamento da imagem */
|
||||
|
||||
|
||||
.head-image {
|
||||
width: 100%;
|
||||
padding: 28px 0 ;
|
||||
@ -39,7 +40,6 @@ body {
|
||||
padding: 74px 0 80px;
|
||||
}
|
||||
|
||||
/* estilização para caixa do texto ( não coloquei em 40% para quebrar no paragrafo do figma */
|
||||
.middle-text {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
@ -48,7 +48,6 @@ body {
|
||||
margin-bottom: 74px;
|
||||
}
|
||||
|
||||
|
||||
.middle-information-subtitle {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
@ -64,25 +63,29 @@ body {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.middle-information-description {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.middle-cards {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.middle-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 18%;
|
||||
width: 18%;
|
||||
background-color:#FFFFFF;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
padding: 36px 26px 28px;
|
||||
|
||||
}
|
||||
|
||||
.middle-card-image {
|
||||
display: block;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
@ -92,60 +95,298 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-banners {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E0E0E0;
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
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%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 130px 0 108px 0;
|
||||
}
|
||||
|
||||
.middle-banners-image:nth-child(2) {
|
||||
margin: 62px 40px 0 40px ;
|
||||
.bottom-card {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
|
||||
.main-banner-mobile, .main-image-mobile {
|
||||
display: none;
|
||||
.bottom-card-image {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* @media screen and (max-width:1024px) {
|
||||
.main-banner-desktop, .main-image-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.middle-text {
|
||||
width: 100%;
|
||||
max-width: 112%;
|
||||
.bottom-card-description {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
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 {
|
||||
padding: 74px 28px 90px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.middle-information-subtitle {
|
||||
@ -154,9 +395,59 @@ body {
|
||||
}
|
||||
|
||||
.middle-information-title {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user