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 @@
<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>
<?php $content = get_field('content') ?: [];
if (isset($content) && is_array($content) && !empty($content)):
foreach ($content as $ci => $content):
$title = $content['title'] ?: '';
if (!empty($title)):
?>
<li class="<?php echo ($ci === 0) ? 'active' : ''; ?>">
<a href="#" data-target="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"><?php echo $title; ?></a>
</li>
<?php endif; endforeach; endif; ?>
</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">
......@@ -25,171 +23,181 @@
</div>
</div>
</section>
<?php
if(have_rows('content')):
?>
<!-- <section
class="<?php echo (get_sub_field('background_colour')=='dark')?'background-dark':'bg-primary';?> container-fluid py-80 ONLY-TEXT-SECTION">
<?php
if (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'):?>
<?php if ($image_position == 'left'): ?>
<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>
<?php endif;?>
<?php endif; ?>
<div class="col-lg-6 col-12">
<?php echo get_sub_field('description');?>
<?php echo get_sub_field('description'); ?>
</div>
<?php if($image_position!='left'):?>
<?php if ($image_position != 'left'): ?>
<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>
<?php endif;?>
<?php endif; ?>
</div>
</div>
</section> -->
<section class="portfolio-block " id="ui-ux-design">
<?php $index=0;?>
<?php while(have_rows('content')):
the_row();
$bgClass = get_sub_field('background_colour');
$class_name = !empty($bgClass) ? explode(':', $bgClass) : 'none';
$class_name = $class_name[0];
$image_position = get_sub_field('image_position');
$image = get_sub_field('image');
if($index===0):
?>
<section class="portfolio-block " id="ui-ux-design">
<?php $index = 0; ?>
<?php while (have_rows('content')):
the_row();
$bgClass = get_sub_field('background_colour');
$class_name = !empty($bgClass) ? explode(':', $bgClass) : 'none';
$class_name = $class_name[0];
$image_position = get_sub_field('image_position');
$image = get_sub_field('image');
if ($index === 0):
?>
<div class="ONLY-TEXT-SECTION py-80 <?php echo $class_name;?>">
<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 class="ONLY-TEXT-SECTION py-80 <?php echo $class_name; ?>">
<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>
</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;
?>
<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>
<?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 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>
<?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 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>
<?php
endif;
$index += 1;
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 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 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 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-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 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>
</section>
<?php endif;?>
\ No newline at end of file
</section>
<?php endif; ?>
\ 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