bootstrap自适应大气倒计时即将开始页面代码-html代码-BFW代码库

代码语言：html
代码描述：bootstrap自适应大气倒计时即将开始页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Welcome | Crad</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.5.2.css">
    <style>
        * {
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
html,body {
	height:100%;
	width:100%;
	overflow:hidden
}
body {
	color:#444;
	font-family:'Barlow Condensed',sans-serif;
	font-size:16px;
	line-height:1.5;
	padding:20px;
	position:relative;
	z-index:1
}
h3,p {
	margin:0
}
h3 {
	font-size:28px;
	text-transform:uppercase
}
ul {
	margin:0;
	padding:0;
	list-style:none
}
a,a:hover,a:focus,a:active,button {
	text-decoration:none;
	outline:0
}
a:hover,a:focus,a:active {
	color:#fc730a
}
li a {
	color:#fff
}
a:hover,button:hover {
	-webkit-transition:all .3s ease-in;
	-o-transition:all .3s ease-in;
	-moz-transition:all .3s ease-in;
	transition:all .3s ease-in
}
.bg-img {
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center
}
.fixed {
	position:fixed;
	left:0;
	right:0
}
.fixed-middle {
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	z-index:-1
}
.contact-body-bg {
	background-image:url('//repo.bfw.wiki/bfwrepo/image/62254197e677b.png')
}
.color-white * {
	color:#fff
}
.btn {
	text-transform:uppercase;
	font-size:16px;
	font-weight:700;
	border:0;
	padding:15.5px 50px;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0
}
.btn-orange {
	background-color:#fe4602;
	background-image:linear-gradient(141deg,#fc840d 0,#fd6107 51%,#fe4602 75%);
	-webkit-box-shadow:0 3px 7px 0 rgba(39,201,220,0.2);
	-moz-box-shadow:0 3px 7px 0 rgba(39,201,220,0.2);
	box-shadow:0 3px 7px 0 rgba(39,201,220,0.2);
	color:#fff
}
.btn-orange:hover {
	color:#fff;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none
}
.btn-round {
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px
}
.btn {
	position:relative;
	z-index:1;
	overflow:hidden
}
.btn:before,.btn:after {
	content:'';
	position:absolute;
	width:0;
	height:100%;
	top:0;
	z-index:-1;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out
}
.btn:before {
	left:0
}
.btn:after {
	right:0
}
.btn:hover:before,.btn:hover:after {
	width:50%
}
.btn-orange:before,.btn-orange:after {
	background-color:#fe4602
}
.bg-header-dark {
	background-color:#01000235
}
#header {
	position:absolute;
	width:100%;
	top:15px;
	left:0
}
.navbar-brand h3 {
	font-size:38px;
	font-weight:700;
	text-transform:capitalize;
	display:inline-block;
	line-height:0;
	vertical-align:middle;
	margin-left:10px
}
.nav-menu {
	font-size:16px;
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	position:relative;
	-webkit-transition:all .3s;
	-o-transition:all .3s;
	-moz-transition:all .3s;
	transition:all .3s
}
.head-contact_us {
	text-align:right
}
.head-contact-title {
	font-size:14px;
	color:#fc730a;
	font-weight:700;
	display:block
}
.head-contact-no {
	font-size:25px;
	color:#fff;
	font-weight:700;
	display:block
}
.nav-item {
	display:flex
}
.nav-menu::before {
	content:'';
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	height:0;
	width:12px;
	background-color:#fff;
	-webkit-transition:all .1s;
	-o-transition:all .1s;
	-moz-transition:all .1s;
	transition:all .1s
}
.nav-menu::after {
	content:'';
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	height:0;
	width:12px;
	background-color:#fff;
	-webkit-transition:all .1s;
	-o-transition:all .1s;
	-moz-transition:all .1s;
	transition:all .1s
}
.nav-menu.active {
	color:#fc730a
}
.active.nav-menu::before {
	height:2px
}
.active.nav-menu::after {
	height:2px
}
.nav-item:hover .nav-menu::before {
	height:2px
}
.nav-item:hover .nav-menu::after {
	height:2px
}
.form-inline .form-control-style2 {
	width:100%;
	padding-left:30px;
	padding-right:230px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border:0;
	background-color:#210f4b
}
.form-control-style2 {
	background-color:transparent;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	outline:0;
	height:54px;
	padding:15px 23px;
	border-width:2px;
	border-color:#3d286e;
	border-style:solid;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	width:100%;
	color:#fff;
	font-weight:500
}
.title {
	text-align:center
}
.home2-small-title {
	font-size:20px;
	font-weight:500;
	color:#fc730a;
	text-transform:capitalize;
	margin-bottom:25px;
	position:relative;
	display:inline-block;
	line-height:0
}
.home2-main-title {
	font-size:70px;
	font-weight:700;
	color:#fff;
	letter-spacing:15px;
	text-transform:uppercase;
	position:relative;
	display:block;
	margin-bottom:25px
}
.clock-item {
	height:150px;
	width:150px;
	float:left;
	margin-right:20px
}
.clear {
	clear:both
}
.countdown-container {
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%)
}
.clock-item .inner {
	height:0;
	padding-bottom:100%;
	position:relative;
	width:100%
}
.clock-canvas {
	background-color:rgba(255,255,255,.1);
	border-radius:50%;
	height:0;
	padding-bottom:100%
}
.text {
	color:#fff;
	font-size:30px;
	font-weight:bold;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	text-align:center;
	width:100%
}
.text .val {
	font-size:50px;
	font-weight:800
}
.text .type-time {
	font-size:16px;
	font-weight:700;
	color:#fc7d0c;
	letter-spacing:2px
}
.subscribe-form {
	padding:0 20px
}
.form-inline {
	position:relative
}
.form-inline .btn {
	position:absolute;
	right:0;
	top:0
}
.social-icons-verticle {
	width:76px;
	position:fixed;
	bottom:15px;
	left:15px
}
.social-icons-verticle li a {
	display:block;
	border-radius:50%;
	border-width:2px;
	border-color:#777473;
	border-style:solid;
	width:50px;
	height:50px;
	line-height:45px;
	text-align:center;
	transition:all .3s
}
.social-icons-verticle li a:hover {
	border-color:transparent;
	background-color:#fe4602;
	background-image:linear-gradient(141deg,#fc840d 0,#fd6107 51%,#fe4602 75%)
}
.preloader-wrap {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:99;
	height:100%;
	width:100%;
	background-color:#fe4602;
	background-image:linear-gradient(141deg,#fc840d 0,#fd6107 51%,#fe4602 75%);
	z-index:9999999
}
.preloader {
	position:absolute;
	top:50%;
	text-align:center;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	z-index:999;
	width:24px;
	height:24px
}
.preloader span {
	display:inline-block;
	background-color:#fff;
	position:absolute;
	width:36px;
	height:36px;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	-webkit-animation:ball-fussion-ball1 1s 0s ease infinite;
	-moz-animation:ball-fussion-ball1 1s 0s ease infinite;
	-o-animation:ball-fussion-ball1 1s 0s ease infinite;
	animation:ball-fussion-ball1 1s 0s ease infinite
}
.preloader span:nth-child(1) {
	top:0;
	left:50%;
	z-index:1
}
.preloader span:nth-child(2) {
	top:50%;
	left:100%;
	z-index:2;
	-webkit-animation-name:ball-fussion-ball2;
	-moz-animation-name:ball-fussion-ball2;
	-o-animation-name:ball-fussion-ball2;
	animation-name:ball-fussion-ball2
}
.preloader span:nth-child(3) {
	top:100%;
	left:50%;
	z-index:1;
	-webkit-animation-name:ball-fussion-ball3;
	-moz-animation-name:ball-fussion-ball3;
	-o-animation-name:ball-fussion-ball3;
	animation-name:ball-fussion-ball3
}
.preloader span:nth-child(4) {
	top:50%;
	left:0;
	z-index:2;
	-webkit-animation-name:ball-fussion-ball4;
	-moz-animation-name:ball-fussion-ball4;
	-o-animation-name:ball-fussion-ball4;
	animation-name:ball-fussion-ball4
}
@-webkit-keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball1 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:100%;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-webkit-keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball2 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:200%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:100%;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-webkit-keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball3 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:200%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:50%;
	left:0;
	z-index:2;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-webkit-keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-moz-keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@-o-keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}@keyframes ball-fussion-ball4 {
	0% {
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
50% {
	top:-100%;
	left:-100%;
	opacity:1;
	-ms-filter:"alpha(opacity=100)"
}
100% {
	top:0;
	left:50%;
	z-index:1;
	opacity:.35;
	-ms-filter:"alpha(opacity=35)"
}
}
.canvas-area {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:1
}
.constellation {
	height:100%!important;
	width:100%!important
}
.canvas-area {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:-1
}
.canvas-area canvas {
	width:100%;
	height:100%
}
    </style>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body class="bg-img contact-body-bg">
    <div class="canvas-area"><canvas class="constellation"></canvas></div>
    <!-- Preloader Starts -->
    <div class="preloader-wrap">
        <div class="preloader"><span></span><span></span><span></span><span></span></div>
    </div>
    <!--/Preloader Ends -->
    <!-- MAIN CONTENT PART START -->
    <div class="bg-img color-white main-container">
        <!-- HEADER PART START-->
        <div id="header">
            <div class="container bg-header-dark">
                <nav class="navbar navbar-expand-lg">
                    <a class="navbar-brand" href="#"><!-- <img src="//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png" alt=""> -->
                        <h3>Crad.</h3>
                    </a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="fa fa-lg fa-align-justify"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mx-auto">
                            <li class="nav-item"><a class="nav-link nav-menu active" href="#">HOME</a></li>
                            <li class="nav-item"><a class="nav-link nav-menu " href="#">SERVICE</a></li>
                            <li class="nav-item"><a class="nav-link nav-menu" href="#">ABOUT</a></li>
                            <li class="nav-item"><a class="nav-link nav-menu" href="#">CONTACT</a></li>
                        </ul>
                        <div class="head-contact_us"><span class="head-contact-title">CALL US NOW!</span><span class="head-contact-no">+00 328 943 67</span></div>
                    </div>
                </nav>
            </div>
        </div>

        <div id="main-content-home-style2" class="xs-no-positioning fixed fixed-middle">
            <!-- TITLE PART START -->
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <div class="title text-left"><span class="home2-small-title">Our New Website</span><span class="home2-main-title">coming soon</span></div>
                    </div>
                    <div class="col-md-12">
                        <div class="countdown countdown-container">
                            <div class="clock">
                                <div class="clock-item clock-days countdown-time-value">
                                    <div class="wrap">
                                        <div class="inner">
                                            <div id="canvas-days" class="clock-canvas"></div>
                                            <div class="text">
                                                <p class="val">0</p>
                                                <p class="type-days type-time">DAYS</p>
                                            </div>
                                            <!-- /.text -->
                                        </div>
                                        <!-- /.inner -->
                                    </div>
                                    <!-- /.wrap -->
                                </div>
                                <!-- /.clock-item -->
                                <div class="clock-item clock-hours countdown-time-value">
                                    <div class="wrap">
                                        <div class="inner">
                                            <div id="canvas-hours" class="clock-canvas"></div>
                                            <div class="text">
                                                <p class="val">0</p>
                                                <p class="type-hours type-time">HOURS</p>
                                            </div>
                                            <!-- /.text -->
                                        </div>
                                        <!-- /.inner -->
                                    </div>
                                    <!-- /.wrap -->
                                </div>
                                <!-- /.clock-item -->
                                <div class="clock-item clock-minutes countdown-time-value">
                                    <div class="wrap">
                                        <div class="inner">
                                            <div id="canvas-minutes" class="clock-canvas"></div>
                                            <div class="text">
                                                <p class="val">0</p>
                                                <.........完整代码请登录后点击上方下载按钮下载查看