add footer and fix size of text-typing

Author: ZakaCoding

css/main.css

@@ -22,6 +22,11 @@ html,body {
     position:relative;
 }
 
+.wrapper {
+    max-width: 950px;
+    margin:auto;
+}
+
 .text-typing {
     display:flex;
     justify-content:center;
@@ -31,8 +36,9 @@ html,body {
     transform: translate(-50%,-50%);
 }
 
-h1 {
+h1#element {
     font-family:'consol' !important;
+    height: 111px;
 }
 
 .typed-cursor {
@@ -86,3 +92,34 @@ h1 {
     position: absolute;
     z-index: 999;
 }
+
+/* Footer */
+footer {
+    font-family: 'Segoe UI';
+    width: 100%;
+    padding: 10px 20px 10px 20px;
+    display: block;
+    position: relative;
+}
+
+footer > p {
+    text-align: center;
+    font-size: 1em;
+}
+
+.social-media {
+    width: 100%;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+}
+.social-media a {
+    font-size: 2em !important;
+    color: #000000;
+    cursor: pointer;
+    margin: auto 10px;
+    transition: 0.2s ease;
+}
+.social-media a:hover {
+    color: #7e7e7e;
+}

index.html

@@ -8,6 +8,9 @@
     <!-- Link CSS -->
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <link rel="stylesheet" href="vendor/hamburgers/hamburgers.css">
+    <!-- fontawesome -->
+    <link rel="stylesheet" href="vendor/node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
+    <link rel="stylesheet" href="vendor/node_modules/@fortawesome/fontawesome-free/css/brands.min.css">
     <!-- javascript -->
     <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
 
@@ -35,6 +38,29 @@
             <h1 id="element"></h1>
         </div>
     </div>
+
+    <!-- footer -->
+    <footer>
+        <div class="wrapper">
+            <!-- social media -->
+            <div class="social-media">
+                <a href="https://twitter.com/zaka_coding">
+                    <i class="fab fa-twitter"></i>
+                </a>
+                <a href="https://instagram.com/youn8e_">
+                    <i class="fab fa-instagram"></i>
+                </a>
+                <a href="https://www.linkedin.com/in/zaka-n-693018111/">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+            </div>
+        </div>
+        <!-- Describe -->
+        <p>
+            Copyright &copy; 2021 All Right Reserved. Develop with &#10084;&#65039; by Zaka.
+            <br><small>PHP | HTML5 | CSS3 | JavaScript | Full-Stack Developer</small>
+        </p>
+    </footer>
 </body>
 
 <!-- script in the end off body -->