EleonoraOtz/practice-time-landing-page-eleonora-otz
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'eleonoraotz' (#1) from eleonoraotz into main

Browse Source 
Reviewed-on: #1
This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-10-09 21:12:43 +00:00
commit 138c863895
20 changed files with 446 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/Logo-m3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
assets/images/bottom-card-image-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/images/bottom-card-image-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/images/bottom-card-image-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assets/images/bottom-card-image-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
assets/images/bottom-infocard-image-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 447 KiB

BIN
assets/images/bottom-infocard-image-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

3
assets/images/facebook-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9992 0.0049936L9.88695 0C6.39043 0 4.13082 2.31828 4.13082 5.90643V8.62969H1.00158C0.731177 8.62969 0.512207 8.84891 0.512207 9.11932V13.065C0.512207 13.3354 0.731426 13.5544 1.00158 13.5544H4.13082V23.5106C4.13082 23.781 4.34979 24 4.62019 24H8.70296C8.97337 24 9.19234 23.7808 9.19234 23.5106V13.5544H12.8512C13.1216 13.5544 13.3405 13.3354 13.3405 13.065L13.342 9.11932C13.342 8.98948 13.2903 8.86514 13.1987 8.77326C13.1071 8.68138 12.9822 8.62969 12.8524 8.62969H9.19234V6.32115C9.19234 5.21157 9.45675 4.64829 10.9021 4.64829L12.9987 4.64755C13.2689 4.64755 13.4878 4.42833 13.4878 4.15817V0.494367C13.4878 0.224462 13.2691 0.00549296 12.9992 0.0049936Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 792 B

BIN
assets/images/instagram-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
assets/images/main-banner-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/images/main-banner-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

BIN
assets/images/middle-banner-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 949 KiB

BIN
assets/images/middle-banner-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
assets/images/top-card-image-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/images/top-card-image-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
assets/images/top-card-image-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assets/images/top-infocard-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

3
assets/images/youtube-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.98 2.34C22.329 1.182 21.6225 0.969 20.184 0.888C18.747 0.7905 15.1335 0.75 12.003 0.75C8.8665 0.75 5.2515 0.7905 3.816 0.8865C2.3805 0.969 1.6725 1.1805 1.0155 2.34C0.345 3.4965 0 5.4885 0 8.9955C0 8.9985 0 9 0 9C0 9.003 0 9.0045 0 9.0045V9.0075C0 12.4995 0.345 14.5065 1.0155 15.651C1.6725 16.809 2.379 17.019 3.8145 17.1165C5.2515 17.2005 8.8665 17.25 12.003 17.25C15.1335 17.25 18.747 17.2005 20.1855 17.118C21.624 17.0205 22.3305 16.8105 22.9815 15.6525C23.658 14.508 24 12.501 24 9.009C24 9.009 24 9.0045 24 9.0015C24 9.0015 24 8.9985 24 8.997C24 5.4885 23.658 3.4965 22.98 2.34ZM9 13.5V4.5L16.5 9L9 13.5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 743 B

291
assets/styles/main.css Normal file
View File

@ -0,0 +1,291 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
color: #000000;
}
.page-header {
display: flex;
justify-content: center;
padding: 28px 0;
background: #000000;
}
.header-logo {
display: block;
}
.main-banner,
.middle-banner {
display: block;
width: 100%;
}
.top-infocard {
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0 96px;
}
.top-infocard-text {
margin-right: 124px;
max-width: 766px;
}
.top-infocard-subtitle {
text-transform: uppercase;
line-height: 40px;
font-size: 32px;
font-weight: 400;
}
.top-infocard-title {
margin-bottom: 24px;
text-transform: uppercase;
font-size: 48px;
font-weight: 500;
}
.top-infocard-description {
line-height: 24px;
font-size: 16px;
}
.top-cards {
display: grid;
grid-template-columns: repeat(3, max-content);
background: #F0F0F0;
gap: 20px;
padding: 74px 0;
justify-content: center;
}
.top-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 26px 26px 34px 34px;
background: #FFFFFF;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
}
.top-card-image {
display: block;
margin-bottom: 26px;
}
.top-card-description {
max-width: 300px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.bottom-cards-wrapper {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 20px;
justify-content: center;
position: relative;
top: -60px;
}
.bottom-cards {
margin-top: 140px;
background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
}
.bottom-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 32px 66px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.bottom-card-image {
display: block;
margin-bottom: 14px;
}
.bottom-card-description {
max-width: 368px;
text-align: center;
line-height: 24px;
font-size: 16px;
}
.bottom-infocard {
display: flex;
align-items: center;
justify-content: center;
padding: 142px 0 180px;
}
.bottom-infocard-image {
margin-right: 40px;
}
.bottom-infocard-text {
max-width: 550px;
}
.bottom-infocard-title {
margin-bottom: 18px;
line-height: 1;
font-size: 32px;
font-weight: 600;
}
.bottom-infocard-description {
line-height: 24px;
font-size: 16px;
}
.page-footer {
display: flex;
flex-direction: column;
background: #000000;
align-items: center;
padding: 38px 0;
}
.footer-icons {
display: flex;
list-style: none;
margin-bottom: 16px;
}
.footer-icon {
margin: 0 8px;
}
.footer-text {
text-transform: uppercase;
font-size: 10px;
line-height: 12px;
color: #BDBDBD;
}
@media screen and (max-width: 414px) {
.main-banner-desktop,
.middle-banner-desktop {
display: none;
}
}
@media screen and (min-width: 415px) {
.main-banner-mobile,
.middle-banner-mobile {
display: none;
}
}
@media screen and (max-width: 768px) {
.top-cards {
grid-template-columns: 1fr;
padding: 36px 26px;
}
.bottom-cards-wrapper {
grid-template-columns: 1fr;
}
.bottom-cards {
margin-top: 114;
padding: 0 26px;
}
.bottom-card-description {
font-size: 14px;
}
.page-footer {
padding-bottom: 26px;
}
.footer-text {
max-width: 280px;
text-align: center;
}
}
@media screen and (max-width: 992px) {
.top-infocard {
flex-direction: column;
padding: 84px 26px 158px;
}
.top-infocard-text {
margin: 0 0 68px;
}
.top-infocard-subtitle {
font-size: 20px;
}
.top-infocard-title {
margin-bottom: 20px;
font-size: 28px;
}
.top-infocard-image {
width: 100%;
max-width: 240px;
}
.bottom-infocard {
flex-direction: column;
padding: 80px 0 136px;
}
.bottom-infocard-image {
width: 100%;
max-width: 596px;
margin: 0 0 50px;
}
.bottom-infocard-text {
padding: 0 26px;
}
.bottom-infocard-title {
font-size: 24px;
}
}
@media screen and (min-width: 993px) and (max-width: 1280px) {
.top-infocard-text {
max-width: 520px;
margin-right: 78px;
}
.bottom-infocard-image {
max-width: 480px;
}
.bottom-infocard-text {
max-width: 400px;
}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.bottom-card-description {
max-width: 280px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards {
grid-template-columns: repeat(2, max-content);
padding: 36px 26px;
}
}

149
index.html Normal file
View File

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="preconnect" href="https://fonts.googleapis.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>M3 Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./assets/styles/main.css" />
</head>
<body>
<header class="page-header">
<a href="/">
<img class="header-logo" src="./assets/images/Logo-m3.png" alt="Logo M3" />
</a>
</header>
<main>
<section>
<img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner Principal Desktop" />
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" />
</section>
<section class="top-infocard">
<div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem 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>
</div>
<img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Banner do Infocard do Topo"/>
</section>
<section class="top-cards">
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="Imagem do Primeiro Card do Topo" />
<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-02.png" alt="Imagem do Segundo Card do Topo" />
<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-03.png" alt="Imagem do Terceiro Card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</section>
<section>
<img class="middle-banner middle-banner-desktop" src="./assets/images/middle-banner-desktop.png" alt="Middle Banner Desktop" />
<img class="middle-banner middle-banner-mobile" src="./assets/images/middle-banner-mobile.png" alt="Middle Banner Mobile" />
</div>
</section>
<section class="bottom-cards">
<div class="bottom-cards-wrapper">
<div class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-image-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="./assets/images/bottom-card-image-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="./assets/images/bottom-card-image-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="./assets/images/bottom-card-image-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>
</div>
</section>
<section class="bottom-infocard">
<img class="bottom-infocard-image" src="./assets/images/bottom-infocard-image-desktop.png" alt="Banner do infocard de baixo" />
<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>
</section>
</main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="https://www.instagram.com/m3.ecommerce/" target="_blank" rel="external">
<img src="./assets/images/instagram-icon.png" alt="Ícone do Instagram" />
</a>
</li>
<li class="footer-icon">
<a href="https://www.facebook.com/digitalm3/" target="_blank" rel="external">
<img src="./assets/images/facebook-icon.svg" alt="Ícone do Facebook" />
</a>
</li>
<li class="footer-icon">
<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA/videos?app=desktop" target="_blank" rel="external">
<img src="./assets/images/youtube-icon.svg" alt="Ícone 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>