Fixed letter in pull request button, added favicon, added footer, fix…

…ed more-info links, and some image problem

browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

index.html

@@ -8,7 +8,15 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
     crossorigin="anonymous">
+  <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
   <link href="https://fonts.googleapis.com/css?family=Pirata+One" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
   <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  </head>
 
@@ -27,7 +35,7 @@ <h3 class="main-subtitle text-center">Time Left for yours Pull Requests...</h3>
         <div id="countdown"></div>
     </div>
     <div class="row">
-      <a href="https://github.com/MattCrl/Contributors-portraits" class="btn btn-lg btn-light branch"><i class="fas fa-code-branch"></i> Submit you pull request</a>
+      <a href="https://github.com/MattCrl/Contributors-portraits" class="btn btn-lg btn-light branch"><i class="fas fa-code-branch"></i> Submit your pull request</a>
       <a href="https://hacktoberfest.digitalocean.com/" class="btn btn-lg btn-light home"><i class="fas fa-home"></i> Web Page Official</a>
     </div>
 
@@ -535,7 +543,7 @@ <h5 class="card-title">Kashif Rafique</h5>
       <!-- Kashif's card end -->
 
       <!-- start Karl's card -->
-      <div class="col-12 col-sm-4 col-md-3">
+      <div class="col-12 col-md-6 col-lg-3 contributor">
         <div class="card card__animate contributor">
           <img class="card-img-top img-fluid" data-src="./images/karl.jpg" alt="Karl Tanjuan">
           <div class="card-body">
@@ -622,7 +630,7 @@ <h5 class="card-title">Nirmal Dalmia</h5>
       <!-- Stephanie L's card begin-->
       <div class="col-12 col-md-6 col-lg-3 contributor">
         <div class="card card__animate">
-          <img class="card-img-top img-fluid" src="https://i.imgur.com/5Xvf0Tr.jpg" alt="my headshot">
+          <img class="card-img-top img-fluid" src="./images/stephanie.jpg" alt="my headshot">
           <div class="card-body">
             <h5 class="card-title">Stephanie Leazer</h5>
             <hr class="separator">
@@ -896,7 +904,7 @@ <h5 class="card-title">Rohit</h5>
           <div class="card-body">
             <h5 class="card-title">Berkay</h5>
             <hr class="separator">
-            <p class="card-text">Python and Wordpress Developer. <a href="berkaydemir.com">berkaydemir.com</a></p>
+            <p class="card-text">Python and Wordpress Developer. <a href="berkaydemir.com" class="more-info">berkaydemir.com</a></p>
             <a href="https://github.com/b3rkaydem1r" class="button">GitHub Profile</a>
           </div>
         </div>
@@ -1057,7 +1065,7 @@ <h5 class="card-title">Simon Pfister</h5>
           <div class="card-body">
             <h5 class="card-title">Okta Arif Cahyawan</h5>
             <hr class="separator">
-            <p class="card-text">I'm a network engginer, student at Indonesia. FOSS & Anime Enthusiast. Project Manager <a href="https://tealinuxos.org/">TealinuxOS X</a></p>
+            <p class="card-text">I'm a network engginer, student at Indonesia. FOSS & Anime Enthusiast. Project Manager <a href="https://tealinuxos.org/" class="more-info">TealinuxOS X</a></p>
             <a href="https://github.com/okutasan" class="button">GitHub Profile</a>
           </div>
         </div>
@@ -1189,7 +1197,7 @@ <h5 class="card-title">Himanshu kumar das</h5>
           <div class="card-body">
             <h5 class="card-title">C-Lion</h5>
             <hr class="separator">
-            <p class="card-text">Community Manager for 1millionwomentotech <a href="https://github.com/1millionwomentotech">1MWTT</a></p>
+            <p class="card-text">Community Manager for 1millionwomentotech <a href="https://github.com/1millionwomentotech" class="more-info">1MWTT</a></p>
             <a href="https://github.com/C-Lion" class="button">GitHub Profile</a>
           </div>
         </div>
@@ -1260,7 +1268,7 @@ <h5 class="card-title">Nacho Mas</h5>
           <div class="card-body">
             <h5 class="card-title">Frauchi</h5>
             <hr class="separator">
-            <p class="card-text">I'm an Enviormental Science student. I'm learning how to code with Python. <a href="https://cronos2.github.io/hellofrauchi">Check my website!</a>/</p>
+            <p class="card-text">I'm an Enviormental Science student. I'm learning how to code with Python.<br><a href="https://cronos2.github.io/hellofrauchi" class="more-info"> Check my website!</a></p>
             <a href="https://github.com/Frauchi" class="button">GitHub Profile</a>
           </div>
         </div>
@@ -1273,7 +1281,7 @@ <h5 class="card-title">Frauchi</h5>
           <div class="card-body">
             <h5 class="card-title">Eric Porter</h5>
             <hr class="separator">
-            <p class="card-text">I am a web content specialist who dabbles in front-end. <a href="http://ericporter.info/">Check my website!</a>/</p>
+            <p class="card-text">I am a web content specialist who dabbles in front-end.<br> <a href="http://ericporter.info/" class="more-info">Check my website!</a></p>
             <a href="https://github.com/epix360" class="button">GitHub Profile</a>
           </div>
         </div>
@@ -1286,15 +1294,15 @@ <h5 class="card-title">Eric Porter</h5>
           <div class="card-body">
             <h5 class="card-title">Elena G</h5>
             <hr class="separator">
-            <p class="card-text">worldbuilding, storytelling, ttrpgs, crossplatform dev - <a href="http://beelzenef.github.io">check my website!</a></p>
+            <p class="card-text">worldbuilding, storytelling, ttrpgs, crossplatform dev - <a href="http://beelzenef.github.io" class="more-info">check my website!</a></p>
             <a href="https://github.com/beelzenef" class="button">GitHub Profile</a>
           </div>
         </div>
       </div>
         <!-- Anne Cope -->
        <div class="col-12 col-md-6 col-lg-3 contributor">
         <div class="card card__animate">
-          <img class="card-img-top img-fluid" data-src="./images/Molly.jpg" alt="golden retriever">
+          <img class="card-img-top img-fluid" data-src="./images/molly.jpg" alt="golden retriever">
           <div class="card-body">
             <h5 class="card-title">Anne C</h5>
             <hr class="separator">
@@ -1318,6 +1326,13 @@ <h5 class="card-title">Andy Bear</h5>
 
 	<!-- End of global row -->
     </div>
+
+  <!-- Footer -->
+    <nav class="navbar fixed-bottom navbar-light bg-faded">
+      <a class="navbar-brand" href="https://github.com/MattCrl/Contributors-portraits"><span class="year" id="actual-year"></span><span class="line"> - </span><span class="hack">Hacktoberfest</span><span class="line"> - </span><span class="contrib">Contributors portraits</span><a class="ml-auto arrow" href=""><i class="fas fa-arrow-up animated infinite bounce delay-2s" id="arrow"></i></a></a>
+    </nav>
+  <!-- End footer -->
+
   </div>
 
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

js/arrow.js

@@ -0,0 +1,21 @@
+define('arrow', function () {
+    $('#arrow').hover(
+        function () { $(this).removeClass('animated') },
+        function () { $(this).addClass('animated') }
+    );
+
+    $(window).scroll(function(){
+        if ($(this).scrollTop() > 100) {
+            $('#arrow').fadeIn();
+        } else {
+            $('#arrow').fadeOut();
+        }
+    });
+
+    $('#arrow').on('click',function(){
+        $('html, body').animate({
+            scrollTop: "0px"
+        }, 800);
+        return false;
+    });
+});

js/copyright.js

@@ -0,0 +1,8 @@
+define('copyright', function () {
+
+    var now = new Date();
+    var currentYear = now.getFullYear();
+
+    $('#actual-year').html('© ' + currentYear);
+
+});

js/main.js

@@ -1,5 +1,7 @@
 require([
     'my-lazy-load',
     'contribuitors-count',
-    'countdown'
+    'countdown',
+    'copyright',
+    'arrow'
 ]);

site.webmanifest

@@ -0,0 +1,14 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-48x48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

style.css

@@ -20,7 +20,7 @@ a {
 }
 
 .card {
-	margin-bottom: 10px;
+	margin-bottom: 2em;
 	text-align: center;
 }
 
@@ -46,6 +46,10 @@ a {
 	height: 150px;
 }
 
+.contributor{
+	margin-bottom: 0.5em;
+}
+
 .button {
 	border: 3px solid #21ffff;
 	border-radius: 4px;
@@ -217,6 +221,50 @@ hr {
 	background: rgba(71, 13, 38, 0.6);
 }
 
+.navbar{
+	border-top:2px solid white;
+	border-bottom:3px solid white;
+	position: fixed;
+	bottom: 0;
+	background-color:rgba(100, 3, 53, 0.8);
+	height: 6vh;
+}
+
+.navbar > .navbar-brand{
+	position: absolute;
+	left:50%;
+	transform: translateX(-50%);
+	color:#ff9a56;
+	font-family: "Pirata One", cursive;
+	transition: all 0.2s ease-in;
+	word-wrap: break-word;
+}
+
+.navbar > .navbar-brand:hover{
+	color:#ffffff;
+	margin-top: -0.1em;
+}
+
+.hack{
+	color:#21ffff;
+}
+
+.line{
+	text-decoration: none;
+	color:#ffffff;
+}
+
+.arrow{
+	padding: 0.1em;
+	font-size: 1.5em;
+	color:rgba(0, 238, 247, 0.8);
+	transition: all 0.2s ease-in;
+}
+
+.arrow:hover{
+	color:rgb(245, 243, 243);
+}
+
 @media(min-width:500px){
 	.time{
 		font-size: 1.5em;