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: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
..
compare: 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

4 Commits
feature/fo ... main

Author SHA1 Message Date
Carlos Lins
4747437ff3 fix: Add tag Main no HTML 2022-10-12 16:12:18 -03:00
José Carlos Lins
6146ea56f2 Merge pull request 'fix: Otimização HTML e CSS para responsividade' (#3) from feature/otimization into main 
Reviewed-on: josecarloslins/challenge-landing-page#3
 2022-10-12 16:55:08 +00:00
Carlos Lins
e1add74688 fix: Otimização HTML e CSS para responsividade 2022-10-12 12:38:38 -03:00
José Carlos Lins
e35e17622b Merge pull request 'feature/footer - Projeto Finalizado' (#2) from feature/footer into main 
Reviewed-on: josecarloslins/challenge-landing-page#2
 2022-10-11 00:42:27 +00:00
2 changed files with 220 additions and 179 deletions
Show Stats Expand all files Collapse all files

241
assets/styles/main.css
View File

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

152
index.html
View File

@ -26,89 +26,91 @@
<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>
<section class="top-infocard"> <main>
<div class="top-infocard-text"> <section class="top-infocard">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <div class="top-infocard-text">
<h1 class="top-infocard-title">Dolor sit amet</h1> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<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>
<figure><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure> <section class="footer-cards">
</section> <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>
<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 class="top-cards"> <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-02.png" alt="Imagem do Segundo Card do Rodapé"></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="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="top-card"> <div class="footer-card">
<figure><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure> <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>
<p class="top-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.
</p> </p>
</div> </div>
<div class="top-card"> <div class="footer-card">
<figure><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure> <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>
<p class="top-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.
</p> </p>
</div> </div>
</section> </section>
<div class="middle-banner"> <section class="section-footer">
<div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador"></div> <div class="section-footer-text">
<div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador"></div> <h2 class="section-footer-title">Lorem ipsum dolor sit amet</h2>
<div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador"></div> <p class="section-footer-description">
</div> 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>
<section class="footer-cards"> <img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" />
<div class="footer-card"> <img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" />
<figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure> </section>
<p class="footer-card-description card-description"> </main>
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">