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

Reviewed-on: #1
This commit is contained in:
SamuelCondack 2022-10-13 15:38:47 +00:00
commit 7e87ece493
3 changed files with 588 additions and 0 deletions

View File

@ -0,0 +1,14 @@
<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_59_990)">
<path d="M103.987 22.5075C103.985 19.1036 101.215 16.3332 97.8102 16.3317L15.7284 16.3236H15.7255C14.077 16.3236 12.5271 16.9655 11.3616 18.131C10.1955 19.2972 9.55358 20.8478 9.55419 22.4974L9.5552 26.032L6.17419 26.0316H6.17134C4.52278 26.0316 2.97273 26.6734 1.80741 27.839C0.641266 29.0055 -0.000608942 30.5562 4.33492e-07 32.2057L0.0134067 81.4924C0.0146254 84.8964 2.78505 87.6668 6.18983 87.6682L88.2716 87.6761H88.2745C89.923 87.6761 91.4729 87.0343 92.6384 85.8687C93.8046 84.7026 94.4464 83.1519 94.4458 81.5024L94.4448 77.9678L97.8258 77.968H97.8287C99.4772 77.968 101.027 77.3261 102.193 76.1606C103.359 74.9944 104.001 73.4438 104 71.7942L103.987 22.5075ZM89.7656 82.9961C89.3673 83.3945 88.8377 83.6136 88.2743 83.6136C88.2737 83.6134 88.273 83.6134 88.2726 83.6136L6.19084 83.6057C5.02511 83.6051 4.07631 82.6565 4.07591 81.491L4.0625 32.2043C4.0623 31.6405 4.28167 31.1103 4.68 30.7118C5.07833 30.3134 5.60788 30.0943 6.17216 30.0943H6.17317L88.2548 30.1022C89.4205 30.1028 90.3693 31.0516 90.3697 32.2169L90.3831 81.5036C90.3833 82.0674 90.1641 82.5976 89.7656 82.9961ZM99.32 73.288C98.9217 73.6863 98.3921 73.9055 97.8279 73.9055H97.8268L94.4436 73.9053L94.4322 32.2157C94.431 28.8117 91.6604 26.0411 88.2558 26.0399L13.6177 26.0326L13.6167 22.4962C13.6165 21.9323 13.8359 21.4021 14.2342 21.0036C14.6325 20.6053 15.1621 20.3861 15.7263 20.3861H15.7272L97.809 20.394C98.9747 20.3946 99.9235 21.3432 99.9239 22.5088L99.9375 71.7954C99.9377 72.3593 99.7183 72.8895 99.32 73.288Z" fill="black"/>
<path d="M78.2518 76.5467C78.2508 73.7487 80.518 71.4814 83.3159 71.4826L83.3104 42.2304C80.5124 42.2294 78.2432 39.9603 78.2422 37.1622H16.1941C16.1951 39.9603 13.9278 42.2276 11.1299 42.2263L11.1354 71.4785C13.9335 71.4796 16.2026 73.7487 16.2036 76.5467H78.2518Z" fill="#0336DB"/>
<path d="M72.2577 54.9495H65.6194C64.4975 54.9495 63.5881 55.8591 63.5881 56.9808C63.5881 58.1024 64.4975 59.012 65.6194 59.012H72.2577C73.3796 59.012 74.289 58.1024 74.289 56.9808C74.289 55.8589 73.3796 54.9495 72.2577 54.9495Z" fill="white"/>
<path d="M29.1089 54.9495H22.4706C21.3487 54.9495 20.4393 55.8591 20.4393 56.9808C20.4393 58.1024 21.3487 59.012 22.4706 59.012H29.1089C30.2308 59.012 31.1401 58.1024 31.1401 56.9808C31.1401 55.8589 30.2308 54.9495 29.1089 54.9495Z" fill="white"/>
<path d="M51.7563 60.5843C52.5408 60.5843 53.1161 60.7407 53.4821 61.0535C53.8482 61.3664 54.0313 61.8357 54.0313 62.4614C54.0313 63.7475 53.2729 64.3906 51.7563 64.3906H42.6828C41.1662 64.3906 40.4079 63.7475 40.4079 62.4614C40.4079 61.8357 40.5909 61.3664 40.957 61.0535C41.3231 60.7407 41.8983 60.5843 42.6828 60.5843H44.8008V51.1726L42.7089 52.3979C42.4126 52.5717 42.1075 52.6587 41.7937 52.6587C41.3056 52.6587 40.8872 52.4501 40.5386 52.0329C40.1899 51.5984 40.0156 51.1205 40.0156 50.599C40.0156 49.8864 40.3207 49.3476 40.9308 48.9826L45.1146 46.558C45.8816 46.1235 46.6051 45.9062 47.2849 45.9062C47.9822 45.9062 48.5401 46.1148 48.9584 46.532C49.3942 46.9491 49.6121 47.514 49.6121 48.2266V60.5843H51.7563Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_59_990">
<rect width="104" height="104" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -11,5 +11,97 @@
<header class="page-header">
<a href="/"><img src="assets/images/Logo-M3Academy 1.svg" alt="Logo M3" class="header-logo"></a>
</header>
<main>
<picture>
<source media="(max-width: 500px)" srcset="assets/mobile-images/top-card-image.png">
<source media="(min-width: 501px)" srcset="assets/images/desktop-banner.png">
<img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner">
</picture>
<section class="first-content">
<div class="first-content-text">
<h1 class="first-content-h2">Lorem Ipsum</h1>
<h2 class="first-content-h1">Dolor Sit Amet</h2>
<p class="first-content-p">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>
</section>
<section>
<picture>
<img src="assets/images/computers.svg" alt="computers image" class="block">
</picture>
</section>
<section>
<div class="first-card">
<div class="first-card-cards"><img src="assets/images/shop 1.svg" alt="shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
<div class="first-card-cards"><img src="assets/images/shopping-bag (1) 1.png" alt="bag shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
<div class="first-card-cards"><img src="assets/images/coin 1.png" alt="coin image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
</div>
</section>
<section class="image-row-background">
<div class="image-row-wrapper">
<div class="image-row-desktop">
<div class="row-image"><img src="assets/images/Rectangle 13.png" alt="laptop image" class="row-image-desktop"></div>
<div class="row-image"><img src="assets/images/Rectangle 16.png" alt="laptop image" class="row-image-desktop"></div>
<div class="row-image"><img src="assets/images/Rectangle 17.png" alt="laptop image" class="row-image-desktop"></div>
</div>
<div class="image-row-mobile1">
<img src="assets/mobile-images/middle-card-image01.png" alt="laptop image" class="row-image-mobile">
<img src="assets/mobile-images/middle-card-image02.png" alt="laptop image" class="row-image-mobile">
</div>
<div class="image-row-mobile2"><img src="assets/mobile-images/middle-card-image03.png" alt="laptop image" class="row-image-mobile2"></div>
</div>
</section>
<section>
<div class="second-card">
<div class="second-card-cards"><img src="assets/images/money (1) 2.svg" alt="shop image" class="second-card-image"><p class="second-card-p">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="second-card-cards"><img src="assets/images/coin 2.svg" alt="bag shop image" class="second-card-image"><p class="second-card-p">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="second-card-cards"><img src="assets/images/laptop 1.svg" alt="coin image" class="second-card-image"><p class="second-card-p">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="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-p">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-banner2">
<div class="bottom-banner-desktop">
<img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">
</div>
<div class="bottom-banner-mobile">
<img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">
</div>
</section>
<section class="second-content">
<div class="second-content-text">
<h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>
<p class="second-content-p">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>
<section class="bottom-banner">
<div class="bottom-banner-desktop">
<img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">
</div>
<div class="bottom-banner-mobile">
<img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">
</div>
</section>
<section class="second-content2">
<div class="second-content-text">
<h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>
<p class="second-content-p">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>
<footer>
<section class="end-footer">
<div class="footer-images">
<div><img src="assets/images/instagram-logo.svg" alt="instagram logo" class="footer-img"></div>
<div><img src="assets/images/facebook-logo.svg" alt="facebook logo"class="footer-img"></div >
<div><img src="assets/images/youtube 2.svg" alt="youtube logo" class="footer-img"></div >
</div>
<p class="footer-p">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</section>
</footer>
</main>
</body>
</html>

View File

@ -1,7 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
color: #000000;
}
.page-header {
@ -13,4 +17,482 @@
.header-logo {
padding: 29px 0px;
display: block;
}
.main-banner {
width: 100%;
}
.first-content {
padding-top: 73px;
display: flex;
align-items: center;
justify-content: center;
}
.first-content-text {
max-width: 766px;
}
.first-content-h2 {
text-transform: uppercase;
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-align: center;
}
.first-content-h1 {
font-weight: 500;
font-size: 40px;
line-height: 58px;
text-transform: uppercase;
text-align: center;
}
.first-content-p {
font-weight: 400;
font-size: 16px;
padding-top: 28px;
}
.block {
width: 50%;
max-width: 315px;
display: block;
margin: auto;
padding: 73px 0px 179px 0px;
}
.first-card {
width: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 21px;
padding-bottom: 79px;
}
.first-card-p {
padding: 27px;
padding-top: 27px;
text-align: center;
padding: 27px 25px;
}
.first-card-image {
display: block;
margin: auto;
width: 103px;
padding: 35px 12px 0px 12px;
}
.first-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 350px;
}
.image-row-background {
background-color: #E0E0E0;
max-height: 530px;
padding: 0px 72px 0px 72px;
}
.image-row-wrapper {
position: relative;
bottom: -50px;
}
.image-row-desktop {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 39px;
}
.row-image-desktop {
width: 100%;
}
.image-row-mobile1 {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
}
.image-row-mobile2 {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 24px;
max-width: 368px;
}
.row-image-mobile {
width: 100%;
max-width: 177px;
}
.row-image-mobile2 {
width: 100%;
max-width: 368px;
}
.second-card {
width: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 16px;
padding: 191px 72px 0px 72px;
}
.second-card-p {
padding: 15px 32px 65px 32px;
text-align: center;
}
.second-card-image {
display: block;
margin: auto;
height: 104px;
padding: 35px 12px 0px 12px;
}
.second-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
width: auto;
}
.bottom-banner2 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: auto;
padding-top: 50px;
}
.second-content {
padding-top: 108px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.second-content-text {
max-width: 550px;
}
.second-content-h1 {
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
text-align: center;
}
.first-content-p {
text-align: center;
}
.bottom-banner {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: auto;
padding-top: 50px;
}
.second-content2 {
padding-top: 108px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.bottom-banner-desktop {
display: block;
width: 100%;
}
.bottom-banner-mobile {
width: 100%;
}
.bottom-banner-img {
max-width: 1360px;
width: 100%;
padding: 0px 30px 0px 30px;
}
.end-footer {
background-color: #000000;
margin-top: 116px;
}
.footer-images {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 16px;
padding: 38px 0px 16px 0px;
}
.footer-p {
color: #BDBDBD;
text-align: center;
padding-bottom: 38px;
}
@media screen and (min-width: 3500px){
.header-logo {
width: 500px;
}
.first-content-p {
font-size: xx-large;
}
.first-content-h2 {
font-size: 70px;
}
.first-content-p {
font-size: 30px;
}
.block {
min-width: 500px;
min-height: 700px;
}
.row-image-desktop {
width: 2000px;
}
.bottom-banner-img {
min-width: 2000px;
}
}
@media screen and (min-width: 2500px) {
.header-logo {
min-height: 130px;
}
.first-content-h2 {
font-size: 50px;
}
.first-content-h1 {
padding-top: 10px;
font-size: 60px;
}
.first-content-p {
font-size: 26px;
}
.first-card-image {
width: 200px;
}
.first-card-p {
font-size: 30px;
}
.image-row-background {
min-height: 650px;
}
.row-image-desktop {
width: 700px;
}
.second-card-image {
width: 500px;
height: 200px;
}
.second-card-p {
font-size: 30px;
}
.second-content-h2 {
font-size: 44px;
}
.second-content-p {
font-size: 26px;
}
.footer-img {
min-height: 35px;
}
.footer-p {
font-size: 18px;
}
}
@media screen and (max-width: 1024px) {
.first-content-text {
max-width: 367px;
padding: 0px 29px;
}
.first-content-h2 {
font-size: 20px;
line-height: 24px;
}
.first-content-h1 {
font-size: 28px;
line-height: 34px;
}
.first-content-p {
text-align: center;
}
.block {
padding-bottom: 90px;
}
.first-card {
display: flex;
flex-direction: column;
}
.image-row-wrapper {
bottom: -20px;
}
.image-row-background {
height: 579px;
}
.row-image-desktop {
display: none;
}
.second-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 150px 23px 0px 23px;
}
.second-card {
flex-direction: column;
}
.second-card-p {
font-size: 14px;
max-width: 302px;
}
.bottom-banner-desktop {
display: none;
}
.bottom-banner-img {
width: 60%;
}
.second-content {
padding: 50px 32px 0px;
}
.bottom-banner {
display: none;
}
.bottom-banner-img {
padding: 0px;
}
.second-content2 {
display: none;
}
}
@media screen and (min-width: 1025px){
.image-row-mobile1 {
display: none;
}
.image-row-mobile2 {
display: none;
}
.bottom-banner-mobile {
display: none;
}
.bottom-banner2 {
display: none;
}
.second-content2 {
display: none;
}
}
@media screen and (max-width: 500px) {
.block {
width: 200px;
}
.row-image-mobile {
width: 75%;
}
.image-row-background {
height: auto;
}
.image-row-wrapper {
bottom: -30px;
}
.row-image-mobile2 {
width: 160%;
}
.bottom-banner-img {
width: 100%;
}
}
@media screen and (max-width: 330px) {
.row-image-mobile {
width: 80%;
}
.row-image-mobile2 {
width: 170%;
}
}
@media screen and (max-width: 300px) {
.row-image-mobile {
width: 90%;
}
.row-image-mobile2 {
width: 185%;
}
}