changed bottom ui

Author: pythongiant

css/style.css

@@ -101,69 +101,46 @@ a {
   font-size: 2rem;
 }
 
-/* modules/image.css */
+ul{
+  list-style-type: none;
 
-svg {
-  max-width: 100%;
 }
-
-/* modules/navigation.css */
-
-.navigation {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 0.25rem;
-  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
-          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
+ul li {
+  display: inline;
+  font-size: 200%;
+  padding:2vw;
+  
 }
-
-.navigation ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+i{
+  color:white;
+  transition: all .2s ease-in-out;
 }
 
-.navigation a {
-  display: block;
-  padding: 24px;
-  padding: 1.5rem;
-  position: relative;
-  text-decoration: none;
+#telegram:hover{
+  
+  color: #0088cc;
+  border-radius: 49%;
+  background-color: white;
+  transform: scale(1.5);
 }
 
-.navigation a:focus::after,
-.navigation a:hover::after {
-  opacity: 1;
-}
+#gitter:hover{
+  
+  color: #f4015e;
 
-.navigation a::after {
-  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
-          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
-  content: '';
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  -webkit-transition: opacity 0.3s;
-  transition: opacity 0.3s;
-  width: 100%;
+  transform: scale(1.5);
 }
 
-.navigation--inline ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.Telegram:hover svg {
-  fill: #0088cc
-}
-.Gitter:hover svg {
-  fill: #ed1965
-}
-.Github:hover svg {
-  fill: #000000
-}
-.Join:hover svg {
-  fill: #0078D7
+#github:hover{
+  
+  color: black;
+  border-radius: 50%;
+  background-color: white;
+  transform: scale(1.5);
 }
 
+#biz:hover{
+  
+  color: white;
+  transform: scale(1.5);
+}

index.html

@@ -10,7 +10,8 @@
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
-  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Neuton|Oswald'>
+
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Neuton|Oswald'>
 
   <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! */
@@ -42,99 +43,15 @@
 <section class="align">
   <nav class="navigation navigation--inline">
     <ul>
-      <!--
-      <li>
-        <a href="#">
-          <svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#home">
-          <span class="invisible">Home</span>
-        </a>
-      </li>
-      -->
-      <li>
-        <a href="https://t.me/yogdaan" class="Telegram">
-          <svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Telegram">
-          <span class="invisible">Telegram</span>
-        </a>
-      </li>
-      <li>
-        <a href="https://gitter.im/yogdaan/Lobby" class="Gitter">
-          <svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gitter">
-          <span class="invisible">Gitter</span>
-        </a>
-      </li>
-      <li>
-        <a href="https://github.com/yogdaan" class="Github">
-          <svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Github">
-          <span class="invisible">Github</span>
-        </a>
-      </li>
-      <li>
-        <a href="https://orgmanager.miguelpiedrafita.com/join/38074740" class="Join">
-          <svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Join">
-          <span class="invisible">Join</span>
-        </a>
-      </li>
+      <li><a href="https://t.me/yogdaan"><i id="telegram" class="fab fa-telegram"></i></a></li>
+      <li><a href="https://gitter.im/yogdaan/Lobby"><i id="gitter" class="fab fa-gitter"></i></a></i></li>
+      <li><a href="https://github.com/yogdaan"><i id="github" class="fab fa-github"></i></a></li>
+      <li><a href="https://orgmanager.miguelpiedrafita.com/join/38074740"><i id="biz" class="fas fa-users"></i></a></li>
     </ul>
   </nav>
 </section>
 </section>
 
-  <svg xmlns="http://www.w3.org/2000/svg" class="icons">
-    <symbol id="Github" viewBox="0 0 92 92">
-
-      <path stroke="null" id="svg_1" d="m46.5,3c-24.02288,0 -43.5,19.24321 -43.5,42.97757c0,20.13857 14.036,36.98936 32.9585,41.65243c-0.203,-0.5802 -0.3335,-1.25351 -0.3335,-2.08799l0,-7.34558c-1.76537,0 -4.72337,0 -5.4665,0c-2.97613,0 -5.62237,-1.26426 -6.90563,-3.6137c-1.42462,-2.61089 -1.67112,-6.60422 -5.20187,-9.04678c-1.04763,-0.81299 -0.25013,-1.74059 0.957,-1.61524c2.22938,0.62317 4.07813,2.13455 5.81813,4.37655c1.73275,2.24558 2.54837,2.75415 5.7855,2.75415c1.56963,0 3.91862,-0.08954 6.12987,-0.43336c1.189,-2.98336 3.24437,-5.73034 5.7565,-7.02683c-14.4855,-1.47198 -21.39838,-8.59193 -21.39838,-18.2583c0,-4.16166 1.79437,-8.18723 4.843,-11.57887c-1.0005,-3.36658 -2.25838,-10.23224 0.38425,-12.84671c6.51775,0 10.45813,4.17599 11.40425,5.30415c3.248,-1.09951 6.815,-1.72268 10.56325,-1.72268c3.7555,0 7.337,0.62317 10.59225,1.72985c0.93525,-1.121 4.87925,-5.31131 11.4115,-5.31131c2.6535,2.61805 1.38113,9.51237 0.36975,12.87178c3.0305,3.38448 4.814,7.39931 4.814,11.5538c0,9.65921 -6.902,16.77558 -21.36575,18.25472c3.98025,2.05218 6.88388,7.81834 6.88388,12.16265l0,9.79172c0,0.37247 -0.08338,0.64108 -0.12687,0.95983c16.9505,-5.87002 29.12687,-21.77172 29.12687,-40.52427c0,-23.73436 -19.47713,-42.97757 -43.5,-42.97757z"/>
-    </symbol>
-<symbol id="Gitter" viewBox="0 0 384 512"><path d="M66.4 322.5H16V0h50.4v322.5zM166.9 76.1h-50.4V512h50.4V76.1zm100.6 0h-50.4V512h50.4V76.1zM368 76h-50.4v247H368V76z"/>
-    </symbol>
-
-    </symbol>
-    <symbol id="Telegram" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/>
-
-
-    </symbol>
-    <symbol id="Join" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M497,421H328.237c-6.213-17.422-22.707-30-42.237-30h-15v-60h90v-45c0-38.39-20.94-71.686-51.78-90
-			c-15.665,9.302-33.719,15-53.22,15c-19.501,0-37.555-5.698-53.22-15C171.94,214.314,151,247.61,151,286v45h90v60h-15
-			c-19.53,0-36.024,12.578-42.237,30H15c-8.291,0-15,6.709-15,15c0,8.291,6.709,15,15,15h168.763c6.213,17.422,22.707,30,42.237,30
-			h60c19.53,0,36.024-12.578,42.237-30H497c8.291,0,15-6.709,15-15C512,427.709,505.291,421,497,421z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M256,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C331,64.647,297.353,31,256,31z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M406,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C481,64.647,447.353,31,406,31z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M106,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C181,64.647,147.353,31,106,31z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M106,211c-28.499,0-54.313-11.501-73.251-30C13.217,200.08,0,226.608,0,256v60c0,8.291,6.709,15,15,15h106v-45
-			c0-33.102,12.147-63.252,32.073-86.658C138.849,206.552,123.005,211,106,211z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M479.251,181c-18.939,18.499-44.753,30-73.251,30c-17.005,0-32.849-4.448-47.073-11.658
-			C378.853,222.748,391,252.898,391,286v45h106c8.291,0,15-6.709,15-15v-60C512,226.608,498.783,200.08,479.251,181z"/>
-	</g>
-
-
-  </svg>
-    </symbol>
-
-
-
   <!-- Bottom bar -->
 
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>