Button and Text
BCCD
Code Only (Without ACF Integration)
HTML
<!-- BCCD -----------------------------------------------> <section class="wa_bccd"> <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-5 mt-4"> <div class="wa_bccd_b"> <div class="wa_bccd_b_i"> <h2>Security Assessment</h2> <p>A Security Assessment is an ideal way to evaluate your existing security operations and the first step towards planning security measures at your facility.</p> <a href="#"> <div class="wa_bccd_b_i_b"> Get a quote </div> </a> </div> </div> </div> <div class="col-12 col-md-6 col-lg-7 mt-4"> <h2>Security Solutions For Your Business</h2> <p>KRASKO Security is a leading security systems company based in Toronto. We specialize in planning and design, installation, repair and maintenance of full range security systems for business & commercial properties, residential buildings and industrial facilities throughout GTA.</p> <p>KRASKO is known for the best, specialized and uniquely developed electronic and physical security solutions including access control and management systems, intercom and telephone entry systems, alarm systems, security cameras and video surveillance systems.</p> <p>As one of Toronto leading security companies, our experts at KRASKO Security will help you design and install the most comprehensive and cost-effective business security system, guaranteed to secure potential points of weakness and to meet your specific requirements</p> </div> </div> </div> </section> <!-- BCCD End ------------------------------------------->
CSS
/*-- BCCD -----------------------------------------------*/ .wa_bccd{ } .wa_bccd a:link, .wa_bccd a:visited, .wa_bccd a:active, .wa_bccd a:hover{ color: #FFF; } .wa_bccd_b{ background-image: url(../images/com_box_top.jpg); border-radius: 5px; background-repeat: no-repeat; background-position: bottom; padding: 25px; background-color: #f37948; } .wa_bccd_b_i{ padding: 25px; border: solid 2px #FFF; border-radius: 5px; color: #FFF; text-align: center; } .wa_bccd_b_i p{ color: #FFF; margin-top: 30px; font-size: 1.3em; } .wa_bccd_b_i h2{ color: #FFF; font-size: 1.9em; font-weight: 600; } .wa_bccd_b_i_b{ padding: 10px 20px; background-color: #383838; border-radius: 5px; margin-top: 40px; margin-left: auto; margin-right: auto; text-transform: uppercase; font-size: 1.4em; } .wa_bccd_b_i_b:hover{ background-color: #0066b3; } /*-- BCCD End -------------------------------------------*/
BCAQ - Body Content Quote Block
Code Only (Without ACF Integration)
HTML
<!-- BCAQ -- Body Content Quote Block -----------------------> <span class="wa_bcaq"> <div class="container"> <div class="row"> <div class="col-12 mt-4"> <div class="wa_bcaq_w"> <div class="row"> <div class="col-12 col-md"> <p>To hear more about these and many other features, contact us today at (647) 896-5540 for a free, no-obligation commercial security consultation and estimate.</p> </div> <div class="col-12 col-md-auto"> <!-- B1 --><a href="#" target="_blank"><div class="wa_bcaq_btn">GET A QUOTE</div></a><!-- B1 End --> </div> </div> </div> </div> </div> </div> </span> <!-- BCAQ END ------------------------------------->
CSS
/* -- BCAQ -- Body Content Request Quote ------------------*/ .wa_bcaq_w{ background-color: #ef5a28; padding: 30px; } .wa_bcaq_w p{ color: #FFF; font-size: 1.4em; } .wa_bcaq_btn{ padding: 10px 40px; color: #FFF; background-color: #292929; border-radius: 5px; font-weight: 600; width: fit-content; font-size: 1.5em; margin-top: 20px; } .wa_bcaq_btn:hover{ background-color: #2584d1; } /* -- BCAQ END --------------------------------------------*/
A0080
Code With ACF Integration
HTML
<!-- A0080 -- START ------------------------------> <?php if ( have_rows( 'a0080' ) ) : ?> <?php while ( have_rows( 'a0080' ) ) : the_row();?> <section id="a0080"> <div class="container"> <div class="row"> <div class="col-12"> <h2><?php echo get_sub_field('header'); ?></h2> <div class="a0080-line"></div> <div class="a0080-text"><?php echo get_sub_field('text'); ?></div> <a href="<?php echo get_sub_field('button_url'); ?>" class="a0080-btn"><?php echo get_sub_field('button_text'); ?></a> </div> </div> </div> </section> <?php endwhile; ?> <?php endif; ?> <!-- A0080 -- END ------------------------------>
CSS
/* A0080 Start -----------------------------------*/ .a0080-line{ height: 1px; background: #211C19; max-width: 350px; margin: auto; margin-top: 13px; margin-bottom: 13px; } #a0080{ padding: 30px 0px; } #a0080 h2{ font-family: Antonio; font-style: normal; font-weight: normal; font-size: 48px; line-height: 69px; text-align: center; color: #211C19; } .a0080-text{ font-family: Source Sans Pro; font-style: normal; font-weight: normal; font-size: 18px; line-height: 23px; text-align: center; color: #211C19; max-width: 787px; margin: auto; } .a0080-btn{ background: linear-gradient( 0deg, #CDA341 -93.75%, #F3D472 198.21%); box-shadow: 0px 4px 4px rgb(0 0 0 / 25%); font-family: Antonio; font-style: normal; font-weight: normal; font-size: 36px; line-height: 52px; text-align: center; text-transform: uppercase; color: #211C19 !important; padding: 5px; max-width: 500px; width: 100%; display: block; margin: auto; } @media (max-width: 576px) { .a0080-btn { font-size: 26px; } #a0080 h2 { font-size: 38px; line-height: 55px; } } /* A0080 END -------------------------------------*/