1 files changed, 178 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..3017a4c
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,178 @@
+/*--------------------
+Body
+--------------------*/
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  background: radial-gradient(ellipse farthest-corner at center bottom, #6beace, #2e9aa4);
+  color: #8b9095;
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+}
+a { color: inherit;
+    text-decoration: none; } 
+/*--------------------
+CSS For the rest of the application (Wenbkit and stuff)
+--------------------*/
+.app {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  width: 362px;
+  height: 300px;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.app h1 {
+  position: absolute;
+  top: -34px;
+  left: -2px;
+  text-transform: uppercase;
+  color: #fff;
+  font-weight: 100;
+  font-size: 27px;
+  opacity: .9;
+}
+.app .logo {
+  width: 25px;
+  height: 25px;
+  margin-right: 3px;
+}
+.app time {
+  position: absolute;
+  top: -32px;
+  right: 1px;
+  text-transform: uppercase;
+  color: #fff;
+  opacity: .7;
+  font-size: 10.5px;
+  text-align: right;
+  line-height: 1.25;
+  letter-spacing: 0.5px;
+}
+.app .widget {
+  margin: 0;
+  padding: 0;
+}
+.app .widget li {
+  width: 180px;
+  height: 148px;
+  padding: 40px 10px;
+  margin: 0.5px;
+  float: left;
+  background: #fff;
+  text-align: center;
+  -webkit-box-shadow: 0 5px 20px rgba(0, 64, 58, 0.15);
+          box-shadow: 0 5px 20px rgba(0, 64, 58, 0.15);
+  -webkit-transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
+  transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
+  -webkit-transform-origin: right bottom;
+          transform-origin: right bottom;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+.app .widget li:nth-child(2) {
+  -webkit-transform-origin: left bottom;
+          transform-origin: left bottom;
+  -webkit-transition-delay: .1s;
+          transition-delay: .1s;
+}
+.app .widget li:nth-child(3) {
+  -webkit-transform-origin: right top;
+          transform-origin: right top;
+  -webkit-transition-delay: .2s;
+          transition-delay: .2s;
+}
+.app .widget li:nth-child(4) {
+  -webkit-transform-origin: left top;
+          transform-origin: left top;
+  -webkit-transition-delay: .3s;
+          transition-delay: .3s;
+}
+.app .widget li h2 {
+  font-size: 11px;
+  opacity: .8;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+}
+.app .widget li .val {
+  font-size: 50px;
+  font-weight: 100;
+  color: #343a42;
+}
+.app .widget li .val small {
+  font-size: 30px;
+}
+.app .widget li .val small sup {
+  position: relative;
+  top: -12px;
+}
+
+.active .app .widget li {
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
+  transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
+}
+.active .app .widget li:nth-child(2) {
+  -webkit-transform-origin: left bottom;
+          transform-origin: left bottom;
+  -webkit-transition-delay: .2s;
+          transition-delay: .2s;
+}
+.active .app .widget li:nth-child(3) {
+  -webkit-transform-origin: right top;
+          transform-origin: right top;
+  -webkit-transition-delay: .4s;
+          transition-delay: .4s;
+}
+.active .app .widget li:nth-child(4) {
+  -webkit-transform-origin: left top;
+          transform-origin: left top;
+  -webkit-transition-delay: .6s;
+          transition-delay: .6s;
+}
+
+.reload {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+  background: #fff;
+  border: none;
+  border-radius: 20px;
+  font-size: 11px;
+  line-height: 1.5;
+  padding: 8px 12px;
+  text-transform: uppercase;
+  z-index: 10;
+  outline: none !important;
+  cursor: pointer;
+  -webkit-box-shadow: 0 6px 7px rgba(0, 64, 58, 0.27);
+          box-shadow: 0 6px 7px rgba(0, 64, 58, 0.27);
+  -webkit-transition: all 0.1s cubic-bezier(0.67, 0.13, 0.1, 0.81);
+  transition: all 0.1s cubic-bezier(0.67, 0.13, 0.1, 0.81);
+}
+.reload:hover {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 64, 58, 0.27);
+          box-shadow: 0 4px 4px rgba(0, 64, 58, 0.27);
+  -webkit-transform: translateY(1px);
+          transform: translateY(1px);
+}
+.reload:active {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 64, 58, 0.27);
+          box-shadow: 0 1px 2px rgba(0, 64, 58, 0.27);
+  -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+}
+.reload svg {
+  vertical-align: middle;
+  position: relative;
+  top: -2px;
+}