Beyond Heros
Classic Hero
Become a Seawolf
Want to change the great big world? So do we. Join our community of explorers.
organisms-beyond-hero
HTML
<h3 class="content-header">Classic Hero</h3>
<section class="hero-beyond">
<div class="container">
<div class="hero-beyond--headings">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h1 class="hero-beyond--heading">Become a Seawolf</h2>
<h2 class="hero-beyond--subheading">Want to change the great big world? So do we. Join our community of explorers.</h3>
</div>
</div>
</div>
<div class="hero-beyond--buttons">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="tuxedo-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="tuxedo-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="tuxedo-button" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="tuxedo-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
</div>
</div>
</div>
</section>
Classic Heros
Classic Hero
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
With Nav
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
With Image
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
With Image
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
organisms-classic-hero
HTML
<h3 class="content-header">Classic Hero</h3>
<section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">
<div class="hero-classic--content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>
<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">With Nav</h3>
<section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">
<div class="hero-classic--navigation">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
</div>
</div>
</div>
</div>
<div class="hero-classic--content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>
<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>
</div>
</div>
</div>
</div>
<div class="hero-classic--buttons">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">The swallow may fly south with the sun</a>
</div>
<div class="col-xs-12 col-md-4">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">All right. Well, take care of yourself, Han</a>
</div>
<div class="col-xs-12 col-md-4">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://veggieipsum.com">Veggies sunt bona vobis, proinde vos</a>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">With Image</h3>
<section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">
<div class="hero-classic--content">
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="hero--logo" src="../../placeholders/images/sbu/regatta-800x800.jpg">
</div>
<div class="col-sm-9">
<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>
<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>
</div>
</div>
</div>
</div>
<div class="hero-classic--buttons">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">The swallow may fly south with the sun</a>
</div>
<div class="col-xs-12 col-md-4">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">All right. Well, take care of yourself, Han</a>
</div>
<div class="col-xs-12 col-md-4">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://veggieipsum.com">Veggies sunt bona vobis, proinde vos</a>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">With Image</h3>
<section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">
<div class="hero-classic--content">
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="hero--logo" src="../../placeholders/images/sbu/regatta-800x800.jpg">
</div>
<div class="col-sm-9">
<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>
<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>
</div>
</div>
</div>
</div>
</section>
Hero Far Beyond
Far Beyond Hero
Best In Class Services
DoIT takes you far beyond with best in class services and support.
Read The Storyorganisms-far-beyond-hero
HTML
<h3 class="content-header">Far Beyond Hero</h3>
<section class="hero-far-beyond gradient-overlay__topLeft" style="background-image:url('../../images/backgrounds/farbeyond-stripes/redSwooshes.jpg');">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="hero-far-beyond--content">
<h1 class="hero-far-beyond--heading">
Best In Class
Services
</h1>
<p class="hero-far-beyond--text">
DoIT takes you far beyond with best in class services and support.
</p>
<a href="#" class="hero-far-beyond--button">Read The Story <span class="hero-far-beyond--icon sbuicon-long-arrow-right"></span></a>
</div>
</div>
</div>
</div>
</section>
Modern Heros
Modern Hero
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
With Buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
With Nav
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Full
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
organisms-modern-hero
HTML
<h3 class="content-header">Modern Hero</h3>
<section id="hero-example" class="hero-modern overlay-dark-gray">
<div class="hero-modern--content">
<div class="container">
<div class="row">
<div class="col-sx-12 col-sm-12 col-md-12">
<h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
<div class="hero-modern--text">
<p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">With Buttons</h3>
<section id="hero-example" class="hero-modern overlay-dark-gray">
<div class="hero-modern--content">
<div class="container">
<div class="row">
<div class="col-sx-12 col-sm-12 col-md-12">
<h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
<div class="hero-modern--text">
<p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="hero-modern--buttons">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<a data-match-height="hero-buttons" class="hero-button block text-center" href="http://lorizzle.nl/">Lorizzle pimpin' dolizzle sit amet I</a>
</div>
<div class="col-sm-12 col-md-6">
<a data-match-height="hero-buttons" class="hero-button block text-center" href="http://cupcakeipsum.com/">Carrot cake fruitcake dessert apple</a>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">With Nav</h3>
<section id="hero-example" class="hero-modern overlay-dark-gray">
<div class="hero-modern--navigation">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
</div>
</div>
</div>
</div>
<div class="hero-modern--content">
<div class="container">
<div class="row">
<div class="col-sx-12 col-sm-12 col-md-12">
<h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
<div class="hero-modern--text">
<p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">Full</h3>
<section id="hero-example" class="hero-modern overlay-dark-gray">
<div class="hero-modern--navigation">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
</div>
</div>
</div>
</div>
<div class="hero-modern--content">
<div class="container">
<div class="row">
<div class="col-sx-12 col-sm-12 col-md-12">
<h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
<div class="hero-modern--text">
<p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="hero-modern--buttons">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<a data-match-height="hero-buttons" class="hero-button block text-center" href="http://lorizzle.nl/">Lorizzle pimpin' dolizzle sit amet I</a>
</div>
<div class="col-sm-12 col-md-6">
<a data-match-height="hero-buttons" class="hero-button block text-center" href="http://cupcakeipsum.com/">Carrot cake fruitcake dessert apple</a>
</div>
</div>
</div>
</div>
</section>
SeawolfStrip
Become a Seawolf
Want to change the great big world? So do we. Join our community of explorers.
HTML
<div class="seawolfStrip">
<div class="wpb_wrapper">
<h2 class="clearfix">Become a Seawolf</h2>
<h3 class="clearfix"><span>Want to change the great big world?</span> <span><strong>So do we.</strong> Join our community of explorers.</span></h3>
<ul class="clearfix">
<li class="btn"><a href="http://mobile.cc.stonybrook.edu/sb/undergraduate-admissions/visit/">Visit us</a></li>
<li class="btn"><a href="http://m.stonybrook.edu/sb/undergraduate-admissions/virtual-tour/">Take a virtual tour</a></li>
<li class="btn"><a href="http://www.stonybrook.edu/sb/far-beyond/admissions/">Apply</a></li>
<li class="btn"><a href="http://stonybrook.edu/summer/">Summer Sessions</a></li>
</ul>
</div><!-- /.wpb_wrapper -->
</div>
Split Heros
Hero Split
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Videos
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
With Nav
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
organisms-split-hero
HTML
<h3 class="content-header">Hero Split</h3>
<section class="hero-split cozy overlay-black bg-pattern-pentagon">
<div class="hero-split--content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<h1 class="hero-split--heading">Lorem ipsum dolor sit (37 characters)</h1>
<div class="hero-split--text"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>
<div class="row">
<div class="col-xs-12 col-md-12">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
</div>
<div class="col-xs-12 col-md-12">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="hero-split--image">
<img class="img-responsive fadeIn" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="tech 2">
</div>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">Videos</h3>
<section class="hero-split cozy overlay-black bg-pattern-pentagon">
<div class="hero-split--content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<h1 class="hero-split--heading">Lorem ipsum dolor sit (37 characters)</h1>
<div class="hero-split--text"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>
<div class="row">
<div class="col-xs-12 col-md-12">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
</div>
<div class="col-xs-12 col-md-12">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="hero-split--video video-wrapper">
<iframe src="https://www.youtube.com/embed/DpWDOXN5DWU?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<h3 class="content-header">With Nav</h3>
<section class="hero-split cozy overlay-black bg-pattern-pentagon">
<div class="hero-split--navigation">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
</div>
</div>
</div>
</div>
<div class="hero-split--content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<h1 class="hero-split--heading">Lorem ipsum dolor sit (37 characters)</h1>
<div class="hero-split--text"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>
<div class="row">
<div class="col-xs-12 col-md-12">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
</div>
<div class="col-xs-12 col-md-12">
<a data-match-height="hero-buttons" class="hero-button button-block" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="hero-split--image">
<img class="img-responsive fadeIn" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="tech 2">
</div>
</div>
</div>
</div>
</div>
</section>