gulp-powered
Version:
A Gulp builded, Bootstrap-v4 powered static website app starter-kit project
268 lines (202 loc) • 8.3 kB
HTML
<html lang="en" dir="ltr">
</head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="all, index, follow" />
<meta name="language" content="English" />
<meta name="Keywords" content="">
<meta name="abstract" content="" />
<meta name="subject" content="">
<title>
About
</title>
<link href="http://localhost:3000/css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://localhost:3000/js/script.js"></script>
</head>
<body>
<!-- declaring var in Nunjucks: use `set` keyword -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/">
<svg viewBox="0 0 150 150" width="100" height="30">
<image xlink:href="http://localhost:3000/img/logo/copyleft.svg" />
</svg>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!-- for loop in Nunjucks -->
<li class="nav-item">
<a class="nav-link" href="http://localhost:3000//">
<span>Home</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="http://localhost:3000/about/">
<span>About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:3000/services/">
<span>Services</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:3000/contact/">
<span>Contact</span>
</a>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-i18n="Lang"><span class="caret"></span></button>
<div id="i18n-switch" class="dropdown-menu">
<a class="dropdown-item" href="#" data-locale="en" data-i18n="EN"></a>
<a class="dropdown-item" href="#" data-locale="tr" data-i18n="TR"></a>
</div>
</div>
<div id="lima-datasets">
<input id="search-box" type="text" class="form-control typeahead" aria-label="">
</div>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" data-i18n="Search"></button>
</span>
</div>
</form>
</li>
</ul>
</div>
</div>
</nav>
<div class="content container">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>
This page's codes stay in
<code>src/pages/about/index.html</code>
</p>
<button id="click-me">Click me!</button>
</div>
</div>
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3" data-i18n="about">
<small data-i18n="subhead"></small>
</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html" data-i18n="Main"></a>
</li>
<li class="breadcrumb-item active" data-i18n="about"></li>
</ol>
<!-- Intro Content -->
<div class="row">
<div class="col-lg-6">
<img class="img-fluid rounded mb-4" src="http://placehold.it/750x450" alt="">
</div>
<div class="col-lg-6">
<h2>About Modern Business</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptate nihil eum consectetur similique? Consectetur, quod, incidunt, harum nisi dolores delectus reprehenderit voluptatem perferendis dicta dolorem non blanditiis ex fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, magni, aperiam vitae illum voluptatum aut sequi impedit non velit ab ea pariatur sint quidem corporis eveniet. Odit, temporibus reprehenderit dolorum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur, modi mollitia corporis ipsa voluptate corrupti eum ratione ex ea praesentium quibusdam? Aut, in eum facere corrupti necessitatibus perspiciatis quis?</p>
</div>
</div>
<!-- /.row -->
<!-- Team Members -->
<h2>Our Team</h2>
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100 text-center">
<img class="card-img-top" src="http://placehold.it/750x450" alt="">
<div class="card-body">
<h4 class="card-title">Team Member</h4>
<h6 class="card-subtitle mb-2 text-muted">Position</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus aut mollitia eum ipsum fugiat odio officiis odit.</p>
</div>
<div class="card-footer">
<a href="#">name@example.com</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100 text-center">
<img class="card-img-top" src="http://placehold.it/750x450" alt="">
<div class="card-body">
<h4 class="card-title">Team Member</h4>
<h6 class="card-subtitle mb-2 text-muted">Position</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus aut mollitia eum ipsum fugiat odio officiis odit.</p>
</div>
<div class="card-footer">
<a href="#">name@example.com</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100 text-center">
<img class="card-img-top" src="http://placehold.it/750x450" alt="">
<div class="card-body">
<h4 class="card-title">Team Member</h4>
<h6 class="card-subtitle mb-2 text-muted">Position</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus aut mollitia eum ipsum fugiat odio officiis odit.</p>
</div>
<div class="card-footer">
<a href="#">name@example.com</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Our Customers -->
<h2>Our Customers</h2>
<div class="row">
<div class="col-lg-2 col-sm-4 mb-4">
<img class="img-fluid" src="http://placehold.it/500x300" alt="">
</div>
<div class="col-lg-2 col-sm-4 mb-4">
<img class="img-fluid" src="http://placehold.it/500x300" alt="">
</div>
<div class="col-lg-2 col-sm-4 mb-4">
<img class="img-fluid" src="http://placehold.it/500x300" alt="">
</div>
<div class="col-lg-2 col-sm-4 mb-4">
<img class="img-fluid" src="http://placehold.it/500x300" alt="">
</div>
<div class="col-lg-2 col-sm-4 mb-4">
<img class="img-fluid" src="http://placehold.it/500x300" alt="">
</div>
<div class="col-lg-2 col-sm-4 mb-4">
<img class="img-fluid" src="http://placehold.it/500x300" alt="">
</div>
</div>
<!-- /.row -->
</div>
</div>
</div>
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">
<span data-i18n="copy"></span> © <span data-i18n="Name"></span>
</p>
</div>
</footer>
<script type="text/javascript">
$('#click-me').on('click', function(){
alert('Button clicked!');
});
</script>
</body>
</html>