Compare commits

..

No commits in common. "main" and "feature/footer" have entirely different histories.

2 changed files with 178 additions and 219 deletions

View File

@ -5,7 +5,6 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
} }
body{ body{
@ -22,11 +21,7 @@ body{
padding: 28px 0; padding: 28px 0;
} }
.header-logo { .header-page, .main-banner, .footer-banner {
width: 12%;
}
.header-page, .main-banner, .footer-banner, .header-logo {
width: 100%; width: 100%;
display: block; display: block;
} }
@ -39,10 +34,9 @@ body{
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 4% 0 9%; padding: 72px 0 180px;
} }
.top-infocard-text { .top-infocard-text {
width: 40%; width: 40%;
text-align: center; text-align: center;
@ -72,21 +66,13 @@ body{
padding-bottom: 72px; padding-bottom: 72px;
} }
.wrapper-top-infocard {
width: 16%;
}
.top-infocard-image {
width: 100%;
}
.top-cards { .top-cards {
display: grid; display: grid;
grid-template-columns: repeat(3, 18%); grid-template-columns: repeat(3, max-content);
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
padding-bottom: 4%; padding-bottom: 80px;
} }
.top-card { .top-card {
@ -96,17 +82,12 @@ body{
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: 7% 7% 10%; padding: 26px 26px 34px;
}
.wrapper-top-card-image {
display: block;
margin-bottom: 7%;
width: 30%;
} }
.top-card-image { .top-card-image {
width: 100%; display: block;
margin-bottom: 26px;
} }
.card-description { .card-description {
@ -116,7 +97,7 @@ body{
} }
.top-card-description { .top-card-description {
max-width: 86%; max-width: 300px;
} }
@ -130,32 +111,27 @@ body{
justify-content: center; justify-content: center;
gap: 40px; gap: 40px;
max-height: 530px; max-height: 530px;
padding: 0 14%; padding: 0 72px;
}
.banner-grid-1, .banner-grid-2, .banner-grid-3 {
display: block;
margin-top: 12%;
width: 100%;
} }
.middle-banner-image { .middle-banner-image {
display: block; width: 100%;
width: max-content; margin-top: 62px;
} }
/* CARDS DO RODAPÉ */ /* CARDS DO RODAPÉ */
.footer-cards { .footer-cards {
display: grid; display: grid;
grid-template-columns: repeat(4, 22%); grid-template-columns: repeat(4, max-content);
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
padding-bottom: 6%; padding-bottom: 108px;
padding-top: 10%; padding-top: 192px;
} }
.footer-card { .footer-card {
@ -165,21 +141,16 @@ body{
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
padding: 8% 8% 15%; padding: 36px 32px 64px;
}
.wrapper-footer-card-image {
width: 24%;
} }
.footer-card-image { .footer-card-image {
display: block; display: block;
width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
} }
.footer-card-description { .footer-card-description {
max-width: 85%; max-width: 367px;
} }
/* SESSÃO DO RODAPÉ */ /* SESSÃO DO RODAPÉ */
@ -190,14 +161,12 @@ body{
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding-bottom: 6%; padding-bottom: 116px;
} }
.section-footer-text{ .section-footer-text{
width: 28%; width: 28%;
text-align: center; text-align: center;
padding-bottom: 3%;
} }
.section-footer-title { .section-footer-title {
@ -210,6 +179,8 @@ body{
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
padding-bottom: 50px;
} }
.section-footer-image-desktop { .section-footer-image-desktop {
@ -250,99 +221,34 @@ body{
/* RESPONSIVIDADE */ /* RESPONSIVIDADE */
@media screen and (min-width: 2501px) { @media screen and (max-width: 1919px) {
.top-infocard-subtitle, .section-footer-title {
font-size: 64px;
line-height: 78px;
}
.top-infocard-title {
font-size: 96px;
line-height: 116px;
}
.top-infocard-description, .section-footer-description, .card-description{
font-size: 32px;
line-height: 48px;
}
.footer-text {
font-size: 20px;
line-height: 24px;
}
}
@media screen and (min-width: 1025px) and (max-width: 2500px) {
.middle-banner { .middle-banner {
background: #E0E0E0; max-height: 398px;
display: grid;
grid-template-columns: repeat(3, 30%);
justify-content: center;
gap: 40px;
max-height: 530px;
padding: 0 4%;
}
.banner-grid-1, .banner-grid-2, .banner-grid-3 {
display: block;
position: relative;
margin-top: 12%;
max-width: 100%;
} }
.middle-banner-image { .middle-banner-image {
display: block; width: 420px;
max-width: 100%; margin-top: 46px;
}
.footer-cards {
display: grid;
grid-template-columns: repeat(2, max-content);
} }
} }
@media screen and (min-width: 1025px) { @media screen and (max-width: 1530px) {
.main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile { .middle-banner {
display: none; max-height: 318px;
}
.middle-banner-image {
width: 332px;
margin-top: 36px;
} }
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1200px) {
.main-banner-desktop, .section-footer-image-desktop {
display: none;
}
.top-infocard {
padding: 18% 7% 22%;
}
.top-infocard-text {
width: 100%;
}
.top-infocard-subtitle {
font-size: 20px;
line-height: 24px;
}
.top-infocard-title {
font-size: 28px;
line-height: 34px;
padding-bottom: 16px;
}
.wrapper-top-infocard {
width: 58%;
}
.top-infocard-image {
width: 100%;
}
.top-cards {
grid-template-columns: 1fr;
padding: 36px 32px 80px;
}
.middle-banner { .middle-banner {
grid-template-columns: 45% 45%; grid-template-columns: 45% 45%;
grid-template-areas: "banner-grid-1 banner-grid-2" grid-template-areas: "banner-grid-1 banner-grid-2"
@ -373,16 +279,35 @@ body{
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
} }
}
.footer-cards { @media screen and (min-width: 769px) and (max-width: 1200px) {
grid-template-columns: 1fr; .top-cards {
padding: 80px 24px 98px; grid-template-columns: repeat(2, max-content);
justify-content: center; padding: 36px 26px 80px;
}
}
@media screen and (max-width: 1024px) {
.top-infocard-text {
width: 100%;
padding: 0 28px;
} }
.footer-card-description { .top-infocard-subtitle {
max-width: 73%; font-size: 20px;
font-size: 14px; line-height: 24px;
}
.top-infocard-title {
font-size: 28px;
line-height: 34px;
padding-bottom: 16px;
}
.top-infocard-image {
width: 100%;
max-width: 240px;
} }
.section-footer { .section-footer {
@ -411,9 +336,45 @@ body{
.section-footer-description { .section-footer-description {
padding-bottom: 0; padding-bottom: 0;
} }
}
@media screen and (max-width: 968px){
.footer-cards {
grid-template-columns: 1fr;
padding: 80px 24px 98px;
justify-content: center;
}
.footer-card-description {
max-width: 302px;
font-size: 14px;
}
}
@media screen and (max-width: 768px){
.top-infocard {
padding-bottom: 90px;
}
.top-cards {
grid-template-columns: 1fr;
padding: 36px 32px 80px;
}
}
@media screen and (max-width: 414px) {
.main-banner-desktop, .section-footer-image-desktop {
display: none;
}
.footer-text { .footer-text {
text-align: center; text-align: center;
width: 85%; width: 261px;
}
}
@media screen and (min-width: 415px) {
.main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile {
display: none;
} }
} }

View File

@ -26,7 +26,6 @@
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" /> <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" />
</div> </div>
<main>
<section class="top-infocard"> <section class="top-infocard">
<div class="top-infocard-text"> <div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
@ -35,26 +34,26 @@
<p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.</p> <p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.</p>
</div> </div>
<figure class="wrapper-top-infocard"><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure> <figure><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure>
</section> </section>
<section class="top-cards"> <section class="top-cards">
<div class="top-card"> <div class="top-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure> <figure><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure>
<p class="top-card-description card-description"> <p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="top-card"> <div class="top-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure> <figure><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure>
<p class="top-card-description card-description"> <p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="top-card"> <div class="top-card">
<figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure> <figure><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure>
<p class="top-card-description card-description"> <p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
@ -62,35 +61,35 @@
</section> </section>
<div class="middle-banner"> <div class="middle-banner">
<div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador" /></div> <div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador"></div>
<div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador" /></div> <div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador"></div>
<div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador" /></div> <div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador"></div>
</div> </div>
<section class="footer-cards"> <section class="footer-cards">
<div class="footer-card"> <div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure> <figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure>
<p class="footer-card-description card-description"> <p class="footer-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="footer-card"> <div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-02.png" alt="Imagem do Segundo Card do Rodapé"></figure> <figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-02.png" alt="Imagem do Segundo Card do Rodapé"></figure>
<p class="footer-card-description card-description"> <p class="footer-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="footer-card"> <div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-03.png" alt="Imagem do Terceiro Card do Rodapé"></figure> <figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-03.png" alt="Imagem do Terceiro Card do Rodapé"></figure>
<p class="footer-card-description card-description"> <p class="footer-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="footer-card"> <div class="footer-card">
<figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-04.png" alt="Imagem do Quarto Card do Rodapé"></figure> <figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-04.png" alt="Imagem do Quarto Card do Rodapé"></figure>
<p class="footer-card-description card-description"> <p class="footer-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
@ -110,7 +109,6 @@
<img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" /> <img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" />
<img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" /> <img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" />
</section> </section>
</main>
<footer class="page-footer"> <footer class="page-footer">
<div class="social-links"> <div class="social-links">