Current version: 1.3.0 Download CSS
Please follow the folder structure below when incorporating the style guide in your directory.
css/
└── style-guide-1.0.0.css
fonts/
├── fontawesome-webfont.eot
├── fontawesome-webfont.svg
├── fontawesome-webfont.ttf
├── fontawesome-webfont.woff
└── fontawesome-webfont.woff2All iconography is provided by the Font Awesome library. The following are some examples, to view the complete library and documentation visit the Font Awesome website.
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<i class="fa fa-arrow-right" aria-hidden="true"></i>
<i class="fa fa-arrow-down" aria-hidden="true"></i>
<i class="fa fa-arrow-left" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-up" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i><h2 class="open">Open Sans</h2>
<h2 class="kreon">Kreon</h2>font-family: 'Open Sans', sans-serif;
font-family: 'Kreon', serif;<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h2 class="text-left">Left Heading</h2>
<h2 class="text-center">Center Heading</h2>
<h2 class="text-right">Right Heading</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<p>Content Example.</p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<blockquote>Content Example.</blockquote><ul class="ul">
<li>...</li>
</ul><ol class="ol">
<li>...</li>
</ol><ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Parent Page</a></li>
<li class="active">Active Page</li>
</ol><nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true"><i class="fa fa-caret-left" aria-hidden="true"></i> Prev</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">Next <i class="fa fa-caret-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
</nav><button class="btn btn-brand">Brand Button</button>
<button class="btn btn-brand">Brand Button with Icon <i class="fa fa-chevron-right"></i></button>
<button class="btn btn-brand btn-lg">Large Brand Button</button>
<button class="btn btn-brand btn-lg">Large Brand Button with Icon <i class="fa fa-chevron-right"></i></button>Info: You can apply these classes to other elements like <a> tags.
<div class="component pinned-buttons container">
<a href="#" class="btn btn-default btn-left">Call: (123) 123-1234 <i class="icon icon-right fa fa-phone"></i></a>
<a href="#" class="btn btn-default btn-right"><i class="icon icon-left fa fa-comment-o"></i> How Can We Help You?</a>
</div><form class="brand-form">
<h2 class="form-title">Form Title</h2>
<hr/>
<h3 class="form-subtitle">Selected Coverage</h3>
<div class="menu-item">
<div class="text">HomeGuard(1,500-1,999) <span class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="Information text example."></span></div>
<div class="number">$55</div>
</div>
<hr/>
<div class="form-group">
<label for="text-example">Text Example</label>
<input type="text" class="form-control" id="text-example">
</div>
<hr/>
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> <span class="text">Monthly Price</span>
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span class="text">Annual Price</span>
</label>
</div>
<hr/>
<button type="submit" class="btn btn-brand">Submit</button>
</form><form class="brand-form grey-form">
<h2 class="form-title">Form Title</h2>
<hr/>
<address>
432 S. Farmer Ave.<br/>
Tempe, AZ 85281
</address>
<h3 class="form-subtitle">Selected Coverage</h3>
<div class="menu-item">
<div class="text">HomeGuard(1,500-1,999) <span class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="Information text example."></span></div>
<div class="number">$55</div>
</div>
<hr/>
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> <span class="text">Monthly Price</span>
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span class="text">Annual Price</span>
</label>
</div>
<div class="menu-item">
<div class="text">Monthly Price</div>
<div class="number">$55</div>
</div>
<div class="menu-item">
<div class="text">First Payment</div>
<div class="number">$55</div>
</div>
<hr/>
<h3 class="form-subtitle">Promo Code</h3>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-brand">Update</button>
</div>
</div>
<hr/>
<button type="submit" class="btn btn-brand">Submit</button>
</form><form class="brand-form blue-form">
<h2 class="form-title">Form Title</h2>
<hr/>
<p>Form content example.</p>
<hr/>
<p><strong>Bold Form content example.</strong></p>
<br/>
<div class="form-group">
<label for="text-example">Text Example</label>
<input type="text" class="form-control" id="text-example">
</div>
<div class="form-group">
<label for="select-example">Select Example</label>
<select id="select-example" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1" checked> <span class="text">Checkbox 1</span>
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> <span class="text">Checkbox 2</span>
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> <span class="text">Checkbox 3</span>
</label>
</div>
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> <span class="text">Radio 1</span>
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span class="text">Radio 2</span>
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> <span class="text">Radio 3</span>
</label>
</div>
<button type="submit" class="btn btn-brand">Submit</button>
</form><div class="component masthead">
<style type="text/css" scoped>
@media only screen and (min-width: 1px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-xs-wood.jpg');
}
}
@media only screen and (min-width: 768px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-sm-wood.jpg');
}
}
@media only screen and (min-width: 992px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-md-wood.jpg');
}
}
@media only screen and (min-width: 1200px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-lg-wood.jpg');
}
}
</style>
<div class="masthead-wrap">
<div class="bg"></div>
</div>Subtitle example
<div class="component masthead w-content">
<style type="text/css" scoped>
@media only screen and (min-width: 1px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-xs-wood.jpg');
}
}
@media only screen and (min-width: 768px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-sm-wood.jpg');
}
}
@media only screen and (min-width: 992px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-md-wood.jpg');
}
}
@media only screen and (min-width: 1200px) {
.masthead-wrap .bg{
background-image: url('https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/style-guide/masthead-lg-wood.jpg');
}
}
</style>
<div class="masthead-content">
<h1 class="masthead-title">This is a <strong>title</strong> example</h1>
<p class="masthead-subtitle">
<span>Subtitle example</span>
</p>
</div>
<div class="masthead-wrap">
<div class="bg"></div>
</div>
</div><div class="component quote">
<div class="quote-wrap">
<div class="container">
<div class="quote-content">
<div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</div>
<div class="author">Happy Customer</div>
</div>
</div>
</div>
</div><div class="component quote quote-grass">
<div class="quote-wrap">
<div class="container">
<div class="quote-content">
<div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</div>
<div class="author">Happy Customer</div>
</div>
</div>
<div class="bg"></div>
</div>
</div><div class="component bubble bubble-horizontal">
<div class="image">
<img src="https://placehold.it/150x150?text=Image" alt="">
</div>
<div class="content">
<h4 class="title">Lorem Ipsum</h4>
<div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</div>
</div>
</div><div class="component bubble bubble-vertical">
<div class="image">
<img src="https://placehold.it/250x250?text=Image" alt="">
</div>
<div class="content">
<h4 class="title">Lorem Ipsum Dolor</h4>
<div class="text">Consetetur sadipscing elitr</div>
<a href="#" class="link">example@email.com</a>
</div>
</div><div class="component bubble bubble-vertical bubble-lg">
<div class="image">
<img src="https://placehold.it/300x300?text=Image" alt="">
</div>
<div class="content">
<div class="text">Consetetur sadipscing elitr eirmod tempor invidunt ut labore et dolore.</div>
<a href="#" class="link">Ipsum dolor sit amet</a>
</div>
</div>
ApplianceGuard
Starting at
$29/month ($372 yearly) |
SystemGuard
Starting at
$43/month ($480 yearly) |
Best Value
HomeGuard
Starting at
$54/month ($660 yearly) |
|---|
| Plan Overview |
|
|
|
| Service Call Fee | $69 | $69 | $69 |
| Plan Details | Lorem ipsum dolor sit amet, consetetur sadipscing elitr. | Lorem ipsum dolor sit amet, consetetur sadipscing elitr. | Lorem ipsum dolor sit amet, consetetur sadipscing elitr. |
|
Item
|
| Item 2 |
| Item 3
|
| Item 4 |
|
Item
|
<div class="component plan-table">
<div class="table-responsive">
<div class="table-wrap">
<!-- HEADER SECTIONS -->
<div class="table-header-wrap">
<table class="table table-header">
<tr>
<th class="row-title no-border"></th>
<th class="plan-name text-center lvl-1">
<h3 class="plan-title color-green">ApplianceGuard</h3>
<div class="plan-price">
<strong>Starting at</strong><br/>
<span class="price">$29/month</span><br/>
($372 yearly)
</div>
</th>
<th class="plan-name text-center lvl-2">
<h3 class="plan-title color-blue">SystemGuard</h3>
<div class="plan-price">
<strong>Starting at</strong><br/>
<span class="price">$43/month</span><br/>
($480 yearly)
</div>
</th>
<th class="plan-name text-center lvl-3">
<div class="sticker">Best Value</div>
<h3 class="plan-title color-red">HomeGuard</h3>
<div class="plan-price">
<strong>Starting at</strong><br/>
<span class="price">$54/month</span><br/>
($660 yearly)
</div>
</th>
</tr>
</table>
</div>
<!-- OVERVIEW SECTIONS -->
<table class="table table-overview">
<tr>
<td class="row-title">Plan Overview</td>
<td>
<ul>
<li>Covers Appliances</li>
<li>Includes Home Maintenance Services</li>
</ul>
<a href="#">Download Sample Contract</a>
</td>
<td>
<ul>
<li>Covers Systems</li>
<li>Covers Home Maintenance Services including A/C Tune-ups</li>
</ul>
<a href="#">Download Sample Contract</a>
</td>
<td>
<ul>
<li>Covers Systems</li>
<li>Covers Appliances</li>
<li>Covers Home Maintenance Services including A/C Tune-ups</li>
</ul>
<a href="#">Download Sample Contract</a>
</td>
</tr>
<tr>
<td class="row-title">Service Call Fee</td>
<td class="lg-text text-center">$69</td>
<td class="lg-text text-center">$69</td>
<td class="lg-text text-center">$69</td>
</tr>
<tr>
<td class="row-title">Plan Details</td>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
</tr>
</table>
<!-- ITEM SECTIONS -->
<h2>Appliances</h2>
<table class="table table-item">
<tr>
<td class="row-title">
Item
<div class="info-toggle" data-toggle="collapse" data-target="#item1Collapse">
<span class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="Show/Hide details"></span>
</div>
</td>
<td class="lvl-1">
<span class="circle circle-green"></span>
</td>
<td class="lvl-2"></td>
<td class="lvl-3"></td>
</tr>
</table>
<div class="item-info collapse" id="item1Collapse">
<div class="info-wrap">
<button type="button" class="close collapse-close" data-close="#item1Collapse" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="info-title">Item Name Information</h3>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#item1-covered" aria-controls="item1-covered" role="tab" data-toggle="tab">What's Covered</a></li>
<li role="presentation"><a href="#item1-not-covered" aria-controls="item1-not-covered" role="tab" data-toggle="tab">What's Not Covered</a></li>
<li role="presentation"><a href="#item1-limits" aria-controls="item1-limits" role="tab" data-toggle="tab">Limits</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="item1-covered">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div role="tabpanel" class="tab-pane fade" id="item1-not-covered">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div role="tabpanel" class="tab-pane fade" id="item1-limits">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
</div>
<table class="table table-item">
<tr>
<td class="row-title">Item 2</td>
<td class="lvl-1">
<span class="circle circle-green"></span>
</td>
<td class="lvl-2">
<span class="circle circle-blue"></span>
</td>
<td class="lvl-3"></td>
</tr>
</table>
<table class="table table-item">
<tr>
<td class="row-title">Item 3
<div class="info-toggle" data-toggle="collapse" data-target="#item3Collapse">
<span class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="Show/Hide details"></span>
</div>
</td>
<td class="lvl-1">
</td>
<td class="lvl-2">
<span class="circle circle-blue"></span>
</td>
<td class="lvl-3"></td>
</tr>
</table>
<div class="item-info collapse" id="item3Collapse">
<div class="info-wrap">
<button type="button" class="close collapse-close" data-close="#item3Collapse" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="info-title">Item Name Information</h3>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#item1-covered" aria-controls="item3-covered" role="tab" data-toggle="tab">What's Covered</a></li>
<li role="presentation"><a href="#item1-not-covered" aria-controls="item3-not-covered" role="tab" data-toggle="tab">What's Not Covered</a></li>
<li role="presentation"><a href="#item1-limits" aria-controls="item3-limits" role="tab" data-toggle="tab">Limits</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="item3-covered">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div role="tabpanel" class="tab-pane fade" id="item3-not-covered">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div role="tabpanel" class="tab-pane fade" id="item3-limits">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
</div>
<table class="table table-item">
<tr>
<td class="row-title">Item 4</td>
<td class="lvl-1">
<span class="circle circle-green"></span>
</td>
<td class="lvl-2"></td>
<td class="lvl-3">
<span class="circle circle-red"></span>
</td>
</tr>
</table>
<h2>Services</h2>
<table class="table table-item">
<tr>
<td class="row-title">
Item
<div class="info-toggle" data-toggle="collapse" data-target="#item5Collapse">
<span class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="Show/Hide details"></span>
</div>
</td>
<td class="lvl-1">
<span class="circle circle-green"></span>
</td>
<td class="lvl-2"></td>
<td class="lvl-3"></td>
</tr>
</table>
<div class="item-info collapse" id="item5Collapse">
<div class="info-wrap">
<button type="button" class="close collapse-close" data-close="#item5Collapse" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="info-title">Item Name Information</h3>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#item5-covered" aria-controls="item5-covered" role="tab" data-toggle="tab">What's Covered</a></li>
<li role="presentation"><a href="#item5-not-covered" aria-controls="item5-not-covered" role="tab" data-toggle="tab">What's Not Covered</a></li>
<li role="presentation"><a href="#item5-limits" aria-controls="item5-limits" role="tab" data-toggle="tab">Limits</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="item5-covered">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div role="tabpanel" class="tab-pane fade" id="item5-not-covered">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div role="tabpanel" class="tab-pane fade" id="item5-limits">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
</div>
<form class="brand-form table-form-wrap">
<table class="table table-form">
<tr>
<td class="row-title">
Choose Plan
</td>
<td class="lvl-1 text-center">
<div class="form-group">
<label class="radio-inline">
Select ApplianceGuard<br/>
<input type="radio" name="inlineRadioOptions" id="planRadio1" value="appliance"> <span class="text"></span>
</label>
</div>
</td>
<td class="lvl-2 text-center">
<div class="form-group">
<label class="radio-inline">
Select SystemGuard<br/>
<input type="radio" name="inlineRadioOptions" id="planRadio2" value="system"> <span class="text"></span>
</label>
</div>
</td>
<td class="lvl-3 text-center">
<div class="form-group">
<label class="radio-inline">
Select HomeGuard<br/>
<input type="radio" name="inlineRadioOptions" id="planRadio3" value="home"> <span class="text"></span>
</label>
</div>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>@media only screen and (min-width: @screen-sm-min) {
.component.plan-table{
.table-wrap{
position: relative;
padding-bottom: 88px;
.table-header-wrap{
width: calc(@container-sm - 30px);
}
&.sticky-header-top{
padding-top: 165px;
.table-header-wrap {
position: fixed;
z-index: 2;
top: 0;
}
}
&.sticky-header-bottom{
.table-header-wrap {
position: absolute;
top: initial;
bottom: 0;
}
}
.table-form-wrap {
width: calc(@container-sm - 30px);
position: fixed;
bottom: -100px;
transition: bottom .3s ease;
}
&.sticky-form-top{
.table-form-wrap {
bottom: 0;
}
}
&.sticky-form-bottom{
padding-bottom: 0;
.table-form-wrap {
position: relative;
bottom: 0;
}
}
}
}
}
@media only screen and (min-width: @screen-md-min) {
.component.plan-table{
.table-wrap{
.table-header-wrap{
width: calc(@container-md - 30px);
}
.table-form-wrap {
width: calc(@container-md - 30px);
}
}
}
}
@media only screen and (min-width: @screen-lg-min) {
.component.plan-table{
.table-wrap{
.table-header-wrap{
width: calc(@container-lg - 30px);
}
.table-form-wrap {
width: calc(@container-lg - 30px);
}
}
}
}
@media only screen and (min-width: @screen-xl-min) {
.component.plan-table{
.table-wrap{
.table-header-wrap{
width: calc(@container-xl - 30px);
}
.table-form-wrap {
width: calc(@container-xl - 30px);
}
}
}
}// Sticky functionality
var $table_wrap = $('.component.plan-table .table-wrap'),
$table_form_wrap = $('.table-form-wrap'),
sm_offset = 15334,
md_offset = 14682,
lg_offset = 14487,
xl_offset = 14414;
// Check responsive breakpoint
$.media_is = function ( className ) {
var class_string = '',
$item,
visible;
var stringcheck = function(item) {
var allowed = ['xs', 'sm', 'md', 'lg'];
if(allowed.indexOf(item) === -1) {
console.warn('$.media_is: The string you passed ("' + item + '") does not match one of [' + allowed.join(',') + '], which are the bootstrap default screen sizes. Unless you have created a .visible-' + item + '-block class in your styles, this will likely return a false positive.');
console.trace();
}
};
if ( className instanceof Array ) {
className.forEach( function ( el, index ) {
if(typeof el === 'string') {
stringcheck(el);
class_string += 'visible-' + el.trim() + '-block ';
}
else {
console.error('$.media_is: Index ' + index + ' of your array must be a string. You passed in ' + typeof el + '.');
}
} )
}
else if ( arguments.length > 1 ) {
[].slice.call( arguments ).forEach( function ( el ) {
if ( typeof el === 'string' ) {
stringcheck( el );
class_string += 'visible-' + el.trim() + '-block ';
}
else {
console.error( '$.media_is: ' + [].slice.call( arguments ).join( ', ' ) + ' cannot be used in this method because it is of type ' + typeof className );
return false;
}
} );
}
else if ( typeof className === 'string' ) {
stringcheck(className);
class_string += 'visible-' + className + '-block';
}
else {
console.error( '$.media_is: ' + [].slice.call( arguments ).join( ', ' ) + ' cannot be used in this method because it is of type ' + typeof className + '.
You may use a string only.');
return false;
}
$item = $( '<div class="' + class_string + '"></div>' );
$( 'body' ).append( $item );
visible = ($item.css( 'display' ) != 'none');
$item.remove();
return visible;
};
// Sticky header and form function
function sticky_table(trigger){
var top_offset;
// Check responsive layout
if( $.media_is('sm') ) {
top_offset = sm_offset;
} else if( $.media_is('md') ){
top_offset = md_offset;
} else if( $.media_is('lg') ){
top_offset = lg_offset;
} else if( $.media_is('xl') ){
top_offset = xl_offset;
}
// Sticky Header Top & Sticky Form Top
if (trigger.scrollTop() > top_offset) {
$table_wrap.addClass('sticky-header-top sticky-form-top');
} else {
$table_wrap.removeClass('sticky-header-top sticky-form-top');
}
// Sticky Header Bottom
if (trigger.scrollTop() > top_offset + $table_wrap.outerHeight(true) - $table_wrap.find('.table-header-wrap').outerHeight(true)) {
$table_wrap.addClass('sticky-header-bottom');
} else {
$table_wrap.removeClass('sticky-header-bottom');
}
// Sticky Form Bottom
if (trigger.scrollTop() > (top_offset + $table_wrap.outerHeight(true) - $window.height())) {
$table_wrap.addClass('sticky-form-bottom');
}else{
$table_wrap.removeClass('sticky-form-bottom');
}
}
// Execute on load and on scroll.
sticky_table( $window );
$window.scroll(function(){
sticky_table( $(this) );
});<div class="component add-on-table">
<div class="table-wrap">
<form class="brand-form">
<h2>Optional Add-Ons</h2>
<table class="table table-item">
<tr>
<td class="add-on">
Add-On 1
<div class="info-toggle" data-toggle="collapse" data-target="#addOn1Collapse">
<span class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="Show/Hide details"></span>
</div>
</td>
<td class="price">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="addOn1" value="20"> <span class="text">$20</span>
</label>
</div>
</td>
</tr>
</table>
<div class="item-info collapse" id="addOn1Collapse">
<div class="info-wrap">
<button type="button" class="close collapse-close" data-close="#addOn1Collapse" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="info-title">Item Name Information</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<table class="table table-item">
<tr>
<td class="add-on">
Add-On 2
</td>
<td class="price">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="addOn2" value="20"> <span class="text">$20</span>
</label>
</div>
</td>
</tr>
</table>
<table class="table table-item">
<tr>
<td class="add-on">
Add-On 3
</td>
<td class="price">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="addOn3" value="20"> <span class="text">$20</span>
</label>
</div>
</td>
</tr>
</table>
</form>
</div>
</div>The header is a full-width component, meaning it needs to be outside of the non-fluid bootstrap container. There's 2 major features with the header, the location finder that targets by IP and the responsive menu itself.
<div id="header-sg" itemscope="" itemtype="http://schema.org/WPHeader">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">What state do you live in?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="select-state-modal">State</label>
<select class="select-state-modal form-control" id="select-state-modal">
<option value="Arizona">Arizona</option>
<option value="Texas">Texas</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="update-location-modal-btn">Update
</button>
</div>
</div>
</div>
</div>
<header class="l-header " id="">
<div id="header-top-section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div id="ip-header">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/location_pin.png">
YOUR HOME IS IN: <span id="user-location-header">Arizona</span>
<span id="select-state-header-link">
<a href="#" data-toggle="modal" data-target="#myModal" id="state-status-link">Change State</a>
</span>
</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="visible-md visible-lg top-section-nav">
<ul>
<li>
<a href="#">Request Service</a>
<span class="vertical-line">|</span>
<a href="#">Login</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="header-bottom-section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3 main-mobile-header">
<div class="row">
<div class="mobile-menu visible-xs visible-sm col-xs-3">
<button class="mobile-hamburger-btn">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/mobile-nav-icon.png" alt="Mobile Hamburger Icon" class="hamburger-icon">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/close-mobile-icon.png" alt="Close Mobile Menu Icon" class="hamburger-icon-close">
</button>
</div>
<div class="logo-wrap col-xs-6 center">
<a href="https://www.oneguardhomewarranty.com">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/logo.png" alt="OneGuard Logo">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="visible-xs visible-sm login-header-btn">Login</a>
</div>
</div>
</div>
<div class="col-xs-12 visible-xs visible-sm border-bottom-wt" id="mobile-sub-header">
<div class="row">
<div class="col-xs-6 background-lt-grey border-right-wt center">
<a href="#" class="btn btn-header">Request Service</a>
</div>
<div class="col-xs-6 background-lt-grey border-left-wt center">
<a href="tel:888.896.0014" class="phone-link btn btn-header">
888.896.0014
</a>
</div>
</div>
</div>
<!--============================================================================
MOBILE / DESKTOP NAV
=============================================================================-->
<nav class="col-xs-12 col-md-9 nav-container">
<div class="visible-xs visible-sm" id="mobile-nav">
<div class="row">
<div class="col-xs-12 mobile-top-wrap">
<ul>
<li class="mobile-link">
<a href="https://www.oneguardhomewarranty.com/why-oneguard/">Why OneGuard</a>
</li>
<li class="border-bottom-wt"></li>
<li class="mobile-link">
<a href="#">Warranty & Service Plans</a>
</li>
<li class="border-bottom-wt"></li>
<li class="mobile-link">
<a href="#">Get An Instant Quote</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 mobile-bottom-wrap">
<ul>
<li class="mobile-link">
<a href="#">Request Service</a>
</li>
<li class="border-bottom-wt"></li>
<li class="mobile-link">
<a href="#">Login</a>
</li>
<li class="border-bottom-wt"></li>
<li class="mobile-link">
<a href="https://www.oneguardhomewarranty.com/real-estate-agents/">Real Estate Agents</a>
</li>
<li class="border-bottom-wt"></li>
<li class="mobile-link">
<a href="https://www.oneguardhomewarranty.com/contractors/">Contractors</a>
</li>
<li class="border-bottom-wt"></li>
<li class="mobile-link">
<a href="https://www.oneguardhomewarranty.com/contact/">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm" id="desktop-nav">
<div class="main-navigation-top-wrap">
<ul id="main-navigation-top">
<li>
<a href="https://www.oneguardhomewarranty.com/real-estate-agents/">Real Estate Agents</a>
</li>
<li>
<a href="https://www.oneguardhomewarranty.com/contractors/">Contractors</a>
</li>
</ul>
</div>
<div class="main-navigation-bottom-wrap">
<ul id="main-navigation-bottom">
<li>
<a href="https://www.oneguardhomewarranty.com/why-oneguard/">Why OneGuard</a>
</li>
<li>
<a href="#">Warranty & Service Plans</a>
</li>
<li>
<a href="#">Get An Instant Quote</a>
</li>
<li class="main-nav-top-phone">
<a href="tel:888.896.0014" class="phone-link">888.896.0014</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
</div>#header, #header-sg {
body & {
@media only screen and (min-width: 1px) {
position: relative;
z-index: 10;
a:focus {
outline: 0;
}
#header-top-section {
background: @grey;
height: 30px;
padding-top: 5px;
#ip-header {
color: @white;
font-size: 14px;
img {
padding-right: 5px;
}
#user-location-header {
padding-left: 5px;
}
#state-status-link {
font-size: 12px;
text-decoration: underline;
color: @ltst-grey;
padding-left: 10px;
}
}
// end #ip-header
.top-section-nav {
text-align: right;
ul {
list-style: none;
color: @white;
li {
.vertical-line {
padding-left: 5px;
padding-right: 5px;
}
a {
color: @white;
font-size: 14px;
}
}
}
}
// end .top-section-nav
}
// end #header-top-section
#myModal {
.modal-header {
border: none;
}
.modal-footer {
border: none;
}
.modal-content {
}
}
// end #myModal
#header-bottom-section {
background-color: rgba(255, 255, 255, 0.5);
padding-top: 12px;
#mobile-sub-header {
.phone-link {
letter-spacing: 3px;
}
}
.main-mobile-header {
padding-top: 13px;
padding-bottom: 20px;
.mobile-menu {
text-align: center;
.mobile-hamburger-btn {
background: none;
border: none;
padding-top: 7px;
img {
height: 30px;
width: auto;
}
.hamburger-icon-close {
display: none;
}
}
}
// end mobile-menu
}
// end .main-mobile-header
.logo-wrap {
a {
img {
width: auto;
height: 38px;
}
}
}
.btn-header {
color: @white;
background-color: @lt-grey;
text-decoration: none;
}
.login-header-btn {
.btn-header;
padding: 10px;
text-align: center;
}
.nav-container {
margin-top: -40px;
display: none;
}
#mobile-nav {
text-align: center;
ul {
list-style: none;
}
.mobile-top-wrap {
background: @lt-grey;
ul {
padding: 0;
.mobile-link {
a {
color: @white;
text-decoration: none;
font-weight: bold;
display: block;
padding: 10px 0;
font-size: 18px;
width: 300px;
margin: 0 auto;
}
}
.border-bottom-wt {
border-bottom: 1px solid @white;
width: 190px;
margin: 0 auto;
}
}
}
.mobile-bottom-wrap {
background: @grey;
ul {
padding: 10px 0 0 0;
.mobile-link {
a {
color: @white;
text-decoration: none;
font-size: 16px;
padding: 10px 0;
display: block;
width: 300px;
margin: 0 auto;
font-weight: lighter;
}
}
.border-bottom-wt {
border-bottom: 1px solid @white;
width: 190px;
margin: 0 auto;
}
}
}
}
}
// end #header-bottom-section
display: block;
}
@media only screen and (min-width: @screen-sm-min) {
}
@media only screen and (min-width: @screen-md-min) {
#header-bottom-section {
padding-top: 8px;
.logo-wrap {
width: 100%;
a {
img {
width: 100%;
height: auto;
}
}
}
// Remove margin from mobile styles
.nav-container {
display: block;
margin-top: 0;
#desktop-nav {
.main-navigation-top-wrap {
text-align: right;
ul {
list-style: none;
padding-left: 0;
margin-bottom: 10px;
li {
display: inline-block;
padding-right: 22px;
&:last-child {
padding-right: 0;
}
a {
text-decoration: none;
color: @grey;
font-size: 14px;
}
}
}
}
// end .main-navigation-top-wrap
.main-navigation-bottom-wrap {
text-align: right;
ul {
list-style: none;
padding-left: 0;
display: inline-block;
border-top: 1px solid @white;
padding-top: 10px;
li {
display: inline-block;
padding-right: 20px;
&.main-nav-top-phone {
a {
color: @red;
letter-spacing: 1px;
font-size: 16px;
}
}
&:last-child {
padding-right: 0;
}
a {
font-size: 16px;
font-weight: bold;
color: @grey;
text-decoration: none;
}
}
}
}
}
}
// end .nav-container
.main-mobile-header{
padding-top: 3px;
padding-bottom: 0;
}
}// end #header-bottom-section
}
@media only screen and (min-width: @screen-lg-min) {
#header-bottom-section {
padding-top: 8px;
.main-mobile-header{
padding-bottom: 0;
}
.nav-container {
#desktop-nav {
.main-navigation-top-wrap {
ul {
margin-bottom: 17px;
li {
a {
font-size: 14px;
}
}
}
}
// end .main-navigation-top-wrap
.main-navigation-bottom-wrap {
ul {
padding-top: 15px;
li {
padding-right: 28px;
a {
font-size: 18px;
}
}
}
}
}
}
// end .nav-container
}
// end #header-bottom-section
}
}
body.style-guide & {
#header{
display: block;
}
}
}$( function () {
/*
IP Location Scripts
*/
var $state_text_link = $( "#state-status-link" );
// company_info is set from localized scripts in Assets.php.
var $company_info = company_info;
// Get user"s saved cookie with location data.
var $cookie_location = getCookie( "location" );
if ( $cookie_location == null ) {
// Free IP Geolocation API with SSL enabled. https://freegeoip.net/
$.get( "https://freegeoip.net/json/", function ( data ) {
} ).fail( function () {
// On fail, manually select from modal.
$state_text_link.text( "Select State" )
} ).always( function ( data ) {
var $state = data[ "region_name" ];
if ( $company_info[ "valid_states" ].includes( $state ) ) {
$( "#user-location-header" ).text( $state );
document.cookie = "location=" + $state + "; expires=Thu, 18 Dec " + $company_info[ "cookie_expire" ] + " 12:00:00 UTC; path=/";
$state_text_link.text( "Change State" )
} else {
$state_text_link.text( "Select State" )
}
} );
} else {
// Recheck if cookie is set that the state is still in the list of available states.
if ( company_info[ "valid_states" ].includes( $cookie_location ) ) {
$( "#user-location-header" ).text( $cookie_location );
$state_text_link.text( "Change State" )
} else {
$state_text_link.text( "Select State" )
}
}
$( "#update-location-modal-btn" ).on( "click", function () {
var $state = $( ".select-state-modal" ).val();
$( "#user-location-header" ).text( $state );
document.cookie = "location=" + $state + "; expires=Thu, 18 Dec " + $company_info[ "cookie_expire" ] + " 12:00:00 UTC; path=/";
} );
function getCookie ( name ) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf( "; " + prefix );
if ( begin == -1 ) {
begin = dc.indexOf( prefix );
if ( begin != 0 ) return null;
} else {
begin += 2;
var end = document.cookie.indexOf( ";", begin );
if ( end == -1 ) {
end = dc.length;
}
}
return decodeURI( dc.substring( begin + prefix.length, end ) );
}
/*
End IP Location Scripts
*/
$( ".mobile-hamburger-btn" ).on( "click", function () {
var $mobile_nav_container = $( ".nav-container" );
var $hamburger_icon = $( ".hamburger-icon" );
var $hamburger_icon_close = $( ".hamburger-icon-close" );
if ( $mobile_nav_container.is( ":visible" ) ) {
$mobile_nav_container.hide();
$hamburger_icon.show();
$hamburger_icon_close.hide();
} else {
$mobile_nav_container.show();
$hamburger_icon.hide();
$hamburger_icon_close.show();
}
} );
$( window ).on( "resize", function () {
var $window_width = $( this ).width();
// Reset Mobile Nav when doing window sizing.
var $nav_container = $( ".nav-container" );
var $hamburger_icon = $( ".hamburger-icon" );
var $hamburger_icon_close = $( ".mobile-hamburger-btn" );
// >= @screen-md (992px) breakpoint.
if ( $window_width >= 992 ) {
$nav_container.show();
} else {
// Check if Mobile nav should be open on resize if sizing to mobile. Only condition when it should be open is if it was opened on mobile sizes then sized up out of mobile and back down.
if ( $hamburger_icon.is( ":visible" ) ) {
$nav_container.hide();
}
}
} );
} );The footer is a full width responsive component. There's no JS needed, strictly done through markup and css.
<div id="footer" role="contentinfo" itemscope="" itemtype="http://schema.org/WPFooter">
<footer class="l-footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3 col-md-push-9">
<ul id="footer-social">
<li>
<a href="https://www.facebook.com">
<span class="fa fa-facebook"></span>
</a>
</li>
<li>
<a href="https://www.twitter.com">
<span class="fa fa-twitter"></span>
</a>
</li>
<li>
<a href="https://www.instagram.com">
<span class="fa fa-instagram"></span>
</a>
</li>
<div class="contact-us-footer">
<a href="#" class="btn btn-brand btn-lg">CONTACT US</a>
</div>
</ul>
</div>
<div class="col-xs-12 col-md-9 col-md-pull-3">
<div class="row footer-nav-container">
<div class="col-xs-12 col-sm-4">
<ul class="footer-navigation">
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-35" href="https://www.oneguardhomewarranty.com/">Home</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-36" href="https://www.oneguardhomewarranty.com/why-oneguard/">Why OneGuard</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-37" href="https://www.oneguardhomewarranty.com/home-warranty/">Home Warranty</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-38" href="https://www.oneguardhomewarranty.com/home-services/">Home Services</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-39" href="https://www.oneguardhomewarranty.com/who-we-are/">Who We Are</a>
</li>
<li>
<a class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-40" href="#">Warranty & Service Plans</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-44" href="https://www.oneguardhomewarranty.com/resource-center/">Resource Center</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-45" href="https://www.oneguardhomewarranty.com/faqs/">FAQs</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-46" href="https://www.oneguardhomewarranty.com/real-estate-agents/">Real Estate Agents</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<ul class="footer-navigation">
<li>
<a class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-47" href="#">Find Your Account Executive</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-48" href="https://www.oneguardhomewarranty.com/contractors/">Contractors</a>
</li>
<li>
<a class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-49" href="#">Become A OneGuard Contractor</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-50" href="https://www.oneguardhomewarranty.com/media-relations/">Media Relations</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-51" href="https://www.oneguardhomewarranty.com/careers/">Careers</a>
</li>
<li>
<a class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-52" href="#">Get An Instant Quote</a>
</li>
<li>
<a class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-53" href="#">Request Service</a>
</li>
<li>
<a class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-54" href="#">Login</a>
</li>
<li>
<a class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-55" href="#">Provide Feedback</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<ul class="footer-navigation">
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-60" href="https://www.oneguardhomewarranty.com/terms-of-service/">Terms of Service</a>
</li>
<li>
<a class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-61" href="https://www.oneguardhomewarranty.com/privacy-policy/">Privacy Policy</a>
</li>
</ul>
<div class="form-group">
<select class="form-control" id="homeowner-docs-dropdown">
<option value="-1" disabled="" selected="">Homeowner Docs</option>
<option value="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/style-guide.1.1.0.css">AZ Homeowner Docs</option>
<option value="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/style-guide.1.1.0.css">NV Homeowner Docs</option>
<option value="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/style-guide.1.1.0.css">TX Homeowner Docs</option>
</select>
<a href="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/style-guide.1.1.0.css" download="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/style-guide.1.1.0.css" class="btn btn-brand" id="homeowner-download-link">DOWNLOAD</a>
</div>
</div>
</div>
</div>
<div class="footer-awards">
<a href="#">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</a>
<a href="#">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</a>
<a href="#">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</a>
</div>
<hr>
<div id="footer-logo">
<a href="#">
<img src="https://www.oneguardhomewarranty.com/wordpress/wp-content/themes/zionandzion/assets/production/images/logo.png" alt="OneGuard Logo">
</a>
</div>
<div id="footer-copyright">
Copyright 2016 / OneGuard Home Warranties. All Rights Reserved.
</div>
</div>
</div></footer>
</div>#footer, #footer-sg {
body & {
@media only screen and (min-width: 1px) {
background: @lt-grey;
min-height: 200px;
color: @white;
hr {
border-top: 1px solid #eeeeee;
}
.l-footer{
padding-top: 25px;
.footer-awards {
text-align: center;
//margin-top: 25px;
a{
img {
padding-left: 20px;
}
&:first-child{
img{
padding-left: 0;
}
}
}
}
#footer-social {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
li{
display: inline-block;
font-size: 25px;
overflow: hidden;
background: @black;
color: @lt-grey;
border-radius: 100%;
padding: 0;
margin: 0;
margin-left: 30px;
&:first-child {
margin-left: 0;
}
a{
color: @lt-grey;
padding: 0;
margin: 0;
span{
padding: 0;
margin: 7px;
width: 24px;
}
}
}
}
.footer-nav-container {
margin: 20px 0 40px 10px;
#homeowner-docs-dropdown{
margin-top: 20px;
width: 250px;
}
#homeowner-download-link{
margin-top: 10px;
}
}
.footer-navigation {
padding: 0;
//margin: 20px 0 40px 10px;
margin: 0;
list-style: none;
li {
margin: 0;
padding: 0;
line-height: 20px;
a{
color: @ltst-grey;
text-decoration: none;
font-size: 14px;
padding: 0;
margin: 0;
}
}
}
.contact-us-footer {
margin-top: 25px;
text-align: center;
}
#footer-logo {
text-align: center;
margin-top: 10px;
a{
img{
height: 42px;
width: auto;
}
}
}
#footer-copyright {
text-transform: uppercase;
text-align: center;
padding: 20px;
}
} // end .l-footer
}
@media only screen and (min-width: @screen-sm-min) {
.l-footer{
.contact-us-footer{
text-align: center;
}
}
}
@media only screen and (min-width: @screen-md-min) {
}
@media only screen and (min-width: @screen-lg-min) {
}
}
body.style-guide & {
#footer-sg{
display: block;
}
#footer{
display: none;
}
}
}$(function() {
$("#homeowner-docs-dropdown").on("change", function() {
var download_link = $("#homeowner-download-link");
var download_file = $(this).val();
download_link.attr("href", download_file );
download_link.attr("download", download_file );
download_link.attr("disabled", false );
});
});
<div class="component list-with-icons">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="item">
<div class="item-icon">
<img
src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</div>
<div class="item-label">
Item 1
</div>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="item">
<div class="item-icon">
<img
src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</div>
<div class="item-label">
Item 2
</div>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="item">
<div class="item-icon">
<img
src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</div>
<div class="item-label">
Item 3
</div>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="item">
<div class="item-icon">
<img
src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</div>
<div class="item-label">
Item 4
</div>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="item">
<div class="item-icon">
<img
src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</div>
<div class="item-label">
Item 5
</div>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="item">
<div class="item-icon">
<img
src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</div>
<div class="item-label">
Item 6
</div>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="item">
<div class="item-icon">
<img
src="https://www.oneguardhomewarranty.com/wordpress/wp-content/uploads/2016/09/bptw_logo.png">
</div>
<div class="item-label">
Item 7
</div>
</div>
</div>
</div>
</div>.component.list-with-icons {
body & {
@media only screen and (min-width: 1px) {
padding: 15px 0;
.item {
text-align: center;
padding-bottom: 25px;
.item-icon {
padding-bottom: 10px;
img {
max-width: 100%;
height: auto;
}
}
.item-label {
font-size: 14px;
font-weight: bold;
}
}
}
@media only screen and (min-width: @screen-sm-min) {
padding: 20px 0;
.item {
.item-icon {
padding-bottom: 20px;
}
}
}
@media only screen and (min-width: @screen-md-min) {
padding: 25px 0;
.item {
.item-icon {
padding-bottom: 25px;
}
.item-label {
font-size: 16px;
}
}
}
@media only screen and (min-width: @screen-lg-min) { }
}
}