src/css/footer.css

@@ -0,0 +1,37 @@
+footer {
+    background-color: var(--primaryDefault);
+    margin-top: 5em;
+    padding: 2em;
+    display: flex;
+    color: #FFFFFF;
+}
+
+footer .spacer {
+    width: 100%;
+    margin-right: auto;
+}
+
+footer p {
+    margin: auto;
+    width: 100%;
+    text-align: center;
+}
+
+footer .button {
+    margin-left: auto;
+    width: 100%;
+    text-align: center;
+}
+
+footer .button button {
+    border: 5px solid #FFFFFF;
+    background: none;
+    font-size: 3em;
+    padding: 0.5rem 1rem;
+    width: 2em;
+    color: #FFFFFF;
+    -webkit-border-radius: 0.25em;
+    -moz-border-radius: 0.25em;
+    border-radius: 0.25em;
+    cursor: pointer;
+}

src/css/main.css

@@ -8,6 +8,7 @@
 @import "cv.css";
 @import "projects.css";
 @import "contact.css";
+@import "footer.css";
 
 /****** Root Style ******/
 :root {

src/index.html

@@ -154,8 +154,11 @@
         </section>
 
         <footer class="flexRow">
+            <div class="spacer"></div>
             <p>&copy; 2021 Rohit Pai all rights reserved</p>
-            <button class="goBackToTop"></button>
+            <div class="button">
+                <button id="goBackToTop"><i class="fas fa-chevron-up"></i></button>
+            </div>
         </footer>
     </main>
     <script src="js/main.js"></script>

src/js/main.js

@@ -218,6 +218,11 @@ document.addEventListener('DOMContentLoaded', () =>
 document.querySelector("#contactError .close").addEventListener("click", () =>
 	document.querySelector("#contactError").classList.toggle("hidden"));
 
+document.querySelector("#goBackToTop").addEventListener("click", () =>
+{
+	window.scrollTo(0, 0);
+});
+
 // contact form
 document.querySelector("#contactForm").addEventListener("submit", e => 
 {