Merge branch 'main' into dev

ChromeGaming · Jul 8, 2024 · aa9eed1 · aa9eed1
2 parents c3591ae + af9879d
commit aa9eed1
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 69 deletions.
diff --git a/index.html b/index.html
@@ -73,15 +73,16 @@
     .form-container {
       display: none;
       position: fixed;
-      top: 0;
+      top: 10px;
       left: 0;
       width: 100%;
-      height: 80%;
+      height: 5%;
       justify-content: center;
       align-items: center;
-      margin-left: 200px;
-      margin-top: 70px;
-      padding: 15px;
+      margin-left: 40px;
+      margin-top: 300px;
+
+      z-index: 999;
     }
 
     .form-content {

diff --git a/pages/404.html b/pages/404.html
@@ -1,62 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>404:Page not found</title>
-    <link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon">
-</head>
-<style>
-    body{
-        margin: 0;
-        padding: 0;
-        font-family: Arial, sans-serif;
-        background-color: #f6f6f6;
+    <link
+      rel="shortcut icon"
+      href="../assets/favicon.ico"
+      type="image/x-icon"
+    />
+  </head>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: Arial, sans-serif;
+      background-color: #f6f6f6;
     }
     .center {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 90vh;
-
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 90vh;
     }
-    .pic{
-        width: 700px;
-        height: 700px;
-        animation: updown 2s ease-in-out infinite alternate;
+    .pic {
+      width: 700px;
+      height: 700px;
+      animation: updown 2s ease-in-out infinite alternate;
     }
     @keyframes updown {
-        from{
-            transform: translateY(0);
-        }
-        to{
-            transform: translateY(20px);
-        }
+      from {
+        transform: translateY(0);
+      }
+      to {
+        transform: translateY(20px);
+      }
     }
-    a{
-        text-decoration: none;
-        color: #353535;
+    a {
+      text-decoration: none;
+      color: #353535;
     }
-    .btn{
-        position: absolute;
-        padding: 10px 20px;
-        background-color: #32ddaac9;
-        border-radius: 5px;
-        font-size: 20px;
-        font-weight: bold;
-        border: none;
-        top: 600px;
+    .btn {
+      position: absolute;
+      padding: 10px 20px;
+      background-color: #32ddaac9;
+      border-radius: 5px;
+      font-size: 20px;
+      font-weight: bold;
+      border: none;
+      top: 600px;
     }
     @media screen and (max-width: 600px) {
-        .pic{
-            width: 300px;
-            height: 300px;
-        }
-        .btn{
-            top: 400px;
-        }
+      .pic {
+        width: 300px;
+        height: 300px;
+      }
+      .btn {
+        top: 400px;
+      }
     }
+
     .circle {
   position: absolute;
   width: 20px;
@@ -70,9 +74,10 @@
 </style>
 
 <body>
+
     <div class="center">
-        <img src="../assets/images/404pic.png" alt="404 pic" class="pic">
-        <button class="btn"><a href="../index.html">Home</a></button>
+      <img src="../assets/images/404pic.png" alt="404 pic" class="pic" />
+      <button class="btn"><a href="../index.html">Home</a></button>
     </div>
      <!-- Create circles with the class 'circle' -->
    <div class="circle"></div>
@@ -122,4 +127,5 @@
    <div class="circle"></div>
    <script src="/trail.js"></script>
 </body>
-</html>
+</html>
+
diff --git a/styles/index.style.css b/styles/index.style.css
@@ -106,17 +106,20 @@ h1::-webkit-scrollbar {
   letter-spacing: 0.8px;
   word-spacing: -1.8px;
 }
+
 input:out-of-range {
   border: 5px solid red;
 }
-input:out-of-range + .error::after {
+
+input:out-of-range+.error::after {
   content: "Please enter value between 5 and 30";
   font-size: 12px;
   font-style: italic;
   font-family: sans-serif;
   color: hsl(0, 100%, 40%);
 }
-input:out-of-range + .player::after {
+
+input:out-of-range+.player::after {
   content: "Please enter value between 2 and 6";
   font-size: 12px;
   font-style: italic;
@@ -144,6 +147,7 @@ input:out-of-range + .player::after {
   color: #fff;
   padding: 10px;
 }
+
 /* .author p{
 	align-items: center;
 	display: inline-block;
@@ -167,18 +171,36 @@ input:out-of-range + .player::after {
 .author p {
   color: white;
   padding: 10px;
-  margin-right: 40px;
+  margin-right: 10px;
   font-size: 20px;
   font-weight: 600;
 }
 
 .author .social-icons {
   display: flex;
   gap: 10px;
-  margin-right: 200px;
+  margin-right: 20px;
 }
+
 .author .social-icons a {
   color: white;
   text-decoration: none;
   font-size: 20px;
 }
+
+@media screen and (max-width:1190px) {
+  .author a {
+    font-size: small;
+  }
+}
+
+@media screen and (max-width:1065px) {
+  .author .fotbar {
+    gap: 5px;
+  }
+
+  .author {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+}