112 lines
4.5 KiB
HTML
112 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Capacity Dashboard</title>
|
|
<meta name="description" content="Capacity Dashboard">
|
|
<meta name="author" content="capacity">
|
|
<!-- favicon -->
|
|
<link rel="shortcut icon" href="{{ url_for('static', path='assets/favicon/favicon-192x192-wh.png')}}">
|
|
<!-- custom css -->
|
|
<link rel="stylesheet" href="{{ url_for('static', path='/css/capacity.css')}}">
|
|
<!-- bootstrap css -->
|
|
{# <link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/bootstrap.css') }}"> #}
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('node_modules', path='/bootswatch/dist/flatly/bootstrap.css') }}">
|
|
<!-- fakeLoader -->
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('node_modules', path='/jq-fakeloader/css/fakeLoader.css')}}">
|
|
</head>
|
|
<style type="text/css">
|
|
header {
|
|
position: relative;
|
|
background-color: black;
|
|
height: 50vh;
|
|
min-height: 25rem;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
header video {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
z-index: 0;
|
|
-ms-transform: translateX(-50%) translateY(-50%);
|
|
-moz-transform: translateX(-50%) translateY(-50%);
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
header .container {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
header .overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: black;
|
|
opacity: 0.5;
|
|
z-index: 1;
|
|
}
|
|
@media (pointer: coarse) and (hover: none) {
|
|
header {
|
|
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
|
|
}
|
|
header video {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<!-- jquery js -->
|
|
<script type="text/javascript" src="{{ url_for('static', path='/js/jquery-3.4.1.js') }}"></script>
|
|
<!-- bootstrap js -->
|
|
<script type="text/javascript" src="{{ url_for('static', path='/js/bootstrap.bundle.js') }}"></script>
|
|
<!-- font-awesome js -->
|
|
<script type="text/javascript" src="{{ url_for('static', path='/font-awesome/js/all.js')}}"></script>
|
|
<!-- fakeLoader -->
|
|
<script type="text/javascript" src="{{ url_for('node_modules', path='/jq-fakeloader/js/fakeLoader.js') }}"></script>
|
|
<!-- begin document -->
|
|
<div class="fakeLoader"></div>
|
|
<script>
|
|
$.fakeLoader({'timeToHide':1200, 'spinner':'spinner4', 'bgColor': '#4686ec'});
|
|
</script>
|
|
<header>
|
|
<div class="overlay"></div>
|
|
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
|
|
<source src="https://panaetius-temp.s3-eu-west-1.amazonaws.com/gn19.mp4" type="video/mp4">
|
|
</video>
|
|
<div class="container h-100">
|
|
<div class="d-flex h-100 text-center align-items-center">
|
|
<div class="w-100 text-white">
|
|
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wired.com%2Fwp-content%2Fuploads%2F2015%2F09%2Fgoogle-logo-1200x630.jpg&f=1&nofb=1" width="10%">
|
|
<h1 class="display-3">Grand National 2020</h1>
|
|
<p class="lead mb-0">3 weeks away</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="my-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto">
|
|
<p>The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
|
|
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
|
|
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
|
|
<p class="mb-0">
|
|
Created by <a href="https://startbootstrap.com">Start Bootstrap</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- custom js -->
|
|
<script type="text/javascript" src="{{url_for('static', path='/js/capacity.js')}}"></script>
|
|
</body>
|
|
</html>
|