added effects & adjusted spotify page

added glow effects adjusted spotify page to look more pleasing looking
boudywho · May 17, 2024 · a55e102 · a55e102
1 parent 21b7782
commit a55e102
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# This isn't fully my work :)
+# I have adjusted a lot of stuff + added animations + multiple web pages + tried to make it more aesthetically pleasing :)
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
       <img alt="fem" src="small.png">
     </div>
     <nav>
-      <h1>•* ⁀ ➷ This is Boudy! .ೃ࿐</h1>
+      <h1 class="glow-title">•* ⁀ ➷ This is Boudy! .ೃ࿐</h1> 
       <h2 id="date"></h2>
 
       <div class="nav-section" style="position: relative;left: 90px;">

diff --git a/index.js b/index.js
@@ -2,7 +2,7 @@ function showTime() {
 	const date = new Date();
 
 	let today = date.toLocaleString("en", { weekday: "long" });
-	let hour = date.toLocaleString("pl", { hour: "2-digit" }); // use 24h time format
+	let hour = date.toLocaleString("pl", { hour: "2-digit" }); 
 	let minute = date.toLocaleString("en", { minute: "2-digit" });
 	let second = date.toLocaleString("en", { second: "2-digit" });
 	let day = date.toLocaleString("en", { day: "2-digit" });
@@ -15,12 +15,12 @@ function showTime() {
 	document.getElementById(
 		"date"
 	).innerHTML = `${today}, ${hour}:${minute}:${second} | ${day}/${month}/${year}`;
-	setTimeout(showTime, 0);
+	setTimeout(showTime, 1000); 
 }
 
 function addZero(i) {
 	if (i.length < 2) i = "0" + i;
 	return i;
 }
 
-showTime();
+showTime();
diff --git a/links.html b/links.html
@@ -11,8 +11,7 @@
             <img alt="fem" src="small1.png">
         </div>
         <nav>
-            <h1>•* ⁀ ➷ My Bookmark .ೃ࿐</h1>
-            <h2> Poor Choice of Colors? DM ME! </h2>
+            <h1 class="glow-title">•* ⁀ ➷ My Bookmark .ೃ࿐</h1> <h2 id="date"> Poor Choice of Colors? DM ME! </h2>
 
             <div class="nav-section" style="position: relative;left: 90px;">
                 <ul>

diff --git a/spotify.html b/spotify.html
@@ -1,31 +1,40 @@
 <!DOCTYPE html>
 <html>
-
   <head>
     <title>~/Spotify</title>
     <link rel="stylesheet" type="text/css" href="stylespotify.css">
   </head>
-
   <body>
     <nav>
-      <h1>•* ⁀ ➷ My playlists .ೃ࿐</h1>
-        <h1>
-          <div style = "position:relative;right:125px;bottom:20px;">
-            <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4aTtB4MV00ZFwQvEUjRkHj?utm_source=generator" width="150%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
-          </div>
+      <h1 class="animate-glow">•* ⁀ ➷ My playlists .ೃ࿐</h1>
+      <div class="playlist-container">
+        <iframe 
+          style="border-radius:12px" 
+          src="https://open.spotify.com/embed/playlist/4aTtB4MV00ZFwQvEUjRkHj?utm_source=generator" 
+          width="100%" 
+          height="352" 
+          frameBorder="0" 
+          allowfullscreen="" 
+          allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
+          loading="lazy"></iframe>
+      </div>
+      <div class="playlist-container">
+        <iframe 
+          style="border-radius:12px" 
+          src="https://open.spotify.com/embed/playlist/6xk8MBSfV8XipqVJd4Yp9W?utm_source=generator&theme=0" 
+          width="100%" 
+          height="352" 
+          frameBorder="0" 
+          allowfullscreen="" 
+          allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
+          loading="lazy"></iframe>
+      </div>
 
-          <div style = "position:relative;right:125px;bottom:15px;">
-            <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/6xk8MBSfV8XipqVJd4Yp9W?utm_source=generator&theme=0" width="150%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
-          </div>
-      </h1>
-      <h1>
-        <div style="position: relative;left: 40px;">
-          <a href="index.html">ˏˋ°•*⁀➷┊ Main Page ┆· • . °</a>
-        </div>
-      </h1>
+      <div class="home-link">
+        <a href="index.html">ˏˋ°•*⁀➷┊ Main Page ┆· • . °</a>
+      </div>
     </nav>
 
     <script type="text/javascript" src="index.js"></script>
   </body>
-
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -49,6 +49,20 @@ h1 {
   animation: fadeIn 1s ease-in-out;
 }
 
+/* Glow Effect for Title */
+.glow-title { 
+  animation: glow 2s infinite alternate; 
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 0 0 10px #dcc6a0; /* Adjust glow color */
+  }
+  to {
+    text-shadow: 0 0 20px #dcc6a0; /* Adjust glow color */
+  }
+}
+
 h2 {
   font-size: 1.2em;
   font-weight: 600;
@@ -184,4 +198,18 @@ a:hover {
   to {
     transform: scale(1.05);
   }
+}
+
+/* Clock Animations */
+#date {
+  animation: subtlePulse 1s infinite alternate; /* Apply animation */
+}
+
+@keyframes subtlePulse {
+  from {
+    opacity: 1; 
+  }
+  to {
+    opacity: 0.8;
+  }
 }
diff --git a/stylelinks.css b/stylelinks.css
@@ -49,6 +49,20 @@ h1 {
   animation: fadeIn 1s ease-in-out;
 }
 
+/* Glow Effect for Title */
+.glow-title { 
+  animation: glow 2s infinite alternate; 
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 0 0 10px #dcc6a0; /* Adjust glow color */
+  }
+  to {
+    text-shadow: 0 0 20px #dcc6a0; /* Adjust glow color */
+  }
+}
+
 h2 {
   font-size: 1.2em;
   font-weight: 600;

diff --git a/stylespotify.css b/stylespotify.css
@@ -3,84 +3,76 @@
   src: url("./JetBrains.ttf");
 }
 
-html {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-}
-
 body {
   display: flex;
   color: #dcc6a0;
   background: #433055;
-  margin-right: 9em;
-  padding: 1em;
   font-family: Font;
-}
-
-img {
-  height: 600px;
-  width: 350px;
-  margin-right: 2em;
-  border-radius: 5px;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+  align-items: center; 
+  justify-content: center; 
+  height: 100vh; 
+  margin: 0; 
 }
 
 nav {
-  display: grid;
-  grid-row-gap: 1em;
-  grid-template-columns: 1fr 1fr;
-  min-width: 24em;
-  grid-auto-rows: max-content;
+  text-align: center; 
+  padding: 2em; 
+  background: rgba(67, 48, 85, 0.8); 
+  border-radius: 15px; 
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
 }
 
 h1 {
-  font-size: 2.2em;
-  font-weight: 600;
-  grid-column: 1/-1;
-  text-align: center;
-  margin-bottom: 0;
-}
-
-h2 {
-  font-size: 1.2em;
+  font-size: 2.5em;
   font-weight: 600;
-  color: #a56951;
-  grid-column: 1/-1;
-  text-align: center;
-  margin-bottom: 2.3em;
+  margin-bottom: 2em;
+  color: #edc9af; 
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-ul {
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
-  list-style-type: none;
+.playlist-container {
+  margin: 1em 0; 
+  width: 60%; /* Wider playlists */
+  max-width: 600px; /* Increased max-width */
+  margin-left: auto; 
+  margin-right: auto; 
+  animation: subtleScale 4s infinite alternate; /* Added animation */
 }
 
-li {
-  line-height: 1.4em;
-  margin-left: 4.8em;
+.playlist-container iframe {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
 }
 
-li:first-child {
-  display: inline-block;
-  color: #cca86b;
-  font-size: 1.5em;
-  font-weight: 600;
-  text-align: center;
-  line-height: 2em;
-  margin-left: 2.5em;
+.home-link {
+  margin-top: 2em; 
 }
 
-a {
+.home-link a {
   color: #dcc6a0;
-  font-size: 1.1em;
+  font-size: 1.2em;
   text-decoration: none;
+  padding: 0.8em 1.5em;
+  border: 2px solid #dcc6a0; 
+  border-radius: 20px; 
+  transition: all 0.3s ease; 
+}
+
+.home-link a:hover {
+  background-color: #dcc6a0; 
+  color: #433055; 
+}
+
+/* Animations */
+.animate-glow {
+  animation: glow 2s infinite alternate; /* Added glow animation to title */
 }
 
-a:hover {
-  color: #ff864e;
-  font-style: italic;
+@keyframes glow {
+  from { text-shadow: 0 0 10px #edc9af; } /* Adjust glow color */
+  to { text-shadow: 0 0 20px #edc9af; } /* Adjust glow color */
 }
+
+@keyframes subtleScale {
+  from { transform: scale(1); }
+  to { transform: scale(1.02); } /* Subtle scaling effect */
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		# This isn't fully my work :)
		# I have adjusted a lot of stuff + added animations + multiple web pages + tried to make it more aesthetically pleasing :)