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

fix(home):Conserto top-infocard desktop e mobile

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-10-12 20:31:48 -03:00
parent 77e3f3ef21
commit cbd8cbb3ad
2 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assets/css/style.css
View File

@ -30,10 +30,8 @@ body {
flex-direction: column;
align-items: center;
padding: 74px 0 180px;
}
.top-inforcard-text {
max-width: 40%;
margin: 0 auto 0;
}
.top-infocard-subtitle {
@ -59,7 +57,7 @@ body {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
line-height: 24px;
margin-bottom: 74px;
text-align: center;
}
@ -136,7 +134,7 @@ body {
flex-direction: column;
align-items: center;
background: #ffffff;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.bottom-card-image {
@ -218,10 +216,10 @@ body {
.top-infocard {
padding: 73px 32px 90px;
margin: 0 auto 0;
max-width: 100%;
}
.top-inforcard-text {
margin-bottom: 65px;
max-width: 100%;
}
.top-infocard-subtitle {
@ -307,3 +305,26 @@ body {
display: none;
}
}
@media screen and (min-width: 2500px) {
.page-header {
padding: 56px 0;
}
.header-logo {
width: 200%;
}
.top-infocard-subtitle {
font-size: 64px;
line-height: 78px;
}
.top-infocard-title {
font-size: 96px;
line-height: 116px;
}
.top-infocard-description {
font-size: 32px;
line-height: 48px;
}
.top-infocard-picture {
}
}

47
index.html
View File

@ -45,7 +45,7 @@
dui.
</p>
</div>
<figure>
<figure class="top-infocard-picture">
<img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png"
alt="Banner do Infocard do Topo">
</figure>
@ -164,29 +164,30 @@
alt="Banner do Infocard de Baixo Mobile">
</figure>
</section>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/imagens/instagram-icon.png" alt="Icone do Instagram" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/imagens/facebook-icon.png" alt="Icone do Facebook" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/imagens/youtube-icon.png" alt="Icone do Youtube" />
</a>
</li>
</ul>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/imagens/instagram-icon.png" alt="Icone do Instagram" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/imagens/facebook-icon.png" alt="Icone do Facebook" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/imagens/youtube-icon.png" alt="Icone 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>