Adicionando responsividade
This commit is contained in:
parent
0725482a42
commit
3883d36237
BIN
assets/Rectangle 9 (2).png
Normal file
BIN
assets/Rectangle 9 (2).png
Normal file
Binary file not shown.
After Width: | Height: | Size: 332 KiB |
BIN
assets/oculos.png
Normal file
BIN
assets/oculos.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 246 KiB |
127
css/style.css
127
css/style.css
@ -45,7 +45,6 @@ p {
|
|||||||
|
|
||||||
.text-div h2 {
|
.text-div h2 {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
font-family: "Inter";
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@ -102,7 +101,9 @@ p {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc-figure img {
|
.pc1,
|
||||||
|
.pc2,
|
||||||
|
.pc3 {
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
width: 26.375rem;
|
width: 26.375rem;
|
||||||
height: 23.125rem;
|
height: 23.125rem;
|
||||||
@ -164,3 +165,125 @@ p {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.b {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oculos {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 414px) {
|
||||||
|
|
||||||
|
.a {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b {
|
||||||
|
height: 37.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-div {
|
||||||
|
display: flex;
|
||||||
|
max-width: 100vw;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
flex-flow: column wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-div h1 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
line-height: 2.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-div h2 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-div p {
|
||||||
|
font-weight: 400;
|
||||||
|
width: 21.063rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-figure {
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc2 {
|
||||||
|
margin: 0;
|
||||||
|
order: 1;
|
||||||
|
width: 11.063rem;
|
||||||
|
height: 11.063rem;
|
||||||
|
margin-left: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc1 {
|
||||||
|
margin: 0;
|
||||||
|
order: 2;
|
||||||
|
width: 11.063rem;
|
||||||
|
height: 11.063rem;
|
||||||
|
}
|
||||||
|
.pc3 {
|
||||||
|
order: 3;
|
||||||
|
width: 23rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ordering {
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oculos {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-div .oculos {
|
||||||
|
width: 25.875rem;
|
||||||
|
height: 25.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-div .content {
|
||||||
|
width: 21.875rem;
|
||||||
|
margin-bottom: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-div h3 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
line-height: 1.813rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-figure{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright{
|
||||||
|
width: 16.313rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 290px) {
|
||||||
|
|
||||||
|
.logo-div{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -28,11 +28,17 @@
|
|||||||
</header>
|
</header>
|
||||||
<figure class="hero-figure">
|
<figure class="hero-figure">
|
||||||
<img
|
<img
|
||||||
class="hero"
|
class="hero a"
|
||||||
src="/assets/Rectangle 9.png"
|
src="/assets/Rectangle 9.png"
|
||||||
alt="Computador sobre uma
|
alt="Computador sobre uma
|
||||||
mesa"
|
mesa"
|
||||||
/>
|
/>
|
||||||
|
<img
|
||||||
|
class="hero b"
|
||||||
|
src="/assets/Rectangle 9 (2).png"
|
||||||
|
alt="Computador sobre uma
|
||||||
|
mesa"
|
||||||
|
/>
|
||||||
</figure>
|
</figure>
|
||||||
<section id="text-section">
|
<section id="text-section">
|
||||||
<div class="text-div">
|
<div class="text-div">
|
||||||
@ -71,9 +77,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<figure class="pc-figure">
|
<figure class="pc-figure">
|
||||||
<img src="../assets/Rectangle 13.png" alt="Imagem de um Computador" />
|
<div class="ordering">
|
||||||
<img src="../assets/Rectangle 16.png" alt="Imagem de um Computador" />
|
<img
|
||||||
<img src="../assets/Rectangle 17.png" alt="Imagem de um Computador" />
|
class="pc1"
|
||||||
|
src="../assets/Rectangle 13.png"
|
||||||
|
alt="Imagem de um Computador"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="pc2"
|
||||||
|
src="../assets/Rectangle 16.png"
|
||||||
|
alt="Imagem de um Computador"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
class="pc3"
|
||||||
|
src="../assets/Rectangle 17.png"
|
||||||
|
alt="Imagem de um Computador"
|
||||||
|
/>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<div class="content-div">
|
<div class="content-div">
|
||||||
@ -115,6 +135,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<figure class="oculos-figure">
|
||||||
|
<img class="oculos" src="../assets/oculos.png" alt="oculos numa mesa desfocada">
|
||||||
|
</figure>
|
||||||
<div class="text-div">
|
<div class="text-div">
|
||||||
<h3>Lorem ipsum dolor sit amet</h3>
|
<h3>Lorem ipsum dolor sit amet</h3>
|
||||||
<p class="content">
|
<p class="content">
|
||||||
|
Loading…
Reference in New Issue
Block a user