File: /var/www/tana/wp-content/themes/tana/page-templates/about-us.php
<?php
/*
* Template Name: About Us
*
*/
?>
<?php
if ( !is_ajax() ) :
get_header();
endif;
$id = $_POST['page-id'];
?>
<div class="scrolled-pages__logo">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-12 col-md-offset-0">
<?php
$logo = get_field( 'page_logotype', $id );
?>
<img class="img-responsive" src="<?= $logo['url'] ?>" alt="<?= $logo['alt'] ?>">
</div>
</div>
</div>
<div class="scrolled-pages__container">
<section class="scrolled-pages__page scrolled-pages__page-1">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="about-box">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 v-center">
<div class="about-text about-text--offset-left">
<?= get_field( 'first_text', $id ); ?>
</div>
</div><div class="col-xs-12 col-sm-6 col-sm-pull-6 v-center">
<div class="aspectratio" data-ratio="10:9">
<div class="aspectratio__item">
<div class="slider slider--offset-left">
<div class="slider__images faded">
<?php
$images = get_field( 'first_images', $id );
foreach( $images as $image ) :
?>
<img class="slider__image img-responsive" src="<?= $image['url'] ?>">
<?php endforeach; ?>
</div>
<svg class="slider__circle">
<circle class="slider__circle-shape" stroke="#1428aa" stroke-width="20" fill="transparent" r="45%" cx="50%" cy="50%"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="scrolled-pages__page scrolled-pages__page-2">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="about-box">
<div class="row">
<div class="col-xs-12 col-sm-6 v-center">
<div class="about-text about-text--offset-right">
<?= get_field( 'second_text', $id ); ?>
</div>
<div class="iso-cert">
<img src="<?= get_template_directory_uri(); ?>/assets/images/iso_9001.png" alt="ISO 9001 logo" class="iso-cert__image">
<img src="<?= get_template_directory_uri(); ?>/assets/images/iso_27001.png" alt="ISO 27001 logo" class="iso-cert__image">
<p class="iso-cert__text">We are ISO 9001 and ISO 27001 certified.</p>
</div>
<div class="row">
<div class="col-xs-12 visible-xs text-center">
<a href="<?= get_field('button_linked_page', $id) ?>" class="btn btn--primary" data-open-subpage><?= get_field( 'hidden_button_text', $id ); ?></a>
</div>
</div>
</div><div class="col-xs-12 col-sm-6 v-center"><!-- Important that there is no whitespace between these two columns because of display: inline-block; -->
<div class="aspectratio" data-ratio="10:9">
<div class="aspectratio__item">
<div class="slider slider--offset-right">
<div class="slider__images faded">
<?php
$images = get_field( 'second_images', $id );
foreach( $images as $image ) :
?>
<img class="slider__image img-responsive" src="<?= $image['url'] ?>">
<?php endforeach; ?>
</div>
<svg class="slider__circle">
<circle class="slider__circle-shape" stroke="#1428aa" stroke-width="20" fill="transparent" r="45%" cx="50%" cy="50%"/>
</svg>
</div>
</div>
</div>
</div>
<div class="col-xs-12 hidden-xs text-center">
<a href="<?= get_field('button_linked_page', $id) ?>" class="btn btn--primary" data-open-subpage><?= get_field( 'hidden_button_text', $id ); ?></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="scrolled-pages__page scrolled-pages__page-3">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-dm-8 v-center">
<div class="thirty-years-shape">
<div id="number-three">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452.54 770.88">
<path id="three-top" d="m18,226.27C18,111.24,111.24,18,226.27,18s208.27,93.24,208.27,208.27c0,63.68-28.58,120.67-73.61,158.87-36.31,30.81-83.31,49.4-134.66,49.4s-98.35-18-134.67-48.81h0c36.32-30.81,83.32-49.4,134.67-49.4s98.35,18.59,134.66,49.4c45.03,38.2,73.61,95.19,73.61,158.87,0,115.03-93.24,208.28-208.27,208.28S18,659.63,18,544.6" style="fill:none; fill-rule:evenodd; stroke:#1428aa; stroke-miterlimit:10; stroke-width:36px;"/>
</svg>
</div>
<div id="number-zero">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 770.29 770.29">
<path d="m385.14,770.29c-51.99,0-102.43-10.19-149.92-30.27-45.86-19.4-87.05-47.17-122.42-82.53-35.37-35.37-63.13-76.55-82.53-122.42C10.19,487.57,0,437.13,0,385.14s10.19-102.43,30.27-149.92c19.4-45.86,47.17-87.05,82.53-122.42s76.55-63.13,122.42-82.53C282.72,10.19,333.16,0,385.14,0s102.43,10.19,149.92,30.27c45.87,19.4,87.05,47.17,122.42,82.53,35.36,35.37,63.13,76.55,82.53,122.42,20.09,47.49,30.27,97.93,30.27,149.92s-10.19,102.43-30.27,149.92c-19.4,45.87-47.17,87.05-82.53,122.42-35.37,35.36-76.55,63.13-122.42,82.53-47.49,20.09-97.93,30.27-149.92,30.27Zm0-734.29c-192.52,0-349.14,156.63-349.14,349.14s156.63,349.14,349.14,349.14,349.14-156.63,349.14-349.14S577.66,36,385.14,36Z" style="fill:#1428aa;"/>
</svg>
<div class="number-zero__content">
<img src="<?= the_field('tana_30_years_logo') ?>" alt="">
<p>This year, we are celebrating thirty years of dedication to knowledge and work for our clients’ benefit.</p>
</div>
</div>
</div>
<div class="thirty-years__content-for-mobile">
<p>This year, we are celebrating thirty years of dedication to knowledge and work for our clients’ benefit.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<?php
if ( !is_ajax() ) : ?>
<div class="content-wrapper-second">
</div>
<?php get_footer();
endif;
?>
</div>