Text Over Background Image
bc3
Code Only (Without ACF Integration)
HTML
<!-- BC3 Content Blcok 3 -----------------------------------------------> <section class="wa_b3"> <div class="container"> <div class="row"> <div class="col-12 mt-4"> <h2>Project Overview</h2> </div> <div class="col-12 col-md-4 mt-4 wa_b3_txt"> <h3>Preliminary Plans</h3> 135 two-bedroom units<br> 15 three-bedroom units<br> 3 one story building structures </div> <div class="col-12 col-md-4 mt-4 wa_b3_txt"> <h3>Apartment Amenities</h3> Attached Garage<br> Modern Kitchens Equipped with and Island<br> Quartz Counter Tops<br> Peaked Ceilings<br> Dining Alcoves<br> Cable TV Included<br> Large Rear Patio<br> Stainless Steel Appliances<br> Spacious Floor Plans<br> Smoke-Free Living<br> Individual Heat & Central Air Conditioning<br> Inteernet<br> In-Unit Washer & Dryer </div> <div class="col-12 col-md-4 mt-4 wa_b3_txt"> <h3>Community Features</h3> Heated Swimming Pool<br> Pool House<br> Club House<br> On-Site Maintenance<br> Kids Playground<br> 24-Hour Fitness Center<br> Running / Biking Path<br> Possible Dog Park </div> </div> </div> </section> <!-- BC3 End ----------------------------------------------------------->
CSS
/* BC3 Start --------------------*/
.wa_b3{
background-image: url(../images/trnsp_bgrd_n.jpg);
background-position-x: center;
background-repeat: no-repeat;
padding-bottom: 70px;
padding-top: 30px;
background-color: #FFF;
border-bottom: solid 5px #8a8a8a
}
.wa_b3 h2{
color: #626262;
text-align: center;
}
.wa_b3 h3{
color: #F05A29;
font-weight: bold;
font-size: 1.6em;
}
.wa_b3_txt{
font-weight: 500;
text-align: center;
}
@media (min-width: 768px) {
.wa_b3 h3, .wa_b3_txt{
text-align: left;
}
}
/* BC3 END --------------------*/A0001
Code With ACF Integration
HTML
<!-- A0001 -- Start ------------------------------>
<?php if ( have_rows( 'a0001' ) ) : ?>
<?php while ( have_rows( 'a0001' ) ) : the_row();?>
<section class="a0001" style="background-image: url('<?php echo get_sub_field('background_image'); ?>')">
<div class="container">
<div class="row">
<div class="col-12 mt-4">
<h1><?php echo get_sub_field('header'); ?></h1>
<p><?php echo get_sub_field('paragraph'); ?></p>
</div>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<!-- A0001 -- END ------------------------------>CSS
/* -- A0001 -- Start ------------------------------ */
.a0001{
background-position-y: bottom;
background-size: contain;
background-position-x: center;
border-bottom: solid 5px #d2ab67;
padding-bottom: 20px;
background-repeat: repeat-x;
}
.a0001 h1{
color: #00793c;
font-family: 'Libre Baskerville', serif;
font-size: 1.9em;
font-weight: 900;
text-align: center;
}
/* -- A0001 -- END ------------------------------ */Code Only (Without ACF Integration)
HTML
<!-- A0001 -- Start ------------------------------>
<section class="a0001" style="background-image: url('img/img_url.jpg')">
<div class="container">
<div class="row">
<div class="col-12 mt-4">
<h1>Header here</h1>
<p>Text here</p>
</div>
</div>
</div>
</section>
<!-- A0001 -- END ------------------------------>CSS
/* -- A0001 -- Start ------------------------------ */
.a0001{
background-position-y: bottom;
background-size: contain;
background-position-x: center;
border-bottom: solid 5px #d2ab67;
padding-bottom: 20px;
background-repeat: repeat-x;
}
.a0001 h1{
color: #00793c;
font-family: 'Libre Baskerville', serif;
font-size: 1.9em;
font-weight: 900;
text-align: center;
}
/* -- A0001 -- END ------------------------------ */Background repeats x, but it can be configured with CSS
bc6
Code Only (Without ACF Integration)
HTML
<!-- BC6 ----------------------------------------> <section class="wa_bc6 pt-4"> <div class="container"> <div class="row"> <div class="col-12 col-lg"> <div class="wa_bc6_im wa_bc6_1"><!-- Modify --> <div class="wa_bc6_txt"> <h2>FORD TRANSIT 350<br><b>15 PASSENGER</b> VAN</h2> <p>Going on a kids' team road trip? Need a vehicle to get around town with a large family or group? A full size, 15 passenger van is the most convenient choice and is a great alternative to renting a bus.</p> </div> </div> </div> <div class="col-12 d-block d-lg-none"> <img src="<?php echo $tmp_dir; ?>1_ford.png"> </div> </div> <div class="row"> <div class="col-12 col-lg"> <div class="wa_bc6_im wa_bc6_2"><!-- Modify --> <div class="wa_bc6_txt"> <h2>CHRYSLER TOWN AND COUNTRY<br><b>6 PASSENGER</b> VAN</h2> <p>More spacious than a full-size car a minivan is a 6-passenger van that provides unbeatable comfort and convenience. By providing leg and luggage room, configurable seating and storage layouts, easy in-and-out, competitive fuel efficiency, and high performance drive—all without sacrificing style—minivans accommodate every kind of group outing, from lengthy family vacations to quick business trips.</p> </div> </div> </div> <div class="col-12 d-block d-lg-none"> <img src="<?php echo $tmp_dir; ?>2_chrysler.png"> </div> </div> <div class="row"> <div class="col-12 col-lg"> <div class="wa_bc6_im wa_bc6_3"><!-- Modify --> <div class="wa_bc6_txt"> <h2>LINCOLN MKX<br><b>5 PASSENGER</b> SUV</h2> <p>Our 5 Passenger Lincoln MKT is a spacious vehicle great to fulfill the transportation needs of corporate and entertainment groups, as well as those out for a stellar night out on the town or a day tour of in the area. Added to our fleet to for our customers to feel the difference, Lincoln MKT 5 Passenger impresses the customers with its outstanding interior. To book this vehicle please call 717-401-5450.</p> </div> </div> </div> <div class="col-12 d-block d-lg-none"> <img src="<?php echo $tmp_dir; ?>3_lincoln.png"> </div> </div> </div> </section> <!-- BC6 END ---------------------------------------->
CSS
/*-- BC6 ----------------------------------------*/
.wa_bc6{
background-color: #F1F1F2;
padding-bottom: 20px;
}
.wa_bc6 h2{
color: #777;
}
.wa_bc6 h2 b{
color: #000;
}
.wa_bc6 p{
font-size: 1.1em;
margin-bottom: 0;
}
.wa_bc6 .row{
border-bottom: solid 2px #828282;
margin-bottom: 20px;
}
.wa_bc6_im{
}
.wa_bc6_txt{
padding-bottom: 30px;
}
@media (min-width: 992px) {
.wa_bc6_txt{
width: 350px;
}
.wa_bc6_im{
background-position-y: bottom;
background-repeat: no-repeat;
background-position-x: right;
min-height: 350px;
}
.wa_bc6_1{
background-image: url(../images/1_ford.png);
}
.wa_bc6_2{
background-image: url(../images/2_chrysler.png);
}
.wa_bc6_3{
background-image: url(../images/3_lincoln.png);
}
}
@media (min-width: 1200px) {
.wa_bc6_txt{
width: 500px;
}
}
/*-- BC6 END ------------------------------------*/Need to create Visio Stencil
