Skip to content

Instantly share code, notes, and snippets.

@jimboobrien

jimboobrien/home.php

Created March 10, 2016 15:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jimboobrien/092ea07b43e5d956968d to your computer and use it in GitHub Desktop.
Save jimboobrien/092ea07b43e5d956968d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
home.php
<?php
/*
Template Name: Home Template
*/
?>
<?php get_header(); ?>
<section id="octane-video">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="youtube" src="https://www.youtube.com/embed/kYtMicnLsV0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-6">
<h2><strong>Your Brand Discovered</strong></h2>
<h5 class="wow video-pointer bounce"><i class="fa fa-arrow-left"></i> See our video skills! <i class="fa fa-exclamation-triangle"></i></h5>
<p>Discovery. It's what happens when we commit ourselves to be our absolute best. It's what leads us to stretch ourselves and aim higher. To grow. To find new possibilities.</p>
<p>At Octane, our job is to give you the time to focus on what you do best. We want your customers to see what you do best. We help them see that - no matter where they're located or how they search for you.</p>
<p>We make it easy for your customers to discover you.</p>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
<section id="home-services" class="wow bounceInRight">
<div id="octane-services-list" class="container">
<ul class="services-list">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Video</a></li>
</ul>
<div class="services-content-area">
<article>
<br><h2>Discover Your Style</h2><br>
<p>Design is more than just a logo and a color scheme!
You want to stand out from your competition. Let Octane design and create a unique style for your
business. Through our collaborative design process, we work to create and build powerful visual elements
designed to capture the attention of your prospects and customers.<h3>Make An Impression!</h3> Design elements are the first impression your business makes in the marketplace. Design is
what makes your business image come to life through logos, artwork, print materials and your website.
Put the <strong>web design</strong> experience of the Octane Agency into your business. Contact us to learn how to get
started.</p>
<div class="two-buttons">
<div class="button-container">
<a class="btn btn-default wow tada" href="#">Read More</a>
</div>
<div class="button-container">
<a class="btn btn-default wow tada" href="#">See Examples</a>
</div>
</div>
</article>
<article>
<br><h2>Custom Built for You</h2>
&nbsp;
<p>From the basic to the complex, Octane can build just about any type of website your business may need. We implement industry standards into every aspect of our development projects. Your website will be efficient, fast loading, error-free, search-engine friendly, and cross-browser compatible.</p>
<h3>Fast and Responsive</h3>At Octane, we specialize in responsive web development. With the rapidly growing use of tablets and smart phones, your business requires <strong>website development</strong> that looks good and performs across a wide variety of devices. We're confident we can develop a customized website that delivers everything you need and more. Contact Octane today to learn how to get started.
<div class="two-buttons">
<div class="button-container">
<a class="btn btn-default wow tada" href="/services/development">Read More</a>
</div>
<div class="button-container">
<a class="btn btn-default wow tada" href="#">See Examples</a>
</div>
</div>
</article>
<article>
<br><h2>Gain New Customers</h2><br>
<p>Ranking well on the search pages of Google, Bing and Yahoo can be the catalyst for new customers and business growth. At Octane, we develop the content, coding and link building required to make your website relevant to potential customers and search engines. Our <strong>search engine specialists</strong> work to identify your target audience and to craft the content, keywords and phrases potential customers will use to find your business. </p>
<h3>Develop Your Presence</h3><p>Search engine optimization is an important part of developing your online presence and generating new business. Let Octane establish and manage a <strong>seo</strong> campaign for you. We can help you set guidelines and goals based on your target audience, location and seasonal promotions.</p>
<div class="two-buttons">
<div class="button-container">
<a class="btn btn-default wow tada" href="#">Read More</a>
</div>
<div class="button-container">
<a class="btn btn-default wow tada" href="#">See Examples</a>
</div>
</div>
</article>
<article>
<br><h2>Engage Your Audience</h2><br>
<p>Reach your audience and build your brand on popular social platforms like Facebook, Twitter, Instagram, and more. Octane can design and implement a social media marketing program so you can communicate with your customers on major social networking channels. </p>
<h3>Share Your Professionalism</h3><p>Showcase your expertise and commitment to the local community with timely and consistent messages on social media. No spammy sale pitches here. We're talking about thoughtful, relevant messages from your business to customers and the community. Engage your community with <strong>social media marketing</strong>. Contact us today to get started.</p>
<div class="two-buttons">
<div class="button-container">
<a class="btn btn-default wow tada" href="#">Read More</a>
</div>
<div class="button-container">
<a class="btn btn-default wow tada" href="#">See Examples</a>
</div>
</div>
</article>
<article>
<br><h2>Enhance Your Message</h2><br>
<p>Let Octane develop your message with video. Whether for building brand awareness, or for communicating features and benefits of your products and services, Octane has the scripting talent and production to take your business into the video age.</p><h3>Video Offers Many Options</h3><p>Get your message out to customers and employees anywhere, anytime. Video conveys complex information more easily, and is a great way to demonstrate products and services. Place commercials, testimonials, or a promotional video on your website and introduce visitors to your company with engaging visual content. Contact Octane today to get started with <strong>video marketing</strong>. </p>
<div class="two-buttons">
<div class="button-container">
<a class="btn btn-default wow tada" href="#">Read More</a>
</div>
<div class="button-container">
<a class="btn btn-default wow tada" href="#">See Examples</a>
</div>
</div>
</article>
</div>
</div>
</section>
<div class="clearfix"></div>
<section id="octane-home-featured-portfolio" >
<h3 class="section-title">Case-studies</h3>
<?php
$query = new WP_Query(array(
'post_type' => array( 'portfolio' ),
'tagportfolio' => 'featured',
//'term'=>$term->slug,
'posts_per_page' => 6,
'order' => 'DESC',
'orderby' => 'date'
) );
while ( $query->have_posts() ) : $query->the_post();
?>
<div class="col-md-4 col-sm-6 wow zoomInDown">
<?php
if ( has_post_thumbnail() ) {
$thumb_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full', false, '' );
}else{
$thumb_url = array( get_template_directory_uri() . "/images/banner.png", "1");
}
?>
<article class="article-<?php the_ID(); ?> block-inner">
<a id="" class="MetTileOne tile-one" href="<?php the_permalink(); ?>" style="background-image: url('<?php echo $thumb_url[0];?>');">
<div class="inside-content">
<!-- the title -->
<h3 class="featured-title"><?php the_title(); ?></h3>
<!-- output the excerpt, and if no excerpt then output content-->
<div class="octane-featured-content ">
<?php
$octane_excerpt = get_the_excerpt();
if(isset($octane_excerpt)) { ?>
<p>
<?php
$temporary_excerpt = substr(strip_tags($octane_excerpt), 0, 130);
echo $temporary_excerpt;
?>
</p>
<?php }else{
$more = 0;
$octane_content = get_the_content();
$temporary = substr(strip_tags($octane_content), 0, 130); ?>
<p>
<?php echo $temporary; ?>
</p>
<?php } ?>
</div>
<!-- output a read more button -->
<div class=""> Read More </div>
</div>
</a>
</article>
</div><!--end -col-md-4-->
<?php endwhile;
wp_reset_query();
?>
<br clear="all"/>
<div class="button-section">
<a class="btn btn-default" href="/portfolio">More Case Studies</a>
</div>
</section>
<section id="octane-home-recent-posts">
<h3 class="section-title">Blogs</h3>
<?php
$query = new WP_Query(array(
'post_type' => array( 'post' ),
//'tagportfolio' => 'featured',
//'term'=>$term->slug,
'posts_per_page' => 3,
'order' => 'DESC',
'orderby' => 'date'
) );
while ( $query->have_posts() ) : $query->the_post();
?>
<div class="col-md-4 col-sm-6 wow zoomInDown">
<?php
if ( has_post_thumbnail() ) {
$thumb_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full', false, '' );
}else{
$thumb_url = array( get_template_directory_uri() . "/images/banner.png", "1");
}
?>
<article class="article-<?php the_ID(); ?> block-inner">
<a id="" class="MetTileTwo tile-two" href="<?php the_permalink(); ?>" target="_blank" style="background-image: url(<?php echo $thumb_url[0];?>);">
<div class="inside-content">
<!-- the title -->
<h3 class="featured-title"><?php the_title(); ?></h3>
<!-- output the excerpt, and if no excerpt then output content-->
<div class="octane-featured-content ">
<?php
$octane_excerpt = get_the_excerpt();
if(isset($octane_excerpt)) { ?>
<p>
<?php
$temporary_excerpt = substr(strip_tags($octane_excerpt), 0, 130);
echo $temporary_excerpt;
?>
</p>
<?php }else{
$more = 0;
$octane_content = get_the_content();
$temporary = substr(strip_tags($octane_content), 0, 130); ?>
<p>
<?php echo $temporary; ?>
</p>
<?php } ?>
</div>
<!-- output a read more button -->
<div class="read-more"> Read More </div>
</div>
</a>
</article>
</div><!--end -col-md-4-->
<?php endwhile;
wp_reset_query();
?>
<br clear="all"/>
<div class="button-section">
<a class="btn btn-default" href="/blog">More Blogs</a>
</div>
</section>
<section class="wow bounceInLeft">
<div class="container" >
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php //the_content(); ?>
<?php endwhile; else: ?>
<?php /* kinda a 404 of sorts when not working */ ?>
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</div>
<?php //get_sidebar(); ?>
</div>
</div>
</section>
<section id="octane-process-container" >
<h3 class="section-title">How our process works</h3>
<div class="container wow zoomInDown">
<div class="octane-process">
<div id='c'>
<div class="thebefore-bar"></div>
<canvas id="the-bar" height="1">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div class="center-the-stuff">
<div class='s'>
<svg class="svg-process-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M39.1457024,49.7761993c1.0059013-1.8711014-1.1674004-1.9403992-0.1209984-3.7910004
c4.134201-7.3310013,9.328598-9.9111023,11.7075005-17.1669998c0.839798-3.4033012,1.3031998-6.4951,1.3031998-8.7910004
c0-8.8232002-6.7915001-16.3603001-15.8368988-18.1181011c-0.0552025-0.0069-0.1157036-0.0087999-0.1709023-0.0157
c0.033699,0.0069001,0.0679016,0.0088,0.1011009,0.0157c-1.2867012-0.1495-2.6612015-0.2354-4.1450996-0.2364
c-1.4570007,0.001-2.8042011,0.0830001-4.0664005,0.2266001c-8.2455997,1.5848999-14.6049004,8.0029001-15.6953001,15.7676001
c-0.1089001,0.7733994-0.1841002,1.5594997-0.1841002,2.3603001c0,0.5585995,0.0318003,1.1728992,0.0845003,1.8183994
c0.0292997,0.8838005,0.0854998,1.762701,0.1636,2.6347008c0.1796999,2.0117989,0.6483994,3.7441998,1.3027,5.3223
c2.3979998,5.7812977,7.6714001,9.3827991,11.5160999,16.1562977c1.053299,1.8584023-1.0869007,1.9365005-0.0732002,3.8173027"/>
<path class="st0" d="M25.9373035,60.4021988c0.5004005,2.9570007,3.0335999,1.8339996,6.0893002,1.8339996
s5.591301,1.1230011,6.0903015-1.8339996"/>
<line class="st0" x1="24.1262035" y1="57.2361984" x2="39.7986031" y2="57.2361984"/>
<line class="st0" x1="24.1262035" y1="53.2507973" x2="39.7986031" y2="53.2507973"/>
<path class="st0" d="M29.0686035,42.1052971c0-19.2381992-7.0762005-18.0702991-7.0762005-14.9501991
c0,3.1182003,3.0352001,4.8544998,6.2539005,4.8544998c3.219799,0,6.0567017-2.7098999,6.0567017-5.8065987
c0-1.7412014-0.966301-2.9043007-2.2969017-2.9043007c-1.3300991,0-2.2045994,1.2793007-2.2045994,2.9911995
c0,3.0977001,2.737299,5.7196999,5.9550991,5.7196999c3.2192001,0,6.2636986-1.7987995,6.2636986-5.0282993
c0-3.2275009-7.0141983-3.5907993-7.0141983,15.2549"/>
</g>
</svg>
</div>
<div class='s'>
<svg class="svg-process-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.9393709;stroke-miterlimit:10;}
</style>
<path class="st0" d="M19.7701664,13.3433466c0.0208492-1.9147415-0.6964264-3.8361731-2.1571617-5.2963438
c-2.8811293-2.8815956-7.5529766-2.8815956-10.4336205,0c-2.8820019,2.8810511-2.8815169,7.5528803-0.0003877,10.4335423
c1.4606371,1.4612198,3.3819714,2.1780109,5.2963247,2.1571617L2.0241482,31.0888805
c-0.4119223,0.4124069-0.4119223,1.0813923,0,1.4937992l29.0044537,29.0038719c0.4119225,0.4124069,1.0813942,0.4124069,1.4938011,0
l29.0043564-29.0048409c0.4124069-0.4119225,0.4119225-1.0804234-0.0004845-1.4928303l-10.450592-10.4511738
c0.0193939,1.914257-0.69701,3.8356876-2.1576462,5.2963257c-2.8811302,2.8816147-7.5529747,2.8816147-10.4341049,0
c-2.8815193-2.8806438-2.8815193-7.5528793,0-10.4335241c1.4607353-1.4612188,3.3820686-2.17801,5.2964211-2.1581316
L32.5224037,2.0849109c-0.4124069-0.4124073-1.0809097-0.4128921-1.4933167-0.0009696l-1.8977699,1.8982561"/>
</svg>
</div>
<div class='s'>
<svg class="svg-process-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.9756017;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M18.226532,31.6707592c0-6.813345,4.8183918-12.4878654,11.2044258-13.7626228
C12.7126274,19.1544456,1.5356615,31.6924896,1.5356615,31.6924896s11.4403133,12.7907486,28.3978901,13.817173
C23.3015556,44.4378967,18.226532,38.6596565,18.226532,31.6707592z"/>
<path class="st0" d="M46.0686836,31.6707592c0,6.9493847-5.0127907,12.7010555-11.5916443,13.821516
c16.8349915-1.1412048,28.1382942-13.7997856,28.1382942-13.7997856S51.5676727,19.2720928,34.9641228,17.9245224
C41.3038292,19.238409,46.0686836,24.8936672,46.0686836,31.6707592z"/>
<path class="st0" d="M35.8617401,29.9421082c-2.1815605,0-3.9512043-1.7691517-3.9512043-3.9512043
c0-0.4167423,0.0819874-0.8102818,0.2021046-1.1870289c-3.7650032,0.0178795-6.8133564,3.084507-6.8133564,6.8668842
c0,3.7939548,3.0666275,6.869276,6.8481274,6.869276c3.7823868,0,6.8490143-3.0753212,6.8490143-6.869276
c0-0.9617119-0.1987457-1.8772068-0.5547485-2.7087364C37.7481422,29.5649757,36.8528976,29.9421082,35.8617401,29.9421082z"/>
</g>
</svg>
</div>
<div class='s'>
<svg class="svg-process-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.9954569;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M1.0531561,27.5942879v22.8620529c0,0.5982399,0.4949732,1.0834351,1.1048846,1.0834351h59.6499023
c0.6099129,0,1.1043854-0.4851952,1.1043854-1.0834351V14.7095222c0-0.5991364-0.4944725-1.0834341-1.1043854-1.0834341H2.1580408
c-0.6099114,0-1.1048846,0.4842978-1.1048846,1.0834341v1.9097519"/>
<line class="st0" x1="4.0463419" y1="22.6056461" x2="59.9191437" y2="22.6056461"/>
<line class="st0" x1="4.0463419" y1="29.5897465" x2="59.9191437" y2="29.5897465"/>
<line class="st0" x1="6.0417991" y1="38.5693016" x2="29.9872856" y2="38.5693016"/>
<line class="st0" x1="6.0417991" y1="43.5579453" x2="31.9827423" y2="43.5579453"/>
</g>
</svg>
</div>
<div class='s'>
<svg class="svg-process-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M23.8964996,54.0960464c-5.8379002,2.5521965-13.1181993,5.9252968-14.5859995,5.607399"/>
<path class="st0" d="M12.7803001,48.8543434c0.4042997-1.1718979,0.415-2.1161995-0.3144999-2.607399
C5.7813001,41.7439461,1.5,34.8255463,1.5,27.0682449c0-13.5704002,13.0946999-24.5683994,29.2432003-24.5683994
c13.3495998,0,24.6103001,7.5145998,28.1131992,17.7852001"/>
<path class="st0" d="M54.3604012,53.4871445c-0.2930031-0.8418007-0.3008003-1.5214996,0.2264977-1.8730011
C59.4101982,48.3777466,62.5,43.4051437,62.5,37.8289452c0-9.7529011-9.4501991-17.6592007-21.1035004-17.6592007
c-11.6553001,0-21.1026001,7.9062996-21.1026001,17.6592007c0,9.7519989,9.4473,17.6581993,21.1026001,17.6581993
c1.8213005,0,14.1406021,6.3604012,15.8270988,5.9981003"/>
</g>
</svg>
</div>
<div class='s'>
<svg class="svg-process-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.9874175;stroke-miterlimit:10;}
</style>
<g>
<polyline class="st0" points="1.2563374,18.5347786 1.2563374,15.5536528 32.061306,24.4970303 32.061306,57.2894173
1.2563374,48.3460388 1.2563374,26.4844475 "/>
<polyline class="st0" points="1.2563374,15.5536528 32.061306,6.65201 62.8662758,15.5536528 "/>
<polygon class="st0" points="62.8662758,48.3460388 32.061306,57.2894173 32.061306,24.4970303 62.8662758,15.5536528 "/>
</g>
</svg>
</div>
</div>
<div class="theafter-bar"></div>
</div>
</div>
<div class="row">
<div class="process-list">
<div class="custom-process-column hide-on-mobile">&nbsp;</div>
<div class="custom-process-column">
Item one<br>
Item two<br>
Item three<br>
</div>
<div class="custom-process-column">
Item one<br>
Item two<br>
Item three<br>
</div>
<div class="custom-process-column">
Item one<br>
Item two<br>
Item three<br>
</div>
<div class="custom-process-column">
Item one<br>
Item two<br>
Item three<br>
</div>
<div class="custom-process-column">
Item one<br>
Item two<br>
Item three<br>
</div>
<div class="custom-process-column">
Item one<br>
Item two<br>
Item three<br>
</div>
<div class="custom-process-column hide-on-mobile">&nbsp;</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment