GuilhermeDeCamargoBarbosa/challenge-landing-page-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): tratando responsividade do footer

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-10-12 21:43:25 -03:00
parent e04317afe6
commit ce958a16ee
2 changed files with 119 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/index.html
View File

File diff suppressed because one or more lines are too long

25
src/style.css
View File

@ -252,7 +252,7 @@ section.two h2 {
} }
.content-footer { .content-footer {
width: 50%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -264,11 +264,12 @@ section.two h2 {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 11px;
} }
.content-logosRedessociais svg { .content-logosRedessociais a {
margin: 1%; margin: 10px;
width: 3%; width: 2%;
} }
.copy { .copy {
@ -281,12 +282,18 @@ section.two h2 {
.copy p { .copy p {
color: #fff; color: #fff;
font-size: 11px; font-size: 11px;
text-align: center;
} }
@media only screen and (max-width: 414px){ @media only screen and (max-width: 414px){
.imagePrincipal, .content-imageSecondFooter { .imagePrincipal, .content-imageSecondFooter {
display: none; display: none;
} }
.content-logosRedessociais a {
margin: 5px;
width: 5%;
}
} }
@media only screen and (min-width: 415px){ @media only screen and (min-width: 415px){
@ -301,11 +308,15 @@ section.two h2 {
@media only screen and (max-width: 1024px){ @media only screen and (max-width: 1024px){
h1 { h1 {
font-size: 2rem; font-size: 1.8rem;
} }
h2 { h2 {
font-size: 1.4rem; font-size: 1.1rem;
}
p {
font-size: 0.8rem;
} }
.imagePrincipal-mobile { .imagePrincipal-mobile {
@ -337,7 +348,7 @@ section.two h2 {
section.one p, section.two p { section.one p, section.two p {
text-align: center; text-align: center;
font-size: 1.1rem; font-size: 0.8rem;
} }
.content-imageSecond { .content-imageSecond {