Skip to content

M
makura-2025
Commit 3bb101b1 by rajshah
Options

done with sticky tabs

parent a937cc93
Showing with 166 additions and 158 deletions
blocks/portfolio-text-image-section.php
...@@ -2,18 +2,16 @@ ...@@ -2,18 +2,16 @@
<div class="container"> <div class="container">
<div class="st-content d-flex justify-content-between align-items-center"> <div class="st-content d-flex justify-content-between align-items-center">
<ul class="d-flex"> <ul class="d-flex">
<li class="active"> <?php $content = get_field('content') ?: [];
<a href="#" data-target="graphics-design">Graphics Design</a> if (isset($content) && is_array($content) && !empty($content)):
</li> foreach ($content as $ci => $content):
<li> $title = $content['title'] ?: '';
<a href="#" data-target="ui-ux-design">UI/UX Design</a> if (!empty($title)):
</li> ?>
<li> <li class="<?php echo ($ci === 0) ? 'active' : ''; ?>">
<a href="#" data-target="web-development">Web Development</a> <a href="#" data-target="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"><?php echo $title; ?></a>
</li> </li>
<li> <?php endif; endforeach; endif; ?>
<a href="#" data-target="seo">SEO</a>
</li>
</ul> </ul>
<a href="#project-conclusion" class="mc-btn-underlined font-18 font-600 d-none d-md-inline-block">Scroll to <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"> Conclusion <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
...@@ -25,171 +23,181 @@ ...@@ -25,171 +23,181 @@
</div> </div>
</div> </div>
</section> </section>
<?php <?php
if(have_rows('content')): if (have_rows('content')):
?> ?>
<!-- <section <!-- <section
class="<?php echo (get_sub_field('background_colour')=='dark')?'background-dark':'bg-primary';?> container-fluid py-80 ONLY-TEXT-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="container">
<div class="row"> <div class="row">
<?php if($image_position=='left'):?> <?php if ($image_position == 'left'): ?>
<div class="col-lg-6 col-12"> <div class="col-lg-6 col-12">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?> <?php if ($image):
echo wp_get_attachment_image($image, 'full');
endif; ?>
</div> </div>
<?php endif;?> <?php endif; ?>
<div class="col-lg-6 col-12"> <div class="col-lg-6 col-12">
<?php echo get_sub_field('description');?> <?php echo get_sub_field('description'); ?>
</div> </div>
<?php if($image_position!='left'):?> <?php if ($image_position != 'left'): ?>
<div class="col-lg-6 col-12"> <div class="col-lg-6 col-12">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?> <?php if ($image):
echo wp_get_attachment_image($image, 'full');
endif; ?>
</div> </div>
<?php endif;?> <?php endif; ?>
</div> </div>
</div> </div>
</section> --> </section> -->
<section class="portfolio-block " id="ui-ux-design"> <section class="portfolio-block " id="ui-ux-design">
<?php $index=0;?> <?php $index = 0; ?>
<?php while(have_rows('content')): <?php while (have_rows('content')):
the_row(); the_row();
$bgClass = get_sub_field('background_colour'); $bgClass = get_sub_field('background_colour');
$class_name = !empty($bgClass) ? explode(':', $bgClass) : 'none'; $class_name = !empty($bgClass) ? explode(':', $bgClass) : 'none';
$class_name = $class_name[0]; $class_name = $class_name[0];
$image_position = get_sub_field('image_position'); $image_position = get_sub_field('image_position');
$image = get_sub_field('image'); $image = get_sub_field('image');
if($index===0): if ($index === 0):
?> ?>
<div class="ONLY-TEXT-SECTION py-80 <?php echo $class_name;?>"> <div class="ONLY-TEXT-SECTION py-80 <?php echo $class_name; ?>">
<div class="container"> <div class="container">
<div class="row justify-content-between"> <div class="row justify-content-between">
<div class="col-lg-5 col-xl-4 order-lg-2"> <div class="col-lg-5 col-xl-4 order-lg-2">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?> <?php if ($image):
</div> echo wp_get_attachment_image($image, 'full');
<div class="col-lg-7 order-lg-1"> endif; ?>
<?php echo get_sub_field('description');?> </div>
</div> <div class="col-lg-7 order-lg-1">
</div> <?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 elseif ($index === 1): ?>
</div> <div class="ONLY-TEXT-SECTION top-primary mb-60">
</div> <div class="container">
<?php else:?> <div class="bg-white content-box">
<div class="ONLY-TEXT-SECTION mb-80"> <div class="section-title">
<div class="container"> <h3>Challenges of Graphics Design</h3>
<div class="row justify-content-between"> <p>CAN faced challenges in capturing audience attention due to outdated and uninspired designs. Their social
<div class="col-lg-5 "> media graphics lacked creativity, and their website failed to engage modern users, especially the younger
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?> demographic.</p>
</div> </div>
<div class="col-lg-7"> <div class="row justify-content-between">
<?php echo get_sub_field('description');?> <div class="col-lg-6 order-lg-2">
</div> <?php if ($image):
</div> echo wp_get_attachment_image($image, 'full');
</div> endif; ?>
</div> </div>
<?php <div class="col-lg-6 order-lg-1">
endif; <?php echo get_sub_field('description'); ?>
$index+=1; </div>
endwhile; </div>
?> </div>
<div class="block-gallery makura-new mb-120">
<div class="container">
<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 " id="ui-ux-gallery">
<div class="gallery-item">
<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">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-12.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-12.png" alt=""
class="img-fluid">
</a>
</div> </div>
<div class="gallery-item"> </div>
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-13.png"> <?php else: ?>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-13.png" alt="" <div class="ONLY-TEXT-SECTION mb-80">
class="img-fluid"> <div class="container">
</a> <div class="row justify-content-between">
</div> <div class="col-lg-5 ">
<div class="gallery-item"> <?php if ($image):
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png"> echo wp_get_attachment_image($image, 'full');
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png" alt="" endif; ?>
class="img-fluid"> </div>
</a> <div class="col-lg-7">
<?php echo get_sub_field('description'); ?>
</div>
</div>
</div> </div>
<div class="gallery-item"> </div>
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png"> <?php
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png" alt="" endif;
class="img-fluid"> $index += 1;
</a> endwhile;
?>
<div class="block-gallery makura-new mb-120">
<div class="container">
<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>
<div class="gallery-item"> <div class="slider-controller d-none d-md-flex justify-content-end">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png"> <button type="button" class="prev">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png" alt="" <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
class="img-fluid"> <path fill-rule="evenodd" clip-rule="evenodd"
</a> 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-item"> </div>
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png"> <div class="gallery-slider-wrapper slide-up">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" <div class="gallery-slider owl-carousel " id="ui-ux-gallery">
class="img-fluid"> <div class="gallery-item">
</a> <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">
<a data-src="<?php echo get_parent_theme_file_uri() ?>/assets/img/placeholder-12.png">
<img src="<?php echo get_parent_theme_file_uri() ?>/assets/img/placeholder-12.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri() ?>/assets/img/placeholder-13.png">
<img src="<?php echo get_parent_theme_file_uri() ?>/assets/img/placeholder-13.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">
<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">
</a>
</div>
<div class="gallery-item">
<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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</section> <?php endif; ?>
<?php endif;?> \ No newline at end of file
\ No newline at end of file
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