Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html{
- overflow: hidden;
- }
- body{
- background: url(http://www.hdwallpapers.in/download/mr_robot_hd_4k_8k-1920x1080.jpg);
- text-align:center;
- }
- .clock{
- position: absolute;
- margin-left: 50%;
- margin-top: 50%;
- }
- .digit, .colon{
- position:relative;
- display:inline-block;
- width:10px;
- height:110px;
- margin:5px;
- }
- .colon{
- background: linear-gradient(-90deg, #818181 10px, transparent 10px),
- linear-gradient(-90deg, #818181 10px, transparent 10px);
- background-position: 0 40px, 0 65px;
- background-repeat:no-repeat;
- background-size:10px 10px, 10px 10px;
- }
- .digit{
- width:60px;
- background-image: linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, rgba(160, 160, 160, 0.20) 50px), /* Topleft */
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, rgba(160, 160, 160, 0.20) 50px); /* Bottomleft */
- background-position: 0 0, 0 50px, 0 100px, 0 10px, 0 60px;
- background-repeat:no-repeat;
- background-size:60px 10px, 60px 10px, 60px 10px, 60px 40px, 60px 40px;
- }
- .zero{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .one{
- background-image: linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .two{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, rgba(160, 160, 160, 0.20) 50px); /* Bottomleft */
- }
- .three{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .foure{
- background-image: linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .five{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, rgba(160, 160, 160, 0.20) 50px), /* Topleft */
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .six{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, rgba(160, 160, 160, 0.20) 50px), /* Topleft */
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .seven{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, rgba(160, 160, 160, 0.20) 10px, rgba(160, 160, 160, 0.20) 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .eight{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
- .nine{
- background-image: linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Top */
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Middle*/
- linear-gradient(90deg, transparent 10px, #5cdb4b 10px, #5cdb4b 50px, transparent 50px), /* Bottom*/
- linear-gradient(90deg, #5cdb4b 10px, transparent 10px, transparent 50px, #5cdb4b 50px), /* Topleft */
- linear-gradient(90deg, rgba(160, 160, 160, 0.20) 10px, transparent 10px, transparent 50px, #5cdb4b 50px); /* Bottomleft */
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement