diff --git a/assets/Banner.jpg b/assets/Banner.jpg
new file mode 100644
index 0000000..09377e7
Binary files /dev/null and b/assets/Banner.jpg differ
diff --git a/assets/Banner1.jpg b/assets/Banner1.jpg
new file mode 100644
index 0000000..fed8629
Binary files /dev/null and b/assets/Banner1.jpg differ
diff --git a/assets/Logo.png b/assets/Logo.png
new file mode 100644
index 0000000..8917d98
Binary files /dev/null and b/assets/Logo.png differ
diff --git a/index.html b/index.html
index ee4edb0..52ba5f5 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,83 @@
 <!DOCTYPE HTML>
 <html>
 <head>
- <title>Hacktoberfest</title>
+
+ <title>Gramiksha</title>
 </head>
-<body>
+<body bgcolor= "#bcfc99">
+	<div class="header" >
+  <a> <img src="assets/Logo.png" width="80" height="80"></a>
+  <a  href="#default" class="logo">Gramiksha</a>
+  <div align="center" class="header-right">
+    <a class="active" href="#home">Home</a>
+    <a href="#contact" >Contact Us</a>
+    <a href="#about">About Us</a>
+  </div>
+</div>
         <style>
+
+.header {
+ background-image: url("Banner.jpg") ;
+ background-repeat: no-repeat;
+  overflow: hidden;
+  padding: 30px 10px;
+  background-size:100% 100%;
+}
+
+/* Style the header links */
+.header a {
+ 
+  float: left;
+  color: black;
+  text-align: center;
+  padding: 12px;
+  text-decoration: none;
+  font-size: 18px; 
+  line-height: 25px;
+  border-radius: 4px;
+}
+
+/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
+.header a.logo {
+	padding-top: 35px;
+   align-self: center;
+   font-size: 50px;
+  font-weight: bold;
+  
+}
+
+/* Change the background color on mouse-over */
+.header a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* Style the active/current link*/
+.header a.active {
+
+  background-color: dodgerblue;
+  color: white;
+}
+
+/* Float the link section to the right */
+.header-right {
+padding-top: 35px;
+   align-self: center;
+  float: right;
+
+}
+
+/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 
+@media screen and (max-width: 500px) {
+  .header a {
+    float: none;
+    display: block;
+    text-align: left;
+  }
+  .header-right {
+    float: none;
+  }
+}
                                 table {
                                     border-collapse: collapse;
                                     width: 100%;
@@ -12,7 +85,8 @@
                                
                                 <!-- th, td {
                                     padding: 8px;
-                                    text-align: left;
+                                    text-align: center;
+                                    size: 30px
                                     border-bottom: 1px solid rgb(168, 164, 164);
                                 }-->
                                 table,th,td{
@@ -20,123 +94,142 @@
                                 }
                                 
                                 tr:hover {background-color:#f0f0f0;}
+        .zoom {
+    padding: 50px;
+    transition: transform .2s;
+    margin: 0 auto;
+    background-color: #c2d8fc; 
+}
+
+.zoom:hover {
+    -ms-transform: scale(1.2); /* IE 9 */
+    -webkit-transform: scale(1.2); /* Safari 3-8 */
+    transform: scale(1.2);
+    background-color: #aecbfc; 
+
+    
+
+}
         </style>
-        <p><b><i>My Contribution</i></b></p>
-        <div class="letters" style="font-family: 'Courier New', Courier, monospace">
-        <table>
+        
+        <div  class="letters" style="font-family: 'Courier New', Courier, monospace">
+        <table  align="center" style="width:90%" bgcolor="#c2d8fc"  >
                 <tr>
                         <th>Letter</th>
                         <th>Example</th>
                 </tr>
                 <tr>
-                        <td>A for apple</td>
-                        <td><img src=assets/apple.png style="width:200px;height:200px"></td>
+                        <td  class="zoom">A for apple</td>
+                        <td class="zoom"><img src=assets/apple.png style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>B for banana</td>
-                        <td><img src=assets/banana.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">B for banana</td>
+                        <td class="zoom"><img src=assets/banana.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>C for Cat</td>
-                        <td><img src=assets/cat.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">C for Cat</td>
+                        <td class="zoom"><img src=assets/cat.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>D for Dog</td>
-                        <td><img src=assets/dog.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">D for Dog</td>
+                        <td class="zoom"><img src=assets/dog.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>E for Elephant</td>
-                        <td><img src=assets/elephant.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">E for Elephant</td>
+                        <td class="zoom"><img src=assets/elephant.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>F for Fish </td>
-                        <td><img src=assets/fish.png style="width:200px;height:200px"></td>
+                        <td class="zoom">F for Fish </td>
+                        <td class="zoom"><img src=assets/fish.png style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>G for Guitar</td>
-                        <td><img src=assets/guitar.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">G for Guitar</td>
+                        <td class="zoom"><img src=assets/guitar.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>H for Helicoptor</td>
-                        <td><img src=assets/helicopter.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">H for Helicoptor</td>
+                        <td class="zoom"><img src=assets/helicopter.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>I for India</td>
-                        <td><img src=assets/india.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">I for India</td>
+                        <td class="zoom"><img src=assets/india.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>J for Joker</td>
-                        <td><img src=assets/Joker.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">J for Joker</td>
+                        <td class="zoom"><img src=assets/Joker.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>K  for Kite</td>
-                        <td><img src=assets/kite.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">K  for Kite</td>
+                        <td class="zoom"><img src=assets/kite.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>L for Lion</td>
-                        <td><img src=assets/lion.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">L for Lion</td>
+                        <td class="zoom"><img src=assets/lion.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>M for Monkey</td>
-                        <td><img src=assets/monkey.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">M for Monkey</td>
+                        <td class="zoom"><img src=assets/monkey.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>N for Noodles</td>
-                        <td><img src=assets/noodles.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">N for Noodles</td>
+                        <td class="zoom"><img src=assets/noodles.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>O for Orange</td>
-                        <td><img src=assets/orange.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">O for Orange</td>
+                        <td class="zoom"><img src=assets/orange.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>P for Plane</td>
-                        <td><img src=assets/plane.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">P for Plane</td>
+                        <td class="zoom"><img src=assets/plane.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>Q for Queen</td>
-                        <td><img src=assets/queen.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">Q for Queen</td>
+                        <td class="zoom"><img src=assets/queen.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>R for Road</td>
-                        <td><img src=assets/road.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">R for Road</td>
+                        <td class="zoom"><img src=assets/road.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>S for Snake</td>
-                        <td><img src=assets/snake.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">S for Snake</td>
+                        <td class="zoom"><img src=assets/snake.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>T for Tiger</td>
-                        <td><img src=assets/tiger.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">T for Tiger</td>
+                        <td class="zoom"><img src=assets/tiger.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>U for Umbrella</td>
-                        <td><img src=assets/umbrella.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">U for Umbrella</td>
+                        <td class="zoom"><img src=assets/umbrella.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>V for Van</td>
-                        <td><img src=assets/van.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">V for Van</td>
+                        <td class="zoom"><img src=assets/van.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>W for Water</td>
-                        <td><img src=assets/water.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">W for Water</td>
+                        <td class="zoom"><img src=assets/water.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>X for Xylophone</td>
-                        <td><img src=assets/xylophone.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">X for Xylophone</td>
+                        <td class="zoom"><img src=assets/xylophone.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>Y for Yak</td>
-                        <td><img src=assets/yak.jpg style="width:200px;height:200px"></td>
+                        <td class="zoom">Y for Yak</td>
+                        <td class="zoom"><img src=assets/yak.jpg style="width:200px;height:200px"></td>
                 </tr>
                 <tr>
-                        <td>Z for Zoo</td>
-                        <td><img src=assets/zoo.jpg style="width:200px;height:200px"></td>
-                </tr>
-                <tr>
-                        <td>name</td>
-                        <td>species</td>
+                        <td class="zoom">Z for Zoo</td>
+                        <td class="zoom"><img src=assets/zoo.jpg style="width:200px;height:200px"></td>
                 </tr>
+            </table>
+                
         </div>
 
+
 </body>
+<footer>
+
+<p style="align-content: center" style="size: 90px"><Footer</p>
+</footer>
 </html>           

Letter	Example
A for apple		A for apple
B for banana		B for banana
C for Cat		C for Cat
D for Dog		D for Dog
E for Elephant		E for Elephant
F for Fish		F for Fish
G for Guitar		G for Guitar
H for Helicoptor		H for Helicoptor
I for India		I for India
J for Joker		J for Joker
K for Kite		K for Kite
L for Lion		L for Lion
M for Monkey		M for Monkey
N for Noodles		N for Noodles
O for Orange		O for Orange
P for Plane		P for Plane
Q for Queen		Q for Queen
R for Road		R for Road
S for Snake		S for Snake
T for Tiger		T for Tiger
U for Umbrella		U for Umbrella
V for Van		V for Van
W for Water		W for Water
X for Xylophone		X for Xylophone
Y for Yak		Y for Yak
Z for Zoo
name	species	Z for Zoo