diff --git a/index.css b/index.css
index 03f049b..0fa3f19 100644
--- a/index.css
+++ b/index.css
@@ -1,26 +1,26 @@
 .ratio1 {
-  height: 50px;
-  width: 50px;
+  height: 80px;
+  width: 80px;
   text-align: center;
   color:#fff;
 }
 
 .ratio2 {
-  height: 100px;
-  width:100px;
+  height: 130px;
+  width:130px;
   text-align: center;
   color:#fff;
 }
 
 .ratio3 {
-  height: 150px;
-  width: 150px;
+  height: 180px;
+  width: 180px;
   text-align: center;
   color:#fff;
 }
 
 .ratio5 {
-  width: 250px;
+  width: 280px;
   text-align: center;
   color:#fff;
 }
@@ -200,7 +200,7 @@ footer{
 	width: 35px;
 	height: 35px;
 	cursor: pointer;
-	background-color:  #ffffff;
+	  
 	border-radius: 2px;
 
 	font-size: 20px;
diff --git a/index.html b/index.html
index d6d0fe9..b7eb319 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <link href="index.css" rel="stylesheet" type="text/css" />
     <link href="bootstrap.unity.css" rel="stylesheet" type="text/css" />
   </head>
-  <body>
+  <body background="wall4.jpg">
     <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
@@ -37,7 +37,22 @@ <h1 class="text-primary" style="text-align:center; text-decoration:underline;">F
       <br>
         <button id="info-button" class="btn btn-primary">Click here to know about fibonacci clock</button>
     </div>
-
+	    <div style="text-align:center">
+      <br>
+      <br>
+      <br>
+		<button onclick="myFunction()">Click me to know time</button>
+    </div>
+	<br><br><br><br>
+	<div style="font-size:100px">
+	<style> 
+      marquee {
+        width: 100%;
+        color: White;
+      }
+    </style>
+    <marquee direction="scroll">Fibonacci Clock - An Open Source Web-Based Clock </marquee>
+	</div>
     <footer class="footer-distributed">
 			<div class="footer-left">
 				<h4>
@@ -47,11 +62,27 @@ <h5>by</h5>
         <h4>
           <a class="white-text" href="https://github.com/therealvasanth/" target="_blank">therealvasanth</a>
         </h4>
+		<h9>
+          <a class="white-text" href="https://www.google.com.ph/search?q=what+is+a+fibonacci+clock&oq=what+is+a+fibonacci+clock&aqs=chrome..69i57.9566j1j4&sourceid=chrome&ie=UTF-8" target="_blank">Know more what is a Fibonacci Clock</a>
+        <br>
+		</h9>
         <script type="text/javascript">
         var d = new Date()
         document.write("&copy; "+d.getFullYear());
         </script>
 		</footer>
+		<script>
+		function myFunction() {
+	    alert("The current time is:   " + startTime());
+        }
+	function startTime(){
+    var today = new Date();
+    var h = today.getHours();
+    var m = today.getMinutes();
+    var s = today.getSeconds(); 
+    return h+":"+m+":"+s; 
+    }
+	</script>
 
     <script async defer src="https://buttons.github.io/buttons.js"></script>
     <script src="jquery.js"></script>
diff --git a/index.js b/index.js
index 9d4f288..6893c23 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,5 @@
 $("#info-button").click(function(){
- 	alert("To calculate the hour : Add the values of red and blue squares.\n\n The minutes will be multiples of 5 in fibonacci clock.\n\n To calculate minutes : Add the values of green and blue squares and multiply the result with 5.\n\n In case of the absence of red and green squares or only the blue squares are to be found then the hours value will be the addition of values of blue squares and the minutes value will be the addition of values of blue squares * 5.");
+ 	alert("To calculate the hour : Add the values of red and blue squares.\n\n The minutes will be multiples of 5 in fibonacci clock.\n\n To calculate minutes : Add the values of green and blue squares and multiply the result with 5.\n\n In case of the absence of red and green squares or only the blue squares are to be found then the hours value will be the addition of values of blue squares and the minutes value will be the addition of values of blue squares * 5. Note that White Squares will be ignored.");
 });
 var d = new Date();
 var hrs = 0, mins = 0;
