forked from M3-Academy/challenge-landing-page
Merge pull request 'feat: created gallery section and responsive' (#7) from feature/gallery into develop
Reviewed-on: #7
This commit is contained in:
commit
87ef5ab086
@ -139,6 +139,49 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*---------*\
|
||||||
|
= GALLERY =
|
||||||
|
\*---------*/
|
||||||
|
.gallery {
|
||||||
|
--hs-grid-space: 24px 14px;
|
||||||
|
|
||||||
|
padding: 0 24px;
|
||||||
|
margin-bottom: 112px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-container {
|
||||||
|
position: relative;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
justify-content: center;
|
||||||
|
transform: translateY(2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image-1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image-2 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image-3 {
|
||||||
|
width: 100%;
|
||||||
|
grid-column: 1/2 span;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width:1025px) {
|
||||||
|
.gallery-container {
|
||||||
|
width: 88%;
|
||||||
|
margin: 0 auto;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
transform: translateY(4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image-3 {
|
||||||
|
grid-column: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*CUBE CSS styles*/
|
/*CUBE CSS styles*/
|
||||||
|
|
||||||
/*-------------*\
|
/*-------------*\
|
||||||
@ -148,6 +191,11 @@
|
|||||||
margin-top: var(--hs-flow-space);
|
margin-top: var(--hs-flow-space);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-box {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--hs-grid-space);
|
||||||
|
}
|
||||||
|
|
||||||
.flex-box {
|
.flex-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--hs-flex-space);
|
gap: var(--hs-flex-space);
|
||||||
@ -177,6 +225,10 @@
|
|||||||
background-color: var(--bg-clr-black);
|
background-color: var(--bg-clr-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-clr-gray {
|
||||||
|
background-color: var(--bg-clr-gray);
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1024px) {
|
@media only screen and (max-width: 1024px) {
|
||||||
.image-mobile {
|
.image-mobile {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -102,6 +102,13 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!--=============== Gallery ===============-->
|
<!--=============== Gallery ===============-->
|
||||||
|
<div class="gallery bg-clr-gray">
|
||||||
|
<figure class="gallery-container grid-box">
|
||||||
|
<img class="gallery-image gallery-image-1" src="./assets/images/gallery-1.jpg" alt="" />
|
||||||
|
<img class="gallery-image gallery-image-2" src="./assets/images/gallery-2.jpg" alt="" />
|
||||||
|
<img class="gallery-image gallery-image-3" src="./assets/images/gallery-3.jpg" alt="" />
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--=============== Features ===============-->
|
<!--=============== Features ===============-->
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user