josecarloslins/challenge-landing-page-jose-carlos-lins
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Compare commits

base: josecarloslins:main
Branches Tags
josecarloslins:main
josecarloslins:feature/otimization
josecarloslins:feature/footer
josecarloslins:feature/footer-section
josecarloslins:feature/infocards-footer
josecarloslins:feature/banner-middle
josecarloslins:feature/section-top-infocards-icons
josecarloslins:feature/section-infocard-top
josecarloslins:feature/banner-top
josecarloslins:feature/header
..
compare: josecarloslins:feature/footer
Branches Tags
josecarloslins:main
josecarloslins:feature/otimization
josecarloslins:feature/footer
josecarloslins:feature/footer-section
josecarloslins:feature/infocards-footer
josecarloslins:feature/banner-middle
josecarloslins:feature/section-top-infocards-icons
josecarloslins:feature/section-infocard-top
josecarloslins:feature/banner-top
josecarloslins:feature/header

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

2 changed files with 178 additions and 219 deletions
Show Stats Expand all files Collapse all files

241
assets/styles/main.css
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;
} }
} }

152
index.html
View File

@ -26,91 +26,89 @@
<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> <h1 class="top-infocard-title">Dolor sit amet</h1>
<h1 class="top-infocard-title">Dolor sit amet</h1>
<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>
<figure class="wrapper-top-infocard"><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure>
</section>
<section class="top-cards">
<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>
<p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<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>
<p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<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>
<p class="top-card-description card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
<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-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> </div>
<section class="footer-cards"> <figure><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure>
<div class="footer-card"> </section>
<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>
<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.
</p>
</div>
<div class="footer-card"> <section class="top-cards">
<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> <div class="top-card">
<p class="footer-card-description card-description"> <figure><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure>
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 class="top-card-description card-description">
</p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div> </p>
</div>
<div class="footer-card"> <div class="top-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="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure>
<p class="footer-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. 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="top-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="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure>
<p class="footer-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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
</section> </section>
<section class="section-footer"> <div class="middle-banner">
<div class="section-footer-text"> <div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador"></div>
<h2 class="section-footer-title">Lorem ipsum dolor sit amet</h2> <div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador"></div>
<p class="section-footer-description"> <div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. </div>
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</div>
<img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" /> <section class="footer-cards">
<img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" /> <div class="footer-card">
</section> <figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure>
</main> <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.
</p>
</div>
<div class="footer-card">
<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">
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>
</div>
<div class="footer-card">
<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">
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>
</div>
<div class="footer-card">
<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">
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>
</div>
</section>
<section class="section-footer">
<div class="section-footer-text">
<h2 class="section-footer-title">Lorem ipsum dolor sit amet</h2>
<p class="section-footer-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</div>
<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" />
</section>
<footer class="page-footer"> <footer class="page-footer">
<div class="social-links"> <div class="social-links">