- body {
- margin: 0;
- }
- #pagewrap {
- position: absolute;
- width: 320px;
- height: 480px;
- top: 0px;
- -webkit-transform:translateX(0px);
- background-color: transparent;
- overflow: hidden;
- }
- #background {
- position: absolute;
- top: 0px;
- background-color: transparent;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 3000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: ease-in;
- overflow: hidden;
- }
- #clock{
- position: absolute; top: 0px; right: 0px; down: 0px; left: 0px; width: 320px; height: 480px;
- font-family: Helvetica;
- font-size: 0px;
- position: absolute;
- text-align: center;
- top: 50px;
- left: 0px;
- color: transparent;
- text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.9);
- background-color: transparent;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- z-index:3;
- }
- #ampm{
- position: absolute; top: 0px; right: 0px; down: 0px; left: 0px; width: 320px; height: 480px;
- font-family: Helvetica;
- text-align: center;
- position: absolute;
- top: 25px;
- left:0px;
- font-size: 12px;
- color: transparent;
- text-shadow: transparent 0px 0px 10px, transparent 0px 0px 10px;
- background-color: transparent;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- z-index:3;
- }
- #calendar{
- position: absolute; top: 0px; right: 0px; down: 0px; left: 0px; width: 320px; height: 480px;
- font-family: Helvetica;
- color: #c2c2c2;
- text-align:center;
- position: absolute;
- top: 85px;
- left:0px;
- font-size: 14px;
- text-shadow: 2px 2px 2px black;
- background-color: transparent;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- z-index:3;
- }
- #WeatherContainer{
- opacity: 1.0;
- margin-top:0px;
- margin-left: 0px;
- width:320;
- background-color:transparent;
- color:white;
- z-index: 2;
- }
- #TextContainer{
- font-family: Helvetica;
- text-shadow: black 1px 1.5px 1px;
- width:320px;
- }
- @-webkit-keyframes frame {
- 0% {opacity: 0.0;}
- 55% {opacity: 0.0;}
- 70% {opacity: 1.0;}
- 100% {opacity: 1.0;}
- }
- #city{
- position: absolute; top: 0px; right: 0px; down: 0px; left: 0px; width: 320px; height: 480px;
- text-align: left;
- position: absolute;
- top: 40px;
- left:26px;
- font-size:14px;
- color: #00dfe2;
- text-shadow: 2px 2px 2px black;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- }
- #temp{
- position: absolute; top: 0px; right:0px; down: 0px; left: 0px; width: 320px; height: 481px;
- font-family: Helvetica;
- color: #c2c2c2;
- text-align:left;
- position: absolute;
- top: 50px;
- left: 42px;
- font-size:18px;
- text-shadow: 2px 2px 2px black;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- z-index: 7;
- }
- #desc{
- position: absolute; top: 60px; right: 0px; down: 0px; left: -30px; width: 320px; height: 461px;
- text-transform:capitalize;
- text-align: right;
- position: absolute;
- top: 45px;
- left: -20px;
- padding-right:10px;
- font-size:14px;
- color: 00dfe2;
- text-shadow: 2px 2px 2px black;
- background-color: transparent;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- }
- #desc2{
- position: absolute; top: 345px; right: 0px; down: 0px; left: -50px; width: 320px; height: 461px;
- text-transform:capitalize;
- text-align: left;
- position: absolute;
- top: 430px;
- left: 260px;
- padding-right:40px;
- font-size:40px;
- color: transparent;
- text-shadow: transparent 0px 0px 10px, transparent 0px 0px 10px;
- background-color: transparent;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in
- overflow: hidden;
- opacity:1.0;
- }
- #hi{
- position: absolute; top: 0px; right:0px; down: 0px; left: 0px; width: 320px; height: 481px;
- font-family: Helvetica;
- color: transparent;
- text-align:left;
- position: absolute;
- top: 28px;
- left: 3px;
- font-size:12px;
- text-shadow: transparent 2px 2px 2px;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- z-index: 7;
- }
- #lo{
- position: absolute; top: 0px; right:0px; down: 0px; left: 0px; width: 320px; height: 481px;
- font-family: Helvetica;
- color: transparent;
- text-align:left;
- position: absolute;
- top: 92px;
- left: 3px;
- font-size:12px;
- text-shadow:transparent 2px 2px 2px;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- z-index: 7;
- }
- #humidity{
- position: absolute; top: 0px; right:0px; down: 0px; left: 0px; width: 320px; height: 481px;
- font-family: Helvetica;
- color: transparent;
- text-align:right;
- position: absolute;
- top: 28px;
- left: -3px;
- font-size:12px;
- text-shadow:transparent 2px 2px 2px;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- z-index: 7;
- }
- #weatherIcon{
- position: absolute; top: 0x; right:0 px; down: 0px; left: 0px; width: 320px; height: 481px
- margin-top:px;
- margin-lext:0px;
- height:480px;
- width:320px;
- border:none;
- float: right;
- -webkit-animation-name: frame ;
- -webkit-animation-duration: 4000ms;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function:3 sec ease-in;
- overflow: hidden;
- opacity:1.0;
- }
- @-webkit-keyframes light {
- 0% {opacity: 0.0; }
- 25% {opacity:2.0;}
- 50% {opacity: 0.0; }
- 75% {opacity: 2.0; }
- 100% {opacity: 0.0;}
- }
- #custom{
- position: absolute; top:0px; right: 0px; down: 0px; left: 0px; width: 320px; height: 480px;
- text-transform:capitalize;
- text-align: center;
- top: 284px;
- right: 0px;
- font-size:15px;
- font-family:"Helvetica";
- color: #c2c2c2;
- opacity: 0.8;
- text-shadow: 2px 2px 2px black;
- -webkit-animation-name: light ;
- -webkit-animation-duration: 14s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- background-color: transparent;
- -webkit-animation-delay: 4s;
- overflow: hidden;
- opacity: 0.0;
- z-index:8;
- }