188 lines
6.4 KiB
HTML
188 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Coming Soon: Simple | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="./favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="./assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="./assets/css/theme.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand navbar-light navbar-absolute-top">
|
|
<div class="container">
|
|
<nav class="navbar-nav-wrap">
|
|
<!-- Default Logo -->
|
|
<a class="navbar-brand" href="./index.html" aria-label="Front">
|
|
<img class="navbar-brand-logo" src="./assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<!-- End Default Logo -->
|
|
|
|
<div class="ms-auto">
|
|
<a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Buy now</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Content -->
|
|
<div class="d-md-flex">
|
|
<div class="container d-md-flex align-items-md-center vh-md-100 content-space-t-3 content-space-b-1 content-space-b-md-3 content-space-md-0">
|
|
<div class="row justify-content-md-between align-items-md-center flex-grow-1">
|
|
<div class="col-9 col-md-5 mb-5 mb-md-0">
|
|
<img class="img-fluid" src="./assets/svg/illustrations/oc-yelling.svg" alt="SVG Illustration">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6">
|
|
<!-- Heading -->
|
|
<div class="mb-4">
|
|
<h1>We're coming soon.</h1>
|
|
<p>Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="js-countdown row mb-5">
|
|
<div class="col-3">
|
|
<h2 class="js-cd-days h1 text-primary mb-0"></h2>
|
|
<h5 class="mb-0">Days</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-3">
|
|
<h2 class="js-cd-hours h1 text-primary mb-0"></h2>
|
|
<h5 class="mb-0">Hours</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-3">
|
|
<h2 class="js-cd-minutes h1 text-primary mb-0"></h2>
|
|
<h5 class="mb-0">Mins</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-3">
|
|
<h2 class="js-cd-seconds h1 text-primary mb-0"></h2>
|
|
<h5 class="mb-0">Secs</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<form>
|
|
<!-- Input Card -->
|
|
<div class="input-card input-card-sm border">
|
|
<div class="input-card-form">
|
|
<label for="subscribeForm" class="form-label visually-hidden">Enter email</label>
|
|
<input type="text" class="form-control form-control-lg" id="subscribeForm" placeholder="Enter email" aria-label="Enter email">
|
|
</div>
|
|
<button type="button" class="btn btn-primary btn-lg">Subscribe</button>
|
|
</div>
|
|
<!-- End Input Card -->
|
|
</form>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
<footer class="position-md-absolute start-0 end-0 bottom-0">
|
|
<div class="container pb-5 content-space-b-sm-1">
|
|
<div class="row justify-content-between align-items-center">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<p class="small mb-0">© Front. 2021 Htmlstream.</p>
|
|
</div>
|
|
|
|
<div class="col-sm-auto">
|
|
<!-- Socials -->
|
|
<ul class="list-inline mb-0">
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
|
|
<i class="bi-facebook"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
|
|
<i class="bi-google"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
|
|
<i class="bi-twitter"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn btn-soft-secondary btn-xs btn-icon" href="#">
|
|
<i class="bi-github"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Socials -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- ========== END FOOTER ========== -->
|
|
|
|
<!-- JS Global Compulsory -->
|
|
<script src="./assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="./assets/vendor/countdown/countdown.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="./assets/js/theme.min.js"></script>
|
|
|
|
<script>
|
|
(function () {
|
|
// INITIALIZATION OF COUNTDOWN
|
|
// =======================================================
|
|
const oneYearFromNow = new Date()
|
|
|
|
document.querySelectorAll('.js-countdown').forEach(item => {
|
|
const days = item.querySelector('.js-cd-days'),
|
|
hours = item.querySelector('.js-cd-hours'),
|
|
minutes = item.querySelector('.js-cd-minutes'),
|
|
seconds = item.querySelector('.js-cd-seconds')
|
|
|
|
countdown(oneYearFromNow.setFullYear(
|
|
oneYearFromNow.getFullYear() + 1),
|
|
ts => {
|
|
days.innerHTML = ts.days
|
|
hours.innerHTML = ts.hours
|
|
minutes.innerHTML = ts.minutes
|
|
seconds.innerHTML = ts.seconds
|
|
},
|
|
countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS
|
|
)
|
|
})
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|