Buttons (B)
Button 1 (b1)
Code Only (Without ACF Integration)
HTML
<!-- B1 --><a href="#" target="_blank"><div class="wa_b1">REQUEST MARKET ANALYSIS</div></a><!-- B1 End -->
CSS
/* B1 --------------------*/
.wa_b1{
padding: 10px 40px;
color: #FFF;
background-color: #F05A29;
border-radius: 5px;
font-weight: 600;
width: fit-content;
font-size: 1.5em;
}
.wa_b1:hover{
background-color: #2584d1;
}
/* B1 End ---------------------*/A0019
Code With ACF Integration
HTML
<!-- A0019 -- START ------------------------------>
<?php if (have_rows('a0019')) : ?>
<?php while (have_rows('a0019')) : the_row(); ?>
<section id="a0019">
<div class="container">
<div class="row">
<div class="col-12">
<h2><?= get_sub_field('header') ?></h2>
<p><?= get_sub_field('text') ?></p>
<a href="<?= get_sub_field('button_url') ?>" target="_blank">
<div class="wa_b2"><?= get_sub_field('button_label') ?></div>
</a>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<!-- A0019 -- END ------------------------------>CSS
/* A0019 Start -----------------------------------*/
#a0019{
padding: 40px 0px;
background: #FFDFDE;
}
#a0019 h2{
font-family: Playfair Display;
font-size: 36px;
line-height: 42px;
text-align: center;
color: #454545;
margin-bottom: 20px;
}
#a0019 p{
font-family: Montserrat;
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 22px;
text-align: center;
color: #454545;
max-width: 1080px;
display: block;
margin: auto;
}
#a0019 .wa_b2{
background: #FFFFFF;
border: 1px solid #B44D50;
box-sizing: border-box;
border-radius: 5px;
font-family: Playfair Display;
font-size: 24px;
line-height: 28px;
display: block;
margin: auto;
text-align: center;
color: #B44D50;
max-width: 360px;
width: 100%;
padding: 10px 10px;
margin-top: 40px;
}
/* A0019 END -------------------------------------*/Code Only (Without ACF Integration)
HTML
<!-- A0019 -- START ------------------------------>
<section id="a0019">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Header</h2>
<p></p><p>Text.</p>
<p></p>
<a href="/" target="_blank">
<div class="wa_b2">text</div>
</a>
</div>
</div>
</div>
</section>
<!-- A0019 -- END ------------------------------>CSS
/* A0019 Start -----------------------------------*/
#a0019{
padding: 40px 0px;
background: #FFDFDE;
}
#a0019 h2{
font-family: Playfair Display;
font-size: 36px;
line-height: 42px;
text-align: center;
color: #454545;
margin-bottom: 20px;
}
#a0019 p{
font-family: Montserrat;
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 22px;
text-align: center;
color: #454545;
max-width: 1080px;
display: block;
margin: auto;
}
#a0019 .wa_b2{
background: #FFFFFF;
border: 1px solid #B44D50;
box-sizing: border-box;
border-radius: 5px;
font-family: Playfair Display;
font-size: 24px;
line-height: 28px;
display: block;
margin: auto;
text-align: center;
color: #B44D50;
max-width: 360px;
width: 100%;
padding: 10px 10px;
margin-top: 40px;
}
/* A0019 END -------------------------------------*/A0055
Code With ACF Integration
HTML
<!-- a0055 -------------------------------------->
<?php if (have_rows('a0055')) : ?>
<section class="a0055">
<div class="container">
<div class="row">
<div class="col-12">
<div class="a0055-grid">
<?php while (have_rows('a0055')) : the_row(); ?>
<div><a href="<?= get_sub_field('button_url') ?>"><?= get_sub_field('button_text') ?></a></div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
</section>
<?php endif; ?>
<!-- a0055 End ----------------------------------->CSS
/* A0055 -------------------------------------------*/
.a0055{
margin-top: 30px;
margin-bottom: 30px;
}
.a0055-grid{
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
.a0055 a{
display: block;
padding: 14px 0px;
margin: auto;
text-decoration: none;
background: #1E74DE;
border-radius: 30px;
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 29px;
text-align: center;
color: #FFFFFF;
}
@media (max-width: 768px) {
.a0055-grid {
grid-template-columns: 1fr;
}
}
/* A0055 END ---------------------------------------*/
