PNG
IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
File Manager
File Manager
Viewing File: typography.html
<!--
Author: W3layouts
Author URL:
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transporters a Transportation Category Flat Bootstrap Responsive Website Template | Typography :: W3layouts</title>
<!-- Meta tag Keywords -->
<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="Transporters web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web Designs" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--// Meta tag Keywords -->
<!-- css files -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <!-- Style-CSS -->
<link rel="stylesheet" href="css/font-awesome.css"> <!-- Font-Awesome-Icons-CSS -->
<!-- //css files -->
<!-- web-fonts -->
<link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<!-- //web-fonts -->
</head>
<body>
<div class="header">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a href="index.html">Transporters</a></h1>
</div>
<div class="top-nav-text">
<div class="nav-contact-w3ls"><i class="fa fa-phone" aria-hidden="true"></i><p>+0(12) 444 262 399</p></div>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="hvr-underline-from-center active" href="index.html">Home</a></li>
<li><a href="services.html" class="hvr-underline-from-center">Services</a></li>
<li><a href="#team" class="hvr-underline-from-center scroll scroll">Team</a></li>
<li><a href="gallery.html" class="hvr-underline-from-center">Gallery</a></li>
<li><a href="#" data-toggle="dropdown"><span data-hover="ShortCodes">Short Codes</span><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="icons.html"><span data-hover="Icons">Icons</span></a></li>
<li><a href="typography.html"><span data-hover="Typograpghy">Typograpghy</span></a></li>
</ul>
</li>
<li><a href="contact.html" class="hvr-underline-from-center">Contact</a>
</ul>
</div>
<div class="clearfix"> </div>
</nav>
</div>
<div class="banner1">
</div>
<div class="about-breadcrumb">
<div class="container">
<ul>
<li><a href="index.html">Home</a><i>></i></li>
<li>TYpography</li>
</ul>
</div>
</div>
<!-- typography -->
<div class="typography">
<div class="container">
<h3 class="agileits-icons-title">Short Codes</h3>
<div class="grid_3 grid_4">
<h3 class="hdg">Headings</h3>
<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>h6. Bootstrap heading</h6></td>
<td class="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Buttons</h3>
<h1>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h1>
<h2>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h2>
<h3>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h3>
<h4>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h4>
<h5>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h5>
<h6>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h6>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Progress Bars</h3>
<div class="tab-content">
<div class="tab-pane active" id="domprogress">
<div class="progress">
<div class="progress-bar progress-bar-primary" style="width: 20%"></div>
</div>
<p>Info with <code>progress-bar-info</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 60%"></div>
</div>
<p>Success with <code>progress-bar-success</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 30%"></div>
</div>
<p>Warning with <code>progress-bar-warning</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 70%"></div>
</div>
<p>Danger with <code>progress-bar-danger</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 50%"></div>
</div>
<p>Inverse with <code>progress-bar-inverse</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-inverse" style="width: 40%"></div>
</div>
<p>Inverse with <code>progress-bar-inverse</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
</div>
</div>
</div>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Alerts</h3>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Pagination</h3>
<div class="col-md-6">
<nav>
<ul class="pagination pagination-lg">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
<div class="col-md-6">
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
</ul>
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Breadcrumbs</h3>
<ol class="breadcrumb">
<li class="active">Home</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Badges</h3>
<div class="col-md-6">
<p>Add modifier classes to change the appearance of a badge.</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Classes</th>
<th>Badges</th>
</tr>
</thead>
<tbody>
<tr>
<td>No modifiers</td>
<td><span class="badge">42</span></td>
</tr>
<tr>
<td><code>.badge-primary</code></td>
<td><span class="badge badge-primary">1</span></td>
</tr>
<tr>
<td><code>.badge-success</code></td>
<td><span class="badge badge-success">22</span></td>
</tr>
<tr>
<td><code>.badge-info</code></td>
<td><span class="badge badge-info">30</span></td>
</tr>
<tr>
<td><code>.badge-warning</code></td>
<td><span class="badge badge-warning">412</span></td>
</tr>
<tr>
<td><code>.badge-danger</code></td>
<td><span class="badge badge-danger">999</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<p>Easily highlight new or unread items with the <code>.badge</code> class</p>
<div class="list-group list-group-alternate">
<a href="#" class="list-group-item"><span class="badge">201</span> <i class="ti ti-email"></i> Inbox </a>
<a href="#" class="list-group-item"><span class="badge badge-primary">5021</span> <i class="ti ti-eye"></i> Profile visits </a>
<a href="#" class="list-group-item"><span class="badge">14</span> <i class="ti ti-headphone-alt"></i> Call </a>
<a href="#" class="list-group-item"><span class="badge">20</span> <i class="ti ti-comments"></i> Messages </a>
<a href="#" class="list-group-item"><span class="badge badge-warning">14</span> <i class="ti ti-bookmark"></i> Bookmarks </a>
<a href="#" class="list-group-item"><span class="badge badge-danger">30</span> <i class="ti ti-bell"></i> Notifications </a>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Wells</h3>
<div class="well">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
</div>
<div class="well">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here
</div>
<div class="well">
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. It has survived not only five centuries, but also the leap into electronic
</div>
</div>
<div class="grid_3 grid_5 wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Tabs</h3>
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
<li role="presentation" class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div>
</div>
<h3 class="hdg wow fadeInUp animated" data-wow-delay=".5s">Unordered List</h3>
<ul class="list-group wow fadeInUp animated" data-wow-delay=".5s">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<h3 class="hdg wow fadeInUp animated" data-wow-delay=".5s">Ordered List</h3>
<ol class="wow fadeInUp animated" data-wow-delay=".5s">
<li class="list-group-item1">Cras justo odio</li>
<li class="list-group-item1">Dapibus ac facilisis in</li>
<li class="list-group-item1">Morbi leo risus</li>
<li class="list-group-item1">Porta ac consectetur ac</li>
<li class="list-group-item1">Vestibulum at eros</li>
</ol>
<h3 class="hdg wow fadeInUp animated" data-wow-delay=".5s">Forms</h3>
<div class="input-group wow fadeInUp animated" data-wow-delay=".5s">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group wow fadeInUp animated" data-wow-delay=".5s">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group wow fadeInUp animated" data-wow-delay=".5s">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group input-group-lg wow fadeInUp animated" data-wow-delay=".5s">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group wow fadeInUp animated" data-wow-delay=".5s">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm wow fadeInUp animated" data-wow-delay=".5s">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
<div class="row wow fadeInUp animated" data-wow-delay=".5s">
<div class="col-lg-6 in-gp-tl">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6 in-gp-tb">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row wow fadeInUp animated" data-wow-delay=".5s">
<div class="col-lg-6 in-gp-tl">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6 in-gp-tb">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row wow fadeInUp animated" data-wow-delay=".5s">
<div class="col-lg-6 in-gp-tl">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6 in-gp-tb">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="page-header wow fadeInUp animated" data-wow-delay=".5s">
<h3 class="hdg">Tables</h3>
</div>
<h2 class="typoh2 wow fadeInUp animated" data-wow-delay=".5s">Default styles</h2>
<p class="wow fadeInUp animated" data-wow-delay=".5s">For basic stylinglight padding and only horizontal add the base class <code>.table</code> to any <code><table></code>.</p>
<div class="bs-docs-example wow fadeInUp animated" data-wow-delay=".5s">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<hr class="bs-docs-separator">
<p class="wow fadeInUp animated" data-wow-delay=".5s">Add any of the following classes to the <code>.table</code> base class.</p>
<p class="wow fadeInUp animated" data-wow-delay=".5s">Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-8).</p>
<div class="bs-docs-example wow fadeInUp animated" data-wow-delay=".5s">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<p class="wow fadeInUp animated" data-wow-delay=".5s">Add borders and rounded corners to the table.</p>
<div class="bs-docs-example wow fadeInUp animated" data-wow-delay=".5s">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@getbootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<p class="wow fadeInUp animated" data-wow-delay=".5s">Enable a hover state on table rows within a <code><tbody></code>.</p>
<div class="bs-docs-example wow fadeInUp animated" data-wow-delay=".5s">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- //typography -->
<!-- footer -->
<footer>
<div class="agileits-w3layouts-footer">
<div class="container">
<div class="col-md-4 w3-agile-grid">
<!------<h5>About Us</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipis cingelit. Aenean bibendum urna non nisi orn, condimentum iaculis ipsum blandit. Duis vulputate metus nec luctus.</p>------>
<div class="footer-agileinfo-social">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-rss"></i></a></li>
<li><a href="#"><i class="fa fa-vk"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-4 w3-agile-grid">
<h5>Address</h5>
<div class="w3-address">
<div class="w3-address-grid">
<div class="w3-address-left">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="w3-address-right">
<h6>Phone Number</h6>
<p>+0(12) 444 262 399</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="w3-address-grid">
<div class="w3-address-left">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="w3-address-right">
<h6>Email Address</h6>
<p>Email :<a href="mailto:example@email.com"> mail@example.com</a></p>
</div>
<div class="clearfix"> </div>
</div>
<div class="w3-address-grid">
<div class="w3-address-left">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="w3-address-right">
<h6>Location</h6>
<p> Go Track Express Logistics, 25D Copperfield St
London SE1 0EN
</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="col-md-4 w3-agile-grid">
<h5>Recent Posts</h5>
<div class="w3ls-post-grids">
<div class="w3ls-post-grid">
<div class="w3ls-post-img">
<a href="#"><img src="images/p1.jpg" alt="" /></a>
</div>
<div class="w3ls-post-info">
<h6><a href="#" data-toggle="modal" data-target="#myModal">Donec vel sapien in erat</a></h6>
<p>June 10,2017</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="w3ls-post-grid">
<div class="w3ls-post-img">
<a href="#"><img src="images/p2.jpg" alt="" /></a>
</div>
<div class="w3ls-post-info">
<h6><a href="#" data-toggle="modal" data-target="#myModal">Donec vel sapien in erat</a></h6>
<p>June 17,2017</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="w3ls-post-grid">
<div class="w3ls-post-img">
<a href="#"><img src="images/p3.jpg" alt="" /></a>
</div>
<div class="w3ls-post-info">
<h6><a href="#" data-toggle="modal" data-target="#myModal">Donec vel sapien in erat</a></h6>
<p>June 26,2017</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="w3ls-post-grid">
<div class="w3ls-post-img">
<a href="#"><img src="images/p1.jpg" alt="" /></a>
</div>
<div class="w3ls-post-info">
<h6><a href="#" data-toggle="modal" data-target="#myModal">Donec vel sapien in erat</a></h6>
<p>June 26,2017</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="copyright">
<div class="container">
<p>© Oceangatelogistic 2014. All RIGHTS RESERVED.</p>
</div>
</div>
</footer>
<!-- //footer -->
<!-- js-scripts -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script> <!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->
<!-- //js-scripts -->
<!-- start-smoth-scrolling -->
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
<!-- start-smoth-scrolling -->
</body>
</html>
b IDATxytVսϓ22 A@IR :hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E IENT ; @x T.i%-X} SvS5.r/ UHz^_$-W" w)Ɗ/ @Z &IoX P$K} JzX:;` &, ŋui,e6mX
Եr Kb1ԗ) D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A D A ݀!I*]R;I2$eZ#ORZSrr 6mteffu*((Pu'v{ DIߔ4^pIm '77WEEE;vƎ 4- $]'RI{\I&G :IHJ
DWBB=\WRm
o$K(V 9 ABB.}jѢv `^?IOȅ} ڶmG }T#FJ`5 6$- ھ}FI&v;0(h; Б 38CӧOWf!; A
i:F _m9s&|q%=# wZprrrla
A & P\\СC[A#! { olF}
`E2} MK/vV )i{ 4BffV\|ۭX `b@kɶ@%i$K z5zhmX [IXZ ` 'b%$r5 M4º /l
ԃ ߖ xhʔ)[@=}
K6IM}^ 5k㏷݆z
ΗÿO:gdGBmyT/@+Vɶ纽zl.yit뭷zV 0[Y^>Wsqs}\/@$(T7f.Inݺi R$푔n.~?H))\Z RW'Mo~v
Ov6oԃ xz! S,&xm/yɞԟ?'uaSѽb, 8GלKboi&3 t7Y,)JJ c[nzӳdE&KsZLӄ I ?@ & %ӟ۶mSMMњ0 iؐSZ, |J+N
~,0A 0!5%Q-YQQa 3 }$_vVr f9f?S 8` z D A D A D A D A D A D A D A D A D A dqP,تmMmg 1V?rSI꒟]u|l
RCyEf٢9 jURbztѰ!m5~tGj2DhG*{H9)꒟ר3:(+3\?/;TUݭʴ~S6lڧUJ*i$d(#=Yݺd{,p|3B)) q:vN0Y.jkק6;SɶVzHJJЀ-utѹսk>QUU \~]fFnK?&ߡ5b=z9)^|u_k-[ y%ZNU6 7Mi:]ۦ tk[n
X(e6 Bb."8cۭ|~teuuw|ήI-5"~Uk;ZicEmN/:]M>
cQ^uiƞ??Ң pc# TUU3UakNwA`:Y_V-8.KKfRi tv*
9S6ֿj,ՃNOMߤ]z^fOh|<>@Å5 _/Iu?{SY4hK/2]4%it5q]GGe2%iR|
W&f*^]??vq[LgE_3f}Fxu~}qd-ږFxu~I N >\;͗O֊:̗WJ@ Bh W=y|GgwܷH_NY?)Tdi'?խwhlmQi !SUUsw4kӺe4rfxu-[nHtMFj}H_u~w>)oV}(T'ebʒv3_[+vn @Ȭ\S}ot}w=k HFnxg S 0eޢm~l}uqZfF oZuuEg
`zt~? b;t%>WTkķh[ 2eG8LIWx,^\thrl^Ϊ{=dž<}qV@ ⠨Wy^LF_>0UkD uʫuCs$)I v:IK; 6ֲ4{^6 եm+l 3>݆uM 9u ?>Zc }g~qhKwڭ e FMM~pМuqǿz6Tb@8 @Y|jx](^]gf}M"tG
-w.@ vOqh~/HII` S[l.6nØXL9vU cOoB\xoǤ'T&I ǍQw_wpv[kmO{w~>#=P1Pɞa-we:iǏlHo꒟f9SzH?+shk%Fs:q VhqY `jvO'ρ?PyX3lх]˾uV{ݞ]1,MzYNW~̈́ joYn}ȚF߾mS]F z+EDxm/d{F{-W-4wY듏:??_gPf
^3ecg ҵs8R2מz@TA NGj)}CNi/R~}c:5{! ZHӋӾ6}T] G]7W6^n
9*,YqOZj :P?Q D FL|?-^.Ɵ7}fFhxe2Ps cz1&5\cn[=Vn[ĶE鎀uˌd3GII k;lNmشOuuRVfBE]ۣe Ӷu
:X-[(er4~LHi6:Ѻ@ԅr ST0 trk%$Č0 ez" *z " T/X9|8.C5Feg} C Q%͞ˣJvL/? j^ h & 9xF`њZ( & yF&Iݻfg #W;3^{Wo^4'v V[[K';+mӍִ] AC @ W?1^{එyh +^]fm~iԵ] AB @WTk̏t uR?l.OIHiYyԶ] Aˀ 7c:q}ힽaf6Z~қm(+sK4{^6}T *UUu]n.:kx{:2 _m=sAߤU@? Z-Vކе z왍Nэ{|5 pڶn b
p-@sPg]0G7fy-M{GCF'%{4` =$-Ge\ eU:m+Zt'WjO!OAF @ik&t݆ϥ_
e}=]" Wz_.͜E3leW Fih|t-wZۍ-uw=6 YN {6|} | *={Ѽn.S .z1z jۻTH]흾 D uDvmvK .` V]yY~sI@t?/ϓ. m&[ " +P?MzovVЫG3- G RR[(!!\_,^%?v@ ҵő
m`Y)tem8GM x.))A]Y i`ViW`?^~! S#^+ѽGZj?Vģ 0.))AlzL*]OXrY `DBBLOj{-MH'ii-ϰ ok7^
)쭡b]UXSְmռY|5 *cֽk0B7镹%ڽP# 8nȎq}mJr23_>lE5$iwui+ H~F`IjƵ@q
\ @#qG 0" . 0" l ` . 0! , AQHN6qzkKJ#o;`Xv2>,tێJJ7Z/*A .@fفjMzkg @TvZH3Zxu6Ra'%O?/d Q5x YkU]Rֽkق@ DaS^RSּ5|BeHNN͘p
HvcYcC5:y
#`οb; z2 .!kr}gUWkyZn=f Pvsn3p~;4p˚=ē~NmI] ¾ 0lH[_L hs h_ ғߤc_њe c) g 7VIZ5 yrgk̞W#IjӪv>՞y睝M8[ |]\շ 8M 6%|@P ZڨI-m>=k= 'aiRo-x?>Q. }`Ȏ:Wsmu u >
.@,&;+!!˱tﭧD QwRW\vF\~Q7>sp Yw$%A~;~}6 ¾ g &if_=j,v+U L1(tW ake:@Ș>j$Gq2t7S?vL|]u/ .(0 E 6Mk6hiۺzښOrifޱxm/Gx> Lal%%~{lBsR4* }{0Z/ tNIɚpV ^# Lf:u@k#RSu
=S^ZyuR/.@n&z~B=0eg뺆#,Þ[ B/?H uUf7y
Wy}Bwegל`Wh(||`l`.;Ws?V@" c:iɍL֯PGv6zctM̠':wuW;d=;EveD}9J@ B(0iհ bvP1{\P&G7DIy_$-Q jm~Yrr&]CDv%bh|Yzni _ R ;kg}nJOIIwy uL}{ЌNj}:+3Y?:WJ/N+Rzd=hb;dj͒suݔ@NKMԄ jqzC5 @y°hL m;*5ezᕏ=ep
XL n?מ:r`۵tŤZ|1v`V뽧_csج'ߤ%oTuumk%%%h)uy]Nk[n
'b2 l.=͜E%gf$[c;s:V-͞WߤWh-j7]4=F-X]>ZLSi[Y*We; Zan(Ӈ W|e(HNNP5[=
r4tP
&0< pc# `vTNV
GFqvTi * Tyam$ߏWyE* VJKMTfFw >'$-ؽ.Ho.8c"@ D A D A D A D A D A D A D A D A D A~j*֘, N;Pi3599h=g oض L giJ5փy~}&Zd9 p֚
e:|hL``b/d9 p? fgg+%%hMg Xosج, ΩOl0Zh=x djL mhݻo O [g_l, 8a]٭+ӧ0 $I] c]:粹:Teꢢ"5a^Kgh,&= =՟ ^߶ߢE ܹS J}I%:8
IDAT~,9/ʃ PW'Mo }zNƍ쨓zPb NZ~^z=4mswg;5 Y~SVMR XUյڱRf?s:w
; 6H:º i 5 -maM &O3; 1IKeam Zh͛7+##v+c ~u~ca] GnF'ټL~ PPPbn
v oC 4R,ӟgg %hq} @#M4IÇ Oy^xM Zx
) yO w @HkN˖-Sǎ mb]X@n+i͖ !++K3gd\$mt$^ YfJ \8PRF )77Wא!Cl $i: @@_oG I{$# 8磌ŋ9 1A (Im7 ֭>}ߴJq7ޗt^ -[ԩSj*}%]&'
- ɓ'ꫯVzzvB#; a
7@GxI{jƌ.LÇWBB7 `O"I$ /@R @ eee@۷ >}0 ,ɒ2$53Xs|cS~r pTYYY} k Hc %&k.], @ A D A D A D A D A D A D A D A D A @lT<%''*Lo^={رc5h %$+CnܸQ3fҥK}vUVVs9G
R,_{ xˇ3 o߾;TTTd}馛]uuuG~iԩ@4 bnvmvfϞ /Peeeq}}z a
I~,誫{UWW뮻}_~YƍSMMMYχ ֝waw \ ď cxꩧtEƍկ_?۷5@u ?1kNׯWzz/wy>}zj3 k (ٺu q_Zvf̘:~ AB Q&r| ! %KҥKg Ԟ={<_X-z ! CyFUUz~ AB QIIIjݺW $ UXXDٳZ~ AB QƍecW $<(~<RSSvZujjjԧO ZQu@4 8m&&&jԩg $ ď 1h ͟?_{768@ g
=@ `)))5o6m 3 ) ѣƌJ;wҿUTT /KZR{~a=@ 0o<*狔iFɶ[ˎ ;T]] OX@ ?K.ۈxN p p p p p p p p p p p p p p p p pP fl߾] ,{ｧk۶mڿo5 BTӦMӴiӴ|r D B2e |An!D y'tkΝ[A $***t5'
" !駟oaD nΝ:t֭[gD ШQ0 6qD;@ x M6v( PiizmZ 4ew" @ ̴ixf [~-F ٱc&IZ 2|n!?$ @{[HTɏ #@h Ȏ I# _m (F /6Z3 z'\r, r!;w2Z3j=~G Y 7"I$i I. p_" ? p N` y D D ?: _ G ÿa b7 J ! Bx @0 Bo
cG @`1C [ @0G
@`0C _ u V1 aC X > W ` | `! < S `" <. `# c `? cA C 4
? c p# ~ @0 ?: 0 8& _ M Q1 J h# ? /` 7; I q 7 a w Q A 1 H p
! #< 8/# @1Ul7 =S=K.4Z?E _$i@ ! 1!E 4? ` P_ @B ă 1 0# : " aU,xb F Y1
[n |n
#' v EH:`x b
# v D 4 Y hi.i& EΖv# O H 4IŶ}:Ik h @tZRF # (tXҙzZ ? I3l7 q@õ|ۍ 1,GpuY Ꮿ@ hJv# x xk$
v# 9 5 }_$ c S#=+"K {F*m7`# %H:NRS p6I?sIՖ{Ap$I$I:QRv2$Z @UJ*$]<FO4 IENDB`