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 ---------------------------------------*/