Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Title Left Text Right
<section class="title-left-text-right <?php if(get_sub_field('black_background')){echo ' black-bg';} ?> <?php if(get_sub_field('orange_accent')){echo ' orange-accent';} ?> <?php if(get_sub_field('green_accent')){echo ' green-accent';} ?>" id="<?= custom_section_class( get_the_ID() ); ?>">
<div class="title-left-text-right-container">
<div class="left wow fadeIn">
<?php if(get_sub_field('title')){ ?>
<div class="title">
<h2 class="underline">
<?php the_sub_field('title'); ?>
</h2>
</div>
<?php } ?>
<?php if(get_sub_field('text_left')){ ?>
<div class="text">
<?php the_sub_field('text_left'); ?>
</div>
<?php } ?>
</div>
<div class="right wow fadeInRight">
<?php if(get_sub_field('text')){ ?>
<div class="text">
<?php the_sub_field('text'); ?>
</div>
<?php } ?>
<?php if(get_sub_field('button')){ ?>
<?php $button = get_sub_field('button'); ?>
<div class="a-button">
<a href="<?php echo $button['url']; ?>" class="btn-main <?php if(get_sub_field('orange_accent')){echo ' orange-bg';} else {echo ' green-bg';} ?>" target="<?php echo $button['target']; ?>"><?php echo $button['title']; ?><i class="fa-sharp fa-regular fa-chevron-down"></i></a>
</div>
<?php } ?>
<?php if( have_rows('items') ) {?>
<div class="items">
<?php $i = 0.2; ?>
<?php while ( have_rows('items') ) : the_row(); ?>
<div class="item wow fadeInRight" data-wow-delay="<?php echo $i; ?>s">
<?php if(get_sub_field('icon')){ ?>
<?php $icon = get_sub_field('icon'); ?>
<div class="image">
<img decoding="async" src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>">
</div>
<?php } ?>
<div class="right-text">
<?php if(get_sub_field('title')){ ?>
<div class="title">
<h3 class="">
<?php the_sub_field('title'); ?>
</h3>
</div>
<?php } ?>
<?php if(get_sub_field('text')){ ?>
<div class="text">
<?php the_sub_field('text'); ?>
</div>
<?php } ?>
</div>
</div>
<?php $i = $i + 0.2; ?>
<?php endwhile; ?>
</div>
<?php } ?>
</div>
</div>
</section>/*** title left text right ***/
#section-9.title-left-text-right .left .title::after {
width: 222px;
}
.title-left-text-right {
padding: 60px 30px;
box-sizing: border-box;
}
.title-left-text-right.black-bg {
background-color: #0F0F0F;
}
.title-left-text-right-container {
max-width: 1370px;
margin: 0 auto;
display: flex;
}
.title-left-text-right .left {
width: 50%;
/* text-align: right; */
padding-right: 60px;
/* box-sizing: border-box; */
}
.title-left-text-right .left .title > * {
font-size: 36px;
}
.title-left-text-right.black-bg .left .title > * {
color: #fff;
}
.title-left-text-right .left .text p:first-of-type {
padding-top: 0px;
}
.title-left-text-right .right {
width: 50%;
}
.title-left-text-right.black-bg .right .text {
color: #fff;
}
.title-left-text-right .right .items {
text-align: left;
margin-top: 10px;
}
.title-left-text-right .right .items .item {
display: flex;
margin-bottom: 20px;
}
.title-left-text-right .right .items .item .right-text .title {
margin-bottom: 5px;
}
.title-left-text-right .right .items .item .image {
min-width: 70px;
margin-right: 25px;
}
.title-left-text-right .right .items .item .image img {
background-color: #0F0F0F;
padding: 18px 18px;
box-sizing: border-box;
border-radius: 5px;
}
.title-left-text-right .right .items .item .right-text h3 {
font-size: 28px;
}
.title-left-text-right .right .text h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
margin-top: 10px;
}
.title-left-text-right.green-accent .right .text h3 {
color: #07E705;
}
.title-left-text-right.orange-accent .right .text h3 {
color: #FF6B02;
}
.title-left-text-right .right .text h3:first-of-type {
margin-top: 0px;
}
.title-left-text-right .right .text h3 {
margin-top: 15px;
}
.title-left-text-right .right .text ul {
list-style-type: none;
padding-left: 40px;
}
.title-left-text-right .right .text ul:first-of-type {
margin-top: 0px;
margin-bottom: 40px;
}
.title-left-text-right .right .text ul li {
position: relative;
/* display: flex; */
font-size: 20px;
margin-bottom: 15px;
}
.title-left-text-right .right .text ul li::before {
content: ""; /* Add content: \2022 is the CSS Code/unicode for a bullet */
/*color: #02A3DA; Change the color */
font-weight: bold; /* If you want it to be bold */
display: block; /* Needed to add space between the bullet and the text */
min-width: 20px;
position: relative;
left: -35px;
background-size: 100%;
height: 22px;
background-image: url(img/green_arrow.svg);
width: 20px;
position: absolute;
top: 11px;
}
.title-left-text-right.orange-accent .right .text ul li::before {
background-image: url(img/orange_arrow.svg);
}
.title-left-text-right .right .text p {
padding-top: 0px;
padding-bottom: 10px;
}
.title-left-text-right .right .text p iframe {
width: 100%;
margin-top: 20px;
}
.title-left-text-right .left .title {
/* padding-bottom: 30px; */
margin-bottom: 0px;
position: relative;
}
/* .title-left-text-right .left .title::after {
position: absolute;
bottom: 0;
content: '';
background-color: #01E803;
height: 8px;
display: block;
width: 150px;
left: 0;
} */
@media (max-width: 850px) {
.title-left-text-right-container {
flex-direction: column;
}
.title-left-text-right .left .title > * {
font-size: 28px;
}
.title-left-text-right .left {
text-align: left;
width: 100%;
padding-right: 0px;
}
.title-left-text-right .left .text {
margin-top: 10px;
}
/* .title-left-text-right .left .title::after {
left: 0%;
transform: none;
right: auto;
} */
.title-left-text-right .right {
width: 100%;
}
.title-left-text-right .right {
text-align: left;
margin-top: 20px;
}
.title-left-text-right .left .title::after {
width: 250px;
}
.title-left-text-right .right .text h3 {
font-size: 20px;
}
.title-left-text-right .right .btn-main {
margin: 20px 0 0;
}
}
@media (max-width: 600px) {
.title-left-text-right {
padding: 30px 20px;
}
.title-left-text-right .right .items .item .right-text .title {
margin-bottom: 10px;
}
.title-left-text-right .right .items .item .right-text .title h3 {
font-size: 22px;
}
.title-left-text-right .right .items .item {
margin-bottom: 20px;
}
.title-left-text-right .right .items .item .image {
margin-right: 20px;
}
.title-left-text-right .right .text ul li {
font-size: 16px;
}
.title-left-text-right .right .text ul:first-of-type {
margin-top: -20px;
}
}
get_sub_field('black_background');
get_sub_field('orange_accent');
get_sub_field('green_accent');
get_sub_field('title');
get_sub_field('text_left');
get_sub_field('text');
get_sub_field('button');
get_sub_field('icon');
Image Text
<?php $service=g et_sub_field( 'post' ); ?>
<?php if ( $service ) { ?>
<section class="image-text <?php if(get_sub_field('flip')) {echo ' flip';} ?>">
<div class="image-text-container">
<?php $post=$ service; ?>
<?php setup_postdata( $post ); ?>
<?php $main_url=g et_permalink(); ?>
<div class="left wow fadeIn">
<div class="image">
<?php echo get_the_post_thumbnail(); ?>
</div>
</div>
<div class="right wow fadeIn">
<div class="right-inner">
<div class="inner-container">
<div class="title ">
<h2 class="underline <?php if(get_sub_field('orange_accent')) {echo ' orange-accent';} ?>">
<?php the_title(); ?>
</h2>
</div>
<div class="text">
<?php if(has_excerpt()) { ?>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php if(get_sub_field( 'text')) { ?>
<?php the_sub_field( 'text'); ?>
<?php } ?>
<?php } ?>
</div>
<div class="a-button">
<a href="<?php echo $main_url; ?>" class="btn-main green-bg" target="<?php //echo $button['target']; ?>">
Learn More
<i class="fa-sharp fa-regular fa-angle-right">
</i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<?php wp_reset_postdata(); ?>
<?php } else { ?>
<section class="image-text <?php if(get_sub_field('flip')) {echo ' flip';} ?>">
<div class="image-text-container">
<div class="left wow fadeIn">
<?php if(get_sub_field( 'image')){ ?>
<?php $image=g et_sub_field( 'image'); ?>
<div class="image">
<?php echo wp_get_attachment_image( $image, 'full' ); ?>
</div>
<?php } ?>
</div>
<div class="right wow fadeIn">
<div class="right-inner">
<div class="inner-container">
<?php if(get_sub_field( 'title')){ ?>
<div class="title">
<h2 class="">
<?php the_sub_field( 'title'); ?>
</h2>
</div>
<?php } ?>
<?php if(get_sub_field( 'subtitle')){ ?>
<div class="subtitle">
<h3 class="">
<?php the_sub_field( 'subtitle'); ?>
</h3>
</div>
<?php } ?>
<?php if(get_sub_field( 'text')){ ?>
<div class="text">
<?php the_sub_field( 'text'); ?>
</div>
<?php } ?>
<?php if(get_sub_field( 'button')){ ?>
<?php $button=g et_sub_field( 'button'); ?>
<div class="a-button">
<a href="<?php echo $button['url']; ?>" class="btn-main green-bg" data-title="<?php the_sub_field('title'); ?>"
target="<?php echo $button['target']; ?>">
<?php echo $button[ 'title']; ?>
<i class="fa-sharp fa-regular fa-chevron-right">
</i>
</a>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</section>
<?php } ?>/*** image text ***/
.image-text {
padding: 20px 0 20px;
box-sizing: border-box;
}
/* Target the first image-text section */
section.image-text.first-section {
padding-top: 50px; /* Add more top padding to the first section */
}
/* Target the last image-text section */
section.image-text.last-section {
padding-bottom: 50px; /* Add more bottom padding to the last section */
}
.image-text-container {
display: flex;
}
.image-text.flip .image-text-container {
flex-direction: row-reverse;
}
.image-text .left {
width: 50%;
position: relative;
min-height: clamp(0px, 60vw, 430px);
}
.image-text .left .image {
position: relative;
height: 100%;
}
.image-text .left .image img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.image-text .right {
padding: 100px 60px 100px 70px;
box-sizing: border-box;
width: 50%;
display: flex;
align-items: center;
}
.image-text .right ul {
padding-left: 35px;
margin-bottom: 0px;
}
.image-text .right ul li {
position: relative;
list-style-type: none;
font-size: 16px;
font-weight: 500;
color: #071F48;
margin: 10px 0;
}
.image-text .right ul li::before {
/* content: '\f054';
font-family: "Font Awesome 6 Pro"; */
content: ""; /* Add content: \2022 is the CSS Code/unicode for a bullet */
/*color: #02A3DA; Change the color */
font-weight: bold; /* If you want it to be bold */
display: block; /* Needed to add space between the bullet and the text */
min-width: 20px;
position: relative;
left: -35px;
background-size: 20px;
background-repeat: no-repeat;
height: 20px;
background-image: url(img/blue_tri.svg);
/* background-color: var(--lb); */
/* border-radius: 100%; */
position: absolute;
top: 10px;
min-height: 20px;
width: 20px;
}
@media (max-width: 1000px) {
.image-text.flip .image-text-container {
flex-direction: column;
}
.image-text .image-text-container {
flex-direction: column;
}
.image-text .left {
height: 250px;
width: 100%;
}
.image-text .right {
width: 100%;
padding: 30px 30px;
text-align: center;
}
.single-sector .image-text .right {
text-align: left;
}
.image-text .right .a-button a {
margin: auto;
}
}
@media (max-width: 600px) {
.image-text .right {
padding: 20px 20px;
}
.image-text {
padding: 20px 0 0px;
}
.image-text .left {
min-height: 0;
}
}
get_sub_field('flip');
get_sub_field('orange_accent');
get_sub_field('text');
get_sub_field('image');
get_sub_field('title');
get_sub_field('subtitle');
get_sub_field('button');