forked from M3-Academy/challenge-landing-page
Compare commits
7 Commits
main
...
leonardope
| Author | SHA1 | Date | |
|---|---|---|---|
| 7b07501d88 | |||
| d111581eb8 | |||
| 199235838d | |||
| cfe67908b3 | |||
| 479e9d6619 | |||
| 00e2dcca3c | |||
| d3c8072b97 |
Binary file not shown.
|
Before Width: | Height: | Size: 262 B |
Binary file not shown.
|
Before Width: | Height: | Size: 490 B |
Binary file not shown.
|
Before Width: | Height: | Size: 346 B |
@ -12,13 +12,10 @@ 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;
|
||||
@ -177,44 +174,70 @@ body{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.final-photo-desktop{
|
||||
.final-card-image-desktop{
|
||||
width: 70%;
|
||||
margin-bottom: 116px;
|
||||
}
|
||||
|
||||
footer{
|
||||
background: #000000;
|
||||
color: #BDBDBD;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@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-text{
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
@media screen and (max-width:768px){
|
||||
|
||||
.footer-logo{
|
||||
margin-top: 38px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.final-card-info{
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.logo1
|
||||
{
|
||||
padding-right: 21px;
|
||||
}
|
||||
.final-card-text{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.logo3
|
||||
{
|
||||
padding-left: 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -242,11 +265,6 @@ a {
|
||||
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){
|
||||
@ -254,75 +272,6 @@ a {
|
||||
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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -334,7 +283,7 @@ a {
|
||||
}
|
||||
|
||||
@media screen and (min-width:415px){
|
||||
.main-banner-mobile, .final-photo-mobile{
|
||||
.main-banner-mobile, .final-card-image-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -402,17 +351,4 @@ a {
|
||||
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
44
index.html
@ -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,22 +63,15 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="middle-photo">
|
||||
|
||||
<div class="middle-photo">
|
||||
<img class="photo" src="./assets/img/photo1.png" alt="Primeira 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" src="./assets/img/photo2.png" alt="Segunda 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" />
|
||||
<img class="photo-desktop" id="photo3" src="./assets/img/photo3.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" />
|
||||
@ -119,7 +112,7 @@
|
||||
|
||||
<section class="final-card">
|
||||
|
||||
<img class="final-photo-mobile" src="./assets/img/final-photo-mobile.png" alt="Banner final da pagina" />
|
||||
<img class="final-card-image-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>
|
||||
@ -132,29 +125,8 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img class="final-photo-desktop" src="./assets/img/final-photo-desktop.png" alt="Banner final da pagina" />
|
||||
<img class="final-card-image-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>
|
||||
Loading…
Reference in New Issue
Block a user