HenriqueSantosSantana/challenge-landing-page-henrique-santos-santana
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'chore: web page responsive' (#13) from hotfix/responsive into develop

Browse Source 
Reviewed-on: #13
This commit is contained in:
Henrique Santos Santana 2022-10-11 21:35:59 +00:00
commit 695edf96ae
2 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/main.css
View File

@ -64,7 +64,7 @@
} }
.information-texts { .information-texts {
width: 40%; width: 40.5%;
margin: 0 auto; margin: 0 auto;
text-align: initial; text-align: initial;
} }
@ -84,9 +84,13 @@
} }
.information-image { .information-image {
width: 16%; width: 17%;
height: auto; height: auto;
} }
.information-image img {
width: 100%;
}
} }
/*----------*\ /*----------*\
@ -118,7 +122,8 @@
} }
.card-image { .card-image {
width: 29%; width: 34.5%;
min-width: 103px;
height: auto; height: auto;
} }
@ -139,7 +144,7 @@
} }
.services .card { .services .card {
min-width: 350px; width: 34%;
} }
} }
@ -160,27 +165,32 @@
transform: translateY(2rem); transform: translateY(2rem);
} }
.gallery-image-1 { .gallery-image,
.gallery-image img {
width: 100%; width: 100%;
} }
.gallery-image-2 {
width: 100%;
}
.gallery-image-3 { .gallery-image-3 {
width: 100%;
grid-column: 1/2 span; grid-column: 1/2 span;
} }
@media screen and (min-width:1025px) { @media screen and (min-width:1025px) {
.gallery {
--hs-grid-space: 40px;
padding: 0 72px;
}
.gallery-container { .gallery-container {
width: 88%;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
transform: translateY(4rem); transform: translateY(4rem);
} }
.gallery-image {
min-height: 530px;
}
.gallery-image-3 { .gallery-image-3 {
grid-column: auto; grid-column: auto;
} }
@ -209,15 +219,14 @@
} }
@media screen and (min-width:1025px) { @media screen and (min-width:1025px) {
.features-container { .features {
flex-direction: row; padding: 0 72px;
width: 92%;
padding-bottom: 108px;
margin: 0 auto;
} }
.features .card {
width: 22.5%; .features-container {
flex-direction: row;
padding-bottom: 108px;
} }
.card-image { .card-image {
@ -265,7 +274,7 @@
} }
.blog-article { .blog-article {
width: 28%; width: 30.5%;
margin: 0 auto; margin: 0 auto;
margin-bottom: 50px; margin-bottom: 50px;
} }

25
index.html
View File

@ -65,11 +65,10 @@
Nulla suscipit magna dui. Nulla suscipit magna dui.
</p> </p>
</div> </div>
<figure> <figure class="information-image">
<img <img
src="./assets/images/information-image.png" src="./assets/images/information-image.png"
alt="três computadores juntos conectados por setas" alt="três computadores juntos conectados por setas"
class="information-image"
/> />
</figure> </figure>
</section> </section>
@ -105,11 +104,19 @@
<!--=============== Gallery ===============--> <!--=============== Gallery ===============-->
<div class="gallery bg-clr-gray"> <div class="gallery bg-clr-gray">
<figure class="gallery-container grid-box"> <div class="gallery-container grid-box">
<img class="gallery-image gallery-image-1" src="./assets/images/gallery-1.jpg" alt="" /> <figure class="gallery-image gallery-image-1">
<img class="gallery-image gallery-image-2" src="./assets/images/gallery-2.jpg" alt="" /> <img src="./assets/images/gallery-1.jpg" alt="" />
<img class="gallery-image gallery-image-3" src="./assets/images/gallery-3.jpg" alt="" /> </figure>
</figure>
<figure class="gallery-image gallery-image-2">
<img src="./assets/images/gallery-2.jpg" alt="" />
</figure>
<figure class="gallery-image gallery-image-3">
<img src="./assets/images/gallery-3.jpg" alt="" />
</figure>
</div>
</div> </div>
<!--=============== Features ===============--> <!--=============== Features ===============-->
@ -210,7 +217,9 @@
</a> </a>
</li> </li>
</ul> </ul>
<p class="text-center text-upper clr-gray-100">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p> <p class="text-center text-upper clr-gray-100">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer> </footer>
</body> </body>
</html> </html>