"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Khairy12/pen/VMNwpj?depth=everything&order=popularity&page=28&q=pack&show_forks=false" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' /> <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow|Montserrat" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" rel='stylesheet' type='text/css' /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">*{ -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Montserrat', sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a{ text-decoration: none; } a:active, a:visited { color: inherit; } .list-container::-webkit-scrollbar { width: 5px; height: 10px; background-color: #004973 } .list-container::-webkit-scrollbar-thumb { background-color: #004973; height: 125px; } .list-container::-webkit-scrollbar-track{ background: #f0f0f0 } button{ border: none; background: transparent; outline: none; cursor: pointer; } ul { padding: 0; margin: 0; list-style: none; } body{ margin: 0; padding: 0; } .bg{ display: -webkit-box; display: -ms-flexbox; display: flex; background: -webkit-radial-gradient(#eee, #668); background: -o-radial-gradient(#eee, #668); background: radial-gradient(#eee, #668); height: 100vh; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .todo{ background: #fff; width: 30em; position: relative; border-bottom: 5px solid #004973; } .todo:before { position: absolute; content: ''; left: 1em; top: 0; height: 100%; width: 1px; background: #f0f0f0; } #overlay{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 3; display: none; background: rgba(0,0,0,0.5) } #card-main { position: absolute; z-index: 5555; left: 0; top: 0; bottom: 0; right: 0; display: none; border-top: 5px solid #004973; border-bottom: 5px solid #004973; -webkit-box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); -webkit-animation: animJelly 1s linear; animation: animJelly 1s linear; width: 19em; margin: auto; height: -webkit-max-content; height: -moz-max-content; height: max-content; overflow: hidden; padding: 0 15px; text-transform: capitalize; background-color: #FBFBFC; } @-webkit-keyframes animJelly{0%{-webkit-transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1)}2.083333%{-webkit-transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1)}4.166667%{-webkit-transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1)}6.25%{-webkit-transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1)}8.333333%{-webkit-transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}10.416667%{-webkit-transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1)}12.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1)}14.583333%{-webkit-transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1)}16.666667%{-webkit-transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1)}18.75%{-webkit-transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1)}20.833333%{-webkit-transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1)}22.916667%{-webkit-transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1)}25%{-webkit-transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}27.083333%{-webkit-transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1)}29.166667%{-webkit-transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1)}31.25%{-webkit-transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1)}33.333333%{-webkit-transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1)}35.416667%{-webkit-transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1)}37.5%{-webkit-transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1)}39.583333%{-webkit-transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1)}41.666667%{-webkit-transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}43.75%{-webkit-transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1)}45.833333%{-webkit-transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1)}47.916667%{-webkit-transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1)}50%{-webkit-transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1)}52.083333%{-webkit-transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1)}54.166667%{-webkit-transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1)}56.25%{-webkit-transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1)}58.333333%{-webkit-transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}60.416667%{-webkit-transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1)}62.5%{-webkit-transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1)}64.583333%{-webkit-transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1)}66.666667%{-webkit-transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1)}68.75%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1)}70.833333%{-webkit-transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1)}72.916667%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1)}75%{-webkit-transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}77.083333%{-webkit-transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1)}79.166667%{-webkit-transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1)}81.25%{-webkit-transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1)}83.333333%{-webkit-transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1)}85.416667%{-webkit-transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1)}87.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1)}89.583333%{-webkit-transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1)}91.666667%{-webkit-transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}93.75%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1)}95.833333%{-webkit-transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1)}97.916667%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1)}100%{-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}} @keyframes animJelly{0%{-webkit-transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1)}2.083333%{-webkit-transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1)}4.166667%{-webkit-transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1)}6.25%{-webkit-transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1)}8.333333%{-webkit-transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}10.416667%{-webkit-transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1)}12.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1)}14.583333%{-webkit-transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1)}16.666667%{-webkit-transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1)}18.75%{-webkit-transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1)}20.833333%{-webkit-transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1)}22.916667%{-webkit-transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1)}25%{-webkit-transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}27.083333%{-webkit-transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1)}29.166667%{-webkit-transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1)}31.25%{-webkit-transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1)}33.333333%{-webkit-transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1)}35.416667%{-webkit-transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1)}37.5%{-webkit-transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1)}39.583333%{-webkit-transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1)}41.666667%{-webkit-transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}43.75%{-webkit-transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1)}45.833333%{-webkit-transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1)}47.916667%{-webkit-transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1)}50%{-webkit-transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1)}52.083333%{-webkit-transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1)}54.166667%{-webkit-transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1)}56.25%{-webkit-transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1)}58.333333%{-webkit-transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}60.416667%{-webkit-transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1)}62.5%{-webkit-transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1)}64.583333%{-webkit-transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1)}66.666667%{-webkit-transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1)}68.75%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1)}70.833333%{-webkit-transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1)}72.916667%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1)}75%{-webkit-transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}77.083333%{-webkit-transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1)}79.166667%{-webkit-transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1)}81.25%{-webkit-transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1)}83.333333%{-webkit-transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1)}85.416667%{-webkit-transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1)}87.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1)}89.583333%{-webkit-transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1)}91.666667%{-webkit-transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}93.75%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1)}95.833333%{-webkit-transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1)}97.916667%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1)}100%{-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}} .card-content{ margin-top: 25px; } .card-content02{ margin-bottom: 68px; } #close-icon { background: #004973; color: #efefef; position: absolute; border-radius: 50%; left: -22px; top: -25px; width: 50px; height: 50px; overflow: hidden } #close-icon .close { display: inline-block; font-size: 24px; text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78); position: absolute; top: 50%; left: 50%; right: 0; margin-left: -6px; margin-top: -6px; font-weight: bold; } #submit { background: #004973; overflow: hidden; width: 100px; height: 100px; border-radius: 50%; color: #efefef; position: absolute; right: -40px; font-size: 35px; bottom: -40px; } #submit i{ -webkit-transform: translate(-14px, -14px); -ms-transform: translate(-14px, -14px); transform: translate(-14px, -14px) } #card-main input{ border: none; font-size: 12px; color: #444; margin: 0; padding: 4px 0; background: 0 0; text-align: left; outline: none; display: block; width: 100%; } input[type=time]{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right!important; padding: 0!important; } input[type="time"]::-webkit-inner-spin-button{ display: none; } input[type=time]::-webkit-clear-button{ display: none } input#datepicker { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; padding: 0!important; } input#datepicker::-webkit-input-placeholder{ -webkit-transform: none; transform: none; opacity: 1; text-transform: inherit } input#datepicker:-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; text-transform: inherit } input#datepicker::-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; text-transform: inherit } input#datepicker::placeholder{ -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; text-transform: inherit } input#search::-webkit-input-placeholder{ -webkit-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#search:-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#search::-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#search::placeholder{ -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } @media screen and (max-width: 480px) { input#search::placeholder { font-size: 10px!important; } } .ui-datepicker .ui-datepicker-header { background: #0a6b8d; color: #efefef; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; } #card-main input[type=text] { border-bottom: 2px solid rgba(0,0,0,.12); } .test{ position: relative; padding: 20px 0; } .test > label{ bottom: 0; color: rgba(0,0,0,.26); font-size: 12px; left: 0; right: 0; pointer-events: none; position: absolute; display: block; top: 24px; width: 100%; overflow: hidden; text-align: left; -webkit-transition: .2s cubic-bezier(.4,0,.2,1); -o-transition: .2s cubic-bezier(.4,0,.2,1); transition: .2s cubic-bezier(.4,0,.2,1); } .test label:after{ background-color: rgb(33,150,243); bottom: 20px; content: ''; height: 2px; left: 45%; position: absolute; -webkit-transition: .3s cubic-bezier(0.4,0,0.2,1); -o-transition: .3s cubic-bezier(0.4,0,0.2,1); transition: .3s cubic-bezier(0.4,0,0.2,1); visibility: hidden; width: 10px; } .textCounter { position: absolute; right: 0; font-size: 11px; bottom: 0; } .test .effect:after { background-color: rgb(10, 107, 141); width: 100%; left: 0%; visibility: visible; } .test .effect{ color: rgb(10, 107, 141); font-size: 12px; top: 4px; visibility: visible; } .search-cont { position: absolute; z-index: 2; width: 38px; height: 38px; right: 5px; top: 5px; overflow: hidden; border-radius: 25px; -webkit-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); -o-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); } .search-cont input#search { border: none; outline: none; width: 100%; height: 100%; background: transparent; padding: 0 20px 0 30px; color: #99a1a9; position: absolute; right: 20px; -webkit-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); -o-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); } .togglesearchbackground{ background: rgba(0, 0, 0, 0.25)!important; } .search-cont .icon { color: #99a1a9; position: absolute; width: 38px; height: 38px; z-index: 1; right: 0; border-radius: 50%; background: rgb(0, 60, 95); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .icon:active:after{ -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5) } .search-cont .icon:after { position: absolute; content: "\f002"; font-family: FontAwesome; color: #999; -webkit-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); -o-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98); } input::-webkit-input-placeholder { -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1); -o-transition: all .3s cubic-bezier(0.4,0,0.2,1); transition: all .3s cubic-bezier(0.4,0,0.2,1); color: rgba(0,0,0,.26); font-size: 12px; opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } input:-ms-input-placeholder { -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1); -o-transition: all .3s cubic-bezier(0.4,0,0.2,1); transition: all .3s cubic-bezier(0.4,0,0.2,1); color: rgba(0,0,0,.26); font-size: 12px; opacity: 0; -ms-transform: translateX(100%); transform: translateX(100%); } input::-ms-input-placeholder { -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1); -o-transition: all .3s cubic-bezier(0.4,0,0.2,1); transition: all .3s cubic-bezier(0.4,0,0.2,1); color: rgba(0,0,0,.26); font-size: 12px; opacity: 0; -ms-transform: translateX(100%); transform: translateX(100%); } input::placeholder { -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1); -o-transition: all .3s cubic-bezier(0.4,0,0.2,1); transition: all .3s cubic-bezier(0.4,0,0.2,1); color: rgba(0,0,0,.26); font-size: 12px; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .togglesearch { width: 50% } input:focus::-webkit-input-placeholder{ -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } input:focus:-ms-input-placeholder{ -ms-transform: translateX(0%); transform: translateX(0%); opacity: 1 } input:focus::-ms-input-placeholder{ -ms-transform: translateX(0%); transform: translateX(0%); opacity: 1 } input:focus::placeholder{ -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); opacity: 1 } .search-cont input#search::-webkit-input-placeholder { color: #99a1a9 } .search-cont input#search:-moz-placeholder { color: #99a1a9 } .search-cont input#search::-moz-placeholder { color: #99a1a9 } .search-cont input#search:-ms-input-placeholder { color: #99a1a9 } .date-container { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; color: #efefef; text-shadow: -1px 2px 0px rgba(0, 0, 0, 0.7); top: 0%; left: 0%; right: 0; bottom: 0; } .head { position: relative; height: 200px; overflow: hidden; } .head-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .head:before { position: absolute; width: 100%; height: 100%; content: ''; background: url(https://goo.gl/gd2UK1) 100% 0%; background-size: cover; background-position: bottom; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; } .head:after { position: absolute; bottom: -100%; width: 100%; height: 100%; content: ''; background: #f6f7f9; -webkit-transform: skewy(7deg); -ms-transform: skewy(7deg); transform: skewy(7deg); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; } .task-info { position: absolute; left: 1em; padding: 6px 0; bottom: 0px; border-bottom: 1px solid #f0f0f0; z-index: 1; width: 100%; } .counter { display: inline-block; font-size: 12px; color: #ccc } .t-day{ font-size: 40px; color: #fbbc05; } .fulldate{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 40px; margin-left: 20px; } .fulldate .date, .fulldate .timing{ font-size: 15px; } .list-container{ height: 250px; padding: 10px 17px; overflow-y: auto; position: relative; } .list-container:before { position: absolute; content: ''; background: #f6f7f9; left: 0; height: 100%; width: 16px; top: 0; } .simulate-container { width: 100%; padding-left: 15px; -webkit-filter: blur(2px); filter: blur(2px); } .simulatepost { width: 100%; background: #f6f7f9; padding: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; -webkit-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); -o-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .circle { width: 38px; height: 38px; border-radius: 50%; background: #fff; margin-right: 15px; } .right-side > div { height: 6px; background: #fff; } .right-side >div:not(:last-of-type) { margin-bottom: 7px; } .top-line { width: 124px; } .center-line { width: 150px; } .bottom-line { width: 107px; } .main-cont { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .pre-loading { color: #444; height: 100%; text-align: center; position: relative; overflow: hidden; } .pre-loading .fa-signal { color: #004973; font-size: 9em; -webkit-animation: pop 1s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1; animation: pop 1s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1; text-shadow: -2px 0px 7px rgba(0, 0, 0, 0.46); } @-webkit-keyframes pop{ 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes pop{ 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .pre-loading h1{ text-transform: capitalize; margin: 0; font-size: 16px; font-weight: inherit; -webkit-animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .pre-loading h3{ text-transform: capitalize; margin: 0; font-size: 10px; font-weight: inherit; color: #ccc; -webkit-animation: fall-c .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); animation: fall-c .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .list{ position: relative; padding: 0 18px 0 15px; overflow: hidden; } .list li { text-transform: capitalize; border-left: 2px solid; margin-bottom: 5px; -webkit-box-shadow: 2px 2px 1px 0px #ddd; box-shadow: 2px 2px 1px 0px #ddd; background: #f6f7f9; cursor: pointer; position: relative; -webkit-animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); -webkit-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); -o-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .list li:nth-child(odd){ border-color: #00aff0 } .list li:nth-child(even){ border-color: #ffc61b } .list li:before { content: ""; width: 15px; border-radius: 50%; height: 15px; left: 0; margin-left: -18px; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .list li:nth-child(odd):before{ background: #00aff0 } .list li:nth-child(even):before{ background: #ffc61b } @-webkit-keyframes fall-b { 0% { -webkit-transform: translate3d(-5.5em, 0em, -5.5em); transform: translate3d(-5.5em, 0em, -5.5em); opacity: 0.6; } } @keyframes fall-b { 0% { -webkit-transform: translate3d(-5.5em, 0em, -5.5em); transform: translate3d(-5.5em, 0em, -5.5em); opacity: 0.6; } } @-webkit-keyframes fall-c { 0% { -webkit-transform: translate3d(5.5em, 0em, 5.5em); transform: translate3d(5.5em, 0em, 5.5em); opacity: 0.6; } } @keyframes fall-c { 0% { -webkit-transform: translate3d(5.5em, 0em, 5.5em); transform: translate3d(5.5em, 0em, 5.5em); opacity: 0.6; } } .list li h3{ margin: 0; font-size: 12px; color: #00aff0; font-family: sans-serif; } .at { color: #444!important; font-weight: normal } .list li p{ font-size: 10px; font-weight: inherit; color: #444; margin-bottom: 0; } .listed { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 17px 7px 13px 7px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .options { position: absolute; right: -16px; top: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 3px; -webkit-box-shadow: 2px 2px 1px 0px #ddd; box-shadow: 2px 2px 1px 0px #ddd; background: #f6f7f9; } .options > a { width: 10px; display: block; height: 10px; border-radius: 50%; -webkit-box-shadow: rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(37, 37, 37, 0.34) 0px 1px 1px 0px; box-shadow: rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(37, 37, 37, 0.34) 0px 1px 1px 0px; background-image: -webkit-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); margin-bottom: 3px } .options > a:last-child { margin-bottom: 0; } .options .min { background-color: #f7bf67; } .options .max { background: #dddddd; } .options .erase{ background-color: #df4a32; } input#datepicker { position: relative; color: rgba(68, 68, 68, 0.8); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; padding: 0; } input#datepicker::-webkit-input-placeholder{ -webkit-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#datepicker:-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#datepicker::-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#datepicker::placeholder{ -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#search::-webkit-input-placeholder{ -webkit-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#search:-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#search::-ms-input-placeholder{ -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } input#search::placeholder{ -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; color: rgba(0,0,0,.26); font-size: 12px; } .ui-datepicker .ui-datepicker-header { background: #0a6b8d; color: #fff; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; } .list li:after { content: ''; position: absolute; width: 10px; height: 1px; left: -6px; top: 50%; z-index: 0; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .list li:nth-child(odd):after{ background: #00aff0 } .list li:nth-child(even):after{ background: #ffc61b } .listed01 { -ms-flex-negative: 1; flex-shrink: 1; text-align: left; border-right: 1px solid #e2e2e2; padding-right: 5px; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; } .at { color: cornflowerblue; font-weight: normal } .rem-status { font-size: 10px; color: #777; display: block; } .listed02 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-negative: 3; flex-shrink: 3; text-align: right; max-height: 47px; } .category { position: relative; margin-right: 7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 53px; width: 42px; background: transparent; border-radius: 50%; -webkit-animation: launch-main-background .5s ease-out backwards; animation: launch-main-background .5s ease-out backwards; -webkit-animation-delay: 1.5s; animation-delay: 1.5s } .category p{ margin: 0; text-align: center; color: #fff!important; position: absolute; bottom: 0px; opacity: 1; left: 0; right: 0; background: #00aff0; -webkit-animation: droped-text .5s ease-out backwards; animation: droped-text .5s ease-out backwards; -webkit-animation-delay: 1.8s; animation-delay: 1.8s } @-webkit-keyframes droped-text{ 0%{ bottom: 10px; opacity: 0 } } @keyframes droped-text{ 0%{ bottom: 10px; opacity: 0 } } .category span { display: block; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background-image: url(https://goo.gl/d1bNqm); background-size: cover; background-repeat: no-repeat; height: 40px; width: 40px; background-position: center; position: absolute; -webkit-animation: launch 2s ease; animation: launch 2s ease } .category span:after{ position: absolute; content: ''; background: url(https://goo.gl/qw2wiU); width: 100%; height: 100%; background-size: cover; -webkit-animation: launch-background .5s ease backwards; animation: launch-background .5s ease backwards; -webkit-animation-delay: 1s; animation-delay: 1s } @-webkit-keyframes launch{ 0% { -webkit-transform-origin: right; transform-origin: right; -webkit-transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3); transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3); opacity: 0.3; } 100% { -webkit-transform-origin: right; transform-origin: right; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes launch{ 0% { -webkit-transform-origin: right; transform-origin: right; -webkit-transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3); transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3); opacity: 0.3; } 100% { -webkit-transform-origin: right; transform-origin: right; -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes launch-background{ 0% { opacity: 0; } } @keyframes launch-background{ 0% { opacity: 0; } } @-webkit-keyframes launch-main-background{ 0% { background: #fee187; border-radius: 0%; } } @keyframes launch-main-background{ 0% { background: #fee187; border-radius: 0%; } } @-webkit-keyframes zoomInDown { 0% { -webkit-transform: scale(1.2,1.2) ; transform: scale(1.2,1.2) ; } } @keyframes zoomInDown { 0% { -webkit-transform: scale(1.2,1.2) ; transform: scale(1.2,1.2) ; } } .main-message { border-radius: 15px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; -webkit-box-shadow: 1px 1px 11px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); box-shadow: 1px 1px 11px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1); background-color: rgba(251, 251, 252, 0.89); width: 18em; z-index: 3; height: -webkit-max-content; height: -moz-max-content; height: max-content; overflow: hidden; margin: auto; -webkit-animation: zoomInDown .3s ease; animation: zoomInDown .3s ease; } .message { position: relative; padding: 8px; text-align: center; } .message{ margin: 8px auto; } .message h3{ margin: 0 0 8px 0; font-size: 16px; color: #444; } .message p{ margin: 0; font-size: 12px; font-family: sans-serif; } .answer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #e2e2e2; position: relative; overflow: hidden; } .answer:before{ content: ''; position: absolute; background: #e2e2e2; height: 100px; width: 1px; left: 50%; } .answer button{ color: cornflowerblue; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; padding: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .answer button:hover{ background: #e9ebee; } .listed .listed02 .listed-date, .listed-time{ display: block; font-size: 10px; color: rgba(68, 68, 68, 0.8); } .listed-date{ font-weight: bold } .listed .listed02 .priority { margin-top: 1em; display: block; font-size: 10px; } .set-priority { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 14px auto; background: #fff; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.08); box-shadow: 0 0 1px rgba(0, 0, 0, 0.08); padding: 7px; border-radius: 15px; } #tmp{ display: none!important } .notification{ cursor: pointer; width: 45px; border: 1px solid #ebebeb; background: #fbfbfc; height: 22px; border-radius: 13px; position: relative; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .notification:after{ content: ''; position: absolute; top: 50%; margin-top: -11.5px; height: 23px; left: 0; width: 23px; background: #fff; border-radius: 50%; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-box-shadow: .5px .5px 0.5px 0px #8c8c8c; box-shadow: .5px .5px 0.5px 0px #8c8c8c; } .notification > span { position: absolute; font-size: 13px; top: 50%; pointer-events: none; } .notification .left { left: 25%; margin-left: -5px; top: 5px; color: #fff; top: 3.5px; text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78); -webkit-transform: translateX(0%) ; -ms-transform: translateX(0%) ; transform: translateX(0%) ; } .animated-checked{ -webkit-animation: checkedit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1) backwards; animation: checkedit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1) backwards; } @-webkit-keyframes checkedit { 0% { -webkit-transform: translateX(100%) ; transform: translateX(100%) ; } } @keyframes checkedit { 0% { -webkit-transform: translateX(100%) ; transform: translateX(100%) ; } } .notification .right { right: 25%; margin-right: -5px; top: 3.5px; color: #727272; } .checked{ background: #09a5ff; } .checked:after{ left: 50%; } .set-priority h3 { margin: 0; font-size: 13px; font-weight: inherit; color: rgba(68, 68, 68, 0.8); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .priority { display: inline-block; direction: rtl; } .priority > input[type=radio] { display: none } .priority >label{ color: #ccc; cursor: pointer; font-size: 1.3em; } .priority > label:before { content: '\f005'; font-family: fontawesome; display: inline-block; margin-left: 2px; } .priority .tolip { background-color: rgba(0, 0, 0, 0.6); color: #ffffff; padding: 10px; border-radius: 2px; position: absolute; top: 12px; right: 7px; width: 43.8px; opacity: 0; pointer-events: none; visibility: hidden; font-size: 0.8em; z-index: 2; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease } .priority .tolip:before { content: ""; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 7px solid #ffb000; position: absolute; margin-left: -5px; bottom: -7px; left: 50%; display: block; -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease } .priority .tolip:after{ content: 'Medium!'; position: absolute; direction: ltr; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease } .priority > label:hover ~ .tolip{ opacity: .90; top: 20px; visibility: visible; background: #ffb000 } .priority label:first-of-type:hover ~.tolip{ background: #df4a32; } .priority label:last-of-type:hover ~.tolip{ background: #25d366 } .priority label:first-of-type:hover ~.tolip:before{ -webkit-transform: translateX(14.06px); -ms-transform: translateX(14.06px); transform: translateX(14.06px); border-top-color: #df4a32; } .priority label:last-of-type:hover ~.tolip:before{ -webkit-transform: translateX(-14.06px); -ms-transform: translateX(-14.06px); transform: translateX(-14.06px); border-top-color: #25d366; } .priority label:last-of-type:hover ~.tolip:after{ content: 'Normal!'; } .priority label:first-of-type:hover ~.tolip:after{ content: 'Hight!'; } .priority > input[type=radio]:checked ~ label, .priority:not(:checked) > label:hover, .priority:not(:checked) > label:hover ~ label { color: #FFD700; } .priority > input:checked + label:hover, .priority> input:checked ~ label:hover, .priority> label:hover ~ input:checked ~ label, .priority> input:checked ~ label:hover ~ label { color: #FFED85; } .oppener{ position: absolute; left: 0%; bottom: 0; z-index: 1; width: 100%; text-align: center; height: 45px; overflow: hidden; pointer-events: none; } #open_todo{ position: relative; width: 50px; height: 50px; border-top-left-radius: 50%; border-top-right-radius: 50%; background: #004973; color: #efefef; text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78); pointer-events: auto; } .button-overlay { display: inline-block; width: 106px; pointer-events: none; overflow: hidden; border-top-left-radius: 50%; border-top-right-radius: 50%; } #open_todo:before { content: ''; background: #004973; width: 50px; height: 50px; left: -50px; position: absolute; -webkit-mask-image: radial-gradient(circle 10px at 30px 0, transparent 0, transparent 30px, black 31px); -webkit-mask-image: radial-gradient(circle 10px at 20px 0, transparent 0, transparent 30px, black 31px); pointer-events: none; } #open_todo:after { content: ''; background: #004973;; width: 50px; height: 50px; left: 50px; position: absolute; -webkit-mask-image: radial-gradient(circle 10px at 30px 0, transparent 0, transparent 30px, black 31px); pointer-events: none; } .dot{ margin: 0 4px; font-size: 18px; font-weight: bold; opacity: 0; -webkit-animation: animate 1s ease infinite; animation: animate 1s ease infinite; } @-webkit-keyframes animate { 0%{ opacity: 1 } } @keyframes animate { 0%{ opacity: 1 } } .wobble{ -webkit-animation: wobble .8s ease-in-out 1; animation: wobble .8s ease-in-out 1 } @-webkit-keyframes wobble{ 16.65%{-webkit-transform:translateX(6px);transform:translateX(6px); }33.3%{ -webkit-transform:translateX(-5px); transform:translateX(-5px); }49.95%{ -webkit-transform:translateX(4px); transform:translateX(4px); }66.6%{ -webkit-transform:translateX(-2px); transform:translateX(-2px); }83.25%{-webkit-transform:translateX(1px);transform:translateX(1px); }100%{ -webkit-transform:translateX(0); transform:translateX(0); } } @keyframes wobble{ 16.65%{-webkit-transform:translateX(6px);transform:translateX(6px); }33.3%{ -webkit-transform:translateX(-5px); transform:translateX(-5px); }49.95%{ -webkit-transform:translateX(4px); transform:translateX(4px); }66.6%{ -webkit-transform:translateX(-2px); transform:translateX(-2px); }83.25%{-webkit-transform:translateX(1px);transform:translateX(1px); }100%{ -webkit-transform:translateX(0); transform:translateX(0); } } .list-order{ z-index: 1; overflow: hidden; bottom: 5px; position: fixed; background: -webkit-gradient(linear, right bottom, left top, from(rgba(0, 73, 115, 0.88)),to(#9D50BB));background: -webkit-linear-gradient(bottom right, rgba(0, 73, 115, 0.88),#9D50BB);background: -o-linear-gradient(bottom right, rgba(0, 73, 115, 0.88),#9D50BB);background: linear-gradient(to top left, rgba(0, 73, 115, 0.88),#9D50BB); -webkit-box-shadow: inset -2px -3px 4px 0px rgba(0, 0, 0, .3);box-shadow: inset -2px -3px 4px 0px rgba(0, 0, 0, .3); font-size: 20px; right: 10px; color: #efefef; text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78); width: 38px; height: 38px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .fa-ellipsis-h{ -webkit-transition: .2s cubic-bezier(0.45, 0.5, 0, 1.51); -o-transition: .2s cubic-bezier(0.45, 0.5, 0, 1.51); transition: .2s cubic-bezier(0.45, 0.5, 0, 1.51); } .fa-ellipsis-h:before{ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; } .ba { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .icon { overflow: hidden; } .ripple { background: #cccccc; border-radius: 50%; display: inline-block; position: absolute; width: 200%; height: 200%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .click-effect{ -webkit-animation: animate .4s linear ; animation: animate .4s linear ; } @keyframes animate{ 0%{ opacity: .6; width: 0%; height: 0%; } } @-webkit-keyframes oppened { 0% { opacity: 0; -webkit-transform: translate3d(0, 1000px, 0); transform: translate3d(0, 1000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes oppened { 0% { opacity: 0; -webkit-transform: translate3d(0, 1000px, 0); transform: translate3d(0, 1000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .credit-list{ position: fixed; background: #fff; right: 10px; bottom: 50px; border-radius: 3px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075); display: none; -webkit-animation: oppened .8s cubic-bezier(0.215, 0.610, 0.355, 1.000); animation: oppened .8s cubic-bezier(0.215, 0.610, 0.355, 1.000); z-index: 2; width: 200px; } .credit-list img{ border-radius: 50%; height: 50px; width: 50px; border: 5px solid #fff; } .avatar-50{ position: absolute; left: 50%; bottom: -25%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: block; overflow: hidden } .ova{ position: absolute; background: rgba(255, 255, 255, 0.50); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); width: 10px; display: inline-block; height: 100%; left: -50%; top: -10%; } .animateme{ -webkit-animation: flashit .4s cubic-bezier(0.18, 0.99, 0.46, 1.1) ; animation: flashit .4s cubic-bezier(0.18, 0.99, 0.46, 1.1) ; -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes flashit{ 100%{ left: 100%; } } @keyframes flashit{ 100%{ left: 100%; } } .list-heading { background: #f6f7f9; height: 50px; margin-bottom: 20px; position: relative; text-align: center; } .credit-list ul li{ overflow: hidden; } .about-me { position: relative; text-align: center; margin-bottom: 35px; } .about-me:before { content: ''; position: absolute; height: 1px; background: #f0f0f0; width: 100%; left: 0; top: 50%; z-index: 0; } .about-me:after { content: 'Application Review'; position: absolute; background: #fff; width: 70%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; z-index: 0; font-family: sans-serif; color: #444; font-size: 12px; } .credit-list li a{ font-size: 13px; font-family: "Archivo Narrow", sans-serif; display: block; padding: 11px 12px; color: #444; text-transform: capitalize; background: #fff; position: relative; -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1); -o-transition: all .3s cubic-bezier(0.4,0,0.2,1); transition: all .3s cubic-bezier(0.4,0,0.2,1); } .credit-list li:first-child a { padding: 14px; font-size: 15px; } .credit-list li:first-child a:after { position: absolute; content: 'App Founder'; font-size: 10px; color: cornflowerblue; bottom: 0; left: 41%; top: 70%; opacity: 0; -webkit-transition: all .4s cubic-bezier(0.4,0,0.2,1); -o-transition: all .4s cubic-bezier(0.4,0,0.2,1); transition: all .4s cubic-bezier(0.4,0,0.2,1); -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%) } .credit-list li:first-child:hover a:after{ -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); opacity: 1; } .credit-list li:last-child a{ border-top: 1px solid #f0f0f0; padding: 14px } .credit-list li:last-child:hover a{ background: #df4a32; color: #fff } .credit-list li:hover a{ background: #e9ebee; } .numric-animated{ -webkit-animation: scaleit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1); animation: scaleit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1); -webkit-animation-delay: .3s; animation-delay: .3s } @-webkit-keyframes scaleit{ 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { color: #444; -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes scaleit{ 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { color: #444; -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .morecontent span { display: none; } .morelink { position: absolute; bottom: 0; left: 50%; margin-left: -7px; } .icon-arrow-down { -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; fill: #00aff0; height: 12px; width: 12px; } .rotated{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); fill: #ddd; } .notice { position: absolute; bottom: 0; display: inline-block; font-size: 11px; color: #df4a32; } .circular { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; height: 50px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; width: 50px; position: absolute; bottom: 0; left: 0; right: 0; top: 0; margin: auto; display: none } .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color 3s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color 3s ease-in-out infinite; stroke-linecap: round; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @-webkit-keyframes color { 100%, 0% { stroke: #0057e7; } 40% { stroke: #00b6f1; } 66% { stroke:#c32aa3; } 80%, 90% { stroke: #ea4c89; } } @keyframes color { 100%, 0% { stroke: #0057e7; } 40% { stroke: #00b6f1; } 66% { stroke:#c32aa3; } 80%, 90% { stroke: #ea4c89; } } </style></head><body> <div class='bg'> <div class='todo'> <div class="oppener"> <span class="button-overlay"> <button id="open_todo"><i class="fa fa-plus"></i> </button></span> </div> <div id="overlay"></div> <div id="card-main"> <button id='close-icon'><span class="close" title="Close">×</span></button> <div class='card-content'> <div class='test'> <label>Task</label> <input id='title' type="text" autocomplete="off" spellcheck="false" maxlength="10" placeholder="e.g. Lunch, Meeting, Party.."> <span data-count='title' class='textCounter'></span> <span class='notice'></span> </div> <div class='test'> <label>Place</label> <input id='location' type="text" maxlength="10" placeholder="e.g. Home, Supermarket, Library.."> <span data-count='location' class='textCounter'></span> <span class='notice'></span> </div> <div class='test'> <label>Note</label> <input id='description' type="text" maxlength="50" placeholder="e.g. hangout with dudes.."> <span data-count='description' class='textCounter'></span> </div> </div> <div class='card-content02'> <div class='set-priority'> <h3>Set Time</h3> <input type='time'> </div> <div class='set-priority'> <h3>Set date</h3> <input id='datepicker' placeholder='dd/mm/yyyy' readonly> </div> <div class='set-priority'> <h3>Notify Me</h3> <input id="tmp" type="checkbox"> <label for="tmp" class="notification"> <span class="left"><i class="fa fa-bell-o" aria-hidden="true"></i></span> <span class="right"><i class="fa fa-bell-slash-o" aria-hidden="true"></i></span> </label> </div> </div> <button id='submit' role="button"><i class="fa fa-check"></i> <span class='ripple'></span> </button> </div> <div class="head"> <div class="head-overlay"></div> <div class="search-cont"> <button class="icon"><span class='ripple'></span></button> <input type="search" id="search" maxlength="20" disabled='disabled' placeholder="No tasks so far"> </div> <div class="date-container"> <span class='t-day'></span> <span class="fulldate"> <span class="day"></span> <span class="date"></span> <span class="timing"></span> </span> </div> <div class='task-info'> <span class='counter'>No Tasks Pending</span> </div> </div> <div class="list-container"> <div class="pre-loading"> <div class='simulate-container'> <div class="simulatepost"> <div class="circle"></div> <div class="right-side"> <div class="top-line"></div> <div class="center-line"></div> <div class="bottom-line"></div> </div> </div> <div class="sp_02"></div> <div class="sp_03"></div> <div class="sp_04"></div> <div class="sp_05"></div> </div> <div class="main-cont"> <i class="fa fa-signal"></i> <h1>No tasks for today</h1> <h3>Enjoy your <span class='wel-day'></span></h3> </div> </div> <ul class="list"> </ul> </div> <div class="main-message"> <div class="message"> <h3>Delete Task?</h3> <p></p> </div> <div class="answer"> <button id='no'>Discard</button> <button id='yes'>Confirm</button> </div> <svg class="circular" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> </svg> </div> </div> </div> <div class='credit-list'> </div> <button class='list-order'><i class="fa fa-ellipsis-h"></i><span class='ripple'></span></button> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js'></script><script src='https://code.jquery.com/jquery-3.2.1.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script >$(function() { 'use strict'; $("a[href='#']").click(function(e) { e.preventDefault(); }); $('.simulatepost').clone().css({ 'opacity': '.6' }).appendTo('.sp_02'); $('.sp_02').clone().css({ 'opacity': '.6' }).appendTo('.sp_03'); $('.sp_03').clone().css({ 'opacity': '.6' }).appendTo('.sp_04'); $("#datepicker").datepicker(); function update() { var d = new Date(), currentDay = d.getDate(), day = d.getDay(), month = d.getMonth(), year = d.getFullYear(), d_names = Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"), m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"), hour = d.getHours(), minutes = d.getMinutes(), sup = "", a_p = ""; if (currentDay == 1 || currentDay == 21 || currentDay == 31) { sup = 'st'; } else if (currentDay == 2 || currentDay == 22) { sup = 'nd'; } else if (currentDay == 3 || currentDay == 23) { sup = 'rd'; } else { sup = "th"; } if (hour < 12) { a_p = 'AM'; } else { a_p = 'PM'; } if (hour > 12) { hour = hour - 12; } if (hour == 0) { hour = 12; } if (hour < 10) { hour = '0' + hour; } if (minutes < 10) { minutes = '0' + minutes; } $('.date-container .t-day').html(currentDay + '<SUP>' + sup + '</SUP>'); $('.fulldate .day').html(d_names[day]); $('.fulldate .date').html(m_names[month] + ', ' + year); $('.fulldate .timing').html(hour + '<span class="dot">:</span>' + minutes + ' ' + a_p); $('.pre-loading .wel-day').html(d_names[day]); } update(); setInterval(update, 1000); function reseted() { $("#overlay, #card-main").fadeOut(); $("#card-main input").val('').removeClass('wobble'); $('input[type=text]').css('border-color', 'rgba(0,0,0,.12)'); $('.notification').removeClass('checked'); $('.notification .left').removeClass('animated-checked'); $('.textCounter').html(''); $('.notice').html('').removeClass('wobble'); $('input[type=text]').prev('label').removeClass('effect'); } $('input[type=text]').on('focus blur', function(e) { var $this = $(this), label = $this.prev('label'); if (e.type === 'focus') { if ($this.val() === '') { label.addClass('effect'); $this.attr("placeholder"); } } else if (e.type === 'blur') { if ($this.val() === '') { label.removeClass('effect'); } else { label.addClass('effect'); } } }); $('#tmp').on('click', function() { $('.notification').toggleClass('checked'); $('.notification .left').toggleClass('animated-checked'); }); $('#search').on('keyup', function() { $.expr[":"].contains = function(a, i, m) { return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; var filter = $(this).val(); if (filter) { $('.list').find(".listed01:not(:contains(" + filter + "))").closest('li').fadeTo('slow', 0.3); $('.list').find(".listed01:contains(" + filter + ")").closest('li').fadeTo('slow', 1); } else { $('.list').find("li").fadeTo('slow', 1); } }); $('input[type=text]').on('keyup', function() { var maxLength = $(this).attr('maxlength'), textLength = $(this).val().length, remText = (maxLength - textLength), moc = $(this).next('.textCounter'); if (remText == 0) { moc.css('color', '#df4a32'); } else { moc.css('color', 'initial'); } if (textLength == 0) { moc.fadeOut(); } else { moc.fadeIn().html(remText + ' W/R'); } }); $('#title, #location').keydown(function(e) { var key = e.keyCode; var notice = 'Only Letters (aA-zZ)'; if (e.shiftKey || e.ctrlKey || e.altKey || key == '9') { return true } if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) { $(this).parent().find('.notice').html(notice).addClass('wobble'); e.preventDefault(); } else { $(this).parent().find('.notice').html('').removeClass('wobble'); } }); $('.icon').on('click', function() { $('.search-cont').toggleClass('togglesearch'); $('input#search').toggleClass('togglesearchbackground'); }); $(document).mouseup(function(e) { var container = $('.search-cont') if (!container.is(e.target) && container.has(e.target).length === 0) { container.removeClass('togglesearch'); $('input#search').removeClass('togglesearchbackground'); } }); $('#open_todo').on('click', function() { $('.counter').removeClass('numric-animated'); $('#overlay, #card-main').fadeIn(); }); var counter = 0; $('#submit').on('click', function() { counter++; var myTitle = $('#title').val(), myLocation = $('#location').val(), myDescription = $('#description').val(), myDate = $('input#datepicker').val(), myTime = $('input[type=time]').val(), showChar = 25, ellipsestext = "..."; $('#card-main input').not(':input[type=checkbox]').each(function(e) { if ($(this).val() == '') { $(this).css('border-color', '#df4a32').addClass('wobble'); e.preventDefault(); } }); if (myDescription.length > showChar) { var c = myDescription.substr(0, showChar); var h = myDescription.substr(showChar, myDescription.length - showChar); var html = c + '<span class="moreellipses">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span><a href="#" class="morelink"><svg class="icon-arrow-down" viewBox="0 0 32 32"><polygon points="28.2,6.1 16,18.3 3.8,6.1 0,9.9 16,25.9 32,9.9"></polygon></svg></a></span>'; } else { html = myDescription } $('.morelink').click(function(e) { var hidden = $(e.target).closest('.morecontent'); $(this).find('.icon-arrow-down').toggleClass('rotated'); hidden.find('span').toggle(); }); $('.category p').html('queued').css({'background':'rgba(0,0,0,0.3)'}); if (counter > 0) { $('.list').prepend("<li><div class='listed'><div class='options'><a href='#' class='erase' title='Erase Task'></a><a href='#' class='min' title='Minimize'></a><a href='#' class='max' title='Maximize'></a></div><div class='category'><span></span><p>New</p></div><div class='listed01'><h3>" + myTitle + "<span class='at'> — in </span>" + myLocation + "</h3><span class='rem-status'>Reminder Mode: on</span><p class='paragraph'>" + html + "</p></div><div class='listed02'><span class='listed-date'>" + myDate + "</span><span class='listed-time'> at <b>" + myTime + "</b></span><span class='priority'><input type='radio' id='star1'><label for='star1'></label><input type='radio' id='star2'><label for='star2'></label><input type='radio' id='star3'><label for='star3'></label><span class='tolip'></span></span></div></div></li>"); $('.pre-loading').hide(); $('#search').prop('disabled', false); $('#search').attr('placeholder', 'Filter tasks by keywords ..'); $('.counter').addClass('numric-animated'); } reseted(); $('.options .erase').click(function(event) { var title = $(event.target).closest('li').find('h3').text(); $(' #overlay, .main-message').fadeIn(); $('.message, .answer').css({ 'opacity': '1' }); $('.message p').html('This task <b>(' + title + ' )</b> will be deleted and you will no longer be able to find it.'); $('.answer button').on('click', function(e) { if ($('#yes').is(e.target)) { $('.circular').fadeIn(); $('.message, .answer').animate({ opacity: '0' }); setTimeout(function() { $('#overlay, .main-message').fadeOut() $('.circular').fadeOut(); $(event.target).closest('li').remove(); var co = $('.list li').length; $('.counter').html(co + ' task(s) pending'); if (co == 0) { $('.counter').html('No Tasks Pending'); $('.pre-loading').fadeIn(); $('#search').prop('disabled', true); $('#search').attr('placeholder', 'No tasks so far'); $('#search').val(''); } }, 2500); clearTimeout() } else if ($('#no').is(e.target)) { $(' #overlay, .main-message').fadeOut(); } }) }); $('.options .min').on('click', function(e) { var item = $(e.target).closest('li'); var itm = $('.list').width(); item.css({ 'right': itm - 16 }) $(this).css({ 'background': '#ddd' }) item.find(' .max').css({ 'background': '#89cb5a' }); }); $('.options .max').click(function(e) { var item = $(e.target).closest('li') item.css({ 'right': 0 }) $(this).css({ 'background': '#ddd' }) item.find(' .min').css({ 'background': '#f7bf67' }); }); $('.morelink').click(function(e) { var hidden = $(e.target).closest('.morecontent'); $(this).find('.icon-arrow-down').toggleClass('rotated'); hidden.find('span').toggle(); }); var co = $('.list li').length; $('.counter').html(co + ' Task(s) Pending'); }); $('#overlay').mouseup(function(e) { var container = $("#card-main, .main-message"); if (!container.is(e.target) && container.has(e.target).length === 0) { $(".main-message").fadeOut(); reseted(); } }); $('#close-icon').on('click', function() { reseted(); }); $('.credit-list').html('<div class="list-heading"><a class="avatar-50" href="https://www.facebook.com/Dani4Real" target="_blank"><span class="ova"></span><img src="https://goo.gl/aVijkX" ></a></div><div class="about-me"></div><ul><li><a href="https://www.facebook.com/Dani4Real" target="_blank">Muhammad Khairy</a></li><li><a href="#">Rate the app</a></li><li><a href="#">Terms of use</a></li><li><a href="#">FAQ</a></li><li><a id="collapse" href="#">Collapse The bar</a></li></ul>'); $('#close-icon, .credit-list ul li a').append("<span class='ripple'></span>"); $('#collapse, .list-order').on('click', function() { $('.ova').toggleClass('animateme'); $('.fa-ellipsis-h').toggleClass('ba'); $('.credit-list').toggle(); }); $('#close-icon, #submit, .credit-list ul li a, .icon, .list-order').on('mouseup mousedown', function(e) { if (e.type === 'mouseup') { var ofs = $(this).offset(), dX = e.pageX - ofs.left, dY = e.pageY - ofs.top; $('.ripple').css({ left: dX, top: dY }); $(this).find('.ripple').addClass('click-effect'); } if (e.type === 'mousedown') { $('.ripple').removeClass("click-effect"); } }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: