diff --git a/MyLogo.png b/MyLogo.png new file mode 100644 index 0000000..2e02189 Binary files /dev/null and b/MyLogo.png differ diff --git a/background.jpg b/background.jpg new file mode 100644 index 0000000..d05ac3d Binary files /dev/null and b/background.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..bd697c7 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + Moon Moon's Hub + + +
+ +

Moon Moon's Hub

+
+ +
+
+
+ +
+

I am a 26-year-old Norwegian guy that occasionally streams, is a tech head, and hosts various things on my local server. Some of these you can check out here:

+ My Projects' dashboard + PDF Tools + IT Tools +
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..11dda4f --- /dev/null +++ b/styles.css @@ -0,0 +1,109 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + overflow: hidden; /* Prevent background from overflowing content */ + position: relative; + height: 100vh; /* Set the body height to viewport height */ +} + +body::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('https://cdnb.artstation.com/p/assets/images/images/006/897/659/large/mikael-gustafsson-wallpaper-mikael-gustafsson.jpg'); + background-size: cover; + background-position: center; + filter: blur(4px) saturate(100%) brightness(50%); + z-index: -1; +} + +/* Other styles remain unchanged */ + + +header { + text-align: center; + color: #ffffff; + padding: 1rem; + box-sizing: border-box; +} + +.logo-container { + display: flex; + align-items: center; + justify-content: center; +} + +.logo { + max-width: 10%; /* Adjust the size as needed */ + max-height: 10%; + width: auto; + height: auto; + border-radius: 50%; /* Make it round */ + margin-right: 10px; /* Add spacing between logo and title */ +} + + +.content { + text-align: center; + padding: 2rem; + box-sizing: border-box; + color:#fff +} + +.my-projects-button { + padding: 0.5rem 1rem; + background-color: #333; + color: #fff; + text-decoration: none; + border: none; + margin-top: 1rem; + display: inline-block; +} + +.PDF-tools-button { + padding: 0.5rem 1rem; + background-color: #333; + color: #fff; + text-decoration: none; + border: none; + margin-top: 1rem; + display: inline-block; +} + +.IT-tools-button { + padding: 0.5rem 1rem; + background-color: #333; + color: #fff; + text-decoration: none; + border: none; + margin-top: 1rem; + display: inline-block; +} + +footer { + text-align: center; + color: #fff; + padding: 1rem; + position: fixed; + bottom: 0; + width: 100%; + box-sizing: border-box; +} + +.social-buttons { + margin-top: 1rem; +} + +.social-buttons a { + margin: 0 10px; + color: #fff; + text-decoration: none; +} + +.social-buttons a:hover { + text-decoration: underline; +}