diff --git a/Clock/AdyaTech/Day 10.html b/Clock/AdyaTech/Day 10.html new file mode 100644 index 000000000..29354860d --- /dev/null +++ b/Clock/AdyaTech/Day 10.html @@ -0,0 +1,34 @@ + + + + CSS DAY 10 + + + + + + +
+
+
+
wed 22 jan 1997
+
01:22
+
+ + 80 + 1200 kcal +
+
+
+ + + + + + +
+ + diff --git a/Clock/AdyaTech/dayten.css b/Clock/AdyaTech/dayten.css new file mode 100644 index 000000000..b7d898159 --- /dev/null +++ b/Clock/AdyaTech/dayten.css @@ -0,0 +1,107 @@ +.frame { + position: absolute; + top: 50%; + left: 50%; + width: 400px; + height: 400px; + margin-top: -200px; + margin-left: -200px; + border-radius: 2px; + box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); + overflow: hidden; + background-image: radial-gradient( circle 400px at 6.8% 8.3%, rgba(255,244,169,1) 0%, rgba(255,244,234,1) 100.2% ); + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-family: "Open Sans", Helvetica, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.base_c { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + width: 200px; + height: 200px; + background: #000; + border: 7px solid #444; + text-align: center; +} + +.contents { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.heart { + display: flex; + justify-content: space-between; +} +.heart .fa-heart { + color: #da1616; + font-size: 10px; + margin-top: 1px; + margin-right: -5px; +} +.time { + font-weight: 700; + top: 80px; + font-size: 40px; + // line-height: 100%; +} + +.red_c { + position: absolute; + top: 50%; + left: 50%; + width: 184px; + height: 184px; + transform: translate(-50%, -50%); +} +.red_c circle { + stroke: #ac1212; + fill: none; + stroke-width: 4px; + stroke-dasharray: 625; + -webkit-animation: spinner 5s linear infinite; + animation: spinner 5s linear infinite; + transform-origin: center center; + transform: rotate(-90deg); +} + +@keyframes spinner { + 0% { + stroke-dashoffset: 625; + transform: rotate(-90deg) scaleY(1); + } + 50% { + stroke-dashoffset: 0; + transform: rotate(-90deg) scaleY(1); + } + 50.0001% { + transform: rotate(-90deg) scaleY(-1); + } + 100% { + stroke-dashoffset: 625; + transform: rotate(-90deg) scaleY(-1); + } +} + +.dotted_c { + position: absolute; + top: 50%; + left: 50%; + width: 164px; + height: 164px; + transform: translate(-50%, -50%); +} +.dotted_c circle { + stroke: #fff; + fill: none; + stroke-width: 2px; + stroke-dasharray: 2 8.5; +}