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

Compare commits

merge into: BernardoWaldhelm:main
Branches Tags
BernardoWaldhelm:main
BernardoWaldhelm:hotfix/challenge
...
pull from: BernardoWaldhelm:hotfix/challenge
Branches Tags
BernardoWaldhelm:hotfix/challenge
BernardoWaldhelm:main

5 Commits
main ... hotfix/cha

Author SHA1 Message Date
Bernardo Waldhelm
b6f54c7f7f fix(home): ajustando width das imgs, ajustando img bottom-card 
home
 2022-11-09 15:13:58 -03:00
Bernardo Waldhelm
5bc6ae7933 fix(home): ajustando font-family, corrigindo erro do link 2022-11-09 12:53:08 -03:00
Bernardo Waldhelm
e8cdd7d2d4 fix(home): corrigindo erro semantico HTML, trocando tags 2022-11-09 11:32:52 -03:00
Bernardo Waldhelm
db363fc7e1 fix(home): adicionando links nas logos do footer 2022-11-09 10:59:35 -03:00
Bernardo Waldhelm
68cabafe1c fix(home): corrigindo erro de semantica no HTML 2022-11-09 10:54:01 -03:00
3 changed files with 54 additions and 49 deletions
Show Stats Expand all files Collapse all files

BIN
assets/images/bottom-card1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

6
assets/styles/css/main.css
View File

@ -7,8 +7,13 @@
background:#000 background:#000
} }
.header__link-logo{
width: 12%;
}
.header__logo { .header__logo {
display: block; display: block;
width: 100%;
} }
.banner { .banner {
@ -83,6 +88,7 @@
background: #FFFFFF; background: #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 26px; padding: 36px 26px 26px;
width: 18vw;
} }
.card__img { .card__img {

97
index.html
View File

@ -9,23 +9,23 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500;600 & display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<title>Desafio M3 Academy</title> <title>Desafio M3 Academy</title>
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<a href="/"> <a class="header__link-logo" href="/">
<img class="header__logo" src="./assets/images/logo-m3.svg" alt="Logo M3-Academy"> <img class="header__logo" src="./assets/images/logo-m3.svg" alt="Logo M3-Academy">
</a> </a>
</header> </header>
<main> <main>
<section class="banner"> <figure class="banner">
<img class="banner__img banner__img__desktop" src="/assets/images/banner-princpal-desktop.png" alt="Banner Principal do Site" /> <img class="banner__img banner__img__desktop" src="/assets/images/banner-princpal-desktop.png" alt="Banner Principal do Site" />
<img class="banner__img banner__img__mobile" src="/assets/images/banner-principal-mobile.png" alt="Banner Principal do Site" /> <img class="banner__img banner__img__mobile" src="/assets/images/banner-principal-mobile.png" alt="Banner Principal do Site" />
</section> </figure>
<section class="home-destaque"> <section class="home-destaque">
<div class="home-destaque__text"> <div class="home-destaque__text">
@ -38,45 +38,45 @@
</section> </section>
<section class="cards"> <section class="cards">
<div class="cards__card"> <figure class="cards__card">
<img src="/assets/images/card1.png" alt="Imagem do Card 1" class="card__img"> <img src="/assets/images/card1.png" alt="Imagem do Card 1" class="card__img">
<p class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <figcaption class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </figure>
<div class="cards__card"> <figure class="cards__card">
<img src="/assets/images/card2.png" alt="Imagem do Card 2" class="card__img"> <img src="/assets/images/card2.png" alt="Imagem do Card 2" class="card__img">
<p class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <figcaption class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </figure>
<div class="cards__card"> <figure class="cards__card">
<img src="/assets/images/card3.png" alt="Imagem do Card 3" class="card__img"> <img src="/assets/images/card3.png" alt="Imagem do Card 3" class="card__img">
<p class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <figcaption class='card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </figure>
</section> </section>
<section class="carousel"> <section class="carousel">
<div class="carousel__products"> <figure class="carousel__products">
<img class="carousel__products_img" src="/assets/images/product1.png" alt="Imagem do Produto 1" > <img class="carousel__products_img" src="/assets/images/product1.png" alt="Imagem do Produto 1" >
<img class="carousel__products_img " src="/assets/images/product2.png" alt="Imagem do Produto 2" > <img class="carousel__products_img " src="/assets/images/product2.png" alt="Imagem do Produto 2" >
<img class="carousel__products_img product3" src="/assets/images/product3.png" alt="Imagem do Produto 3" "> <img class="carousel__products_img product3" src="/assets/images/product3.png" alt="Imagem do Produto 3" ">
</div> </figure>
</section> </section>
<section class="bottom-cards"> <section class="bottom-cards">
<div class="bottom-cards__card"> <figure class="bottom-cards__card">
<img src="/assets/images/bottom-card1.png" alt="Imagem do Card 1" class="bottom-card__img"> <img src="/assets/images/bottom-card1.png" alt="Imagem do Card 1" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <figcaption class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </figure>
<div class="bottom-cards__card"> <figure class="bottom-cards__card">
<img src="/assets/images/bottom-card2.png" alt="Imagem do Card 2" class="bottom-card__img"> <img src="/assets/images/bottom-card2.png" alt="Imagem do Card 2" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <figcaption class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </figure>
<div class="bottom-cards__card"> <figure class="bottom-cards__card">
<img src="/assets/images/bottom-card3.png" alt="Imagem do Card 3" class="bottom-card__img"> <img src="/assets/images/bottom-card3.png" alt="Imagem do Card 3" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <figcaption class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </figure>
<div class="bottom-cards__card"> <figure class="bottom-cards__card">
<img src="/assets/images/bottom-card4.png" alt="Imagem do Card 4" class="bottom-card__img"> <img src="/assets/images/bottom-card4.png" alt="Imagem do Card 4" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <figcaption class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </figure>
</section> </section>
<section class="home-description"> <section class="home-description">
@ -89,29 +89,28 @@
<img class="home-description__img banner__img__mobile" src="./assets/images/home-description-mobile.png" alt="Imagem embaçada código" /> <img class="home-description__img banner__img__mobile" src="./assets/images/home-description-mobile.png" alt="Imagem embaçada código" />
</section> </section>
<footer class="footer">
<ul class="footer__logos">
<li class="footer__logo">
<a href="#" target="_blank">
<img class="footer__img" src="./assets/images/insta-logo.png" alt="Ícone Instagram"/>
</a>
</li>
<li class="footer__logo">
<a href="#">
<img class="footer__img" src="/assets/images/facebook-logo.png" alt="Ícone Facebook">
</a>
</li>
<li class="footer__logo">
<a href="#">
<img class="footer__img" src="/assets/images/youtube-logo.png" alt="Ícone Youtube">
</a>
</li>
</ul>
<p class="footer__text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</main> </main>
<footer class="footer">
<ul class="footer__logos">
<li class="footer__logo">
<a href="https://www.instagram.com/m3.ecommerce/" target="_blank">
<img class="footer__img" src="./assets/images/insta-logo.png" alt="Ícone Instagram"/>
</a>
</li>
<li class="footer__logo">
<a href="https://www.facebook.com/digitalm3/" target="_blank">
<img class="footer__img" src="/assets/images/facebook-logo.png" alt="Ícone Facebook">
</a>
</li>
<li class="footer__logo">
<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target="_blank">
<img class="footer__img" src="/assets/images/youtube-logo.png" alt="Ícone Youtube">
</a>
</li>
</ul>
<p class="footer__text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</body> </body>
</html> </html>