File: /var/www/html/dooblo.cccinfotech.com/wp-content/themes/dooblo/page-home.php
<?php
/**
* Template Name: Home
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Dooblo
*/
get_header(); ?>
<style>
@media (max-width: 480px) {
#home-page #section1 .slider .slide .info {
width: 100% !important;
}
}
</style>
<div id="home-page" class="content-area">
<div id="top-page"></div>
<?php
// check if the flexible content field has rows of data
if( have_rows('sections') ): ?>
<?php while(have_rows('sections')): the_row(); ?>
<?php if(get_row_layout() == 'section_1_banner'): ?>
<section id="section1">
<div class="workarea1 cf">
<div class="slider">
<?php while(have_rows('slider')): the_row(); ?>
<div class="slide">
<div class="background-grey"></div>
<div class="slide-img" style="background: url('<?php the_sub_field('image'); ?>') no-repeat center;background-size: cover;"></div>
<div class="info">
<h2 class="section1-1-1"><?php the_sub_field('title'); ?></h2>
<div class="section1-1-2">
<?php the_sub_field('content'); ?>
</div>
<a href="<?php the_sub_field('button_link'); ?>" class="btn"><?php the_sub_field('button_text'); ?></a>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</section>
<?php elseif(get_row_layout() == 'section_2_figures'): ?>
<section id="section2" class="waypoint desktop">
<div class="workarea1 cf">
<h2 class="section2-1">
<?php the_sub_field('title'); ?>
</h2>
<div class="section2-2">
<ul class="items">
<?php while(have_rows('content')): the_row(); ?>
<li class="item">
<i class="<?php the_sub_field('icon'); ?>"></i>
<div class="data">
<span class="helper" data-num="<?php the_sub_field('data'); ?>" style="display:none;"></span>
<span class="number" >0</span>
<span class="addon"><?php the_sub_field('addon'); ?></span>
</div>
<div class="label"><?php the_sub_field('label'); ?></div>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
</section>
<section id="section2" class="waypoint mobile">
<div class="workarea1 cf">
<h2 class="section2-1">
<?php the_sub_field('title'); ?>
</h2>
<div class="section2-2">
<ul class="items">
<?php while(have_rows('content')): the_row(); ?>
<li class="item">
<i class="<?php the_sub_field('icon'); ?>"></i>
<div class="data">
<span class="number" ><?php the_sub_field('data'); ?></span>
<span class="addon"><?php the_sub_field('addon'); ?></span>
</div>
<div class="label"><?php the_sub_field('label'); ?></div>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
</section>
<?php elseif(get_row_layout() == 'section_3_clients'): ?>
<section id="section3" class="desktop">
<h2 class="section3-1"><?php the_sub_field('title'); ?></h2>
<ul class="items cf">
<?php while(have_rows('content')): the_row(); ?>
<?php
if(get_sub_field('background_type') == 'Color'){
$bg = 'background-color:' . get_sub_field('background_color');
}
else{
$bg = 'background-image:url(' . get_sub_field('background_image') . ')';
}
?>
<li class="item alignleft <?php the_sub_field('size'); ?>" style="<?php echo $bg; ?>">
<div class="inner align-middle-center">
<?php
if(get_sub_field('logo')){
?>
<img src="<?php echo get_sub_field('logo'); ?>" />
<?php
}
?>
<?php if(get_sub_field('content')): ?>
<div class="content"><?php the_sub_field('content'); ?></div>
<?php endif; ?>
</div>
</li>
<?php endwhile; ?>
</ul>
</section>
<?php elseif(get_row_layout() == 'section_3_clients_mobile'): ?>
<section id="section3" class="mobile">
<h2 class="section3-1"><?php the_sub_field('title_mobile'); ?></h2>
<ul class="items cf">
<?php while(have_rows('content_mobile')): the_row(); ?>
<?php
if(get_sub_field('background_type_mobile') == 'Color'){
$bg = 'background-color:' . get_sub_field('background_color_mobile');
}
else{
$bg = 'background-image:url(' . get_sub_field('background_image_mobile') . ')';
}
?>
<li class="item alignleft <?php the_sub_field('size_mobile'); ?>" style="<?php echo $bg; ?>">
<div class="inner align-middle-center">
<img src="<?php the_sub_field('logo_mobile'); ?>" ?>
<?php if(get_sub_field('content_mobile')): ?>
<div class="content"><?php the_sub_field('content_mobile'); ?></div>
<?php endif; ?>
</div>
</li>
<?php endwhile; ?>
</ul>
</section>
<?php elseif(get_row_layout() == 'section_4_services'): ?>
<section id="section4">
<div class="workarea1">
<ul class="items cf">
<?php $index=0; ?>
<?php while(have_rows('content')): the_row(); ?>
<?php $index++; ?>
<li class="item alignleft <?php the_sub_field('size'); ?>" id="workarea-item<?= $index ?>">
<i class="<?php the_sub_field('icon'); ?>"></i>
<div class="title"><?php the_sub_field('title'); ?></div>
<div class="content"><?php the_sub_field('content'); ?></div>
</li>
<?php endwhile; ?>
</ul>
<div class="buttons">
<a href="<?php the_sub_field('link1'); ?>" class="btn primary">
<?php the_sub_field('text1'); ?>
</a>
<span class="or">or</span>
<a href="<?php the_sub_field('link2'); ?>" class="btn secondary">
<?php the_sub_field('text2'); ?>
</a>
</div>
</div>
</section>
<?php elseif(get_row_layout() == 'section_5_video'): ?>
<section id="section5">
<div class="video-bg-image" style="background-image:url(<?php the_sub_field('background'); ?>);"></div>
<div class="align-middle-center">
<h2><?php the_sub_field('title'); ?></h2>
<div class="icon"><i class="icon-play"></i></div>
</div>
<div class="video-wraper">
<div class="video">
<div class="inner">
<div id="#hp-video"><?php the_sub_field('video'); ?></div>
</div>
</div>
</div>
</section>
<?php elseif(get_row_layout() == 'section_6_support'): ?>
<section id="section6">
<div class="workarea1">
<div class="carousel-wrapper">
<div class="carousel">
<?php while(have_rows('supports')): the_row(); ?>
<div class="item cf">
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-12">
<div class="content alignleft">
<div class="title"><?php the_sub_field('title'); ?></div>
<div class="text"><?php the_sub_field('content'); ?></div>
<div class="arrow">
<div><img src="<?php echo get_template_directory_uri(); ?>/images/hp-section6-arrow.png" /></div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-7 col-sm-12">
<div class="image alignright">
<img src="<?php the_sub_field('image'); ?>" alt="" />
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="carousel-arrows">
<div class="prev"><i class="icon-arrow-left"></i></div>
<div class="next"><i class="icon-arrow-right"></i></div>
</div>
</div>
</div>
</section>
<?php elseif(get_row_layout() == 'section_7_testimonials'): ?>
<section id="section7">
<div class="workarea1">
<div class="carousel-wrapper">
<div class="container">
<div class="carousel">
<?php while(have_rows('testimonials')): the_row(); ?>
<div class="item">
<div class="col-sm-3">
<div class="image">
<div class="inner">
<img src="<?php the_sub_field('user_picture'); ?>" alt="" />
</div>
</div>
</div>
<div class="col-sm-9">
<div class="content">
<div class="text"><?php the_sub_field('content'); ?></div>
<div class="name"><?php the_sub_field('user_name'); ?></div>
<div class="location"><?php the_sub_field('user_location'); ?></div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<div class="carousel-arrows">
<div class="prev"><i class="icon-arrow-left"></i></div>
<div class="next"><i class="icon-arrow-right"></i></div>
</div>
</div>
</div>
</section>
<?php elseif(get_row_layout() == 'section_8_link'): ?>
<section id="section8" class="cf">
<div class="container">
<a href="<?php the_sub_field('button_link'); ?>" class="btn"><?php the_sub_field('btton_text'); ?></a>
</div>
</section>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php include get_template_directory() . '/home-page-modal.php' ?>
<?php get_footer(); ?>