<!DOCTYPE html>
<html>
<head>
<title>Typo</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Crofting Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</head>
<body>
<div class="header">
<div class="container">
<div class="header-on">
<div class="header-left">
<!--menu-->
<div class="header-info-right">
<div class="header cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<a href="index.html">Home</a>
<a href="About.html">About</a>
<a href="blog.html">Blog</a>
<a href="typo.html">Typo</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
</nav>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<div class="clearfix"> </div>
<!-- /script-nav -->
<div class="main">
<section class="buttonset">
<button id="showLeftPush"><img src="images/menu.png" /></button>
</section>
</div>
<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
</script>
</div>
</div>
<!--//menu-->
</div>
<!---->
<div class="search">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i> </i>Search... </a>
</div>
<div class="clearfix"> </div>
</div>
<!---pop-up-box---->
<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<!---//pop-up-box---->
<div id="small-dialog" class="mfp-hide">
<div class="search-top">
<div class="login">
<input type="submit" value="">
<input type="text" value="Type something..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
</div>
<p>Agriculture</p>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
<!---->
<div class="header-top">
<h1><a href="index.html">Crofting </a></h1>
</div>
</div>
</div>
<!--content-->
<div class="container">
<div class="page">
<h3 class="typo1">Typography</h3>
<!--button-->
<div class="grid_3 grid_4">
<div class="page-header">
<h3>Headings</h3>
</div>
<div class="bs-example">
<table class="table">
<tbody>
<tr>
<td><h1 id="h1-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1></td>
<td class="type-info">Semibold 36px</td>
</tr>
<tr>
<td><h2 id="h2-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2></td>
<td class="type-info">Semibold 30px</td>
</tr>
<tr>
<td><h3 id="h3-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
<td class="type-info">Semibold 24px</td>
</tr>
<tr>
<td><h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4></td>
<td class="type-info">Semibold 18px</td>
</tr>
<tr>
<td><h5 id="h5-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5></td>
<td class="type-info">Semibold 14px</td>
</tr>
<tr>
<td><h6 id="h6-bootstrap-heading">h6. Bootstrap heading</h6></td>
<td class="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--buttons-->
<div class="page-header">
<h3>Buttons</h3>
</div>
<p class="grid1">
<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-link">Link</button>
</p>
<p class="grid1 ">
<button type="button" class="btn btn-1 btn-default">Default</button>
<button type="button" class="btn btn-1 btn-primary">Primary</button>
<button type="button" class="btn btn-1 btn-success">Success</button>
<button type="button" class="btn btn-1 btn-info">Info</button>
<button type="button" class="btn btn-1 btn-warning">Warning</button>
<button type="button" class="btn btn-1 btn-danger">Danger</button>
<button type="button" class="btn btn-1 btn-link">Link</button>
</p>
<p class="grid1">
<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-link">Link</button>
</p>
<p class="grid1">
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>