modified

modified version 02/22/2019
Ibrahimmaga · Feb 23, 2019 · 8f5f07b · 8f5f07b
1 parent 4f67f8d
commit 8f5f07b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 50 deletions.
diff --git a/CSS/styles..css b/CSS/styles..css
@@ -70,19 +70,13 @@ h4 {
 }
 
 /*============== footer======================
-.bottom-container{
-    
 
-}*/
-.tbfooter {
-
-    height: 50px;
-    border-spacing: 10px;
-    table-layout: auto;
-    padding: 0 500px 0 500px;
-
+* footer section */
+#footer {
+    padding: 5px;
+    text-align: center;
 }
-.footericons{
-    width: 25px;
-    height: 25px;
+.social-icon {
+    margin: 20px 15px;
+    color: black;
 }
diff --git a/index.html b/index.html
@@ -10,6 +10,9 @@
   <link rel="stylesheet" type="text/css" href="CSS/styles..css" />
   <link rel="icon" href="favicon (1).ico">
   <link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Sacramento" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+        crossorigin="anonymous">
+
 </head>
 
 <body>
@@ -25,78 +28,58 @@ <h1>I'm Ibrahim Maga</h1>
   <div class="middle-container">
     <div class="profile">
       <img class="imgprofile" src="images/profile.jpg" alt="profile">
-      <h2>Hello There.</h2>
+      <h3><u>Hello There.</u></h3>
       <h4><strong>I'm a full stack web developer and a DevOps engineer. Feel free to ask any question !!!</strong></h4>
       <br><br>
     </div>
     <hr>
     <div class="skills">
-      <h2><u>My Skills.</u></h2>
+      <h3><u>My Skills.</u></h3>
       <table class="table" alt="table">
         <tr>
           <th>Programming</th>
           <th>DevOps</th>
           <th>Web Development</th>
         </tr>
         <td>
-          <img class="icon" src="https://media1.giphy.com/media/ljeZ3ccpaUts4/giphy.gif?cid=3640f6095c60903f72535235676f7fe1" alt="Programing">
+         <a href="https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/index"> <img class="icon" src="https://media1.giphy.com/media/ljeZ3ccpaUts4/giphy.gif?cid=3640f6095c60903f72535235676f7fe1" alt="Programing"></a>
         </td>
         <td>
-          <img class="icon" src="icons/devops.png" alt="DevOps">
+          <a href="https://azure.microsoft.com/en-us/services/devops/?&OCID=AID736750_SEM_fRrYGz1T&MarinID=sfRrYGz1T_318284315416_devops_e_c__54804228180_aud-397602258452:kwd-16269965220_"><img class="icon" src="icons/devops.png" alt="DevOps"></a>
         </td>
         <td>
-          <img class="icon" src="https://media0.giphy.com/media/26gsmazMzBql3p7O0/giphy.gif?cid=3640f6095c6094a0646a52546b288bc6" alt="web development">
+          <a href="https://www.w3schools.com/whatis/"><img class="icon" src="https://media0.giphy.com/media/26gsmazMzBql3p7O0/giphy.gif?cid=3640f6095c6094a0646a52546b288bc6" alt="web development"></a>
         </td>
         <tr>
           <th>Database</th>
           <th>Azure</th>
           <th>Android</th>
         </tr>
         <td>
-          <img class="icon" src="icons/database.png" alt="database">
+          <a href="https://www.w3schools.com/sql/"><img class="icon" src="icons/database.png" alt="database"></a>
         </td>
         <td>
-          <img class="icon" src="icons/azure-icon.png" alt="Azure">
+         <a href="https://docs.microsoft.com/en-us/azure/"> <img class="icon" src="icons/azure-icon.png" alt="Azure"></a>
         </td>
         <td>
-          <img class="icon" src="https://media2.giphy.com/media/l0MYMx2cKAQDfmee4/200.webp?cid=3640f6095c608e9f5547794c6ba6cf02" alt="mobile">
+         <a href="https://developer.android.com/jetpack"> <img class="icon" src="https://media2.giphy.com/media/l0MYMx2cKAQDfmee4/200.webp?cid=3640f6095c608e9f5547794c6ba6cf02" alt="mobile"></a>
         </td>
 
       </table>
       <hr>
     </div>
   </div>
 </body>
-<footer>
-  <div class="bottom-container">
-    <table class="tbfooter">
-      <h2>Get In Touch</h2>
-      <tr>
-        <td>
-          <img class="footericons" src="icons/email.png" alt="email"><br>
-          <a class="btn" href="mailto:[email protected]">email</a>
-        </td>
-        <td>
-          <img class="footericons" src="icons/facebook.png" alt="facebook"><br>
-          <a class="footer-link" href="https://www.facebook.com/ibrahim.maga">facebook</a>
-        </td>
-        <td>
-          <img class="footericons" src="icons/linkedin.png" alt="LinkedIn"><br>
-          <a class="footer-link" href="https://www.linkedin.com/in/ibrahimmaga75/">LinkedIn</a>
-        </td>
-        <td>
-            <img class="footericons" src="icons/twitter.png" alt="Twitter"><br>
-            <a class="footer-link" href="https://twitter.com/imaga75">Twitter</a>
-        </td>
-        <td>
-            <img class="footericons" src="icons/github.png" alt="github"><br>
-            <a class="footer-link" href="https://github.com/Ibrahimmaga?tab=repositories">github</a>
-        </td>
-      </tr>
-    </table>
-    <p>© 2019 Ibrahim Maga.</p>
-  </div>
+<footer class="white-section" id="footer">
+  <h3><u>Get in Touch!</u></h3>
+   <a href="https://www.facebook.com/ibrahim.maga" ><i class="social-icon fab fa-facebook-square"> </i></a>
+   <a  href="https://twitter.com/imaga75"><i class="social-icon fab fa-twitter-square"></i></a>
+   <a  href="mailto:[email protected]" > <i class="social-icon fas fa-envelope-square"></i></a>
+   <a  href="https://www.linkedin.com/in/ibrahimmaga75/"><i class="social-icon fab fa-linkedin"></i></a>
+   <a  href="https://github.com/Ibrahimmaga?tab=repositories"><i class="social-icon fab fa-github-square"></i></a>
+
 
+<p>© Copyright 2019 Ibrahim Maga</p>
 
 </footer>
 </html>