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

20
src/index.html
View File

@ -7,7 +7,10 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>M3 Academy Landing Page</title>
@ -15,6 +18,7 @@
<body>
<header>
<div class="logo">
<a href="#">
<svg
width="227"
height="43"
@ -44,25 +48,28 @@
/>
</defs>
</svg>
</a>
</div>
</header>
<main>
<div class="container-principal">
<a href="#">
<div class="imagePrincipal">
<img
src="/src/assets/images/Rectangle 9.png"
alt="Imagem com um notebook"
/>
</div>
</a>
<a href="#">
<div class="imagePrincipal-mobile">
<img
src="/src/assets/images/Rectangle 9 (1).png"
alt="Imagem com um notebook"
/>
</div>
</a>
<section class="one">
<h2>Lorem ipsum</h2>
<h1>DOLOR SIT AMET</h1>
@ -430,7 +437,6 @@
</div>
</div>
</div>
</div>
</main>
@ -438,6 +444,7 @@
<div class="container-footer">
<div class="content-footer">
<div class="content-logosRedessociais">
<a href="#">
<svg
width="24"
height="25"
@ -458,6 +465,8 @@
fill="white"
/>
</svg>
</a>
<a href="#">
<svg
width="24"
height="24"
@ -470,6 +479,8 @@
fill="white"
/>
</svg>
</a>
<a href="#">
<svg
width="24"
height="18"
@ -482,6 +493,7 @@
fill="white"
/>
</svg>
</a>
</div>
<div class="copy">
<p>

25
src/style.css
View File

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