diff --git a/assets/avatar.jpg b/assets/avatar.jpg
index 1e16967..0f1b1f5 100644
Binary files a/assets/avatar.jpg and b/assets/avatar.jpg differ
diff --git a/assets/background.jpg b/assets/background.jpg
index 00696f5..3456709 100644
Binary files a/assets/background.jpg and b/assets/background.jpg differ
diff --git a/assets/cat.jpg b/assets/cat.jpg
new file mode 100644
index 0000000..1e16967
Binary files /dev/null and b/assets/cat.jpg differ
diff --git a/assets/images/firefox2.gif b/assets/images/firefox.gif
similarity index 100%
rename from assets/images/firefox2.gif
rename to assets/images/firefox.gif
diff --git a/assets/lastplayed.js b/assets/lastplayed.js
index 9be92d3..c29990b 100644
--- a/assets/lastplayed.js
+++ b/assets/lastplayed.js
@@ -12,4 +12,4 @@ document.addEventListener("DOMContentLoaded", () => {
}
})
.catch(err => console.error(err));
-});
+});
\ No newline at end of file
diff --git a/assets/styles.css b/assets/styles.css
index 5b3cb2f..a66c683 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -21,23 +21,32 @@ body {
}
main {
- margin-top: 20px;
- border-radius: 15px;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ width: 100%;
background-color: rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(5px);
- padding: 20px;
- width: 800px;
- max-width: 100%;
+ backdrop-filter: blur(2px);
box-sizing: border-box;
}
+main > a {
+ align-self: center;
+}
+
+h2 {
+ margin: 15px 0 10px;
+}
+h3 {
+ margin: 5px 0;
+}
+label {
+ margin-bottom: 8px;
+}
+
.down {
- margin-top: 20px;
- border-radius: 15px;
- padding: 10px;
- margin-bottom: 20px;
- background-color: rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(5px);
+ margin-top: auto;
+ width: 100%;
}
a {
@@ -66,15 +75,6 @@ a {
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
-.info {
- display: flex;
- justify-content: center;
-}
-
-.info > div {
- margin: 0 20px;
-}
-
.h1-404 {
font-size: 6em;
font-weight: 400;
@@ -91,7 +91,7 @@ label {
#mybutton {
height: 50px;
- width: 40%;
+ width: 500px;
resize: none;
color: #ddd;
background-color: rgba(0, 0, 0, 0.1);
@@ -99,13 +99,13 @@ label {
border-radius: 5px;
padding: 5px;
overflow: hidden;
+ display: block;
+ margin: 0 auto;
}
@media (max-width: 800px) {
- body { gap: 15px; padding: 0 10px; }
- main { padding: 15px; }
h1 { font-size: 1.5rem; }
h2, h3, label { font-size: 1.1rem; margin: 12px 0; }
- .info { display: block; }
- .info > div { margin: 0; }
+ #mybutton { width: 200px; }
+ main { padding: 2%;}
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 32ba68c..fc63c86 100644
--- a/index.html
+++ b/index.html
@@ -12,9 +12,7 @@
- 
- xelframe home page
-
+ xelframe home page
About me:
hello, my online name is xelframe.
@@ -42,35 +40,36 @@
-
+
Latest played song:
~~~~ - ~~~~
+
+
-
- 
