DIR : /home/kozerus/public_html/ko/timer4.htm
/home/kozerus/public_html/ko
<html>
<head>
<style>
body {
font-family: Arial; background:url('https://images.unsplash.com/photo-1414058833071-c406ac889d15?ixlib=rb-0.3.5&q=50&fm=jpg&crop=entropy&s=8103f30e74242bccd27b4887ed0e9c14') center ;
background-repeat:no-repeat;
}
.cont_modal:hover {
box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.1),1px 16px 25px -2px rgba(0,0,0,0.4);
}
.cont_modal {
transition: all 0.2s;
-webkit-transition: all 0.2s;
box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.25), 1px 16px 25px -2px rgba(0,0,0,0.5);
background: #8e719b; /* Old browsers */
background: -moz-linear-gradient(135deg, rgba(206,153,255,0.8) 0%,rgba(187,153,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, rgba(206,153,255,0.8) 0%,rgba(187,153,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(206,153,255,0.8) 0%,rgba(187,153,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e719b', endColorstr='#247592',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
position:absolute;
left:50%;
top:50%;
width:700px;
height: 400px;
margin-left:-350px;
margin-top:-200px;
}
.cont_text_detalles {
margin:50px;
color:#fff;
}
.cont_menu_ico {
position:relative;
float:right;
}
.cont_menu_ico > a {
color:#fff;
}
.cont_text_info{
position:relative;
float:left;
width:300px;
}
.cont_modal > .cont_text_detalles > .cont_text_info > h1,.cont_modal > .cont_text_detalles > .cont_text_info > p {
-webkit-transform: translate(-25px);
-ms-transform: translate(-25px);
-o-transform: translate(-25px);
transform: translate(-25px);
opacity:0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.cont_text_info > h1 {
font-family: Arial;
}
.btn_shared {
background-color:#FF4489;
color:#fff;
text-decoration:none;
padding:10px;
display:block;
width:70px;
font-size:14px;
font-weight:800;
text-align:center;
border-radius:20px;
box-shadow: 1px 0px 15px 2px
rgba(255, 121, 170,0.7);
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.cont_list_tiempo{
position:absolute;
right:30px;
bottom:30px;
width:355px;
}
.cont_list_tiempo > ul{
margin:0;
padding:0;
}
.cont_list_tiempo > ul > li {
list-style:none;
position:relative;
bottom:0px;
float:left;
width:23%;
margin:1%;
}
.cont_porct_1 {
background-color: rgba(31, 220, 255, 0.8);
height: 80px;
position: relative;
box-shadow: 1px 1px 15px 2px rgba(118,218,255,0.5);
top:70px;
-webkit-transform: translate(0,-25px);
-ms-transform: translate(0,-25px);
-o-transform: translate(0,-25px);
transform: translate(0,-25px);
opacity:0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.cont_porct_1 > p {
font-family: 'Rubik', sans-serif;
font-weight:100;
text-align:center;
margin:0px auto;
padding:0p;
font-size:42px;
}
.cont_porct_1 > span {
text-align: center;
margin: 0px auto;
width: 100%;
position: relative;
float: left;
font-size:14px;
font-weight:800;
}
.cont_porct_2 {
background-color:rgba(255, 135, 220, 0.8);
height: 100px;
position:relative;
top:50px;
box-shadow: 1px 1px 15px 1px rgba(255, 135, 220, 0.5);
-webkit-transform: translate(0,-25px);
-ms-transform: translate(0,-25px);
-o-transform: translate(0,-25px);
transform: translate(0,-25px);
opacity:0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 0.9s;
-moz-transition-delay: 0.9s;
-ms-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
transition-delay: 0.9s;
}
.cont_porct_3{
background-color:rgba(24, 241, 200, 0.9);
height: 150px;
box-shadow: 1px 1px 15px 1px rgba(24, 241, 200, 0.5);
-webkit-transform: translate(0,-25px);
-ms-transform: translate(0,-25px);
-o-transform: translate(0,-25px);
transform: translate(0,-25px);
opacity:0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 1.1s;
-moz-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
-o-transition-delay: 1.1s;
transition-delay: 1.1s;
}
.cont_porct_4 {
background-color:rgba(253, 168, 84, 0.8);
height: 90px;
position:relative;
top:60px;
box-shadow: 1px 1px 15px 1px rgba(253, 168, 84, 0.5);
-webkit-transform: translate(0,-25px);
-ms-transform: translate(0,-25px);
-o-transform: translate(0,-25px);
transform: translate(0,-25px);
opacity:0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 1.3s;
-moz-transition-delay: 1.3s;
-ms-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
transition-delay: 1.3s;
}
.cont_porct_2 > p {
font-family: 'Rubik', sans-serif;
font-weight:100;
text-align:center;
margin:0px auto;
padding:0p;
padding-top:20px;
font-size:42px;
}
.cont_porct_2 > span {
text-align: center;
margin: 0px auto;
width: 100%;
position: relative;
float: left;
font-size:14px;
font-weight:800;
}
.cont_porct_3 > p {
font-family: 'Rubik', sans-serif;
font-weight:100;
text-align:center;
margin:0px auto;
padding:0p;
padding-top:70px;
font-size:42px;
}
.cont_porct_3 > span {
text-align: center;
margin: 0px auto;
width: 100%;
position: relative;
float: left;
font-size:14px;
font-weight:800;
}
.cont_porct_4 > p {
font-family: 'Rubik', sans-serif;
font-weight:100;
text-align:center;
margin:0px auto;
padding:0p;
padding-top:10px;
font-size:42px;
}
.cont_porct_4 > span {
text-align: center;
margin: 0px auto;
width: 100%;
font-size:14px;
font-weight:800;
position: relative;
float: left;
}
.cont_modal {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.btn_shared {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.cont_modal_active > .cont_text_detalles > .cont_text_info > .btn_shared {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.cont_modal_active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.cont_modal_active > .cont_text_detalles > .cont_text_info > h1,.cont_modal_active > .cont_text_detalles > .cont_text_info > p {
-webkit-transform: translate(0px);
-ms-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);
opacity:1;
}
.cont_modal_active > .cont_text_detalles > .cont_list_tiempo > ul > li > .cont_porct_1 ,
.cont_modal_active > .cont_text_detalles > .cont_list_tiempo > ul > li > .cont_porct_2 ,
.cont_modal_active > .cont_text_detalles > .cont_list_tiempo > ul > li > .cont_porct_3 ,
.cont_modal_active > .cont_text_detalles > .cont_list_tiempo > ul > li > .cont_porct_4
{
-webkit-transform: translate(0px);
-ms-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);
opacity:1;
}
</style>
<script>
function inic(){
document.querySelector('.cont_modal').className = 'cont_modal cont_modal_active';
}
window.onload = function(){
inic();
}
</script>
</head>
<body bgcolor=linen>
<div class="cont_modal">
<div class="cont_text_detalles">
<div class="cont_menu_ico">
<a href="#">
<i class="material-icons">
</a>
</i>
</div>
<div class="cont_text_info">
<h1>Count Down to the New year 2016</h1>
<p>Shared with your friends warm words to all the wishes in the ew year will be granted!</p>
<a href="#" class="btn_shared">Shared</a>
</div>
<div class="cont_list_tiempo">
<ul>
<li>
<div class="cont_porct_1">
<p>18</p>
<span>DAYS</span>
</div>
</li>
<li> <div class="cont_porct_2">
<p>04</p>
<span>HOURS</span>
</div></li>
<li> <div class="cont_porct_3">
<p>32</p>
<span>MIN</span></div></li>
<li>
<div class="cont_porct_4">
<p>49</p>
<span>SEC</span></div></li>
</ul>
</div>
</div>
</div>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer