Skip to content

Commit 5e803ad

Browse files
authored
Add files via upload
1 parent a88516a commit 5e803ad

13 files changed

+7011
-0
lines changed

articles/articles.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="description" content="muggleton.xyz">
6+
<meta name="author" content="Oliver George Talbot Muggleton">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="icon" href="https://muggleton.xyz/images/256.png" type="image/png">
9+
<title>muggleton.xyz</title>
10+
<link rel="stylesheet" href="https://muggleton.xyz/styles.css">
11+
<base href="https://muggleton.xyz/">
12+
</head>
13+
<body>
14+
<header>
15+
<h1><a href="/index.html" class="exception-link"><span title="https://muggleton.xyz">muggleton.xyz</span></a></h1>
16+
</header>
17+
<main>
18+
<div class="blog">
19+
<a href="articles/the-youtube-channel-is-back.html"><h2>The YouTube channel is back</h2>
20+
<p>After much deliberation, I've decided to return the YouTube channel. This was a genuinely tough decision. However, I decided that the pros outweighed the cons.</p></a><code><span title="Third article written">#3</span></code>
21+
</div>
22+
<div class="blog">
23+
<a href="articles/lorem-ipsum.html"><h2>Lorem Ipsum</h2>
24+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.</p></a><code><span title="Second article written">#2</span></code>
25+
</div>
26+
<div class="blog">
27+
<a href="articles/i-made-a-website.html"><h2>I made a website</h2>
28+
<p>So I've finally done it. I've made a website. I've wanted to do this for a while now. In fact, if you do some snooping around on Github you'll find a website very similar to this, but under the name of "Eggy115" (which is me). I've just recycled it. However, this time, I've bought a domain. And used my real name.</p></a><code><span title="First article written">#1</span></code>
29+
</div>
30+
31+
</main>
32+
33+
34+
</body>
35+
</html>

articles/i-made-a-website.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="description" content="muggleton.xyz">
6+
<meta name="author" content="Oliver George Talbot Muggleton">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="icon" href="https://muggleton.xyz/images/256.png" type="image/png">
9+
<title>muggleton.xyz</title>
10+
<link rel="stylesheet" href="https://muggleton.xyz/styles.css">
11+
<base href="https://muggleton.xyz/">
12+
<style>
13+
main {
14+
display: flex; /* Use flexbox to create a two-column layout */
15+
max-width: 10000px;
16+
margin: 20px auto;
17+
flex-wrap: wrap; /* Allow elements to wrap within the flex container */
18+
justify-content: space-between; /* Align items at the edges */
19+
}
20+
.profile {
21+
margin-left: 20px; /* Add some space between the profile and blogs */
22+
flex: 1 0 250px; /* Allow the profile to grow, but not shrink below 250px */
23+
max-width: 250px;
24+
display: flex;
25+
flex-direction: column;
26+
}
27+
.blogs-container {
28+
flex: 1 0 600px; /* Allow the blogs to grow, but not shrink below 600px */
29+
max-width: 1000px; /* Limit the width of the blog container */
30+
display: flex;
31+
flex-direction: column;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<header>
37+
<h1><a href="/index.html" class="exception-link"><span title="https://muggleton.xyz">muggleton.xyz</span></a></h1>
38+
</header>
39+
<main>
40+
<div class="blogs-container">
41+
<div class="blog">
42+
<h2>I made a website</h2>
43+
<p>So I've finally done it. I've made a website. I've wanted to do this for a while now. In fact, if you do some snooping around on Github you'll find a website very similar to this, but under the name of "Eggy115" (which is me). I've just recycled it. However, this time, I've bought a domain. And used my real name.</p>
44+
<code>muggleton.xyz</code>
45+
<p>Now isn't that snazzy?</p>
46+
<p>Yes. The answer is yes. Anyway, I'm now going to write about why I made this website. I wouldn't bother reading it. This is mainly for me, this blog post. "Blog post". It hardly qualifies as that. Anyway, it's mainly for me to get all my ideas out and write them down and organise my thoughts and all that nonsense, because I find it much easier to do that when I've got words to look at.</p>
47+
<p>Basically, I don't like most social media. Or the internet. It's all stinky and rotten. TikTok is a cyberwarfare tool, Snapchat is a waste of time, and the only real use of Instagram is stalking. Most websites are owned by terrible companies like Google. I used to make YouTube videos, but I took them down, because I didn't like having them on YouTube. I'm looking for another platform to host them on. I might use Odysee. The other thing is most of the web is bloat. 90% of websites don't need Javascript, or ads, or anything fancy. Most websites could be static and that would be fine.</p>
48+
<p>So this website is to address both of those problems. One of those is to provide "social media", but for me. Just me. So that I can put my stupid photos and thoughts and projects here. Except I control what's on here. A lil bit of independence, y'know. And the second purpose, the second problem I'm addressing, is the issue of bloat. I want to provide helpful information and stuff, but without all the junk.</p>
49+
<p>And also I like making these sorts of things.</p>
50+
</div>
51+
<!-- Add more blog posts as needed -->
52+
</div>
53+
<div class="profile">
54+
<div class="blog">
55+
<a href="articles/lorem-ipsum.html"><h2>Lorem Ipsum</h2>
56+
<p>Lorem ipsum dolor sit amet</p></a>
57+
</div>
58+
<div class="blog">
59+
<a href="articles/the-youtube-channel-is-back.html"><h2>The YouTube channel is back</h2>
60+
<p>After much deliberation, I've decided to return the YouTube channel</p></a>
61+
</div>
62+
<div class="articles/blog">
63+
<a href=""><h2>Blog Post 1</h2>
64+
<p>Lorem ipsum dolor sit amet</p></a>
65+
</div>
66+
</div>
67+
</main>
68+
69+
</body>
70+
</html>

articles/lorem-ipsum.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="description" content="muggleton.xyz">
6+
<meta name="author" content="Oliver George Talbot Muggleton">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="icon" href="https://muggleton.xyz/images/256.png" type="image/png">
9+
<title>muggleton.xyz</title>
10+
<link rel="stylesheet" href="https://muggleton.xyz/styles.css">
11+
<base href="https://muggleton.xyz/">
12+
<style>
13+
main {
14+
display: flex; /* Use flexbox to create a two-column layout */
15+
max-width: 10000px;
16+
margin: 20px auto;
17+
flex-wrap: wrap; /* Allow elements to wrap within the flex container */
18+
justify-content: space-between; /* Align items at the edges */
19+
}
20+
.profile {
21+
margin-left: 20px; /* Add some space between the profile and blogs */
22+
flex: 1 0 250px; /* Allow the profile to grow, but not shrink below 250px */
23+
max-width: 250px;
24+
display: flex;
25+
flex-direction: column;
26+
}
27+
.blogs-container {
28+
flex: 1 0 600px; /* Allow the blogs to grow, but not shrink below 600px */
29+
max-width: 1000px; /* Limit the width of the blog container */
30+
display: flex;
31+
flex-direction: column;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<header>
37+
<h1><a href="/index.html" class="exception-link"><span title="https://muggleton.xyz">muggleton.xyz</span></a></h1>
38+
</header>
39+
<main>
40+
<div class="blogs-container">
41+
<div class="blog">
42+
<h2>Lorem Ipsum</h2>
43+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ultricies est.</p>
44+
</div>
45+
<!-- Add more blog posts as needed -->
46+
</div>
47+
<div class="profile">
48+
<div class="blog">
49+
<a href="articles/i-made-a-website.html"><h2>I made a website</h2>
50+
<p>So I've finally done it</p></a>
51+
</div>
52+
<div class="blog">
53+
<a href="articles/the-youtube-channel-is-back.html"><h2>The YouTube channel is back</h2>
54+
<p>After much deliberation, I've decided to return the YouTube channel</p></a>
55+
</div>
56+
<div class="articles/blog">
57+
<a href=""><h2>Blog Post 1</h2>
58+
<p>Lorem ipsum dolor sit amet</p></a>
59+
</div>
60+
</div>
61+
</main>
62+
63+
</body>
64+
</html>
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="description" content="muggleton.xyz">
6+
<meta name="author" content="Oliver George Talbot Muggleton">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="icon" href="https://muggleton.xyz/images/256.png" type="image/png">
9+
<title>muggleton.xyz</title>
10+
<link rel="stylesheet" href="https://muggleton.xyz/styles.css">
11+
<base href="https://muggleton.xyz/">
12+
<style>
13+
main {
14+
display: flex; /* Use flexbox to create a two-column layout */
15+
max-width: 10000px;
16+
margin: 20px auto;
17+
flex-wrap: wrap; /* Allow elements to wrap within the flex container */
18+
justify-content: space-between; /* Align items at the edges */
19+
}
20+
.profile {
21+
margin-left: 20px; /* Add some space between the profile and blogs */
22+
flex: 1 0 250px; /* Allow the profile to grow, but not shrink below 250px */
23+
max-width: 250px;
24+
display: flex;
25+
flex-direction: column;
26+
}
27+
.blogs-container {
28+
flex: 1 0 600px; /* Allow the blogs to grow, but not shrink below 600px */
29+
max-width: 1000px; /* Limit the width of the blog container */
30+
display: flex;
31+
flex-direction: column;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<header>
37+
<h1><a href="/index.html" class="exception-link"><span title="https://muggleton.xyz">muggleton.xyz</span></a></h1>
38+
</header>
39+
<main>
40+
<div class="blogs-container">
41+
<div class="blog">
42+
<h2>The YouTube channel is back</h2>
43+
<p>After much deliberation, I've decided to return the YouTube channel. This was a genuinely tough decision. However, I decided that the pros outweighed the cons. It does now mean that everyone I know will be able to bully me, but I'm willing to face those consequences.</p>
44+
<p>You can see my channel <a href="https://www.youtube.com/@ogtmuggleton?sub_confirmation=1"><u>here</u></a> or just look up "Oliver George Talbot Muggleton" on YouTube.</p>
45+
</div>
46+
<!-- Add more blog posts as needed -->
47+
</div>
48+
<div class="profile">
49+
<div class="blog">
50+
<a href="articles/i-made-a-website.html"><h2>I made a website</h2>
51+
<p>So I've finally done it</p></a>
52+
</div>
53+
<div class="blog">
54+
<a href="articles/lorem-ipsum.html"><h2>Lorem Ipsum</h2>
55+
<p>Lorem ipsum dolor sit amet</p></a>
56+
</div>
57+
<div class="articles/blog">
58+
<a href=""><h2>Blog Post 1</h2>
59+
<p>Lorem ipsum dolor sit amet</p></a>
60+
</div>
61+
</div>
62+
</main>
63+
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)