Folder & file structure
Halves's structure of the source folder is the following:
- css
- Containing the Bootstrap, Font Awesome & Halves style css & less files.
- docs
- Containing the files required for this page.
- font
- Containing the Font Awesome files.
- fonts
- Containing the default Bootstrap glyph icon files.
- img
- js
CSS stylesheets
Halves is built with the Twitter Bootstrap (v3.0.3) framework. It also uses the Font Awesome css framework (v4.0.3) & the custom built Halves css file (built using the LESS CSS framework).
CSS folder consists of:
- bootstrap.css
- bootstrap.min.css
- bootstrap-theme.css
- bootstrap-theme.min.css
- font-awesome.css
- font-awesome.min.css
- font-awesome-ie7.css
- font-awesome-ie7.min.css
- style.less
- style.css
Javascript files
Contains all of the Bootstrap, isotope, portfolio showcase & custom Halves javascript files.
- bootstrap.js
- bootstrap.min.js
- custom_checkbox_and_radio.js
- custom_radio.js
- html5.js
- jquery.isotope.min.js
- showcase.js
- halves.js
HTML markup & structure
Halves is built with the markup used in the Twitter Bootstrap 3 framework. The basic structure is as follows:
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a href="#none" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars"></span>
<span class="btn-navbar-text">Menu</span>
</a>
<a class="navbar-brand" href="./index.html"><span class="logo"></span> Halves</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="portfolio-parent.html">Portfolio</a></li>
<li><a href="blog-parent.html">Blog</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#none" class="dropdown-toggle" data-toggle="dropdown">Templates <b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<li class="nav-header">Blog Pages</li>
<li><a href="blog-archives.html">Archives</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-tags.html">Tags</a></li>
<li class="divider"></li>
<li class="nav-header">Components</li>
<li><a href="elements.html">UI Elements</a></li>
<li><a href="forms.html">Form Elements</a></li>
<li><a href="typography.html">Tables & Typography</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li class="divider"></li>
<li><a href="docs/index.html">User Guide & Documentation</a></li>
</ul>
</li>
</ul>
</div><!-- end navbar-collapse -->
</div><!-- end container -->
</div><!-- end navbar-inner -->
</div><!-- end navbar -->
<section class="wrapper wrapper-content">
<div class="container">
<div class="page-header">
<h1>Page Title</h1>
</div><!-- end page-header -->
</div><!-- end container -->
</section><!-- end wrapper -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline list-circle-icons list-circle-icons-small pull-right">
<li><a href="#none" title="Like us on Facebook" data-rel="tooltip" data-toggle="tooltip"><span class="fa fa-facebook"></span></a></li>
<li><a href="#none" title="Follow us on Twitter" data-rel="tooltip" data-toggle="tooltip"><span class="fa fa-twitter"></span></a></li>
<li><a href="#none" title="Follow us on Pinterest" data-rel="tooltip" data-toggle="tooltip"><span class="fa fa-pinterest"></span></a></li>
<li><a href="#none" title="Follow us on Google Plus" data-rel="tooltip" data-toggle="tooltip"><span class="fa fa-google-plus"></span></a></li>
<li><a href="#none" title="View Flickr Gallery" data-rel="tooltip" data-toggle="tooltip"><span class="fa fa-flickr"></span></a></li>
</ul>
<ul class="list-inline">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio-parent.html">Portfolio</a></li>
<li><a href="blog-parent.html">Blog</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p>© Copyright 2016. Halves.</p>
</div><!-- end col -->
</div><!-- end row fluid -->
</div><!-- end container -->
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load iconster -->
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="js/bootstrap.js"></script>
<script src="js/halves.js"></script>
<script type="text/javascript">
$(document).ready(function() {
});
</script>
</body>
Icons
Halves uses the Font Awesome iconic font. Font Awesome gives you scalable vector icons that can instantly be customised — size, colour, drop shadow, and anything that can be done with the power of CSS.
Inline icon
<p><i class="fa fa-camera-retro"></i></p>
Larger icons
fa-camera-retro
fa-camera-retro
fa-camera-retro
fa-camera-retro
<p><i class="fa fa-camera-retro fa-large"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
Bulleted lists
- Bulleted lists (like this one)
- Buttons
- Button groups
- Navigation
- Prepended form inputs
- …and many more with custom CSS
<ul class="fa-ul">
<li><i class="fa fa-li fa-list-ul"></i>Bulleted lists (like this one)</li>
<li><i class="fa fa-li fa-times"></i>Buttons</li>
<li><i class="fa fa-li fa-file-text"></i>Button groups</li>
<li><i class="fa fa-li fa-facebook"></i>Navigation</li>
<li><i class="fa fa-li fa-twitter"></i>Prepended form inputs</li>
<li><i class="fa fa-li fa-dollar"></i>…and many more with custom CSS</li>
</ul>
Utility classes
Halves has a wide range of utility classes you can apply on any element.
Colours
.red - red
.blue - blue
.purple - purple
.yellow - yellow
.pink - pink
.green - green
.grey - grey
.white - white
Width - up to 100% or 100px
.width-10pc - 10% width
.width-20 - 20 pixels width
Margin - up to 50px.
.margin-0
.margin-top-10
.margin-right-10
.margin-bottom-10
.margin-left-10
Padding - up to 50px.
.padding-0
.padding-top-10
.padding-right-10
.padding-bottom-10
.padding-left-10
Space - a blank div up to 50px in height.
.space-10
Clear - an empty div class that can clear floats.
.clear
Fixed Background Images
The Fixed Background Images are the images that are placed next to a block of content. They take up 50% of the width of the page. You can customise them by giving them a unique class in the div named offset-bg, as shown in the HTML markup below marked in blue.
<section class="wrapper">
<div class="offset-bg desk"></div>
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-7">
<div class="feature-text">
<h2 class="module-title">Halves is perfect for agencies and businesses, just like yours</h2>
<p class="module-subtitle">Every pixel and line of code is expertly and beautifully crafted to allow you to create a modern, wonderful website inside and out.</p>
</div>
<ul class="list-icons list-icons-large">
<li>
<img src="img/sample/line-icons/pencil.png" class="icon light" />
<h3>Easy and customisable content</h3>
<p>Halves is made up of a collection of content areas so you can customise them to look exactly how you want it to.</p>
</li>
<li>
<img src="img/sample/line-icons/thunderbolt.png" class="icon light" />
<h3>Powerful and slick jQuery</h3>
<p>Fantastic jQuery plugins such as Isotope and Bootstrap's inbuilt features.</p>
</li>
<li>
<img src="img/sample/line-icons/shield.png" class="icon light" />
<h3>Bootstrap Framework</h3>
<p>Uses Twitter Bootstrap's sleek, intuitive, and powerful front-end framework.</p>
</li>
</ul>
</div>
</div>
</div>
</section>
To place the image to the right, use the right class which specific for any image that you want to place offset to the right of the content, as shown in blue.
<section class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="feature-text">
<h2 class="module-title">Halves is perfect for agencies and businesses, just like yours</h2>
<p class="module-subtitle">Every pixel and line of code is expertly and beautifully crafted to allow you to create a modern, wonderful website inside and out.</p>
</div>
<ul class="list-icons list-icons-large">
<li>
<img src="img/sample/line-icons/diamond.png" class="icon light" />
<h3>Easy and customisable content</h3>
<p>Halves is made up of a collection of content areas so you can customise them to look exactly how you want it to.</p>
</li>
<li>
<img src="img/sample/line-icons/music-controller.png" class="icon light" />
<h3>Powerful and slick jQuery</h3>
<p>Fantastic jQuery plugins such as Isotope and Bootstrap's inbuilt features.</p>
</li>
<li>
<img src="img/sample/line-icons/symbol.png" class="icon light" />
<h3>Bootstrap Framework</h3>
<p>Uses Twitter Bootstrap's sleek, intuitive, and powerful front-end framework.</p>
</li>
</ul>
</div>
</div>
<div class="offset-bg right coffee"></div>
And here is the custom CSS with a class named coffee. You can name it whatever you like! Just be sure to link to your image correctly. And your images should be as large as possible, ideally wallpaper sized.
.offset-bg.coffee {
background-image: url(../img/sample/coffee.jpg);
}
Pricing Tables
You can display a pricing table on your page by using the following HTML code. Just add the number of columns you want to use on the div class named price-table, for example, prices-2, as marked in blue.
<div class="price-table prices-2">
<div class="price-column">
<div class="heading">
<span class="label-popular invisible">Most Popular</span>
<p><span class="sign">$</span> <span class="price">15.00</span> <small>/ month</small></p>
<h3>Basic</h3>
</div>
<ul>
<li><a href="#none" class="btn btn-success">Get Started</a></li>
<li><span>150</span> products</li>
<li><span>5gb</span> file storage</li>
<li><span>2.0%</span> transaction fee</li>
<li>Free setup</li>
<li>Pay by credit card or PayPal</li>
<li>Cancel at any time</li>
</ul>
</div>
<div class="price-column popular">
<div class="heading">
<span class="label-popular">Most Popular</span>
<p><span class="sign">$</span> <span class="price">25.00</span> <small>/ month</small></p>
<h3>Professional</h3>
</div>
<ul>
<li><a href="#none" class="btn btn-success">Get Started</a></li>
<li><span>2,500</span> products</li>
<li><span>20gb</span> file storage</li>
<li><span>1.0%</span> transaction fee</li>
<li>Free setup</li>
<li>Pay by credit card or PayPal</li>
<li>Cancel at any time</li>
</ul>
</div>
</div>
Team Members
To add or edit a team member's details, just use the following HTML markup under the <section> div wrapper named team. We recommend your team member's photos be at least 300 pixels wide and high.
<div class="col-md-3 center">
<div class="team-image">
<img src="img/sample/team/man1.jpg" alt="">
<div class="overlay">
<a href="#none"><span class="fa fa-envelope"></span></a> <a href="#none"><span class="fa fa-twitter"></span></a> <a href="#none"><span class="fa fa-facebook"></span></a> <a href="#none"><span class="fa fa-instagram"></span></a>
</div>
</div>
<h3>D'Marcus Williums</h3>
<p>Co-founder & CEO</p>
</div>
Sub Footer
The Sub Footer is located underneath your content and above the footer.
It can contain your latest blog post, latest tweets, a photo gallery, newsletter sign up or anything else you may prefer.
Simply add the class container-wrapper-sub-footer to the container-wrapper class.
<section class="wrapper wrapper-sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5">
<h3>We hope that you enjoy using Halves!</h3>
<p>For an instant in the flashing eyes of the mate, & his fiery cheeks, you would have almost thought that he had really received the blaze of the levelled tube.</p>
<p>Designed by <a href="#none">Pukeko Design Studio</a></p>
</div><!-- end col -->
<div class="col-md-5 col-md-offset-2">
<h3>Sign up to our newsletter</h3>
<p>Subscribe to our newsletter to receive exclusive deals & specials directly to your inbox.</p>
<form class="form-newsletter">
<div class="input-group">
<input type="text" class="form-control" placeholder="Email Address" value="">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Sign Up</button>
</span>
</div>
</form>
</div>
</div>
</div>
</section>
Blog
The Blog section uses a similar HTML structure to popular blogging platform WordPress.
Blog post - uses the article tag.
<article class="post">
<a href="blog-post.html"><img src="img/sample/500px/homestead.jpg" alt="" title="" /></a>
<h3><a href="blog-post.html">Sintel at Seattle International Film</a></h3>
<ul class="list-inline post-meta">
<li class="meta-date"><span class="fa fa-calendar"></span>Thu Apr 27, 1:15pm</li>
<li class="meta-comments"><span class="fa fa-comments"></span><a href="#comments">5 Comments</a></li>
</ul>
<div class="post-content">
<p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real…</p>
</div>
</article>
Image captions
<p><img src="image.jpg" alt="" /><span class="caption">Your caption goes here.<span class="pull-right">Photo: Me</span></span></p>
Comments - uses a similar structure to WordPress's comment system.
<div id="comments">
<h3 class="comments-title">5 Comments</h3>
<ol class="commentlist">
<li class="comment even thread-even depth-1" id="li-comment-2">
<div id="comment-2">
<img alt="" src="http://0.gravatar.com/avatar/4f64c9f81bb0d4ee969aaf7b4a5a6f40?s=60&d=&r=G" class="avatar avatar-60 photo" height="60" width="60">
<div>
<div class="comment-author vcard">
<cite class="fn"><a href="http://www.themezilla.com" rel="external nofollow" class="url">To- Author: </a></cite>
</div>
<div class="comment-meta commentmetadata">
<a href="#none">September 28, 2012 at 3:31 pm</a> · <a class="comment-reply-link" href="#respond" onclick="return addComment.moveForm("comment-2", "2", "respond", "204")">Reply</a>
</div>
<div class="comment-body">
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
</div>
</li>
</ol>
<div id="respond">
<h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="#respond" style="display:none;">Cancel Reply</a></small></h3>
<form method="post" id="commentform">
<div class="row">
<div class="comment-form-author col-md-8">
<label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" class="form-control" value="Tim" size="30" aria-required="true" placeholder="Name">
</div>
</div>
<div class="row">
<div class="comment-form-email col-md-8">
<label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" class="form-control" value="test@gmail.com" size="30" aria-required="true" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="comment-form-url col-md-8">
<label for="url">Website</label> <input id="url" name="url" type="text" class="form-control" value="" size="30" placeholder="Website URL">
</div>
</div>
<div class="row">
<div class="comment-form-comment">
<textarea id="comment" class="form-control" name="comment" cols="45" rows="8" aria-required="true" placeholder="Your Comment"></textarea>
</div>
</div>
<div class="row">
<div class="form-submit">
<input name="submit" type="submit" id="submit" class="btn btn-lg btn-primary" value="Submit Comment">
<input type="hidden" name="comment_post_ID" value="204" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</div>
</div>
</form>
</div>
</div>
Portfolio
Halves uses the Isotope and Cycle 2 jQuery plugins.
Portfolio Parent
Isotope is used on the Portfolio parent page.
Here is an example of the portfolio page's tag filter markup. The class filter-portfolio which is used for the Isotope jQuery function is marked in red. The custom data filters are marked in blue.
<ul class="nav nav-pills filter-portfolio center">
<li class="disabled"><a href="#">Filter:</a></li>
<li class="active"><a href="#none" data-filter="*">All</a></li>
<li><a href="#none" data-filter=".art">Art</a></li>
<li><a href="#none" data-filter=".graphic-design">Graphic Design</a></li>
<li><a href="#none" data-filter=".photography">Photography</a></li>
<li><a href="#none" data-filter=".web-design">Web Design</a></li>
</ul>
Here is the required markup, with the custom filter marked in blue.
<div class="portfolio-wrapper">
<div class="portfolio-item art">
<div class="portfolio-thumb">
<span class="portfolio-tag tag-art">Art</span>
<a href="portfolio-detail.html"><img src="img/sample/portfolio-1.jpg" alt="" /></a>
</div>
<div class="portfolio-body">
<h3><a href="portfolio-detail.html">City</a></h3>
<p>Sed ut perspiciatis unde omnis iste natus</p>
</div>
</div>
<div class="portfolio-item photography">
<div class="portfolio-thumb">
<span class="portfolio-tag tag-photography">Photography</span>
<a href="portfolio-detail.html"><img src="img/sample/portfolio-1.jpg" alt="" /></a>
</div>
<div class="portfolio-body">
<h3><a href="portfolio-detail.html">City</a></h3>
<p>Sed ut perspiciatis unde omnis iste natus</p>
</div>
</div>
<div class="portfolio-item graphic-design">
<div class="portfolio-thumb">
<span class="portfolio-tag tag-graphic-design">Graphic Design</span>
<a href="portfolio-detail.html"><img src="img/sample/portfolio-1.jpg" alt="" /></a>
</div>
<div class="portfolio-body">
<h3><a href="portfolio-detail.html">City</a></h3>
<p>Sed ut perspiciatis unde omnis iste natus</p>
</div>
</div>
</div>
Please note: you must include the Isotope javascript file and function before you close the body tag.
<script src="js/jquery.isotope.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $container = $('.portfolio-wrapper');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.portfolio-item',
layoutMode : 'fitRows'
});
});
// Needed functions
var getColWidth = function() {
var width,
windowWidth = $(window).width();
if( $('body').hasClass( 'page-template-template-portfolio-2col-php' ) ) {
if( windowWidth <= 480 ) {
width = Math.floor( $container.width() );
} else {
width = Math.floor( $container.width() / 2 );
}
} else {
if( windowWidth <= 480 ) {
width = Math.floor( $container.width() );
} else if( windowWidth <= 768 ) {
width = Math.floor( $container.width() );
} else {
width = Math.floor( $container.width() / 3 - 20 );
}
}
return width;
}
function setWidths() {
var colWidth = getColWidth();
$container.children().css({ width: colWidth });
}
setWidths();
$(window).smartresize(function() {
setWidths();
$container.isotope({
masonry: {
columnWidth: getColWidth()
}
});
});
$('.filter-portfolio li a').click(function(){
$('.filter-portfolio li.active').removeClass('active');
$(this).parent('li').addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
masonry: { columnWidth: $container.width() / 3 }
});
return false;
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 3 }
});
});
});
<script>
Portfolio Detail
Cycle 2 is used on the Portfolio detail page.
<div class="container-wrapper container-wrapper-portfolio">
<div class="center">
<div class="cycle-slideshow"
data-cycle-fx="carousel"
data-cycle-timeout=0
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-slides="> div"
>
<div class="portfolio-item-screenshot">
<img class="screenshot" src="img/sample/portfolio-macbook.png" alt=""/>
</div>
<div class="portfolio-item-screenshot">
<img class="screenshot" src="img/sample/portfolio-devices.png" alt=""/>
</div>
<div class="portfolio-item-screenshot">
<img class="screenshot" src="img/sample/portfolio-macbook.png" alt=""/>
</div>
<div class="portfolio-item-screenshot">
<img class="screenshot" src="img/sample/portfolio-devices.png" alt=""/>
</div><!-- end portfolio item screenshot -->
</div>
<div class="slideshow-controls">
<span id=prev><span class="fa fa-chevron-left"></span></span>
<span id=next><span class="fa fa-chevron-right"></span></span>
</div>
</div>
</div>
Please note: you must include the Cycle 2 javascript files before you close the body tag.
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.center.js"></script>
Contact map
To customise the Contact page's Google Map location, simply replace the iframe src with your own organisation's map location.
<div class="container-wrapper">
<div class="google-map">
<iframe width="770" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.nz/maps?ie=UTF8&cid=14812806463106713485&q=Disneyland+Resort-Anaheim+Ca&gl=NZ&hl=en&t=m&z=16&iwloc=near&output=embed"></iframe>
</div>
</div>
Attribution & licenses
Icons: Font Awesome
Author: Dave Gandy
License: Font Awesome licensed under SIL Open Font License 1.1
http://fortawesome.github.io/Font-Awesome/
Icons: Line Icon Set
Author: Situ Herrera
License: Creative Commons Attribution 3.0 Unported
http://www.flaticon.com/packs/line-icon-set
Icons: Flat Round Icons
Author: INNOVIX SOLUTIONS ltd
License: Royalty Free
https://roundicons.com/free-icons/
Fonts: Google Web Fonts
Raleway - Author: Multiple Authors
Merriweather - Author: Eben Sorkin
License: Google Web Fonts are licensed under SIL Open Font License 1.1
http://www.google.com/fonts/
Isotope
License: Isotope Commercial License Agreement - Download license
http://isotope.metafizzy.co
jQuery cycle 2
Author: M. Alsup
License: the Cycle2 plugin is dual licensed under the MIT and GPL licenses
http://jquery.malsup.com/cycle2/
Steven Stevenson Resume
© copyright 2009, Kat Neville | safetygoat | http://www.misterstevenson.com/contest.html
Photo: avatar.jpg
© copyright 2009, Pukeko Design Studio | Pukeko Design Studio
Photo: coffee-mag.jpg
Author: Bino Storyteller
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/lZlfHGqx44Q
Photo: desk-top-view.jpg
Author: Vadim Sherbakov
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/Hi9GSwWkCJk
Photo: desk.jpg
Author: Jeff Sheldon
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/9dI3g8owHiI
Photo: homestead.jpg
Author: Maria Hodel
License: Creative Commons Attribution 4.0 International
Original source:
https://500px.com/photo/66888307/welcome-spring-by-maria-hodel
Photo: imac-rocket.png
Author: Pukeko Design Studio
Photo: iphone.png
Author: Pukeko Design Studio
Photo: macbook-flat.png
Author: Pukeko Design Studio
Photo: man1.jpg
Author: Alexander Ronsdorf
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/2d0w1mDKNlg
Photo: man2.jpg
Author: Ayo Ogunseinde
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/sibVwORYqs0
Photo: man3.jpg
Author: Nathan Fertig
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/5EIW3DDX6dw
Photo: man4.jpg
Author: Luke Pamer
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/hiZ7wtdX-nI
Photo: office.jpg
Author: Blake Parkinson
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/3IX-Tz_0ZN0
Photo: portfolio-devices.png
Author: Free4All
License: morgueFile license
Original source:
http://www.morguefile.com/archive/display/820152
Photo: portfolio-macbook.png
Author: Simon Bouchard
License: Creative Commons Attribution-ShareAlike 2.0 Generic
Original source:
http://www.flickr.com/photos/simon-bouchard/4924194652/sizes/m/in/set-72157624798241210/
Photo: rocks.jpg
Author: 나무사진기 Namu-Sajingi
License: Creative Commons Attribution 4.0 International
Original source:
https://500px.com/photo/54643846/seascape-by-%EB%82%98%EB%AC%B4%EC%82%AC%EC%A7%84%EA%B8%B0-namu-sajingi
Photo: seal.jpg
Author: Alec Weir
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/EDqP5r_QwrE
Photo: sunrise.jpg
Author: 나무사진기 Namu-Sajingi
License: Creative Commons Attribution 4.0 International
Original source:
https://500px.com/photo/55502082/namoo-by-%EB%82%98%EB%AC%B4%EC%82%AC%EC%A7%84%EA%B8%B0-namu-sajingi
Photo: sunset.jpg
Author: Kyrre Gjerstad
License: Creative Commons Attribution 4.0 International
Original source:
https://500px.com/photo/61255748/where-i-live-by-kyrre-gjerstad
Photo: train.jpg
Author: pbutler1
License: Creative Commons Attribution 4.0 International
Original source:
https://500px.com/photo/42882112/back-to-the-future-by-pbutler1
Photo: waterfall.jpg
Author: paulericlewis
License: Creative Commons Attribution 4.0 International
Original source:
https://500px.com/photo/54823640/ithaca-falls-by-paulericlewis
Photo: woman1.jpg
Author: Andrei Porfireanu
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/TtoRRAehSAw
Photo: woman2.jpg
Author: Christopher Campbell
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/rDEOVtE7vOs
Photo: woman3.jpg
Author: Nick Karvounis
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/gN_nIUnjYJI
Photo: woman4.jpg
Author: Nick Karvounis
License: Creative Commons Zero
Original source:
https://unsplash.com/photos/gN_nIUnjYJI
Credits
Thank you for purchasing Halves!
If you use Halves for your next project, please provide me with a link so I can check it out!
Author: Pukeko Design Studio.
© Copyright 2016. All rights reserved.