File size: 15.69Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/img/favicon.ico">
<title>BASIC - Blacktie.co Free Theme</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/ionicons.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="h">
<div class="logo">
<h2>BASIC</h2>
</div><!--/logo-->
<div class="container centered">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Hello, my name is <b>Daniel White</b>.<br/>I create for the web.</h1>
</div>
</div><!--/row-->
<div class="row mt">
<div class="col-sm-4">
<i class="ion-ios7-monitor-outline"></i>
<h3>Web Design</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-ios7-browsers-outline"></i>
<h3>UI Development</h3>
</div><!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-ios7-copy-outline"></i>
<h3>Brand Identity</h3>
</div><!--/col-md-4-->
</div><!--/row-->
</div><!--/container-->
</div><!--H-->
<div class="container ptb">
<div class="row">
<h2 class="centered mb">I craft handsome sites & stunning apps<br/>that empower your startup.</h2>
<div class="col-md-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div><!--/col-md-6-->
<div class="col-md-6">
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software.</p>
</div><!--/col-md-6-->
</div><!--/row-->
</div><!-- /.container -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<img src="assets/img/items.png" class="img-responsive" alt="">
</div>
</div><!--/row-->
</div><!--/.container-->
<div id="g">
<div class="container">
<div class="row centered">
<h2>Check some of my latest works.</h2>
<div class="col-md-8 col-md-offset-2">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.<br/>It has roots in a piece of classical Latin literature<br/>from 45 BC, making it over 2000 years old.</p>
</div><!--/col-md-8-->
</div><!--/row-->
</div><!--/.container-->
<div class="portfolio-centered mt">
<div class="recentitems portfolio">
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_09.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Graphic Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_09.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item web-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_02.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Web Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_02.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_03.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Graphic Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_03.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_04.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Graphic Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_04.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item books">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_05.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Book Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_05.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_06.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Graphic Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_06.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item web-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_07.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Web Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_07.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_08.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Graphic Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_08.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_01.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Graphic Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_01.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item books">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_10.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">A Book Design Item</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_10.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-link"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
</div><!-- portfolio -->
</div><!-- portfolio container -->
<div class="container mt">
<div class="row clients centered">
<p class="mb">Some clients that I had the pleasure to working for.</p>
<div class="col-sm-2 col-sm-offset-1">
<img src="assets/img/client1.png" alt="">
</div>
<div class="col-sm-2">
<img src="assets/img/client3.png" alt="">
</div>
<div class="col-sm-2">
<img src="assets/img/client2.png" alt="">
</div>
<div class="col-sm-2">
<img src="assets/img/client4.png" alt="">
</div>
<div class="col-sm-2">
<img src="assets/img/client5.png" alt="">
</div>
</div><!--/row-->
</div><!--/container-->
</div><!--/.G-->
<div id="sep">
<div class="container">
<div class="row centered">
<div class="col-md-8 col-md-offset-2">
<h1>I live in the amazing San Francisco</h1>
<h3 class="mb">Lorem Ipsum is simply dummy text<br/>of the printing and typesetting industry.</h3>
<button class="btn btn-conf btn-clear">Request for Information</button>
</div>
</div><!--/row-->
</div><!--/container-->
</div><!--/.sep-->
<div id="f">
<div class="container">
<div class="row centered">
<div class="col-md-8 col-md-offset-2">
<a href="#"><i class="ion-social-twitter"></i></a>
<a href="#"><i class="ion-social-dribbble"></i></a>
<a href="#"><i class="ion-social-instagram"></i></a>
<a href="#"><i class="ion-social-facebook"></i></a>
</div><!--/col-md-8-->
</div>
</div><!--/container-->
</div><!--/.F-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/retina-1.1.0.js"></script>
<script src="assets/js/jquery.hoverdir.js"></script>
<script src="assets/js/jquery.hoverex.min.js"></script>
<script src="assets/js/jquery.prettyPhoto.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/custom.js"></script>
<script>
// Portfolio
(function($) {
"use strict";
var $container = $('.portfolio'),
$items = $container.find('.portfolio-item'),
portfolioLayout = 'fitRows';
if( $container.hasClass('portfolio-centered') ) {
portfolioLayout = 'masonry';
}
$container.isotope({
filter: '*',
animationEngine: 'best-available',
layoutMode: portfolioLayout,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
masonry: {
}
}, refreshWaypoints());
function refreshWaypoints() {
setTimeout(function() {
}, 1000);
}
$('nav.portfolio-filter ul a').on('click', function() {
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector }, refreshWaypoints());
$('nav.portfolio-filter ul a').removeClass('active');
$(this).addClass('active');
return false;
});
function getColumnNumber() {
var winWidth = $(window).width(),
columnNumber = 1;
if (winWidth > 1200) {
columnNumber = 5;
} else if (winWidth > 950) {
columnNumber = 4;
} else if (winWidth > 600) {
columnNumber = 3;
} else if (winWidth > 400) {
columnNumber = 2;
} else if (winWidth > 250) {
columnNumber = 1;
}
return columnNumber;
}
function setColumns() {
var winWidth = $(window).width(),
columnNumber = getColumnNumber(),
itemWidth = Math.floor(winWidth / columnNumber);
$container.find('.portfolio-item').each(function() {
$(this).css( {
width : itemWidth + 'px'
});
});
}
function setPortfolio() {
setColumns();
$container.isotope('reLayout');
}
$container.imagesLoaded(function () {
setPortfolio();
});
$(window).on('resize', function () {
setPortfolio();
});
})(jQuery);
</script>
</body>
</html>