First Initial
This commit is contained in:
Nakorn Rientrakrunchai
601
wwwroot/BackendScript/css/soon.css
Normal file
601
wwwroot/BackendScript/css/soon.css
Normal file
@@ -0,0 +1,601 @@
|
||||
|
||||
/******************************************************************************************************************************
|
||||
HEADER
|
||||
*******************************************************************************************************************************/
|
||||
.cs-bg {
|
||||
background: url("../img/slider/1.jpg") no-repeat scroll 0 0 / cover;
|
||||
|
||||
}
|
||||
|
||||
#header .container{
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 80px 0;
|
||||
}
|
||||
.timer_box{
|
||||
margin: 35px 24px;
|
||||
display: inline-block;
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
width: 130px;
|
||||
border-radius: 10%;
|
||||
border: 1px solid rgba(255, 255, 255, .6);
|
||||
}
|
||||
.timer_box h1{
|
||||
font-size: 48px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
color: white;
|
||||
}
|
||||
.timer_box p{ margin-top: 0px;}
|
||||
#layer{
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
left: 0; top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
}
|
||||
#slider{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background-color: #2c3e50;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.mt {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.floatless {
|
||||
float: none !important;
|
||||
font-size: 35px !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/******************************************************************************************************************************
|
||||
RESPONSIVE
|
||||
*******************************************************************************************************************************/
|
||||
@media only screen and (max-width: 520px) {
|
||||
.timer_box{ margin: 0 12px 12px 0;}
|
||||
.tp-bullets{display: none;}
|
||||
#header .container{padding: 20px 0px 20px 0}
|
||||
#header-button{ display: none;}
|
||||
#appendedInputButtons{
|
||||
border-radius: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
#slider{display: none;}
|
||||
.btn-subscribe{border-radius: 20px;}
|
||||
#contact-informations{margin-top: 24px;}
|
||||
body {
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 740px) {
|
||||
.timer_box{
|
||||
width: 100px;
|
||||
padding: 16px 0 0 0;
|
||||
margin: 35px 12px;
|
||||
}
|
||||
#layer{display: none;}
|
||||
.timer_box h1{ font-size: 28px;}
|
||||
h1{ font-size: 36px;}
|
||||
}
|
||||
/******************************************************************************************************************************
|
||||
ANIMATIONS
|
||||
*******************************************************************************************************************************/
|
||||
.animated {
|
||||
opacity: 0;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
-o-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
-o-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
.animated.GoIn {
|
||||
opacity: 1;
|
||||
-webkit-animation-delay: 1s;
|
||||
-moz-animation-delay: 1s;
|
||||
-ms-animation-delay: 1s;
|
||||
-o-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
-webkit-animation-name: GoIn;
|
||||
-moz-animation-name: GoIn;
|
||||
-o-animation-name: GoIn;
|
||||
animation-name: GoIn;
|
||||
}
|
||||
.animated.FadeIn {
|
||||
opacity: 1;
|
||||
-webkit-animation-duration: .8s;
|
||||
-moz-animation-duration: .8s;
|
||||
-ms-animation-duration: .8s;
|
||||
-o-animation-duration: .8s;
|
||||
animation-duration: .8s;
|
||||
-webkit-animation-name: FadeIn;
|
||||
-moz-animation-name: FadeIn;
|
||||
-o-animation-name: FadeIn;
|
||||
animation-name: FadeIn;
|
||||
}
|
||||
@-webkit-keyframes GoIn {
|
||||
0% {opacity: 0;-webkit-transform: translateY(-2000px);}
|
||||
60% {opacity: 1;-webkit-transform: translateY(30px);}
|
||||
80% {-webkit-transform: translateY(-10px);}
|
||||
100% {-webkit-transform: translateY(0);}
|
||||
}
|
||||
@-moz-keyframes GoIn {
|
||||
0% {opacity: 0; -moz-transform: translateY(-2000px);}
|
||||
60% {opacity: 1; -moz-transform: translateY(30px);}
|
||||
80% {-moz-transform: translateY(-10px);}
|
||||
100% {-moz-transform: translateY(0);}
|
||||
}
|
||||
@-o-keyframes GoIn {
|
||||
0% {opacity: 0; -o-transform: translateY(-2000px);}
|
||||
60% {opacity: 1; -o-transform: translateY(30px);}
|
||||
80% {-o-transform: translateY(-10px);}
|
||||
100% {-o-transform: translateY(0);}
|
||||
}
|
||||
@keyframes GoIn {
|
||||
0% {opacity: 0; transform: translateY(-2000px);}
|
||||
60% {opacity: 1; transform: translateY(30px);}
|
||||
80% {transform: translateY(-10px);}
|
||||
100% {transform: translateY(0);}
|
||||
}
|
||||
@-webkit-keyframes FadeIn {
|
||||
0% {opacity: 0}
|
||||
30% {opacity: .3;}
|
||||
60% {opacity: .6;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes FadeIn {
|
||||
0% {opacity: 0}
|
||||
30% {opacity: .3;}
|
||||
60% {opacity: .6;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-o-keyframes FadeIn {
|
||||
0% {opacity: 0}
|
||||
30% {opacity: .3;}
|
||||
60% {opacity: .6;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@keyframes FadeIn {
|
||||
0% {opacity: 0}
|
||||
30% {opacity: .3;}
|
||||
60% {opacity: .6;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-webkit-keyframes InfiniteTurn {
|
||||
0% { -webkit-transform: rotate(0deg);}
|
||||
100% { -webkit-transform: rotate(360deg);};
|
||||
}
|
||||
@-moz-keyframes InfiniteTurn {
|
||||
0% { -moz-transform: rotate(0deg);}
|
||||
100% { -moz-transform: rotate(360deg);};
|
||||
}
|
||||
@-o-keyframes InfiniteTurn {
|
||||
0% { -o-transform: rotate(0deg);}
|
||||
100% { -o-transform: rotate(360deg);};
|
||||
}
|
||||
@-keyframes InfiniteTurn {
|
||||
0% { transform: rotate(0deg);}
|
||||
100% { transform: rotate(360deg);};
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounceInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(30px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateX(-10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bounceInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateX(30px);
|
||||
}
|
||||
80% {
|
||||
-moz-transform: translateX(-10px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes bounceInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateX(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateX(30px);
|
||||
}
|
||||
80% {
|
||||
-o-transform: translateX(-10px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes bounceInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.animated.bounceInLeft {
|
||||
opacity: 1;
|
||||
-webkit-animation-name: bounceInLeft;
|
||||
-moz-animation-name: bounceInLeft;
|
||||
-o-animation-name: bounceInLeft;
|
||||
animation-name: bounceInLeft;
|
||||
}
|
||||
@-webkit-keyframes bounceInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(-30px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateX(10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bounceInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateX(-30px);
|
||||
}
|
||||
80% {
|
||||
-moz-transform: translateX(10px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes bounceInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateX(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateX(-30px);
|
||||
}
|
||||
80% {
|
||||
-o-transform: translateX(10px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes bounceInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.animated.bounceInRight {
|
||||
opacity: 1;
|
||||
-webkit-animation-name: bounceInRight;
|
||||
-moz-animation-name: bounceInRight;
|
||||
-o-animation-name: bounceInRight;
|
||||
animation-name: bounceInRight;
|
||||
}
|
||||
@-webkit-keyframes bounceInTop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(-30px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bounceInTop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(-30px);
|
||||
}
|
||||
80% {
|
||||
-moz-transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes bounceInTop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(-30px);
|
||||
}
|
||||
80% {
|
||||
-o-transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-ms-keyframes bounceInTop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-ms-transform: translateY(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-ms-transform: translateY(-30px);
|
||||
}
|
||||
80% {
|
||||
-ms-transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
-ms-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes bounceInTop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animated.bounceInTop {
|
||||
opacity: 1;
|
||||
-webkit-animation-name: bounceInTop;
|
||||
-moz-animation-name: bounceInTop;
|
||||
-o-animation-name: bounceInTop;
|
||||
animation-name: bounceInTop;
|
||||
}
|
||||
@-webkit-keyframes bounceInBottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(30px);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bounceInBottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(30px);
|
||||
}
|
||||
80% {
|
||||
-moz-transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes bounceInBottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(30px);
|
||||
}
|
||||
80% {
|
||||
-o-transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes bounceInBottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animated.bounceInBottom {
|
||||
opacity: 1;
|
||||
-webkit-animation-name: bounceInBottom;
|
||||
-moz-animation-name: bounceInBottom;
|
||||
-o-animation-name: bounceInBottom;
|
||||
animation-name: bounceInBottom;
|
||||
}
|
||||
/******************************************************************************************************************************
|
||||
PLUGINS
|
||||
*******************************************************************************************************************************/
|
||||
/* Preloader */
|
||||
#preloader {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
background-color:#fff; /* change if the mask should have another color then white */
|
||||
z-index:99999; /* makes sure it stays on top */
|
||||
}
|
||||
#status {
|
||||
width:200px;
|
||||
height:200px;
|
||||
position:absolute;
|
||||
left:50%; /* centers the loading animation horizontally one the screen */
|
||||
top:50%; /* centers the loading animation vertically one the screen */
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
margin:-100px 0 0 -100px; /* is width and height divided by two */
|
||||
}
|
||||
/* SLIDER */
|
||||
.rev_slider_wrapper{ position:relative;}
|
||||
.rev_slider_wrapper >ul { visibility:hidden;}
|
||||
.rev_slider img{
|
||||
max-width:none !important;
|
||||
-moz-transition: none 0 !important;
|
||||
-webkit-transition: none 0 !important;
|
||||
-o-transition: none 0 !important;
|
||||
transition: none 0 !important;
|
||||
margin:0px !important;
|
||||
padding:0px !important;
|
||||
border-width:0px !important;
|
||||
border:none;
|
||||
visibility:visible !important;
|
||||
}
|
||||
.rev_slider .no-slides-text{
|
||||
font-weight:bold;
|
||||
text-align:center;
|
||||
padding-top:80px;
|
||||
}
|
||||
.rev_slider ul{
|
||||
margin:0px !important;
|
||||
padding:0px !important;
|
||||
list-style: none !important;
|
||||
list-style-type: none !important;
|
||||
background-position:0px 0px !important;
|
||||
}
|
||||
.rev_slider ul li,.rev_slider >ul >li,.rev_slider >ul >li:before{
|
||||
list-style:none !important;
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
margin:0px !important;
|
||||
padding:0px !important;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
list-style-type: none !important;
|
||||
background-image:none !important;
|
||||
background-position:0px 0px !important;
|
||||
text-indent: 0em !important;
|
||||
}
|
||||
.tp-bannertimer{
|
||||
width: 100%;
|
||||
border-radius: 0 5px 5px 0;
|
||||
height: 2px;
|
||||
z-index: 200;
|
||||
position: absolute;
|
||||
visibility: visible !important;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
.tp-bullets {
|
||||
z-index:1000; position:absolute;
|
||||
left: 90% !important;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
-moz-opacity: 1;
|
||||
-khtml-opacity: 1;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.tp-bullets.simplebullets.round .bullet {
|
||||
cursor:pointer;
|
||||
position:relative;
|
||||
border: 3px solid rgba(255, 255, 255, .6);
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin-right:0px;
|
||||
float:left;
|
||||
border-radius: 50%;
|
||||
margin-top:-10px;
|
||||
margin-left:3px;
|
||||
}
|
||||
.tp-bullets.simplebullets.round .bullet.selected{
|
||||
background: #FFF;
|
||||
border-color: #FFF;
|
||||
}
|
||||
.tp-bullets.simplebullets.round .bullet:hover{
|
||||
border-color: #FFF;
|
||||
-webkit-transition-duration: 0.4s;
|
||||
-moz-transition-duration: 0.4s;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
.tp-bullets.simplebullets.round .bullet.last { margin-right:3px;}
|
||||
Reference in New Issue
Block a user