Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
Eggy115 authored Oct 29, 2024
1 parent 8acf145 commit 154be0b
Show file tree
Hide file tree
Showing 2 changed files with 298 additions and 0 deletions.
102 changes: 102 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Eggy115's Website">
<meta name="author" content="Eggy115">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/256.png" type="image/png">
<title>Eggy115</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1><a href="index.html" class="exception-link"><span title="https://eggium.github.io/">Eggy115</span></a></h1>
</header>
<main>
<div class="profile">
<div class="profile-inner">
<h2 style="text-align: center;"><span title="It's a me! /ˈɛɡi ˈwʌn ˈwʌn ˈfaɪv/">Eggy115</span></h2>
<img class="profile-picture" src="images/pfp1.JPG" alt="Profile Picture" title="That's me!"></a>
<div class="info">
<details>
<p><summary>Stuff About Me</summary></p>
<p><span title="/ˈɒlɪvər ˈdʒɔːrdʒ ˈtɔːlbət ˈmʌɡəltən/">Name</span> | <span title="/ˈɒlɪvər/">Oliver</span> <span title="/ˈdʒɔːrdʒ/">George</span> <span title="/ˈtɔːlbət/">Talbot</span> <span title="/ˈmʌɡəltən/">Muggleton</span></summary>
<p><span title="Not before marriage lmao">Sex</span> | Male</p>
<p><span title="I'd hope that the above would help with this but &quot;we live in a society&quot;">Pronouns</span> | <span title="I don't know why this is necessary">he/him/his</span></p>
</details>
</div>
<br>
<div class="info">
<details>
<p><summary>Long paragraph about this website and stuff.</summary></p>
<p>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.</p>
</detials>
</div>
</div>
<div class="profile-inner">
<a href="tools.html"><h2>Tools & Resources</h2>
<p>Web tools, software, links, files, and other resources.</p></a>
</div>
<div class="profile-inner">
<a href="contacts.html"><h2>Contact & Accounts & Donations</h2>
<p>Contact me, my team or view any of my accounts. Mainly for stalkers. And cool people (who donate).</p></a>
</div>
<div class="profile-inner">
<a href="https://github.com/eggy115/eggy115.github.io" target="_blank"><h2>Source Code</h2>
<p>Source code for the website and any tools or resources included in other areas of the website.</p></a>
</div>
</div>
<div class="blogs-container">
<div class="blog">
<h2>Blog Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.</p>
</div>
<div class="blog">
<h2>Blog Post 2</h2>
<p>Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.</p>
</div>
<div class="blog">
<h2>Blog Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.</p>
</div>
<div class="blog">
<h2>Blog Post 2</h2>
<p>Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.</p>
</div>
<div class="blog">
<h2>Blog Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.</p>
</div>
<div class="blog">
<h2>Blog Post 2</h2>
<p>Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.</p>
</div>
<div class="blog">
<h2>Blog Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.</p>
</div>
<div class="blog">
<h2>Blog Post 2</h2>
<p>Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.</p>
</div>
<div class="blog">
<h2>Blog Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.</p>
</div>
<div class="blog">
<a href="blog.html"><h2>Hey there!</h2>
<p>Phasellus ac felis tincidunt, volutpat nunc a, bibendum libero.</p></a>
</div>
<!-- Add more blog posts as needed -->
</div>
<button id="scrollToTopBtn" class="hidden"><b></b></button>

</main>

<br><br><br><br><br>
<div class="bottom-box">
<p style="text-align: center;" class="randomMessage">This is the bottom of the page.</p>
</div>
</body>
</html>
196 changes: 196 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 154be0b

Please sign in to comment.