initial template mockup for frontend

This commit is contained in:
Nabeel Shahzad 2017-08-01 23:23:46 -05:00
parent 3f69c412b3
commit 065547aad2

135
public/template.htm Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/frontend/img/apple-icon.png">
<link rel="icon" type="image/png" href="assets/frontend/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>phpvms</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!-- CSS Files -->
<link href="assets/frontend/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/frontend/css/now-ui-kit.css" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="assets/frontend/css/demo.css" rel="stylesheet" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-toggleable-md" style="background: #067ec1;">
<div class="container" style="width: 85%!important;">
<div class="navbar-translate">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
<p class="navbar-brand text-white" data-placement="bottom" target="_blank">
<img src="img/logo.svg" height="40" style="background-color: #FFF"/>
phpVMS
</p>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="assets/frontend/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="now-ui-icons objects_globe"></i>
<p>Flights</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="now-ui-icons ui-1_send"></i>
<p>PIREPs</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="now-ui-icons users_circle-08"></i>
<p>Profile</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="clear"></div>
<div class="wrapper">
<div class="clear"></div>
<div class="container-fluid" style="width: 85%!important;">
<div class="row">
<div class="col-md-12">
<h2 class="title">Who we are?</h2>
<h5 class="description">According to the National Oceanic and Atmospheric Administration, Ted, Scambos, NSIDClead scentist, puts the potentially record low maximum sea ice extent tihs year down to low ice extent in the Pacific and a late drop in ice extent in the Barents Sea.</h5>
</div>
</div>
<div class="separator separator-primary"></div>
<div class="section-story-overview">
<div class="row">
<div class="col-md-6">
<div class="image-container image-left">
<!-- First image on the left side -->
<img src="assets/frontend/img/login.jpg" alt="" class="rounded img-fluid img-raised">
<p class="blockquote blockquote-primary">"Over the span of the satellite record, Arctic sea ice has been declining significantly, while sea ice in the Antarctichas increased very slightly"
<br>
<br>
<small>-NOAA</small>
</p>
</div>
<!-- Second image on the left side of the article -->
<div class="image-container">
<img src="assets/frontend/img/bg3.jpg" alt="" class="img-fluid rounded img-raised">
</div>
</div>
<div class="col-md-5">
<!-- First image on the right side, above the article -->
<div class="image-container image-right">
<img src="assets/frontend/img/bg1.jpg" alt="" class="rounded img-fluid img-raised">
</div>
<h3>So what does the new record for the lowest level of winter ice actually mean</h3>
<p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever happens with climate change. Even if the Arctic continues to be one of the fastest-warming regions of the world, it will always be plunged into bitterly cold polar dark every winter. And year-by-year, for all kinds of natural reasons, theres huge variety of the state of the ice.
</p>
<p>
For a start, it does not automatically follow that a record amount of ice will melt this summer. More important for determining the size of the annual thaw is the state of the weather as the midnight sun approaches and temperatures rise. But over the more than 30 years of satellite records, scientists have observed a clear pattern of decline, decade-by-decade.
</p>
<p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever happens with climate change. Even if the Arctic continues to be one of the fastest-warming regions of the world, it will always be plunged into bitterly cold polar dark every winter. And year-by-year, for all kinds of natural reasons, theres huge variety of the state of the ice.
</p>
</div>
</div>
</div>
</div>
<div class="clearfix" style="height: 200px;"></div>
<footer class="footer footer-default">
<div class="container">
<div class="copyright">
&copy;
<script>
document.write(new Date().getFullYear())
</script>, Designed by
<a href="http://www.invisionapp.com" target="_blank">Invision</a>. Coded by
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
</div>
</div>
</footer>
</div>
</body>
<!-- Core JS Files -->
<script src="assets/frontend/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="assets/frontend/js/core/tether.min.js" type="text/javascript"></script>
<script src="assets/frontend/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="assets/frontend/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="assets/frontend/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="assets/frontend/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="assets/frontend/js/now-ui-kit.js" type="text/javascript"></script>
</html>