From 154be0b079221c16dd1365f8ee99a7edb1dfe1a2 Mon Sep 17 00:00:00 2001 From: Eggy115 <79756011+Eggy115@users.noreply.github.com> Date: Tue, 29 Oct 2024 18:43:25 +0000 Subject: [PATCH] Add files via upload --- index.html | 102 ++++++++++++++++++++++++++++ styles.css | 196 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 298 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a29db8 --- /dev/null +++ b/index.html @@ -0,0 +1,102 @@ + + + + + + + + + Eggy115 + + + +
+

Eggy115

+
+
+
+
+

Eggy115

+ Profile Picture +
+
+

Stuff About Me

+

Name | Oliver George Talbot Muggleton +

Sex | Male

+

Pronouns | he/him/his

+
+
+
+
+
+

Long paragraph about this website and stuff.

+

Hello! Welcome to my website. Here is some text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

+ +
+
+
+

Tools & Resources

+

Web tools, software, links, files, and other resources.

 +
+
+

Contact & Accounts & Donations

+

Contact me, my team or view any of my accounts. Mainly for stalkers. And cool people (who donate).

 +
+
+

Source Code

+

Source code for the website and any tools or resources included in other areas of the website.

 +
+
+
+
+

Blog Post 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.

+
+
+

Blog Post 2

+

Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.

+
+
+

Blog Post 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.

+
+
+

Blog Post 2

+

Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.

+
+
+

Blog Post 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.

+
+
+

Blog Post 2

+

Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.

+
+
+

Blog Post 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.

+
+
+

Blog Post 2

+

Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.

+
+
+

Blog Post 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.

+
+
+

Hey there!

+

Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.

 +
+ +
+ + +
+ +




+
+

This is the bottom of the page.

+
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8780f36 --- /dev/null +++ b/styles.css @@ -0,0 +1,196 @@ +/* Style the custom scrollbar for Webkit-based browsers (Chrome, Safari) */ +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: #1a1a1a ; /* Track color */ +} +::-webkit-scrollbar-thumb { + background: #444; /* Thumb color */ + border-radius: 5px; /* Rounded corners */ +} +/* Style the custom scrollbar for Firefox */ +/* Note that the scrollbar in Firefox can only be styled using the scrollbar-width property, which is not widely supported yet (as of my knowledge cutoff in September 2021) */ +/* This example might not work in all versions of Firefox */ +* { + scrollbar-width: thin; + scrollbar-color: #444 #1a1a1a; +} +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #1a1a1a; /* Dark background color */ + color: #ffffff; /* Light text color */ + display: flex; + flex-direction: column; + min-height: 100vh; /* Make the body take up at least the full viewport height */ +} +header, footer{ + background-color: #4caf50; /* Green header and footer background color */ + padding: 10px; + color: #ffffff; + text-align: center; + animation: changeHue 10s infinite alternate; /* Apply the hue animation */ +} +@keyframes changeHue { + 0% { + filter: hue-rotate(0deg); /* Starting hue rotation value */ + } + 100% { + filter: hue-rotate(360deg); /* Ending hue rotation value (360deg for a full cycle) */ + } +} +main { + display: flex; /* Use flexbox to create a two-column layout */ + max-width: 1050px; + margin: 20px auto; + flex-wrap: wrap; /* Allow elements to wrap within the flex container */ + justify-content: space-between; /* Align items at the edges */ +} +.profile { + flex: 1 0 250px; /* Allow the profile to grow, but not shrink below 250px */ + display: flex; + flex-direction: column; + margin-bottom: 20px; +} +.profile-inner, +.blog { + padding: 20px; + background-color: #292929; /* Darker content background color */ + border: 1px solid #444; + border-radius: 5px; + margin-bottom: 20px; +} +.profile-picture { + max-width: 150px; + display: block; + margin: 0 auto 20px; +} +.info { + text-align: justify; +} +.info p { + margin: 5px 0; +} +.blogs-container { + flex: 1 0 600px; /* Allow the blogs to grow, but not shrink below 600px */ + max-width: 600px; /* Limit the width of the blog container */ + margin-left: 20px; /* Add some space between the profile and blogs */ + display: flex; + flex-direction: column; +} +.blog { + background-color: #292929; /* Use the same background color as the profile */ + color: white; + padding: 20px; + text-align: justify; + margin-bottom: 20px; + border: 1px solid #444; + border-radius: 5px; +} +.button { + background-color: #292929; /* Use the same background color as the profile */ + color: white; + padding: 10px; + text-align: justify; + margin-bottom: 10px; + border: 1px solid #444; + border-radius: 5px; +} + +.button:hover { + color: #4caf50; /* Set the link text color to yellow when hovering */ + animation: changeHue 10s infinite alternate; +} +#length { + background-color: #292929; /* Use the same background color as the profile */ + color: white; + padding: 10px; + text-align: justify; + margin-bottom: 10px; + border: 1px solid #444; + border-radius: 5px; +} + +#length:hover { + color: #4caf50; /* Set the link text color to yellow when hovering */ + animation: changeHue 10s infinite alternate; +} + + /* Style the number input to hide the spinners */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* For Firefox */ +input[type="number"] { + -moz-appearance: textfield; +} + +footer { + text-align: center; + padding: 10px; + background-color: #4caf50; /* Green footer background color */ + color: #fff; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + display: block; /* Initially show the footer */ + transition: transform 0.3s ease-in-out; /* Add smooth transition when showing/hiding */ +} +.footer-hidden { + transform: translateY(100%); /* Move the footer outside the viewport */ +} +a { + color: white; /* Set the link text color to white */ + text-decoration: none; /* Remove the default underline */ +} + +/* Apply styles when hovering over the link */ +a:hover { + color: #4caf50; /* Set the link text color to yellow when hovering */ + animation: changeHue 10s infinite alternate; +} +.bottom-box { + bottom: 0; + left: 0; + width: 100%; + background-color: #4caf50; + color: white; + padding: 10px; + box-sizing: border-box; + animation: changeHue 10s infinite alternate; +} +.exception-link { + color: white; /* Change the color for the exception links */ +} +.exception-link:hover { + color: white; /* Change the color for hovered exception links */ /* Add underline for hovered exception links */ + animation: none; /* Remove animation for hovered exception links */ +} +/* styles.css */ +#scrollToTopBtn { + position: fixed; + bottom: 20px; + left: 20px; + z-index: 1000; + display: none; + font-size: 24px; + background-color: #292929; + color: #fff; + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + cursor: pointer; + } + #scrollToTopBtn:hover { + background-color: #444444; + color: #4caf50; + animation: changeHue 10s infinite alternate; + } + \ No newline at end of file