gulp-powered
Version:
A Gulp builded, Bootstrap-v4 powered static website app starter-kit project
225 lines (161 loc) • 6.1 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>
Services
</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">
<a class="nav-link" href="http://localhost:3000/about/">
<span>About</span>
</a>
</li>
<li class="nav-item active">
<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/services/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">Services
<small>Subheading</small>
</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active">Services</li>
</ol>
<!-- Image Header -->
<img class="img-fluid rounded mb-4" src="http://placehold.it/1200x300" alt="">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Card Title</h4>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Card Title</h4>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Card Title</h4>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</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>