Links in bottom bar added

nityanandagohain · nityanandagohain · commit 8de806177999 · 2018-04-24T17:10:31.000+05:30
diff --git a/css/style.css b/css/style.css
@@ -6,7 +6,10 @@ body {
   margin: 0;
 }
 
-p span {
+.animated-logo {
+  margin: 10% 25% 0% 25%;
+}
+.animated-logo p span {
   font: 700 4em/1 "Oswald", sans-serif;
   letter-spacing: 0;
   padding: .25em 0 .325em;
@@ -34,3 +37,30 @@ p span {
     background-position: 100% 50%;
   }
 }
+
+.bottom-bar {
+  margin-top: 20%;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.bottom-bar ul {
+  margin: 10% 25% 0 25%;  
+}
+.bottom-bar ul li {
+  border-left: 2px solid white;
+  border-right: 2px solid white;
+  display: inline-block;
+  margin: 5px;
+}
+
+.bottom-bar ul li a{
+  margin: 5px;
+  color: rgb(185, 175, 175);
+  text-decoration: none;
+}
+
+.bottom-bar ul li a:hover{
+  color: rgb(7, 6, 6);
+  background: white;
+  transition: all 0.3s ease;
+}
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <title>Yogdaan</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  
+
   <link rel="stylesheet" href="./css/style.css">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
@@ -14,18 +14,13 @@
 
   <style>
     /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
-    p {
+
+    .animated-logo p {
       text-transform: uppercase;
       letter-spacing: .5em;
-      display: inline-block;
       border: 4px double rgba(255, 255, 255, 0.25);
       border-width: 4px 0;
       padding: 1.5em 0em;
-      position: absolute;
-      top: 18%;
-      left: 50%;
-      width: 40em;
-      margin: 0 0 0 -20em;
     }
   </style>
 
@@ -34,12 +29,24 @@
 </head>
 
 <body>
-
-  <p>
-    <span>
-      Yogdaan
-    </span>
-  </p>
+  <!-- Animated Logo -->
+  <section class="animated-logo">
+    <p>
+      <span>
+        Yogdaan
+      </span>
+    </p>
+  </section>
+
+
+  <!-- Bottom bar -->
+  <section class="bottom-bar">
+    <ul>
+      <li><a href="t.me/yogdaan">Telegram</a></li>
+      <li><a href="https://gitter.im/yogdaan/Lobby">Gitter</a></li>
+      <li><a href="https://orgmanager.miguelpiedrafita.com/join/38074740">Github</a></li>
+    </ul>
+  </section>
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
 
