gulp-powered
Version:
A Gulp builded, Bootstrap-v4 powered static website app starter-kit project
254 lines (189 loc) • 7.15 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>
Contact
</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">
<a class="nav-link" href="http://localhost:3000/services/">
<span>Services</span>
</a>
</li>
<li class="nav-item active">
<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/contact/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">Contact
<small>Subheading</small>
</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active">Contact</li>
</ol>
<!-- Content Row -->
<div class="row">
<!-- Map Column -->
<div class="col-lg-8 mb-4">
<!-- Embedded Google Map -->
<iframe width="100%" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&ie=UTF8&ll=37.0625,-95.677068&spn=56.506174,79.013672&t=m&z=4&output=embed"></iframe>
</div>
<!-- Contact Details Column -->
<div class="col-lg-4 mb-4">
<h3>Contact Details</h3>
<p>
3481 Melrose Place
<br>Beverly Hills, CA 90210
<br>
</p>
<p>
<abbr title="Phone">P</abbr>: (123) 456-7890
</p>
<p>
<abbr title="Email">E</abbr>:
<a href="mailto:name@example.com">name@example.com
</a>
</p>
<p>
<abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM
</p>
</div>
</div>
<!-- /.row -->
<!-- Contact Form -->
<!-- In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
<div class="row">
<div class="col-lg-8 mb-4">
<h3>Send us a Message</h3>
<form name="sentMessage" id="contactForm" novalidate>
<div class="control-group form-group">
<div class="controls">
<label>Full Name:</label>
<input type="text" class="form-control" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Phone Number:</label>
<input type="tel" class="form-control" id="phone" required data-validation-required-message="Please enter your phone number.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Email Address:</label>
<input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Message:</label>
<textarea rows="10" cols="100" class="form-control" id="message" required data-validation-required-message="Please enter your message" maxlength="999" style="resize:none"></textarea>
</div>
</div>
<div id="success"></div>
<!-- For success/fail messages -->
<button type="submit" class="btn btn-primary" id="sendMessageButton">Send Message</button>
</form>
</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>