TheAlgorithms · Sehbaz · Oct 20, 2019 · Oct 29, 2019
diff --git a/css/style.css b/css/style.css
@@ -1,13 +1,15 @@
 body {
-  font-family: Montserrat, Helvetica Neue, sans-serif;
+  font-family: 'Roboto Mono', Montserrat, Helvetica Neue, sans-serif;
   line-height: 2em;
   box-sizing: border-box;
   color: #333333b3;
   /* background: linear-gradient(to bottom right,  #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); */
-  background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);  
+
+  background: linear-gradient(90deg, rgba(102,201,200,1) 6%, rgba(122,140,255,1) 100%);
 }
 
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }
@@ -17,14 +19,14 @@ a {
   color: #1b6568;
   transition-duration: 100ms;
 }
+
 .github {
   float: right;
   fill: #445978;
   padding-top: 5px;
 }
 
 p {
-  font-family: 'Roboto';
   font-weight: 300;
   font-size: 23px;
   text-align: center;
@@ -53,6 +55,7 @@ p {
 main {
   padding: 1em;
 }
+
 main::after {
   content: '\2A55\2A55\2A55\2A55';
   position: relative;
@@ -73,8 +76,10 @@ div.grid-item {
   margin-top: 10px;
 }
 
-.language-name:hover{
+
+
+
+.language-name:hover {
   border-bottom: 3px solid #1b6568;
   transition-duration: 100ms;
-}
-
+}
diff --git a/index.html b/index.html
@@ -1,41 +1,75 @@
 <!doctype html>
 <html lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900|Roboto:300" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="css/style.css">
-    <link rel="icon" href="./images/favicon.png" type="image/x-icon">
-    <title>The Algorithms</title>
-  </head>
-  <body>
-    <div class="container">
-      <header>
-        <h1 class="name">The Algorithms</h1>
-        <a class="github" href="https://github.com/TheAlgorithms" target="_blank">
-          <svg width="30" height="30" viewBox="0 0 16 16" version="1.1"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
-        </a>
-      </header>
-      <main>
-        <div class="intro">
-          <p>We are an <a href="http://en.wikipedia.org/wiki/Open-source_software" target="_blank">open source</a> community established to help people find all the algorithms and data structures for every popular language at a single place.</p>
+
+<head>
+  <meta charset="utf-8">
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
+  <link rel="stylesheet" type="text/css" href="css/style.css">
+  <link rel="icon" href="./images/favicon.png" type="image/x-icon">
+  <title>The Algorithms</title>
+</head>
+
+<body>
+  <div class="container">
+    <header>
+      <h1 class="name animated infinite bounce delay-2s">The Algorithms</h1>
+      <a class="github" href="https://github.com/TheAlgorithms" target="_blank">
+        <svg width="30" height="30" viewBox="0 0 16 16" version="1.1">
+          <path fill-rule="evenodd"
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
+          </path>
+        </svg>
+      </a>
+    </header>
+    <main>
+      <div class="intro">
+        <p>We are an <a href="http://en.wikipedia.org/wiki/Open-source_software" target="_blank">open source</a>
+          community established to help people find all the algorithms and data structures for every popular language at
+          a single place.</p>
+      </div>
+      <p>Explore Algorithms Implementation in the following Programming Languages</p>
+      <div class="grid">
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/C-Plus-Plus"><img class="swing"
+              src="./images/svg/cpp-lang.svg" height="50px" alt="C-Plus-Plus Logo" /><br><span
+              class="language-name">C++</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/C"><img
+              src="./images/svg/c-lang.svg" height="50px" alt="C Logo" /><br><span class="language-name">C</span></a>
         </div>
-        <p>Explore Algorithms Implementation in the following Programming Languages</p>
-        <div class="grid">
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/C-Plus-Plus"><img src="./images/svg/cpp-lang.svg" height="50px" alt="C-Plus-Plus Logo"/><br><span class="language-name">C++</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/C"><img src="./images/svg/c-lang.svg" height="50px" alt="C Logo"/><br><span class="language-name">C</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Python"><img src="./images/svg/python.svg" height="50px" alt="Python Logo"/><br><span class="language-name">Python</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Java"><img src="./images/svg/java.svg" height="50px" alt="Java Logo"/><br><span class="language-name">Java</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Scala"><img src="./images/svg/scala.svg" height="50px" alt="Scala Logo"/><br><span class="language-name">Scala</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/C-Sharp"><img src="./images/svg/c-sharp-lang.svg" height="50px" alt="C-Sharp Logo"/><br><span class="language-name">C#</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Rust"><img src="./images/svg/rust.svg" height="50px" alt="Rust Logo"/><br><span class="language-name">Rust</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Javascript"><img src="./images/svg/javascript.svg" height="50px" alt="JavaScript Logo"/><br><span class="language-name">JavaScript</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Go"><img src="./images/svg/golang.svg" height="50px" alt="Go Logo"/><br><span class="language-name">Go</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/R"><img src="./images/svg/r-lang.svg" height="50px" alt="R Logo"/><br><span class="language-name">R</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Ruby"><img src="./images/svg/ruby.svg" height="50px" alt="Ruby Logo"/><br><span class="language-name">Ruby</span></a></div>
-          <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/MATLAB-Octave"><img src="./images/svg/matlab.png" height="50px" alt="MATLAB/Octave Logo"/><br><span class="language-name">MATLAB/<br>Octave</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Python"><img
+              src="./images/svg/python.svg" height="50px" alt="Python Logo" /><br><span
+              class="language-name">Python</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Java"><img
+              src="./images/svg/java.svg" height="50px" alt="Java Logo" /><br><span
+              class="language-name">Java</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Scala"><img
+              src="./images/svg/scala.svg" height="50px" alt="Scala Logo" /><br><span
+              class="language-name">Scala</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/C-Sharp"><img
+              src="./images/svg/c-sharp-lang.svg" height="50px" alt="C-Sharp Logo" /><br><span
+              class="language-name">C#</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Rust"><img
+              src="./images/svg/rust.svg" height="50px" alt="Rust Logo" /><br><span
+              class="language-name">Rust</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Javascript"><img
+              src="./images/svg/javascript.svg" height="50px" alt="JavaScript Logo" /><br><span
+              class="language-name">JavaScript</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Go"><img
+              src="./images/svg/golang.svg" height="50px" alt="Go Logo" /><br><span class="language-name">Go</span></a>
         </div>
-      </main>
-
-    </div>
-  </body>
-</html>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/R"><img
+              src="./images/svg/r-lang.svg" height="50px" alt="R Logo" /><br><span class="language-name">R</span></a>
+        </div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/Ruby"><img
+              src="./images/svg/ruby.svg" height="50px" alt="Ruby Logo" /><br><span
+              class="language-name">Ruby</span></a></div>
+        <div class="grid-item"><a target="_blank" href="https://github.com/TheAlgorithms/MATLAB-Octave"><img
+              src="./images/svg/matlab.png" height="50px" alt="MATLAB/Octave Logo" /><br><span
+              class="language-name">MATLAB/<br>Octave</span></a></div>
+      </div>
+    </main>
+
+  </div>
+</body>
+
+</html>