Skip to content

M
makura-2025
Commit 803c5899 by jhukal9@gmail.com
Options

updated the master portfolio layout

parent a7e60ef5
Showing with 926 additions and 493 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
......@@ -22,6 +22,24 @@
});
/** INTERSECTION OBSERVER FOR SLIDE UP ANIMATION ENDS HERE*/
/** GLOBAL SCROLL INTO VIEW CONTROLLER START HERE*/
$(function () {
$(".makura-new a[data-target]").on("click", function (e) {
e.preventDefault();
$(this).parent().addClass("active").siblings().removeClass("active");
const currentActive = $(this).data("target");
const targetElement = document.getElementById(currentActive);
if (targetElement) {
targetElement.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
});
});
/** GLOBAL SCROLL INTO VIEW CONTROLLER ENDS HERE*/
/** INTERSECTION OBSERVER AND SCROLL INTO VIEW FUNCTIONALITY FOR RESOURCE LISTING STARTS HERE */
$(function () {
const resourceListObserver = new IntersectionObserver(
......@@ -44,20 +62,6 @@
$(".resource-block").each(function () {
resourceListObserver.observe(this);
});
$(".toc li a").on("click", function (e) {
e.preventDefault();
$(this).parent().addClass("active").siblings().removeClass("active");
const currentActive = $(this).data("target");
const targetElement = document.getElementById(currentActive);
if (targetElement) {
targetElement.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
});
});
/** INTERSECTION OBSERVER AND SCROLL INTO VIEW FUNCTIONALITY FOR RESOURCE LISTING ENDS HERE */
......@@ -73,4 +77,58 @@
});
});
/** MAKURA LATEST FAQ EXPAND COLLAPSE ENDS HERE */
/** STICKY TAB AT MASTER PORTFOLIO START HERE */
$(function () {
$(".sticky-tab");
});
/** STICKY TAB AT MASTER PORTFOLIO ENDS HERE */
/** GALLERY LIGHT BOX AND DYNAMIC SLIDER START HERE */
$(function () {
$(".gallery-slider").each(function () {
var sliderId = $(this).attr("id");
var $slider = $("#" + sliderId);
$slider.owlCarousel({
loop: true,
margin: 8,
nav: true,
dots: false,
slideBy: 3,
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: { items: 1.2, slideBy: 1 },
575: { items: 2.1, slideBy: 2 },
767: { items: 3.2 },
991: { items: 4.2 },
1199: { items: 5.2 },
1399: { items: 6.2 },
},
});
// Find closest .prev and .next buttons and attach click events
$(this)
.closest(".block-gallery")
.find(".prev")
.on("click", function () {
$slider.trigger("prev.owl.carousel");
});
$(this)
.closest(".block-gallery")
.find(".next")
.on("click", function () {
$slider.trigger("next.owl.carousel");
});
});
$(".gallery-item").lightGallery({
selector: "img",
thumbnail: true,
download: false,
zoom: true,
share: false,
});
});
/** GALLERY LIGHT BOX AND DYNAMIC SLIDER ENDS HERE */
})(jQuery);
blocks/custom-page-banner.php
<?php if($image = get_field('banner')):?>
<section class="container-fluid PAGE-BANNER">
<div class="row">
<?php echo wp_get_attachment_image($image,'full');?>
<section class="PAGE-BANNER makura-new top-primary">
<div class="container">
<div class="single-image">
<?php echo wp_get_attachment_image($image,'full');?>
</div>
</div>
</section>
<?php endif;?>
\ No newline at end of file
blocks/portfolio-banner.php
<section class="background-dark pb-60 PD-TOP-SECTION">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-5 pb-60 title-wrapper">
<?php the_field('description');?>
</div>
<div class="col-lg-4">
<div class="client-logo-wrapper">
<?php if($image = get_field('client_logo')):echo wp_get_attachment_image($image,'full'); endif;?>
</div>
<?php if($scope = get_field('scope_of_work')):?>
<div class="scope-work-wrapper">
<ul class="list-unstyled">
<?php echo $scope;?>
</ul>
</div>
<?php endif;?>
</div>
<section class="background-dark pb-60 PD-TOP-SECTION makura-new">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 title-wrapper">
<div class="portfolio-detail-content-box pb-40">
<?php the_field('description');?>
</div>
<?php if ($link = get_field('link')) : $link_target = $link['target'] ? $link['target'] : '_self';?>
<div class="row justify-content-between">
<div class="col-lg-4 col-md-4 col-12 d-flex align-items-center go-to-section">
<div class="border-div d-flex align-items-center">
<a href="<?php echo $link['url']; ?>" target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.25349 16.4601C8.49594 16.2183 8.82439 16.0825 9.16682 16.0825C9.50925 16.0825 9.8377 16.2183 10.0802 16.4601C10.1999 16.5797 10.2949 16.7218 10.3598 16.8782C10.4246 17.0345 10.458 17.2022 10.458 17.3714C10.458 17.5407 10.4246 17.7083 10.3598 17.8647C10.2949 18.0211 10.1999 18.1632 10.0802 18.2828L7.34015 21.0188C7.1004 21.258 6.91019 21.5423 6.78041 21.8551C6.65063 22.168 6.58383 22.5034 6.58383 22.8421C6.58383 23.1808 6.65063 23.5162 6.78041 23.8291C6.91019 24.142 7.1004 24.4262 7.34015 24.6654C7.82505 25.1491 8.48196 25.4207 9.16682 25.4207C9.85168 25.4207 10.5086 25.1491 10.9935 24.6654L17.3855 18.2828C17.5053 18.1632 17.6003 18.0211 17.6651 17.8647C17.7299 17.7083 17.7633 17.5407 17.7633 17.3714C17.7633 17.2022 17.7299 17.0345 17.6651 16.8782C17.6003 16.7218 17.5053 16.5797 17.3855 16.4601C17.2655 16.3405 17.1703 16.1983 17.1054 16.0418C17.0404 15.8853 17.007 15.7176 17.007 15.5481C17.007 15.3787 17.0404 15.2109 17.1054 15.0544C17.1703 14.8979 17.2655 14.7558 17.3855 14.6361C17.6279 14.3943 17.9564 14.2585 18.2988 14.2585C18.6412 14.2585 18.9697 14.3943 19.2122 14.6361C19.5719 14.995 19.8573 15.4214 20.052 15.8907C20.2467 16.3601 20.347 16.8633 20.347 17.3714C20.347 17.8796 20.2467 18.3828 20.052 18.8521C19.8573 19.3215 19.5719 19.7479 19.2122 20.1068L12.8188 26.4894C11.8492 27.457 10.5353 28.0005 9.16549 28.0005C7.79566 28.0005 6.48178 27.457 5.51215 26.4894C5.03265 26.0109 4.65223 25.4425 4.39267 24.8167C4.13311 24.191 3.99951 23.5202 3.99951 22.8428C3.99951 22.1653 4.13311 21.4945 4.39267 20.8688C4.65223 20.2431 5.03265 19.6747 5.51215 19.1961L8.25349 16.4588V16.4601ZM23.7468 15.5401C23.5044 15.7819 23.1759 15.9177 22.8335 15.9177C22.4911 15.9177 22.1626 15.7819 21.9202 15.5401C21.8004 15.4205 21.7054 15.2784 21.6405 15.1221C21.5757 14.9657 21.5423 14.7981 21.5423 14.6288C21.5423 14.4595 21.5757 14.2919 21.6405 14.1355C21.7054 13.9791 21.8004 13.8371 21.9202 13.7174L24.6602 10.9814C24.8999 10.7422 25.0901 10.458 25.2199 10.1451C25.3497 9.83223 25.4165 9.49683 25.4165 9.15811C25.4165 8.81939 25.3497 8.484 25.2199 8.17113C25.0901 7.85826 24.8999 7.57405 24.6602 7.33478C24.1753 6.85114 23.5183 6.57954 22.8335 6.57954C22.1486 6.57954 21.4917 6.85114 21.0068 7.33478L14.6162 13.7174C14.4964 13.8371 14.4014 13.9791 14.3365 14.1355C14.2717 14.2919 14.2383 14.4595 14.2383 14.6288C14.2383 14.7981 14.2717 14.9657 14.3365 15.1221C14.4014 15.2784 14.4964 15.4205 14.6162 15.5401C14.7361 15.6598 14.8313 15.8019 14.8963 15.9584C14.9612 16.1149 14.9946 16.2827 14.9946 16.4521C14.9946 16.6216 14.9612 16.7893 14.8963 16.9458C14.8313 17.1023 14.7361 17.2445 14.6162 17.3641C14.3737 17.6059 14.0452 17.7417 13.7028 17.7417C13.3604 17.7417 13.0319 17.6059 12.7895 17.3641C12.4298 17.0052 12.1444 16.5788 11.9496 16.1095C11.7549 15.6401 11.6547 15.1369 11.6547 14.6288C11.6547 14.1206 11.7549 13.6175 11.9496 13.1481C12.1444 12.6787 12.4298 12.2524 12.7895 11.8934L19.1828 5.51078C20.1524 4.54318 21.4663 3.99976 22.8362 3.99976C24.206 3.99976 25.5199 4.54318 26.4895 5.51078C26.969 5.98932 27.3494 6.55773 27.609 7.18347C27.8685 7.80922 28.0021 8.48001 28.0021 9.15745C28.0021 9.83489 27.8685 10.5057 27.609 11.1314C27.3494 11.7572 26.969 12.3256 26.4895 12.8041L23.7468 15.5414V15.5401Z"
fill="#005AFF" />
</svg>
<h2 class="m-0"><?php echo $link['title']; ?></h2>
</a>
</div>
</div>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-none d-lg-inline-block">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif;?>
</div>
<div class="col-lg-4">
<div class="client-logo-wrapper d-none d-lg-block">
<?php if($image = get_field('client_logo')):echo wp_get_attachment_image($image,'full'); endif;?>
</div>
<?php if($scope = get_field('scope_of_work')):?>
<div class="scope-work-wrapper">
<span class="sm-text">Scope of Work</span>
<ul class="list-unstyled">
<?php echo $scope;?>
</ul>
</div>
<?php endif;?>
</div>
</div>
<?php if ($link = get_field('link')) : $link_target = $link['target'] ? $link['target'] : '_self';?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif;?>
</div>
</section>
\ No newline at end of file
blocks/portfolio-conclusion-section.php
<section class="position-relative PROJECT-CONCLUSION">
<div class="container">
<div class="row">
<div class="col-lg-5">
<?php if($image = get_field('image')): echo wp_get_attachment_image($image,'full'); endif;?>
</div>
<div class="col-lg-7">
<?php echo get_field('description');?>
<?php if(have_rows('stats')): ?>
<div class="percentage-box">
<div class="row">
<?php while(have_rows('stats')): the_row();?>
<div class="col-lg-6">
<div class="inner-wrapper">
<span><?php the_sub_field('number');?></span>
<p><?php the_sub_field('title');?></p>
</div>
</div>
<?php endwhile;?>
</div>
<section class="position-relative PROJECT-CONCLUSION pt-100 pb-120 mb-100 bg-secondary" id="project-conclusion">
<div class="container">
<div class="row">
<div class="col-lg-5 col-xl-4 order-lg-2">
<?php if($image = get_field('image')): echo wp_get_attachment_image($image,'full'); endif;?>
</div>
<div class="col-lg-7 col-xl-8 order-lg-1">
<div class="pc-content-box">
<?php echo get_field('description');?>
<?php if(have_rows('stats')): ?>
<div class="percentage-box">
<div class="row">
<?php while(have_rows('stats')): the_row();?>
<div class="col-sm-6 col-lg-5 col-xl-4">
<div class="inner-wrapper">
<span><?php the_sub_field('number');?></span>
<p><?php the_sub_field('title');?></p>
</div>
<?php endif;?>
</div>
<?php endwhile;?>
</div>
</div>
<?php endif;?>
</div>
<?php if($quote_text=get_field('quote_text')):?>
<div class="row ax-auto">
<div class="col-lg-10 mx-auto">
<div class="position-relative py-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"
d="M136 0V26.0755H127.977C121.514 26.0755 116.388 27.0784 112.599 29.0842C108.81 31.09 106.024 34.5444 104.241 39.4475C102.458 44.1277 101.567 50.4795 101.567 58.5027V83.241L91.8723 64.5201C93.4323 63.4058 95.661 62.5143 98.5583 61.8457C101.456 60.9542 104.464 60.5085 107.584 60.5085C114.939 60.5085 121.068 62.8486 125.971 67.5288C130.874 71.9862 133.326 78.2264 133.326 86.2497C133.326 93.8272 130.985 100.29 126.305 105.639C121.625 110.765 114.939 113.328 106.247 113.328C100.676 113.328 95.4381 112.102 90.5351 109.651C85.8548 106.976 82.0661 102.519 79.1688 96.2787C76.2715 89.8155 74.8229 81.0123 74.8229 69.8689V64.1858C74.8229 48.3622 76.9402 35.7702 81.1746 26.4098C85.632 17.0494 91.9837 10.3633 100.23 6.35172C108.476 2.11724 118.505 0 130.317 0H136ZM62.1195 0V26.0755H54.0962C47.6331 26.0755 42.5071 27.0784 38.7184 29.0842C34.9297 31.09 32.1438 34.5444 30.3609 39.4475C28.5779 44.1277 27.6865 50.4795 27.6865 58.5027V83.241L17.9917 64.5201C19.5518 63.4058 21.7805 62.5143 24.6778 61.8457C27.575 60.9542 30.5837 60.5085 33.7039 60.5085C41.0585 60.5085 47.1874 62.8486 52.0904 67.5288C56.9935 71.9862 59.4451 78.2264 59.4451 86.2497C59.4451 93.8272 57.105 100.29 52.4247 105.639C47.7445 110.765 41.0585 113.328 32.3667 113.328C26.795 113.328 21.5576 112.102 16.6545 109.651C11.9743 106.976 8.18557 102.519 5.2883 96.2787C2.39102 89.8155 0.942383 81.0123 0.942383 69.8689V64.1858C0.942383 48.3622 3.05962 35.7702 7.2941 26.4098C11.7514 17.0494 18.1032 10.3633 26.3493 6.35172C34.5954 2.11724 44.6244 0 56.4364 0H62.1195Z"
fill="#005AFF" />
</svg>
</div>
<?php echo $quote_text;?>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="moment-worth-sharing makura-new mb-100">
<div class="container">
<div class="section-title">
<h2>Captured Moments Worth Sharing</h2>
<p>Showcasing visually striking designs that tell stories worth sharing.</p>
</div>
</div>
</section>
<section class="quote PROJECT-CONCLUSION">
<div class="container">
<?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="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"
d="M136 0V26.0755H127.977C121.514 26.0755 116.388 27.0784 112.599 29.0842C108.81 31.09 106.024 34.5444 104.241 39.4475C102.458 44.1277 101.567 50.4795 101.567 58.5027V83.241L91.8723 64.5201C93.4323 63.4058 95.661 62.5143 98.5583 61.8457C101.456 60.9542 104.464 60.5085 107.584 60.5085C114.939 60.5085 121.068 62.8486 125.971 67.5288C130.874 71.9862 133.326 78.2264 133.326 86.2497C133.326 93.8272 130.985 100.29 126.305 105.639C121.625 110.765 114.939 113.328 106.247 113.328C100.676 113.328 95.4381 112.102 90.5351 109.651C85.8548 106.976 82.0661 102.519 79.1688 96.2787C76.2715 89.8155 74.8229 81.0123 74.8229 69.8689V64.1858C74.8229 48.3622 76.9402 35.7702 81.1746 26.4098C85.632 17.0494 91.9837 10.3633 100.23 6.35172C108.476 2.11724 118.505 0 130.317 0H136ZM62.1195 0V26.0755H54.0962C47.6331 26.0755 42.5071 27.0784 38.7184 29.0842C34.9297 31.09 32.1438 34.5444 30.3609 39.4475C28.5779 44.1277 27.6865 50.4795 27.6865 58.5027V83.241L17.9917 64.5201C19.5518 63.4058 21.7805 62.5143 24.6778 61.8457C27.575 60.9542 30.5837 60.5085 33.7039 60.5085C41.0585 60.5085 47.1874 62.8486 52.0904 67.5288C56.9935 71.9862 59.4451 78.2264 59.4451 86.2497C59.4451 93.8272 57.105 100.29 52.4247 105.639C47.7445 110.765 41.0585 113.328 32.3667 113.328C26.795 113.328 21.5576 112.102 16.6545 109.651C11.9743 106.976 8.18557 102.519 5.2883 96.2787C2.39102 89.8155 0.942383 81.0123 0.942383 69.8689V64.1858C0.942383 48.3622 3.05962 35.7702 7.2941 26.4098C11.7514 17.0494 18.1032 10.3633 26.3493 6.35172C34.5954 2.11724 44.6244 0 56.4364 0H62.1195Z"
fill="#005AFF" />
</svg>
</div>
<?php echo $quote_text;?>
</div>
<?php endif;?>
</div>
</div>
<?php endif;?>
</div>
</section>
\ No newline at end of file
blocks/portfolio-text-image-section.php
<?php
if(have_rows('content')):
while(have_rows('content')):
?>
<!-- <section
class="<?php echo (get_sub_field('background_colour')=='dark')?'background-dark':'bg-primary';?> container-fluid py-80 ONLY-TEXT-SECTION">
<div class="container">
<div class="row">
<?php if($image_position=='left'):?>
<div class="col-lg-6 col-12">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<?php endif;?>
<div class="col-lg-6 col-12">
<?php echo get_sub_field('description');?>
</div>
<?php if($image_position!='left'):?>
<div class="col-lg-6 col-12">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<?php endif;?>
</div>
</div>
</section> -->
<section class="portfolio-block " id="ui-ux-design">
<?php $index=0;?>
<?php while(have_rows('content')):
the_row();
$image_position = get_sub_field('image_position');
$image = get_sub_field('image');
$image_position = get_sub_field('image_position');
$image = get_sub_field('image');
if($index===0):
?>
<div class="ONLY-TEXT-SECTION py-80
<?php echo (get_sub_field('background_colour')=='dark')?'background-dark':'bg-primary';?>">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-5 col-xl-4 order-lg-2">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<div class="col-lg-7 order-lg-1">
<?php echo get_sub_field('description');?>
</div>
</div>
</div>
</div>
<?php elseif($index===1):?>
<div class="ONLY-TEXT-SECTION top-primary mb-60">
<div class="container">
<div class="bg-white content-box">
<div class="section-title">
<h3>Challenges of Graphics Design</h3>
<p>CAN faced challenges in capturing audience attention due to outdated and uninspired designs. Their social
media graphics lacked creativity, and their website failed to engage modern users, especially the younger
demographic.</p>
</div>
<div class="row justify-content-between">
<div class="col-lg-6 order-lg-2">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<div class="col-lg-6 order-lg-1">
<?php echo get_sub_field('description');?>
</div>
</div>
</div>
</div>
</div>
<?php else:?>
<div class="ONLY-TEXT-SECTION mb-80">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-5 ">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<div class="col-lg-7">
<?php echo get_sub_field('description');?>
</div>
</div>
</div>
</div>
<?php
endif;
$index+=1;
endwhile;
?>
<section class="<?php echo (get_sub_field('background_colour')=='dark')?'background-dark':'bg-primary';?> container-fluid py-80 ONLY-TEXT-SECTION">
<div class="block-gallery makura-new mb-120">
<div class="container">
<div class="row">
<?php if($image_position=='left'):?>
<div class="col-lg-6 col-12">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<?php endif;?>
<div class="col-lg-6 col-12">
<?php echo get_sub_field('description');?>
</div>
<?php if($image_position!='left'):?>
<div class="col-lg-6 col-12">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<?php endif;?>
<div class="section-title slide-up">
<div class="title">
<h3>UI/UX Design Galleries</h3>
<p>Explore a collection of stunning and inspiring graphic design showcases.</p>
</div>
<div class="slider-controller d-none d-md-flex justify-content-end">
<button type="button" class="prev">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.6693 7.83341L3.5276 7.83341L8.18594 12.4917L7.0026 13.6667L0.335937 7.00008L7.0026 0.333413L8.1776 1.50841L3.5276 6.16675L13.6693 6.16675L13.6693 7.83341Z"
fill="#58595A" />
</svg>
</button>
<button type="button" class="next">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.33073 7.83341L10.4724 7.83341L5.81406 12.4917L6.9974 13.6667L13.6641 7.00008L6.9974 0.333413L5.8224 1.50841L10.4724 6.16675L0.33073 6.16675L0.33073 7.83341Z"
fill="#58595A" />
</svg>
</button>
</div>
</div>
<div class="gallery-slider-wrapper slide-up">
<div class="gallery-slider owl-carousel owl-theme" id="ui-ux-gallery">
<div class="gallery-item">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
</div>
<div class="gallery-item">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png" alt="" class="img-fluid">
</div>
<div class="gallery-item">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-12.png" alt="" class="img-fluid">
</div>
<div class="gallery-item">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-13.png" alt="" class="img-fluid">
</div>
<div class="gallery-item">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png" alt="" class="img-fluid">
</div>
<div class="gallery-item">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png" alt="" class="img-fluid">
</div>
<div class="gallery-item">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>
<?php endwhile; endif;?>
\ No newline at end of file
<?php endif;?>
\ No newline at end of file
blocks/technology-used-section.php
<section class="py-80 TECHNOLOGY-USED-SECTION">
<div class="container">
<div class="row">
<div class="col-6 mx-auto text-center">
<h4><?php the_field('title');?></h4>
<?php if($images = get_field('images')):?>
<div class="technology-carousel-wrapper owl-carousel owl-theme">
<?php foreach( $images as $image_id ): ?>
<div class="item">
<?php echo wp_get_attachment_image( $image_id, 'full' ); ?>
</div>
<?php endforeach;?>
</div>
<?php endif;?>
</div>
<section class="pb-80 TECHNOLOGY-USED-SECTION">
<div class="container">
<div class="row">
<div class="col-6 mx-auto text-center">
<h4><?php the_field('title');?></h4>
<?php if($images = get_field('images')):?>
<div class="technology-carousel-wrapper owl-carousel owl-theme">
<?php foreach( $images as $image_id ): ?>
<div class="item">
<?php echo wp_get_attachment_image( $image_id, 'full' ); ?>
</div>
<?php endforeach;?>
</div>
<?php endif;?>
</div>
</div>
</div>
</section>
<section class="sticky-tab makura-new">
<div class="container">
<div class="st-content d-flex justify-content-between align-items-center">
<ul class="d-flex">
<li class="active">
<a href="#" data-target="graphics-design">Graphics Design</a>
</li>
<li>
<a href="#" data-target="ui-ux-design">UI/UX Design</a>
</li>
<li>
<a href="#" data-target="web-development">Web Development</a>
</li>
<li>
<a href="#" data-target="seo">SEO</a>
</li>
</ul>
<a href="#project-conclusion" class="mc-btn-underlined font-18 font-600 d-none d-md-inline-block">Scroll to
Conclusion <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.25 -9.26804e-07L5.25 9.1275L1.0575 4.935L1.12062e-06 6L6 12L12 6L10.9425 4.9425L6.75 9.1275L6.75 -6.46648e-07L5.25 -9.26804e-07Z"
fill="#121526" />
</svg>
</a>
</div>
</div>
</section>
\ No newline at end of file
dev/sass/base/_global.scss
......@@ -4,6 +4,9 @@ button {
}
.section-title {
margin-bottom: 3.75rem;
p {
margin-bottom: 0;
}
}
.input-field {
......
dev/sass/base/_makura-new.scss
......@@ -24,6 +24,7 @@ footer {
}
a {
color: initial;
&:has(img) {
height: 100%;
}
......@@ -164,12 +165,36 @@ footer {
}
}
}
.owl-nav {
display: none;
}
}
.top-primary {
position: relative;
z-index: 1;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
background-color: $primary;
z-index: -1;
}
.single-image {
border: 4px solid #fff;
}
}
@media (min-width: 768px) {
.makura-new {
.section-title {
margin-bottom: 40px;
margin-bottom: 32px;
}
}
}
......
dev/sass/base/_new-breadcrumb.scss
......@@ -22,31 +22,23 @@
position: absolute;
top: 0;
right: 0;
img {
max-width: 290px;
height: unset;
max-width: 72%;
}
}
}
}
}
@media (min-width: 1200px) {
.inner-banner-absolute-image {
.image-wrapper {
.image {
img {
max-width: 80%;
border: 4px solid #fff;
}
}
}
}
}
@media (min-width: 1440px) {
.inner-banner-absolute-image {
.image-wrapper {
.image {
img {
max-width: 95%;
max-width: 371px;
}
}
}
......
dev/sass/pages/_portfolio.scss
// PD-TOP-SECTION
.PD-TOP-SECTION {
.title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white;
font-family: $body-font;
font-size: 2.75rem;
font-weight: 600;
margin-bottom: 2rem;
}
p {
color: #f9f8f4;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
margin: 0;
}
}
.go-to-section {
@media (max-width: 767.98px) {
margin-bottom: 1.25rem;
}
a {
display: flex;
align-items: center;
svg {
path {
fill: $white !important;
}
}
}
.border-div {
padding-bottom: 0.5rem;
border-bottom: 2px solid $white;
svg {
margin-right: 0.75rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white !important;
font-family: $body-font;
font-size: 1.25rem;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.5px;
margin-right: 1.375rem !important;
@media (max-width: 767.98px) {
font-size: 1rem !important;
}
}
}
}
.client-logo-wrapper {
margin-bottom: 1.5rem;
img {
width: 10.8125rem;
height: 9rem;
object-fit: contain;
}
}
.scope-work-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526 !important;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.6px;
margin-bottom: 0.75rem;
}
ul {
list-style-type: none;
li {
margin-bottom: 0.75rem;
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.6px;
// text-decoration-line: underline;
transition: 0.3s ease-in-out;
&:last-child {
margin-bottom: 0;
}
a {
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.6px;
text-decoration-line: underline;
transition: 0.3s ease-in-out;
&:hover {
color: #121526 !important;
}
}
}
}
}
&.background-dark {
background: #005aff !important;
}
.title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white;
font-family: $body-font;
font-size: 2.75rem;
font-weight: 600;
margin-bottom: 2rem;
max-width: 592px;
}
p {
color: #f9f8f4;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
margin: 0;
}
}
.client-logo-wrapper {
margin-bottom: 48px;
}
.client-logo-wrapper {
margin-bottom: 20px;
}
.scope-work-wrapper {
span.sm-text {
display: block;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: -0.6px;
opacity: 0.5;
}
}
.open-in-new-tab {
position: relative;
display: inline-block;
font-size: 20px;
line-height: 32px;
font-weight: 600;
letter-spacing: -0.5px;
svg {
max-width: 16px;
margin-left: 12px;
path {
fill: $white !important;
}
}
&::after {
content: "";
display: block;
height: 2px;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
&:hover {
color: $background-dark !important;
svg {
transform: translate(3px, -3px);
path {
fill: $background-dark !important;
}
}
&::after {
background-color: $background-dark;
}
}
}
.client-logo-wrapper {
margin-bottom: 1.5rem;
img {
width: 10.8125rem;
height: 9rem;
object-fit: contain;
}
}
.scope-work-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526 !important;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.6px;
margin-bottom: 0.75rem;
}
ul {
list-style-type: none;
li {
margin-bottom: 0.75rem;
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.6px;
// text-decoration-line: underline;
transition: 0.3s ease-in-out;
&:last-child {
margin-bottom: 0;
}
a {
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.6px;
text-decoration-line: underline;
transition: 0.3s ease-in-out;
&:hover {
color: #121526 !important;
}
}
}
}
}
&.background-dark {
background: #005aff !important;
}
}
// AFTER-BANNER-SECTION
.AFTER-BANNER-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
leading-trim: both;
text-edge: cap;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin: 0;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
leading-trim: both;
text-edge: cap;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin: 0;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
margin: 0;
}
}
//AFTER-BANNER-SECTION
.PAGE-BANNER {
img {
padding: 0;
}
img {
padding: 0;
}
}
//AFTER-BANNER-SECTION
//ONLY-TEXT-SECTION
.ONLY-TEXT-SECTION {
img {
width: auto;
height: auto;
object-fit: contain;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin-bottom: 1.5rem;
}
p {
color: #f9f8f4;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
margin-bottom: 1.5rem;
}
ol,
ul {
margin-left: 1rem;
}
li {
color: $white;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
margin-bottom: 0.75rem;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
h2,
h3,
h4 {
margin-bottom: 0 !important;
+ p {
margin-top: 16px;
}
}
}
img {
width: auto;
height: auto;
object-fit: contain;
}
&.bg-primary,
&.background-dark {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white;
}
p,
li {
color: #f9f8f4;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
// color: $white;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin-bottom: 1.5rem;
}
p {
// color: #f9f8f4;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
margin-bottom: 1.5rem;
}
ol,
ul {
margin-left: 1rem;
}
li {
// color: $white;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
&:not(:last-child) {
margin-bottom: 0.75rem;
}
}
}
.portfolio-block {
.ONLY-TEXT-SECTION {
.content-box {
padding: 48px;
border: 1px solid #0000001a;
}
}
}
// MOBILE-SECTION
.MOBILE-SECTION {
@media (max-width: 767.98px) {
display: none;
}
.mobile-wrapper {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: visible;
width: 100%;
height: 80rem;
max-width: 1670px;
margin-right: auto;
margin-left: auto;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
transform-style: inherit;
.mobile {
position: absolute;
display: inline-block;
overflow: visible;
width: 25%;
height: auto;
margin-left: 120px;
float: left;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
&.mob1 {
left: -2%;
top: -50px;
}
&.mob2 {
left: 32%;
top: -4.625rem;
right: 0;
bottom: 0;
}
&.mob3 {
top: -46px;
right: 3%;
}
&.mob4 {
left: 3%;
top: 600px;
}
&.mob5 {
top: 600px;
right: 6%;
bottom: 0;
}
}
}
@media (max-width: 767.98px) {
display: none;
}
.mobile-wrapper {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: visible;
width: 100%;
height: 80rem;
max-width: 1670px;
margin-right: auto;
margin-left: auto;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
transform-style: inherit;
.mobile {
position: absolute;
display: inline-block;
overflow: visible;
width: 25%;
height: auto;
margin-left: 120px;
float: left;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
&.mob1 {
left: -2%;
top: -50px;
}
&.mob2 {
left: 32%;
top: -4.625rem;
right: 0;
bottom: 0;
}
&.mob3 {
top: -46px;
right: 3%;
}
&.mob4 {
left: 3%;
top: 600px;
}
&.mob5 {
top: 600px;
right: 6%;
bottom: 0;
}
}
}
}
//MOBILE-SECTION
//TECHNOLOGY-USED-SECTION
.TECHNOLOGY-USED-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 1.5rem;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.6px;
margin-bottom: 2.5rem;
}
.owl-stage {
display: flex;
align-items: center;
}
img {
height: 100%;
width: 100%;
object-fit: contain;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 1.5rem;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.6px;
margin-bottom: 2.5rem;
}
.owl-stage {
display: flex;
align-items: center;
}
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}
//TECHNOLOGY-USED-SECTION
// PROJECT-CONCLUSION
.PROJECT-CONCLUSION {
img {
width: 37.5rem;
height: 29.375rem;
object-fit: contain;
// position: absolute;
left: 0;
@media (max-width: 1160px) {
position: unset;
left: unset;
width: 100%;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin-bottom: 1.5rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
margin-bottom: 3rem;
}
.percentage-box {
.inner-wrapper {
span {
color: #005aff;
font-family: $body-font;
font-size: 2.75rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
}
}
}
.quote-text {
.icon-wrapper {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
p {
color: #121526;
text-align: center;
font-family: $body-font;
font-size: 1.5rem;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.6px;
margin: 0;
}
}
img {
width: 37.5rem;
height: 29.375rem;
object-fit: contain;
// position: absolute;
left: 0;
@media (max-width: 1160px) {
position: unset;
left: unset;
width: 100%;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin-bottom: 1.5rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
margin-bottom: 3rem;
}
.percentage-box {
.inner-wrapper {
span {
color: #005aff;
font-family: $body-font;
font-size: 2.75rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.5px;
}
}
}
.pc-content-box {
max-width: calc(100% - 48px);
}
.quote-text {
.icon-wrapper {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
p {
color: #121526;
text-align: center;
font-family: $body-font;
font-size: 1.5rem;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.6px;
margin: 0;
}
}
}
// PROJECT-CONCLUSION
//FINAL-THOUGHT-SECTION
.FINAL-THOUGHT-SECTION {
.social-icon {
a {
&:hover {
border: 1px solid $primary !important;
svg {
path {
fill: $primary !important;
}
}
}
}
}
.social-icon {
a {
&:hover {
border: 1px solid $primary !important;
svg {
path {
fill: $primary !important;
}
}
}
}
}
}
dev/sass/pages/_responsive.scss
......@@ -327,6 +327,26 @@
}
}
.portfolio-block {
.ONLY-TEXT-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 30px;
margin-bottom: 16px;
}
p {
line-height: 22px;
}
.content-box {
padding: 24px;
}
}
}
.TECHNOLOGY-USED-SECTION {
.col-6 {
width: 100%;
......@@ -791,4 +811,37 @@
.TOP-CAROUSEL-SECTION .working-experts {
margin-bottom: 1rem;
}
.PD-TOP-SECTION {
.open-in-new-tab {
margin-top: 2rem;
}
}
.PROJECT-CONCLUSION {
.pc-content-box {
max-width: 100%;
}
}
.portfolio-block {
.row {
img {
margin-bottom: 24px;
}
}
}
}
@media (max-width: 1399px) {
.PD-TOP-SECTION {
.open-in-new-tab {
font-size: 1.125rem;
line-height: 22px;
letter-spacing: 0;
svg {
max-width: 10px;
}
}
}
}
dev/sass/pages/master-portfolio/_block-gallery.scss 0 → 100644
.block-gallery {
.section-title {
display: flex;
align-items: center;
justify-content: space-between;
.slider-controller {
gap: 12px;
button {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid $grey;
background-color: transparent;
&:hover {
background-color: $primary;
border-color: $primary;
svg {
path {
fill: $white;
}
}
}
}
}
}
}
dev/sass/pages/master-portfolio/_sticky-tab.scss 0 → 100644
.sticky-tab {
.st-content {
ul {
li {
a {
display: inline-block;
padding: 8px 16px;
}
&:hover,
&.active {
a {
background-color: $primary;
color: $white;
}
}
}
}
}
}
@media (min-width: 768px) {
.sticky-tab {
.st-content {
ul {
li {
a {
padding: 16px;
}
}
}
}
}
}
@media (min-width: 992px) {
.sticky-tab {
.st-content {
ul {
li {
a {
padding: 16px 32px;
}
}
}
}
}
}
dev/sass/style.scss
......@@ -59,3 +59,5 @@ $body-font: "Sora", sans-serif;
@import "pages/site-comparision/comparison-form";
@import "pages/resources/resource-listing";
@import "pages/resources/resource-detail";
@import "pages/master-portfolio/sticky-tab";
@import "pages/master-portfolio/block-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