final release #10

Merged
ViniciusDeniz merged 14 commits from develop into main 2022-10-13 21:19:42 +00:00
24 changed files with 632 additions and 0 deletions

363
assets/css/style.css Normal file
View File

@ -0,0 +1,363 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
color: black;
}
.page-header {
background: black;
display: flex;
justify-content: center;
padding: 29px 0;
}
.header-logo {
display: block;
}
.banner {
width: 100%;
display: block;
}
.top-infocard {
align-items: center;
justify-content: center;
display: grid;
column-gap: 65px;
margin-top: 73px;
}
.top-infocard-text {
width: 62%;
text-align: center;
justify-content: center;
position: relative;
margin-left: auto;
margin-right: auto;
}
.top-infocard-subtitle {
font-weight: 400;
font-size: 32px;
text-transform: uppercase;
}
.top-infocard-title {
font-weight: 500;
font-size: 48px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 28px;
}
.top-infocard-description {
line-height: 24px;
font-size: 16px;
}
.top-infocard-image {
width: 38%;
margin-top: 73px;
margin-bottom: 179px;
}
.top-cards {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 21px;
margin-bottom: 80px;
height: auto;
justify-content: center;
}
.top-card {
display: flex;
flex-direction: column;
align-items: center;
min-height: 287px;
box-shadow: 0px 4px 20px 0px #0000003b;
padding: 35px 0px 27px;
}
.top-card-image {
width: 30%;
margin-bottom: 27px;
}
.top-card-description {
font-size: 16px;
align-items: center;
line-height: 24px;
text-align: center;
max-width: 350px;
}
.middle-banners {
background: #f0f0f0;
display: grid;
grid-template-columns: repeat(3, max-content);
justify-content: center;
gap: 39px;
}
.middle-banner {
width: 60%;
display: flex;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
position: relative;
bottom: -64px;
margin-left: auto;
margin-right: auto;
height: auto;
}
.middle-banner-wrapper {
position: relative;
display: grid;
bottom: -130px;
justify-content: center;
align-items: center;
}
.middle-banner-first-row {
padding: -98px 14px 24px;
/*130 - 32 = 98 de diferença*/
}
.bottom-cards {
margin: 193px 0 136px;
/*64 do bottom negativo + 129 que e de fato a margem entre o middle-banners e bottom-cards*/
display: grid;
grid-template-columns: repeat(4, max-content);
justify-content: center;
gap: 16px;
background: #fff;
}
.bottom-card {
display: flex;
flex-direction: column;
align-items: center;
max-width: 300px;
padding: 36px 0px 14px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.bottom-card-description {
padding: 14px 32px 66px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.bottom-card-image {
width: 35%;
margin-bottom: 14px;
}
.bottom-infocard {
align-items: center;
justify-content: center;
display: grid;
gap: 30px;
}
.bottom-infocard-image-desktop {
margin-bottom: 116px;
width: 70%;
height: auto;
position: relative;
margin-left: auto;
margin-right: auto;
}
.bottom-infocard-text {
text-align: center;
align-items: center;
justify-content: center;
width: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.bottom-infocard-title {
font-weight: 600;
font-size: 32px;
line-height: 20px;
margin-bottom: 18px;
}
.bottom-infocard-description {
font-size: 16px;
line-height: 24px;
margin-bottom: 32px;
}
.page-footer {
background: black;
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 0;
}
.footer-icons {
display: flex;
list-style: none;
margin-bottom: 16px;
}
.footer-icon {
margin: 0 8px;
}
.footer-text {
color: #bdbdbd;
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
}
@media screen and (min-width: 2500px) {
.top-infocard-subtitle {
font-size: 64px;
}
.top-infocard-title {
font-size: 96px;
}
.top-infocard-description,
.top-infocard-description,
.top-card-description,
.bottom-card-description,
.bottom-infocard-description {
line-height: 48px;
font-size: 32px;
}
.bottom-infocard-title {
font-size: 64px;
line-height: 40px;
}
.footer-text {
font-size: 20px;
line-height: 24px;
}
}
@media screen and (min-width: 1025px) {
.banner-mobile,
.middle-banner-mobile,
.bottom-infocard-image-mobile {
display: none;
}
}
@media (max-width: 1024px) {
.banner-desktop,
.middle-banner,
.middle-banner-desktop,
.bottom-infocard-image-desktop {
display: none;
}
.top-infocard {
gap: 90px;
}
.top-infocard-text {
width: 90%;
}
.top-infocard-subtitle {
font-size: 20px;
}
.top-infocard-title {
font-size: 28px;
margin-bottom: 18px;
}
.top-infocard-description {
width: 90%;
}
.top-infocard-image {
width: 65%;
margin-top: 65px;
}
.top-cards {
grid-template-columns: 1fr;
}
.middle-banner-wrapper {
grid-template-columns: auto auto auto auto;
grid-gap: 14px;
}
.image-1 {
grid-area: 1 / 1 / span 1 / span 1;
}
.image-2 {
grid-area: 2 / 1 / span 1 / span 1;
}
.image-3 {
grid-area: 1/ 2 / span 1 / span 2;
display: block;
}
.bottom-cards {
grid-template-columns: 1fr;
margin-bottom: 98px;
}
.bottom-infocard {
gap: 50px;
margin-bottom: 87px;
}
.bottom-infocard-text {
width: 90%;
order: 2;
}
.bottom-infocard-image-desktop {
order: 1;
}
.bottom-infocard-title {
font-size: 24px;
}
.bottom-infocard-description {
width: 90%;
}
.page-footer {
padding: 42px 0 26px;
}
.footer-text {
width: 70%;
text-align: center;
}
}
@media screen and (max-width: 820px) {
}
@media screem amd (max-width: 320px) {
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 331 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 293 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 B

BIN
assets/images/logom3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 B

269
index.html Normal file
View File

@ -0,0 +1,269 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<link rel="preconnect" href="https://fonts.googleleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge Landing Page</title>
<link
href="https://fonts.googleleaps.com/css2?family=Inter:wgt@400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<header class="page-header">
<a href="#">
<img
class="header-logo"
src="./assets/images/logom3.png"
alt="Logo M3"
/>
</a>
</header>
<main>
<section>
<img
class="banner banner-desktop"
src="./assets/images/banner-desktop.png"
alt="Banner Principal Desktop"
/>
<img
class="banner banner-mobile"
src="./assets/images/banner-mobile.png"
alt="Banner Principal Mobile"
/>
</section>
<section class="top-infocard">
<div class="top-infocard-text">
<h2 class="top-infocard-subtitle">lore ipsum</h2>
<h1 class="top-infocard-title">dolor sit amet</h1>
<p class="top-infocard-description">
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>
<img
class="top-infocard-image"
src="./assets/images/infocard-image.png"
alt="Imagem do Infocard"
/>
</div>
<div class="top-cards">
<div class="top-card">
<img
class="top-card-image"
src="./assets/images/top-card-image-1.png"
alt="Primeiro Card"
/>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<img
class="top-card-image"
src="./assets/images/top-card-image-2.png"
alt="Segundo Card"
/>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<img
class="top-card-image"
src="./assets/images/top-card-image-3.png"
alt="Terceiro Card"
/>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
</div>
</div>
</section>
<section class="middle-banners">
<img
class="middle-banner middle-banner-desktop"
src="./assets/images/middle-banner-desktop-1.png"
alt="Banner do Meio Desktop 1"
/>
<img
class="middle-banner middle-banner-desktop"
src="./assets/images/middle-banner-desktop-2.png"
alt="Banner do Meio Desktop 2"
/>
<img
class="middle-banner middle-banner-desktop"
src="./assets/images/middle-banner-desktop-3.png"
alt="Banner do Meio Desktop 3"
/>
<div class="middle-banner-wrapper">
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-1.png"
alt="Banner do Meio Mobile 1"
/>
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-2.png"
alt="Banner do Meio Mobile 2"
/>
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-3.png"
alt="Banner do Meio Mobile 3"
/>
</div>
</section>
<section class="bottom-cards">
<div class="bottom-card">
<img
class="bottom-card-image"
src="./assets/images/bottom-card-image-1.png"
alt="Primeiro Card"
/>
<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="./assets/images/bottom-card-image-3.png"
alt="Segundo Card"
/>
<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="./assets/images/bottom-card-image-2.png"
alt="Terceiro Card"
/>
<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="./assets/images/bottom-card-image-4.png"
alt="Quarto Card"
/>
<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-infocard">
<div class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-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-infocard-image-desktop"
src="./assets/images/bottom-infocard-image-desktop.png"
alt="Banner do Bottom Desktop"
/>
<img
class="bottom-infocard-image-mobile"
src="./assets/images/bottom-infocard-image-mobile.png"
alt="Banner do Bottom Mobile"
/>
</section>
</main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="https://www.instagram.com/m3.ecommerce/" target="_blank">
<img
src="./assets/images/instagram-icon.png"
alt="Ícone do Instagram"
/>
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img
src="./assets/images/facebook-icon.png"
alt="Imagem do Facebook"
/>
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img
src="./assets/images/youtube-icon.png"
alt="Imagem do Youtube"
/>
</a>
</li>
</ul>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
</p>
</footer>
</body>
</html>