Skip to content

M
makura-2025
Commit 284fe9f4 by jhukal9@gmail.com
Options

updated the shareable moment gallery

parent c653f90b
Showing with 187 additions and 5 deletions
assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/js/script.js
......@@ -122,7 +122,7 @@
$slider.trigger("next.owl.carousel");
});
});
$(".gallery-slider").each(function () {
$(".gallery-slider,.gallery-grid").each(function () {
$(this).lightGallery({
selector: ".gallery-item a",
thumbnail: true,
......
blocks/portfolio-conclusion-section.php
......@@ -29,10 +29,78 @@
<section class="moment-worth-sharing makura-new mb-100">
<div class="container">
<div class="section-title">
<div class="section-title slide-up">
<h2>Captured Moments Worth Sharing</h2>
<p>Showcasing visually striking designs that tell stories worth sharing.</p>
</div>
<div class="gallery-grid slide-up">
<div class="gallery-item horizontal">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png" alt="" class="img-fluid">
</a>
</div>
<div class="gallery-item vertical">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-16.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-16.png" alt="" class="img-fluid">
<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.78477 6.63253C5.80499 6.63253 6.63205 5.80548 6.63205 4.78526C6.63205 3.76504 5.80499 2.93799 4.78477 2.93799C3.76455 2.93799 2.9375 3.76504 2.9375 4.78526C2.9375 5.80548 3.76455 6.63253 4.78477 6.63253Z"
fill="white" />
<path
d="M4.78477 13.0617C5.80499 13.0617 6.63205 12.2347 6.63205 11.2145C6.63205 10.1942 5.80499 9.36719 4.78477 9.36719C3.76455 9.36719 2.9375 10.1942 2.9375 11.2145C2.9375 12.2347 3.76455 13.0617 4.78477 13.0617Z"
fill="white" />
<path
d="M11.2145 6.63253C12.2347 6.63253 13.0617 5.80548 13.0617 4.78526C13.0617 3.76504 12.2347 2.93799 11.2145 2.93799C10.1942 2.93799 9.36719 3.76504 9.36719 4.78526C9.36719 5.80548 10.1942 6.63253 11.2145 6.63253Z"
fill="white" />
<path
d="M11.2145 13.0617C12.2347 13.0617 13.0617 12.2347 13.0617 11.2145C13.0617 10.1942 12.2347 9.36719 11.2145 9.36719C10.1942 9.36719 9.36719 10.1942 9.36719 11.2145C9.36719 12.2347 10.1942 13.0617 11.2145 13.0617Z"
fill="white" />
</svg> View All
</span>
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-17.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-17.png" alt="" class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png" alt="" class="img-fluid">
</a>
</div>
<div class="gallery-item horizontal">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png" alt="" class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png" alt="" class="img-fluid">
<span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.78477 6.63253C5.80499 6.63253 6.63205 5.80548 6.63205 4.78526C6.63205 3.76504 5.80499 2.93799 4.78477 2.93799C3.76455 2.93799 2.9375 3.76504 2.9375 4.78526C2.9375 5.80548 3.76455 6.63253 4.78477 6.63253Z"
fill="white" />
<path
d="M4.78477 13.0617C5.80499 13.0617 6.63205 12.2347 6.63205 11.2145C6.63205 10.1942 5.80499 9.36719 4.78477 9.36719C3.76455 9.36719 2.9375 10.1942 2.9375 11.2145C2.9375 12.2347 3.76455 13.0617 4.78477 13.0617Z"
fill="white" />
<path
d="M11.2145 6.63253C12.2347 6.63253 13.0617 5.80548 13.0617 4.78526C13.0617 3.76504 12.2347 2.93799 11.2145 2.93799C10.1942 2.93799 9.36719 3.76504 9.36719 4.78526C9.36719 5.80548 10.1942 6.63253 11.2145 6.63253Z"
fill="white" />
<path
d="M11.2145 13.0617C12.2347 13.0617 13.0617 12.2347 13.0617 11.2145C13.0617 10.1942 12.2347 9.36719 11.2145 9.36719C10.1942 9.36719 9.36719 10.1942 9.36719 11.2145C9.36719 12.2347 10.1942 13.0617 11.2145 13.0617Z"
fill="white" />
</svg> View All
</span>
</a>
</div>
</div>
</div>
</section>
......@@ -41,7 +109,7 @@
<?php if($quote_text=get_field('quote_text')):?>
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8 mx-auto">
<div class="position-relative py-100 quote-text">
<div class="position-relative pt-40 pb-100 quote-text">
<div class="icon-wrapper">
<svg width="136" height="114" viewBox="0 0 136 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.16"
......
dev/sass/pages/_portfolio.scss
......@@ -414,8 +414,8 @@
.icon-wrapper {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
top: 0;
transform: translate(-50%, 0);
}
p {
color: #121526;
......@@ -433,6 +433,11 @@
//FINAL-THOUGHT-SECTION
.FINAL-THOUGHT-SECTION {
.share-article{
p{
color: $background-dark;
}
}
.social-icon {
a {
&:hover {
......
dev/sass/pages/master-portfolio/_moment-gallery.scss 0 → 100644
.moment-worth-sharing {
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 224px);
grid-auto-rows: 244px;
gap: 12px;
.gallery-item {
border-radius: 8px;
overflow: hidden;
cursor: pointer;
position: relative;
z-index: 1;
a {
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&.horizontal {
grid-row: span 2;
}
&:nth-child(n + 4) {
display: none;
}
&:nth-child(3) {
a {
&::before {
display: block;
}
}
}
a {
&::before {
position: absolute;
inset: 0;
content: "";
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
span {
position: absolute;
font-size: 1.125rem;
font-weight: 600;
line-height: 20px;
// letter-spacing: -0.4px;
text-wrap: nowrap;
background: #ffffff3d;
border: 1px solid #ffffff3d;
backdrop-filter: blur(4px);
border-radius: 4px;
padding: 4px 16px 4px 8px;
color: $white;
right: 12px;
bottom: 12px;
display: flex;
gap: 4px;
}
}
}
}
}
@media (min-width: 992px) {
.moment-worth-sharing {
.gallery-grid {
grid-template-columns: repeat(5, 1fr);
.gallery-item {
// grid-column: span 1;
// grid-row: span 1;
&:nth-child(n + 4) {
display: block;
}
&.horizontal {
grid-column: span 2;
grid-row: span 1;
}
&.vertical {
grid-row: span 2;
}
&:not(:last-child) {
a {
&::before {
display: none;
}
span {
display: none;
}
}
}
&:last-child {
a {
&::before {
display: block;
}
}
}
}
}
}
}
dev/sass/style.scss
......@@ -61,3 +61,4 @@ $body-font: "Sora", sans-serif;
@import "pages/resources/resource-detail";
@import "pages/master-portfolio/sticky-tab";
@import "pages/master-portfolio/block-gallery";
@import "pages/master-portfolio/moment-gallery";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment