Day 02 - Clock

Ram-tyagi · Jun 23, 2021 · 8a3d057 · 8a3d057
1 parent 80da920
commit 8a3d057
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 74 deletions.
diff --git a/02 - Clock/font/sans.ttf b/02 - Clock/font/sans.ttf
diff --git a/02 - Clock/index.html b/02 - Clock/index.html
@@ -10,6 +10,9 @@
 
   </head>
   <body>
+    <h2 class="heading">
+      Clock
+    </h2>
     <div class="clock">
       <div class="hour">
         <div class="hr" id="hr"></div>
@@ -25,7 +28,7 @@
 
 
     <footer>
-      <p>&#x3c;&#47;&#x3e; with ❤️ by 
+      <p>&#x3c; &#47; &#x3e; with ❤️ by 
         <a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
         <br> 
         <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript

diff --git a/02 - Clock/style.css b/02 - Clock/style.css
@@ -1,103 +1,124 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-body{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    background: #000000;
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #000000;
+  font-family: "sans";
+
 }
 
-.clock{
-    width: 350px;
-    height: 350px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: url(assets/clock.png);
-    background-size: cover;
+@font-face {
+  src: url("font/sans.ttf");
+  font-family: "sans";
 }
 
-.clock:before{
-    content: '';
-    position: absolute;
-    width: 15px;
-    height: 15px;
-    background: #fff;
-    border-radius: 50%;
-    z-index: 10000;
+.heading {
+  color: white;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 100px;
+  line-height: 3vh;
+}
+
+.clock {
+  width: 350px;
+  height: 350px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url(assets/clock.png);
+  background-size: cover;
+}
+
+.clock:before {
+  content: "";
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  background: #fff;
+  border-radius: 50%;
+  z-index: 10000;
 }
 
 .clock .hour,
 .clock .min,
-.clock .sec{
-    position: absolute;
+.clock .sec {
+  position: absolute;
 }
 
-.clock .hour, .hr{
-    width: 160px;
-    height: 160px;
+.clock .hour,
+.hr {
+  width: 160px;
+  height: 160px;
 }
 
-.clock .min, .mn{
-    width: 190px;
-    height: 190px;
+.clock .min,
+.mn {
+  width: 190px;
+  height: 190px;
 }
 
-.clock .sec, .sc{
-    width: 230px;
-    height: 230px;
+.clock .sec,
+.sc {
+  width: 230px;
+  height: 230px;
 }
 
-.hr, .mn ,.sc{
-    display: flex;
-    justify-content: center;
-    /* align-items: center; */
-    position: absolute;
-    border-radius: 50%;
+.hr,
+.mn,
+.sc {
+  display: flex;
+  justify-content: center;
+  /* align-items: center; */
+  position: absolute;
+  border-radius: 50%;
 }
 
-.hr:before{
-    content: '';
-    position: absolute;
-    width: 6px;
-    height: 80px;
-    background: #bb86fc;
-    z-index: 10;
-    border-radius: 6px 6px 0 0;
+.hr:before {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 80px;
+  background: #bb86fc;
+  z-index: 10;
+  border-radius: 6px 6px 0 0;
 }
 
-.mn:before{
-    content: '';
-    position: absolute;
-    width: 4px;
-    height: 90px;
-    background: #fff;
-    z-index: 11;
-    border-radius: 6px 6px 0 0;
+.mn:before {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 90px;
+  background: #fff;
+  z-index: 11;
+  border-radius: 6px 6px 0 0;
 }
 
-.sc:before{
-    content: '';
-    position: absolute;
-    width: 2px;
-    height: 150px;
-    background: #70efde;
-    z-index: 12;
-    border-radius: 6px 6px 0 0;
+.sc:before {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 150px;
+  background: #70efde;
+  z-index: 12;
+  border-radius: 6px 6px 0 0;
 }
 
-
 footer {
   background-color: black;
   text-align: center;
   color: white;
   font-size: 1rem;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   position: absolute;
   left: 0;
   right: 0;
@@ -107,14 +128,14 @@ footer {
   line-height: 3vh;
 }
 
-footer a{
+footer a {
   text-decoration: none;
 }
 
-footer a:visited{
+footer a:visited {
   color: inherit;
 }
 
-footer a:hover{
+footer a:hover {
   text-decoration: underline;
-}
+}