Added a footer and styled it

DiksonIvySon · Oct 20, 2023 · 26fd9db · 26fd9db
1 parent 181fe8b
commit 26fd9db
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 26 deletions.
diff --git a/RockPaperScissors/game.html b/RockPaperScissors/game.html
@@ -7,22 +7,23 @@
     <title>RPS</title>
     <link href="style.css" rel="stylesheet" media="all">
     <script src="script.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
 
-    <header>
-        <div class="logo">
-            <h2>RPS</h2>
-            <h5>Rock Paper Scissors</h5>
-        </div>
-        <div class="nav">
-            <ul>
-                <li><a href="index.html">Home</a></li>
-            </ul>
-        </div>
-    </header>
-
    <main>
+        <header>
+            <div class="logo">
+                <h2>RPS</h2>
+                <h5>Rock Paper Scissors</h5>
+            </div>
+            <div class="nav">
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                </ul>
+            </div>
+        </header>
+
         <div class="center-image">
             <div>
                 <div class="image">
@@ -88,5 +89,26 @@ <h3>COMP</h3>
             </div>
         </div>
    </main>
+
+   <footer>
+        <div class="footer-icons">
+            <a target="_blank" href="https://github.com/DiksonIvySon">
+                <i class="fa-brands fa-github"></i>
+            </a>
+            <a target="_blank" href="https://www.linkedin.com/in/dikson-manganye-a8b773213/">
+                <i class="fa-brands fa-linkedin-in"></i>
+            </a>
+        </div>
+        <p>
+            Copyright © 2023 <a target="_blank" href="https://diksonivyson.github.io/My_Portfolio/" class="web-author">Dikson Manganye</a>. All rights reserved
+        </p>
+        <p>
+            I can still remember how much fun and overwhelming it was building this project
+            ("YES, all at the same time!").
+            This was one of the first web development projects that I built, 
+            back then I was still learning CSS, HTML and JavaScript. 
+            What a time. 
+        </p>
+    </footer>
 </body>
 </html>
diff --git a/RockPaperScissors/index.html b/RockPaperScissors/index.html
@@ -6,22 +6,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RPS</title>
     <link href="style.css" rel="stylesheet" media="all">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
 
-    <header>
-        <div class="logo">
-            <h2>RPS</h2>
-            <h5>Rock Paper Scissors</h5>
-        </div>
-        <div class="nav">
-            <ul>
-                <li><a href="game.html">Game</a></li>
-            </ul>
-        </div>
-    </header>
-
     <main>
+        <header>
+            <div class="logo">
+                <h2>RPS</h2>
+                <h5>Rock Paper Scissors</h5>
+            </div>
+            <div class="nav">
+                <ul>
+                    <li><a href="game.html">Game</a></li>
+                </ul>
+            </div>
+        </header>
+
         <div class="home-image">
             <img src="images/360_F_344423682_jXGqRqGdyPK6ZBPOO0CyOv6KMds0Qx80.jpg" alt="">
             <h1 class="home-heading">
@@ -32,5 +33,26 @@ <h1 class="home-heading">
             </a>
         </div>
     </main>
+
+    <footer>
+        <div class="footer-icons">
+            <a target="_blank" href="https://github.com/DiksonIvySon">
+                <i class="fa-brands fa-github"></i>
+            </a>
+            <a target="_blank" href="https://www.linkedin.com/in/dikson-manganye-a8b773213/">
+                <i class="fa-brands fa-linkedin-in"></i>
+            </a>
+        </div>
+        <p>
+            Copyright © 2023 <a target="_blank" href="https://diksonivyson.github.io/My_Portfolio/" class="web-author">Dikson Manganye</a>. All rights reserved
+        </p>
+        <p>
+            I can still remember how much fun and overwhelming it was building this project
+            ("YES, all at the same time!").
+            This was one of the first web development projects that I built, 
+            back then I was still learning CSS, HTML and JavaScript. 
+            What a time. 
+        </p>
+    </footer>
 </body>
 </html>
diff --git a/RockPaperScissors/style.css b/RockPaperScissors/style.css
@@ -16,6 +16,10 @@ header {
     background-color: aqua;
 }
 
+main {
+    min-height: 100vh;
+}
+
 .logo {
     margin-left: 60px;
     display: flex;
@@ -169,7 +173,7 @@ header {
 .home-image {
     position: relative;
     width:100vw;
-    height: 70vh;
+    height: 90vh;
 }
 
 .home-image img{
@@ -180,7 +184,7 @@ header {
 
 .home-image .play-game-button {
     position: absolute;
-    top: 70%;
+    top: 60%;
     left: 50%;
     translate: -50% -50%;
     font-size: 40px;
@@ -196,3 +200,31 @@ header {
     background-image: linear-gradient(180deg, aqua, black);
     cursor: pointer;
 }
+
+/*styling the footer*/
+footer {
+    text-align: center;
+    padding: 20px;
+}
+
+.footer-icons a {
+    margin-inline: 15px;
+    font-size: 20px;
+    color: black;
+    text-decoration: none;
+}
+
+.footer-icons i:hover {
+    transform: scale(2);
+    transition: 0.5s ease-in-out;
+    color: aqua;
+}
+
+.web-author {
+    text-decoration: none;
+    color: gray;
+    transition: 0.5s;
+}
+.web-author:hover {
+    color: aqua;
+}