Merge pull request #7 from nityanandagohain/master

xeon-zolt · web-flow · commit 33b2138a6b53 · 2018-04-24T23:23:43.000+05:30
Links in bottom bar added
diff --git a/css/style.css b/css/style.css
@@ -1,12 +1,20 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
 body {
   font: 400 1em/1.5 "Neuton";
   background: #090d00;
   color: rgba(255, 255, 255, 0.25);
   text-align: center;
-  margin: 0;
+  margin: 0 0 50px;
+  padding: 25px;
 }
 
-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 +42,37 @@ p span {
     background-position: 100% 50%;
   }
 }
+
+.bottom-bar {
+  font-family: 'Courier New', Courier, monospace;
+  position: absolute;
+  background: #white;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  width: 100%;
+/*  overflow: hidden;*/
+}
+
+.bottom-bar ul {
+  margin: 0% 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="https://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>
 
 
