forked from M3-Academy/challenge-landing-page
feat(home): tratando a responsividade da main
This commit is contained in:
parent
f21c80359b
commit
e04317afe6
BIN
src/assets/images/Rectangle 15 (1).png
Normal file
BIN
src/assets/images/Rectangle 15 (1).png
Normal file
Binary file not shown.
After Width: | Height: | Size: 247 KiB |
BIN
src/assets/images/Rectangle 9 (1).png
Normal file
BIN
src/assets/images/Rectangle 9 (1).png
Normal file
Binary file not shown.
After Width: | Height: | Size: 341 KiB |
@ -56,6 +56,13 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="imagePrincipal-mobile">
|
||||
<img
|
||||
src="/src/assets/images/Rectangle 9 (1).png"
|
||||
alt="Imagem com um notebook"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="one">
|
||||
<h2>Lorem ipsum</h2>
|
||||
<h1>DOLOR SIT AMET</h1>
|
||||
@ -217,19 +224,19 @@
|
||||
|
||||
<div class="container-imagesSecond">
|
||||
<div class="content-imageSecond">
|
||||
<div class="imageSecond item1">
|
||||
<div class="imageSecond img1">
|
||||
<img
|
||||
src="/src/assets/images/Rectangle 13.png"
|
||||
alt="notebook abrindo de frente"
|
||||
/>
|
||||
</div>
|
||||
<div class="imageSecond item2">
|
||||
<div class="imageSecond img2">
|
||||
<img
|
||||
src="/src/assets/images/Rectangle 16.png"
|
||||
alt="notebook abrindo de frente"
|
||||
/>
|
||||
</div>
|
||||
<div class="imageSecond item3">
|
||||
<div class="imageSecond img3">
|
||||
<img
|
||||
src="/src/assets/images/Rectangle 17.png"
|
||||
alt="notebook abrindo de lado"
|
||||
@ -394,26 +401,36 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="two">
|
||||
<h2>Lorem ipsum dolor sit amet</h2>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
<div class="container-sectionTwo">
|
||||
<section class="two item1">
|
||||
<h2>Lorem ipsum dolor sit amet</h2>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<div class="container-imageSecondFooter">
|
||||
<div class="content-imageSecondFooter">
|
||||
<img
|
||||
src="/src/assets/images/Rectangle 15.png"
|
||||
alt="Imagem embaçada de computadores"
|
||||
/>
|
||||
<div class="container-imageSecondFooter item2">
|
||||
<div class="content-imageSecondFooter">
|
||||
<img
|
||||
src="/src/assets/images/Rectangle 15.png"
|
||||
alt="Imagem embaçada de computadores"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="content-imageSecondFooter-mobile">
|
||||
<img
|
||||
src="/src/assets/images/Rectangle 15 (1).png"
|
||||
alt="Imagem embaçada de computadores"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
112
src/style.css
112
src/style.css
@ -142,15 +142,15 @@ section.one {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.item1 {
|
||||
.img1 {
|
||||
grid-area: foto1;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
.img2 {
|
||||
grid-area: foto2;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
.img3 {
|
||||
grid-area: foto3;
|
||||
}
|
||||
|
||||
@ -200,6 +200,22 @@ section.one {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container-sectionTwo {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas: "item1" "item2";
|
||||
}
|
||||
|
||||
.item1 {
|
||||
grid-area: item1;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
grid-area: item2;
|
||||
}
|
||||
|
||||
section.two {
|
||||
width: 40%;
|
||||
margin: 0 auto 3%;
|
||||
@ -267,3 +283,93 @@ section.two h2 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 414px){
|
||||
.imagePrincipal, .content-imageSecondFooter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 415px){
|
||||
.imagePrincipal-mobile, .content-imageSecondFooter-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.imagePrincipal, .content-imageSecondFooter {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px){
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.imagePrincipal-mobile {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imagePrincipal-mobile img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-imageSecondFooter-mobile {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.content-imageSecondFooter-mobile img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container-imageSecond svg {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
section.one, section.two {
|
||||
width: 100%;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
}
|
||||
|
||||
section.one p, section.two p {
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.content-imageSecond {
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: 1fr 2fr;
|
||||
grid-template-areas: "foto2 foto1" "foto3 foto3";
|
||||
}
|
||||
|
||||
.content-cardsSecond {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-sectionTwo {
|
||||
grid-template-areas: "item2" "item1";
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.cardOne {
|
||||
max-width: 380px;
|
||||
margin: 11px auto;
|
||||
}
|
||||
|
||||
.cardTwo {
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.container-imageSecondFooter {
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user