feature/4k #9

Merged
SavioCarvalhoMoraes merged 5 commits from feature/4k into development 2022-10-13 04:10:15 +00:00
2 changed files with 120 additions and 33 deletions

View File

@ -30,10 +30,8 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 74px 0 180px; padding: 74px 0 180px;
}
.top-inforcard-text {
max-width: 40%; max-width: 40%;
margin: 0 auto 0;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -59,10 +57,12 @@ body {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 150%; line-height: 24px;
margin-bottom: 74px;
text-align: center; text-align: center;
} }
.top-infocard-text {
margin-bottom: 74px;
}
.top-cards { .top-cards {
display: grid; display: grid;
@ -136,7 +136,7 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #ffffff; 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 { .bottom-card-image {
@ -218,11 +218,11 @@ body {
.top-infocard { .top-infocard {
padding: 73px 32px 90px; padding: 73px 32px 90px;
margin: 0 auto 0; margin: 0 auto 0;
}
.top-inforcard-text {
margin-bottom: 65px;
max-width: 100%; max-width: 100%;
} }
.top-infocard-text {
margin-bottom: 65px;
}
.top-infocard-subtitle { .top-infocard-subtitle {
font-size: 20px; font-size: 20px;
@ -272,6 +272,7 @@ body {
.bottom-card-description { .bottom-card-description {
font-size: 14px; font-size: 14px;
} }
.bottom-infocard { .bottom-infocard {
flex-direction: column-reverse; flex-direction: column-reverse;
margin: 0; margin: 0;
@ -307,3 +308,87 @@ body {
display: none; display: none;
} }
} }
@media screen and (min-width: 2500px) {
.page-header {
padding: 56px 0;
}
.header-logo {
width: 200%;
}
.top-infocard-text {
margin-bottom: 0;
}
.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;
margin-bottom: 100px;
}
.top-infocard-image {
height: 600px;
margin: 20px 0 84px;
}
.top-card-description {
font-size: 40px;
line-height: 40px;
margin: 50px 30px;
}
.top-card-image {
height: 200px;
margin-top: 100px;
}
.bottom-card-description {
font-size: 33px;
line-height: 52px;
margin: 25px 100px 73px;
}
.bottom-card-image {
height: 200px;
margin-top: 70px;
}
.bottom-banner-desktop {
width: 2500px;
}
.bottom-infocard {
margin-bottom: 210px;
padding: 200px 280px 0px;
}
.bottom-infocard-text {
width: 1174px;
}
.bottom-infocard-subtitle {
font-size: 75px;
margin-bottom: 40px;
line-height: 80px;
}
.bottom-infocard-description {
font-size: 40px;
margin-top: 20px;
line-height: 50px;
}
.page-footer {
padding: 74px 0 74px;
}
.rede-social-imagem {
height: 66px;
margin-bottom: 12px;
}
.footer-text {
font-size: 20px;
}
}

View File

@ -35,7 +35,7 @@
</section> </section>
<section class="top-infocard"> <section class="top-infocard">
<div class="top-inforcard-text"> <div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<h1 class="top-infocard-title">dolor sit amet</h1> <h1 class="top-infocard-title">dolor sit amet</h1>
<p class="top-infocard-description"> <p class="top-infocard-description">
@ -45,7 +45,7 @@
dui. dui.
</p> </p>
</div> </div>
<figure> <figure class="top-infocard-picture">
<img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png" <img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png"
alt="Banner do Infocard do Topo"> alt="Banner do Infocard do Topo">
</figure> </figure>
@ -164,29 +164,31 @@
alt="Banner do Infocard de Baixo Mobile"> alt="Banner do Infocard de Baixo Mobile">
</figure> </figure>
</section> </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> </main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img class="rede-social-imagem" src="./assets/imagens/instagram-icon.png"
alt="Icone do Instagram" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img class="rede-social-imagem" src="./assets/imagens/facebook-icon.png" alt="Icone do Facebook" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img class="rede-social-imagem" 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> </body>
</html> </html>