game over

mr-hrr-harry · Mar 29, 2023 · d4b4486 · d4b4486
1 parent cdeca83
commit d4b4486
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,8 @@
 <body>
     <header id="hdr">
         <h1> - - Horror XO - - </h1>
+        <marquee behavior="alternate" direction="left">X - O - X - O - X - O - X</marquee>
+        <marquee behavior="alternate" direction="right">X - O - X - O - X - O - X</marquee>
     </header>
 
     <Section id="main">
@@ -47,6 +49,14 @@ <h1> - - Horror XO - - </h1>
 
     <footer id="ftr">
         <p> - - Developed by Horror - -     </p>
+        <div class="social_media">
+            <a href="https://www.facebook.com/ma.harishj.7/" target="_blank" ><i class='bx bxl-facebook'></i></h1></a>
+            <a href="https://twitter.com/m_a_harish_j" target="_blank" ><i class='bx bxl-twitter' ></i></a>
+            <a href="https://www.instagram.com/m_a_harish_j/" target="_blank" ><i class='bx bxl-instagram-alt' ></i></a>
+            <a href="https://www.linkedin.com/in/m-a-harish-j-a69474209/" target="_blank" ><i class='bx bxl-linkedin' ></i></a>
+            <a href="https://github.com/mr-horror-harry" target="_blank" ><i class='bx bxl-github'></i></a>
+            <a href="https://www.skillrack.com/faces/resume.xhtml?id=304818&key=ed4275e961c87503463e9cd03027f74bfb2e4873" target="_blank" ><i class='bx bx-code'></i></a>
+        </div>
     </footer>
 
     <script src="script.js"></script>

diff --git a/styles.css b/styles.css
@@ -36,6 +36,12 @@ body > *{
     font-size: 32px;
 }
 
+marquee{
+    font-size: 15px;
+    display: inline-block;
+    color: #000;
+}
+
 /* Main */
 #main{
     padding: 50px;
@@ -158,9 +164,34 @@ body > *{
 
 /* Footer */
 #ftr{
+    padding:30px;
+
     border-radius: 20px;
+    font-size: 20px;
 }
 
+.social_media a{
+    margin: 50px 40px 10px 40px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 40px;
+
+    color: #CA2A2A;
+    border: 3px solid #CA2A2A;
+    border-radius: 50%;
+    background: transparent;
+
+    text-decoration: none;
+    font-size: 25px;
+}
+.social_media a:hover{
+    color: #FFFF00;
+    border: 3px solid #FFFF00;
+    background: #CA2A2A;
+    box-shadow: 0 0 20px #FFFF00;
+}