<!DOCTYPE html>
<html>
<head>
<title>Coming Soon - Under Construction HTML Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="assets/icomoon.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<style type="text/css">
body {
font-family: "Roboto", sans-seriff;
color: #949393;
margin: 0;
}
a, button {
transition: 0.3s all ease-out;
}
a {
color: #111;
text-decoration: none;
}
a:hover {
color: #0043ee;
}
.row {
display: flex;
}
.container {
width: 530px;
margin: 170px auto;
}
#body-wrap .col-8 {
width: 70%;
}
#body-wrap .col-4 {
width: 30%;
height: 950px;
overflow: hidden;
}
header#header {
margin-bottom: 70px;
}
.main-content {
color: #fff;
}
.main-content h1 {
font-size: 3em;
font-weight: 700;
color: #000;
margin-bottom: 0;
}
#countdown-clock {
font-size: 30px;
display: flex;
flex-wrap: wrap;
margin: 50px 0;
}
#countdown-clock .time{
background-color: #f5f5f5;
color: #000;
border-radius: 10px;
padding: 20px;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
}
#countdown-clock .time > span{
font-weight: 700;
}
#countdown-clock .time small{
padding-top: 5px;
font-size: 12px;
text-transform: uppercase;
display: block;
}
.main-content p {
font-size: 1.2em;
color: #666;
width: 70%;
}
#form .form-group {
display: flex;
margin: 20px 0;
}
input::placeholder{
color: #949393;
}
.form-group input.form-control {
width: 250px;
height: 50px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-left: 20px;
border: none;
background: #f5f5f5;
}
.form-group button.submit-button {
padding: 18px 30px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #0043ee;
border: none;
cursor: pointer;
color: #fff;
}
.form-group button.submit-button:hover {
background-color: #222630;
}
.form-group button.submit-button span {
font-weight: 700;
padding-left: 5px;
}
#footer .social-links {
padding-top: 20px;
}
#footer .social-links ul {
display: flex;
list-style: none;
padding: 0;
}
#footer .social-links li {
padding-right: 20px;
}
#footer .social-links ul a {
font-size: 1.6em;
color: #626262;
text-decoration: none;
}
#footer .social-links ul a:hover {
color: #111;
}
.copyright p {
color: #626262;
}
@media (max-width: 999px) {
.container {
padding-left: 70px;
}
#body-wrap .col-4 {
width: 40%;
margin-left: -48px;
z-index: -1;
}
}
@media (max-width: 599px) {
#body-wrap .col-8 {
width: 100%;
}
.container {
width: 100%;
}
#body-wrap .page-title {
width: 98%;
}
#body-wrap .col-4 {
width: 100%;
margin-left: -438px;
opacity: 0.1;
}
}
@media (max-width: 540px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
.main-content h1 {
font-size: 2.4em;
}
#form .form-group {
flex-wrap: wrap;
}
.form-group input.form-control {
width: 100%;
margin-bottom: 10px;
background: #e4edf7;
}
.form-group button.submit-button {
width: 100%;
}
#body-wrap .col-4 {
margin-left: -108px;
}
}
</style>
<body>
<div id="body-wrap">
<div class="row">
<div class="col-8">
<div class="container">
<header id="header">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
</header>
<div class="main-content">
<div class="page-title">
<h1>We are launching soon!</h1>
<div id="countdown-clock">
<div class="time">
<span class="days"></span>
<small>Days</small>
</div>
<div class="time">
<span class="hours"></span>
<small>Hours</small>
</div>
<div class="time">
<span class="minutes"></span>
<small>Minutes</small>
</div>
<div class="time">
<span class="seconds"></span>
<small>Seconds</small>
</div>
</div>
</div><!--page-title-->
<form id="form">
<p>Get notified when we launched our website</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your email address">
<button type="button" class="submit-button"><i class="icon icon-envelope"></i><span>NOTIFY ME</span></button>
</div>
</form>
</div><!--main-content-->
<footer id="footer">
<div class="social-links">
<ul>
<li><a href="#"><i class="icon icon-facebook"></i></a></li>
<li><a href="#"><i class="icon icon-github"></i></a></li>
<li><a href="#"><i class="icon icon-google-plus"></i></a></li>
<li><a href="#"><i class="icon icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon icon-twitter"></i></a></li>
</ul>
</div><!--social-links-->
<div class="copyright">
<p>Copyright © <a target="_blank" href="http://www.mobanwang.com/" title="网页模板" style="color: #0043ee;">网页模板</a></p>
</div>
</footer>
</div>
</div><!--col-8-->
<div class="col-4">
<img src="images/sideimg.jpg" alt="wallpaper" class="sideimg">
</div>
</div><!--row-->
</div><!--body-wrap-->
<script type="text/javascript">
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
const deadline = new Date(Date.parse(new Date()) + 28 * 24 * 60 * 60 * 1000);
initializeClock('countdown-clock', deadline);
</script>
</body>
</html>
简约居家倒计时网页模板-适配移动端&PC端-HTML网站源码.zip （8个子文件） 
简约居家倒计时网页模板-适配移动端&PC端-HTML网站源码 html assets 
icomoon.css 1KB fonts icomoon.woff 3KB
icomoon.svg 5KB icomoon.eot 3KB icomoon.ttf 2KB
index.html 7KB images 
logo.png 6KB
sideimg.jpg 66KB资源评论
DTcode7
- 粉丝: 3w+
- 资源: 4986
最新资源
- 142-西门子S7-1200机器人码垛机程序和1200立体库及码垛机等三个程序案例，程序带注释 ，程序结构清楚明了，注释齐全 涉及到变频器，触摸屏，工业机器人，视觉相机的程序控制.modbus tc
- 三菱plc恒压供水程序+威纶触摸屏程序本成已用于实际项目中 可以直接上载制成产品 也可用来学习plc恒压供水程序学习 三菱PLC恒压供水程序说明 本程序采用三菱FX1N-30MR PLC 配威纶通
- 一种自动扫码设备sw18可编辑全套技术资料100%好用.zip
- JAVA GIS开发测试使用的样例文件
- 基于web的校园二手商品交易平台的设计与实现毕业设计论文.doc
- SAE J1772-2024.关于电动汽车(EV)和插电式混合动力汽车(PHEV)传导充电耦合器的标准
- 不同颜色球体检测24-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 基于javaweb的新生报到管理系统毕业设计论文.doc
- 基于java的信用卡WEB管理系统设计与制作毕业设计论文.doc
- C++题库期末考试整理选择填空判断问答
- 【未发表】基于阿基米德优化算法AOA优化核极限学习机KELM实现风电数据预测算法研究附Matlab代码.rar
- 【未发表】基于阿基米德优化算法AOA优化集成学习的核极限学习机KELM-Adaboost实现风电数据预测算法研究附Matlab代码.rar
- 【未发表】基于阿基米德优化算法AOA优化核极限学习机KELM实现风电数据时序预测算法研究附Matlab代码.rar
- 【未发表】基于矮猫鼬优化算法DMOA优化核极限学习机KELM实现风电数据预测算法研究附Matlab代码.rar
- 【未发表】基于矮猫鼬优化算法DMOA优化核极限学习机KELM实现风电数据时序预测算法研究附Matlab代码.rar
- 【未发表】基于阿基米德优化算法AOA优化鲁棒极限学习机RELM实现风电数据时序预测算法研究附Matlab代码.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
