Merge pull request #29 from Freakybob-Team/dev

rewrite
Freakybob-Team · Dec 21, 2024 · d5f30ae · d5f30ae
2 parents 227a643 + ddccea4
commit d5f30ae
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 23 deletions.
diff --git a/countdown.html b/countdown.html
@@ -5,16 +5,20 @@
 <meta charset="UTF-8">
 <meta name="description" content="The countdown...">
 <title>Countdown</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="css/countdown.css">
 </head>
 <body>
+    <div id="particles-js"></div>
     <div id="countdown">
         <p id="time"></p>
         <h1>Countdown for when freakybob.site will become 1 years old!</h1>
     </div>
     <div class="button-container">
         <a href="https://freakybob.site">
-            <button>Go back to Main Website :3</button>
+            Go back to Main Website :3
         </a>
         </div>
   <audio>
@@ -23,5 +27,7 @@ <h1>Countdown for when freakybob.site will become 1 years old!</h1>
   <script src="js/countdown.js"></script>
   <!-- <div class="tenor-gif-embed" data-postid="12366334" data-share-method="host" data-aspect-ratio="1.78" data-width="100%"><a href="https://tenor.com/view/majoras-mask-intro-gif-12366334">Majoras Mask GIF</a>from <a href="https://tenor.com/search/majoras-gifs">Majoras GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>-->
    <!-- uncomment the line above on the final day-->
+   <script type="text/javascript" src="particles.js"></script>
+   <script type="text/javascript" src="app.js"></script>
 </body>
 </html>
diff --git a/css/countdown.css b/css/countdown.css
@@ -1,50 +1,91 @@
-body {
-    background-color: rgb(50, 119, 96);
+* {
+    font-family: "Poppins", serif;
+    font-weight: 400;
+    font-style: normal;
 }
+
+#particles-js{
+    position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background: linear-gradient(135deg, #3c1053, #000000 70%, #150050);
+      }
+
 p {
   text-align: center;
   font-size: 60px;
-  margin-top: 100px;
-  color: rgb(219, 199, 12);
+  color: rgb(255, 255, 255);
+  transition: all 1s ease-in-out;
+  margin-bottom: 10px;
 }
 h1 {
+    margin-bottom: 10px;
   text-align: center;
   font-size: 30px;
-  margin-top: 100px;
-  color: rgb(214, 238, 1);
+  color: rgb(255, 255, 255);
+  transition: all 1s ease-in-out;
 }
 .button-container {
+    margin-top: 10px;
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
             margin: 20px;
         }
-        .button-container button {
-            background: none;
-            border: 2px solid #d1219c;
-            color: #17e0bf;
-            font-size: 18px;
-            cursor: pointer;
-            padding: 10px 20px;
-            border-radius: 5px;
-            transition: color 0.3s, background-color 0.3s;
-            margin: 5px;
+        .button-container a {
+            animation: pop-in 0.6s ease-in-out forwards;
+            margin-top: 10px;
+            display: block;
+            height: 20px;
+            width: 400px;
+            padding: 20px 0px 20px 10px;
+            border-radius: 30px;
+            margin-left: 5px;
+            background: rgb(205,125,255);
+            background: -moz-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: -webkit-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cd7dff",endColorstr="#3d0087",GradientType=1);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 2px 20px 0 rgba(158,0,255,1);
+            background-size: 300%;
+            background-position: left;
+            text-align: center;
+            font-family: Helvetica;
+            font-size: 22px;
+            color: mintcream;
+            text-decoration: none;
+            transition: background-position 1s ease-in-out;
+            transition: all 1s ease-in-out;
+            position: absolute;
         }
-        .button-container button:hover {
-            color: #ffffff;
-            background-color: rgb(6, 110, 124);
+        .button-container a:hover {
+            position: right;
         }
 #countdown {
     text-align: center;
     margin-top: 100px;
-    color: rgb(214, 238, 1);
     font-size: 20px;
     width: 900px;
     height: 270px;
-    background-color: rgb(6, 109, 100);
     margin-left: auto;
     margin-right: auto;
     border-radius: 7px;
+    background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
+    padding:30px;
+    animation:pop-in 0.5s ease;
+    transition:
+    transform .4s ease,
+    box-shadow .4s ease;
+    animation:pop-in 0.6s ease;
 }
 @media screen and (max-width: 600px) {
     p {
@@ -85,4 +126,14 @@ h1 {
             color: #ffffff;
             background-color: rgb(6, 110, 124);
         }
-}
+}
+
+@keyframes pop-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-4rem) scale(1);
+    }
+    100% {
+      opacity: 1;
+    }
+  }