Converted plain text to a fade-in effect.

css/style.css

@@ -4,14 +4,73 @@ body {
   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-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
 }
 
 html, body {
   height: 100%;
   margin: 0;
 }
 
+.fade-in {
+  animation: fadeIn ease 2s;
+  -webkit-animation: fadeIn ease 2s;
+  -moz-animation: fadeIn ease 2s;
+  -o-animation: fadeIn ease 2s;
+  -ms-animation: fadeIn ease 2s;
+}
+
+
+@keyframes fadeIn{
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-o-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-ms-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+.style p {
+  color:#000;
+  font-size:25px;
+}
+
 a {
   text-decoration: none;
   color: #1b6568;
@@ -77,4 +136,3 @@ div.grid-item {
   border-bottom: 3px solid #1b6568;
   transition-duration: 100ms;
 }
-

index.html

@@ -16,10 +16,10 @@ <h1 class="name">The Algorithms</h1>
         </a>
       </header>
       <main>
-        <div class="intro">
+        <div class="style fade-in">
           <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="style fade-in"><p>Explore Algorithms Implementation in the following Programming Languages.</p></div>
         <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>
@@ -35,7 +35,7 @@ <h1 class="name">The Algorithms</h1>
           <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>