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

Compare commits

base: LeonardoPereiraRocha:leonardopereirarocha
Branches Tags
LeonardoPereiraRocha:main
LeonardoPereiraRocha:leonardopereirarocha
..
compare: LeonardoPereiraRocha:main
Branches Tags
LeonardoPereiraRocha:main
LeonardoPereiraRocha:leonardopereirarocha

10 Commits
leonardope ... main

Author SHA1 Message Date
LeonardoPereiraRocha
04a4f0cae9 Ajusta imagens do meio para o mobile 2022-10-13 10:33:59 -03:00
LeonardoPereiraRocha
1643cd3e1b Cria footer desktop, mobile e telas 4k 2022-10-13 01:53:24 -03:00
LeonardoPereiraRocha
6bbf1ee112 Ajusta os banners para o mobile 2022-10-13 01:26:04 -03:00
LeonardoPereiraRocha
04e5a3f2cb Cria o segundo card desktop, mobile e telas 4k 2022-10-13 00:50:30 -03:00
LeonardoPereiraRocha
e63fe417a6 Adiciona fotos do meio do site desktop 2022-10-13 00:40:41 -03:00
LeonardoPereiraRocha
aed88a5e25 Cria o card do topo desktop, mobile e telas 4k 2022-10-13 00:32:34 -03:00
LeonardoPereiraRocha
daffd86deb Ajusta o infocard para mobile e telas 4k 2022-10-13 00:24:05 -03:00
LeonardoPereiraRocha
76ffd5f38b Cria o infocard desktop 2022-10-13 00:18:41 -03:00
LeonardoPereiraRocha
1a31cd1a96 Cria o banner principal desktop e mobile 2022-10-13 00:12:20 -03:00
LeonardoPereiraRocha
eaf9644616 Cria o header desktop e mobile 2022-10-13 00:02:22 -03:00
5 changed files with 164 additions and 72 deletions
Show Stats Expand all files Collapse all files

BIN
assets/img/footer-face-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 B

BIN
assets/img/footer-insta-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
assets/img/footer-youtube-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 B

176
assets/styles/style.css
View File

@ -12,10 +12,13 @@ body{
.page-header{
display: flex;
justify-content: center;
padding: 28px 0;
background-color: #000;
}
.logo-header{
margin: 29px 0;
}
.logo-header, .main-banner-desktop{
width: 100%;
display: block;
@ -174,70 +177,44 @@ body{
margin-bottom: 50px;
}
.final-card-image-desktop{
.final-photo-desktop{
width: 70%;
margin-bottom: 116px;
}
@media screen and (max-width:414px) {
.main-banner-desktop, .final-card-image-desktop {
display: none;
}
.main-banner-mobile, .final-card-image-mobile {
max-width: 100%;
}
.final-card-image-mobile{
margin-bottom: 50px;
}
footer{
background: #000000;
color: #BDBDBD;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and (max-width:768px){
.footer-text{
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
margin-bottom: 38px;
}
.footer-logo{
margin-top: 38px;
margin-bottom: 16px;
}
.final-card-info{
max-width: 350px;
}
a {
text-decoration: none;
}
.final-card-text{
font-size: 16px;
line-height: 24px;
}
.logo1
{
padding-right: 21px;
}
.final-card-title{
font-size: 24px;
line-height: 29px;
}
.top-card{
grid-template-columns: 1fr;
padding: 35px 33px 35px 33px;
}
.middle-photo{
gap: 13px;
grid-template-columns: repeat(2, 1fr);
padding-left: 23px;
padding-right: 23px;
text-align: center;
justify-content: center;
}
.photo{
margin-top: 32px;
}
.photo-desktop{
display: none;
}
.photo-mobile{
display: block;
justify-content: center;
margin-top: 100px;
}
.logo3
{
padding-left: 21px;
}
@ -265,6 +242,11 @@ body{
font-size: 20px;
line-height: 24px;
}
.second-card{
grid-template-columns: 1fr;
margin: 0 23px;
}
}
@media screen and (min-width: 993px) and (max-width: 1250px){
@ -272,6 +254,75 @@ body{
grid-template-columns: repeat(2, max-content);
margin: 0 23px;
}
}
@media screen and (max-width:414px) {
.main-banner-desktop, .final-photo-desktop{
display: none;
}
.main-banner-mobile, .final-photo-mobile{
display: block;
max-width: 100%;
}
.final-photo-mobile{
margin-bottom: 50px;
}
.footer-text{
font-size: 10px;
line-height: 12px;
max-width: 261px;
text-align: center;
}
}
@media screen and (max-width:768px){
.top-card{
grid-template-columns: 1fr;
padding: 35px 33px 35px 33px;
}
.middle-photo{
gap: 13px;
grid-template-columns: repeat(2, 1fr);
padding-left: 23px;
padding-right: 23px;
text-align: center;
justify-content: center;
}
.photo{
margin-top: 32px;
}
.photo-desktop{
display: none;
}
.middle-photo-mobile{
background-color: #E0E0E0;
display: flex;
align-items: center;
justify-content: center;
}
.photo-mobile{
display: block;
max-width: 80%;
align-items: center;
position: relative;
margin-bottom: -62px;
}
.photo,.photo-desktop{
position: relative;
margin-bottom: 24px;
margin-top: 32px;
max-width: 100%;
width: 100%;
}
}
@ -283,7 +334,7 @@ body{
}
@media screen and (min-width:415px){
.main-banner-mobile, .final-card-image-mobile {
.main-banner-mobile, .final-photo-mobile{
display: none;
}
}
@ -351,4 +402,17 @@ body{
line-height: 87px;
}
.footer-text{
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
margin-bottom: 38px;
max-width: 1200px;
}
.logo-header{
width: 300%;
}
}

44
index.html
View File

@ -19,12 +19,12 @@
<header class="page-header">
<a href="/">
<img class="logo-header" src="./assets/img/Logo-M3Academy.png" alt="Logo M3 Academy" />
<img class="main-banner-mobile" src="./assets/img/main-banner-mobile.png" alt="Banner Principal"/>
</a>
</header>
<div>
<img class="main-banner-desktop" src="./assets/img/main-banner-desktop.png" alt="Banner Principal"/>
<img class="main-banner-mobile" src="./assets/img/main-banner-mobile.png" alt="Banner Principal"/>
</div>
<section class="top-infocard">
@ -63,15 +63,22 @@
</div>
</section>
<div class="middle-photo">
<img class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" />
<div class="middle-photo">
<img class="photo" src="./assets/img/photo2.png" alt="Segunda foto do meio da página" />
<img class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" />
<img class="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
<img class="photo" src="./assets/img/photo2.png" alt="Segunda foto do meio da página" />
<img class="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
</div>
<div class="middle-photo-mobile">
<img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
</div>
<section class="second-card">
<div class="card-2">
<img class="card2-image" src = "./assets/img/second-card-image-1.png" alt="Primeira imagem do card inferior" />
@ -112,7 +119,7 @@
<section class="final-card">
<img class="final-card-image-mobile" src="./assets/img/final-photo-mobile.png" alt="Banner final da pagina" />
<img class="final-photo-mobile" src="./assets/img/final-photo-mobile.png" alt="Banner final da pagina" />
<div class="final-card-info">
<h1 class="final-card-title" >Lorem ipsum dolor sit amet</h1>
@ -125,8 +132,29 @@
</p>
</div>
<img class="final-card-image-desktop" src="./assets/img/final-photo-desktop.png" alt="Banner final da pagina" />
<img class="final-photo-desktop" src="./assets/img/final-photo-desktop.png" alt="Banner final da pagina" />
</section>
<footer>
<div class="footer-logo">
<a href="https://instagram.com" target="_blank">
<img class="logo1" src="./assets/img/footer-insta-logo.png" alt="Logo do Instagram" />
</a>
<a href="https://facebook.com" target="_blank">
<img class="logo2" src="./assets/img/footer-face-logo.png" alt="Logo do Facebook" />
</a>
<a href="https://youtube.com" target="_blank">
<img class="logo3"src="./assets/img/footer-youtube-logo.png" alt="Logo do Youtube" />
</a>
</div>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</body>
</html>
</html>