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 {
|
||||
margin-top: 3rem;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
@ -102,7 +101,9 @@ p {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pc-figure img {
|
||||
.pc1,
|
||||
.pc2,
|
||||
.pc3 {
|
||||
margin: 2rem;
|
||||
width: 26.375rem;
|
||||
height: 23.125rem;
|
||||
@ -164,3 +165,125 @@ p {
|
||||
text-transform: uppercase;
|
||||
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>
|
||||
<figure class="hero-figure">
|
||||
<img
|
||||
class="hero"
|
||||
class="hero a"
|
||||
src="/assets/Rectangle 9.png"
|
||||
alt="Computador sobre uma
|
||||
mesa"
|
||||
/>
|
||||
<img
|
||||
class="hero b"
|
||||
src="/assets/Rectangle 9 (2).png"
|
||||
alt="Computador sobre uma
|
||||
mesa"
|
||||
/>
|
||||
</figure>
|
||||
<section id="text-section">
|
||||
<div class="text-div">
|
||||
@ -71,9 +77,23 @@
|
||||
</div>
|
||||
|
||||
<figure class="pc-figure">
|
||||
<img src="../assets/Rectangle 13.png" alt="Imagem de um Computador" />
|
||||
<img src="../assets/Rectangle 16.png" alt="Imagem de um Computador" />
|
||||
<img src="../assets/Rectangle 17.png" alt="Imagem de um Computador" />
|
||||
<div class="ordering">
|
||||
<img
|
||||
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>
|
||||
|
||||
<div class="content-div">
|
||||
@ -115,6 +135,10 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="oculos-figure">
|
||||
<img class="oculos" src="../assets/oculos.png" alt="oculos numa mesa desfocada">
|
||||
</figure>
|
||||
<div class="text-div">
|
||||
<h3>Lorem ipsum dolor sit amet</h3>
|
||||
<p class="content">
|
||||
|
Loading…
Reference in New Issue
Block a user