moon/moonsbian-gay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Review pages, some WoW reviews, still missing a lot.

Browse Source
This commit is contained in:
moon
2026-03-07 16:37:08 +02:00
parent ae981c2adb
commit 49cae879d6
7 changed files with 2280 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
bookreviews.html Normal file
View File

@@ -0,0 +1,345 @@
<body>
<div id="container">
<div id="header" style="height: 188px"></div>
<div id="headerArea">
<div id="navbar-container"></div>
</div>
<div id="flex">
<!-- left !-->
<aside id="leftSidebar" style="margin-right: 10px">
<script
type="text/javascript"
src="https://counter.websiteout.com/js/30/0/0/0"
></script>
<div id="leftSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
<!-- MIDDLE !-->
<main>
<h1>Reviews!</h1>
<p>
Obviously, my opinion is important, especially so on the
internet, so I'll be sharing my thoughts on all kinds of
things.
</p>
<p>
Of course, these are not just opinions, they are facts, and
as such, if you disagree, you are wrong. Objectively.
</p>
<p>
Some reviews may be detailed, while others might just have a
brief summary and score.
</p>
<p><strong>Categories</strong></p>
<ul>
<li>
<a href="gamereviews.html">Games</a>
</li>
<li>
<a href="moviereviews.html">Movies</a>
</li>
<li>
<a href="tvreviews.html">TV/Series</a>
</li>
<li>
<a href="bookreviews.html">Books</a>
</li>
<li>
<a href="comicreviews.html">Comics/Manga etc.</a>
</li>
</ul>
<p>
I find the modern 0-10 or 0-5 rating systems to be poorly
formatted, as people seem to think a 7/10 is okay, and that
5/10 is bad. As such, my rating scale will be -5 to 5, with
0 being a neutral score.
</p>
<p>
A neutral score? How horrible, everything must either be
good or bad!!! No.
</p>
<p>
Some things are just, okay, and nothing special but nothing
bad either, and I think it's important to have those in
reviews too, I'd go so far as to say that something I rate a
0, is still worth consuming if one desires to, it's when we
go below 0 that I am already starting to recommend not
toucing it.
</p>
</main>
<!-- right !-->
<aside id="rightSidebar" style="margin-left: 10px">
<div id="rightSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
</div>
<footer id="footer" style="margin-top: 10px"></footer>
</div>
<!-- THIS IS THE CSS !-->
<style>
/* user styles */
/* styles are what change the color and sizes of stuff on your site. */
/* these are variables that are being used in the code
these tended to confuse some people, so I only kept
the images as variables */
:root {
--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
/* colors */
--content: #43256e;
}
/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */
/* this seems like a lot for just one font and I would have to agree
but I wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc. T_T) which is why there are so many!
*/
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
font-style: italic;
font-weight: bold;
}
body {
font-family: "Nunito", sans-serif;
margin: 0;
background-color: #08031a;
/* you can delete the line below if you'd prefer to not use an image */
background-size: 65px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
/* below this line is CSS for the layout */
/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
max-width: 900px;
/* this is the width of your layout! */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
color: #fcc3ff;
font-weight: bold;
/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}
#header {
width: 100%;
background-color: #ffa6da;
/* header color here! */
height: 150px;
/* this is only for a background image! */
/* if you want to put images IN the header,
you can add them directly to the <div id="header"></div> element! */
background-image: var(--header-image);
background-size: 100%;
}
/* navigation section!! */
#navbar {
height: 40px;
background-color: #a0006b;
/* navbar color */
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 10px;
}
/* navigation links*/
#navbar li a {
color: #ed64f5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
/* navigation link when a link is hovered over */
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #a0006b;
width: 200px;
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
/* this is the color of the main content area,
between the sidebars! */
main {
background-color: #bd2289;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092d;
/* background color for footer */
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
/* this centers the footer text */
}
h1,
h2,
h3 {
color: #ed64f5;
}
h1 {
font-size: 25px;
}
strong {
/* this styles bold text */
color: #ed64f5;
}
/* this is just a cool box, it's the darker colored one */
.box {
background-color: #13092d;
border: 1px solid #ed64f5;
padding: 10px;
}
/* CSS for extras */
#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #13092d;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page?
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the
"max-width" value below
*/
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
#navbar ul {
flex-wrap: wrap;
}
}
</style>
<script src="components.js"></script>
</body>

345
comicreviews.html Normal file
View File

@@ -0,0 +1,345 @@
<body>
<div id="container">
<div id="header" style="height: 188px"></div>
<div id="headerArea">
<div id="navbar-container"></div>
</div>
<div id="flex">
<!-- left !-->
<aside id="leftSidebar" style="margin-right: 10px">
<script
type="text/javascript"
src="https://counter.websiteout.com/js/30/0/0/0"
></script>
<div id="leftSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
<!-- MIDDLE !-->
<main>
<h1>Reviews!</h1>
<p>
Obviously, my opinion is important, especially so on the
internet, so I'll be sharing my thoughts on all kinds of
things.
</p>
<p>
Of course, these are not just opinions, they are facts, and
as such, if you disagree, you are wrong. Objectively.
</p>
<p>
Some reviews may be detailed, while others might just have a
brief summary and score.
</p>
<p><strong>Categories</strong></p>
<ul>
<li>
<a href="gamereviews.html">Games</a>
</li>
<li>
<a href="moviereviews.html">Movies</a>
</li>
<li>
<a href="tvreviews.html">TV/Series</a>
</li>
<li>
<a href="bookreviews.html">Books</a>
</li>
<li>
<a href="comicreviews.html">Comics/Manga etc.</a>
</li>
</ul>
<p>
I find the modern 0-10 or 0-5 rating systems to be poorly
formatted, as people seem to think a 7/10 is okay, and that
5/10 is bad. As such, my rating scale will be -5 to 5, with
0 being a neutral score.
</p>
<p>
A neutral score? How horrible, everything must either be
good or bad!!! No.
</p>
<p>
Some things are just, okay, and nothing special but nothing
bad either, and I think it's important to have those in
reviews too, I'd go so far as to say that something I rate a
0, is still worth consuming if one desires to, it's when we
go below 0 that I am already starting to recommend not
toucing it.
</p>
</main>
<!-- right !-->
<aside id="rightSidebar" style="margin-left: 10px">
<div id="rightSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
</div>
<footer id="footer" style="margin-top: 10px"></footer>
</div>
<!-- THIS IS THE CSS !-->
<style>
/* user styles */
/* styles are what change the color and sizes of stuff on your site. */
/* these are variables that are being used in the code
these tended to confuse some people, so I only kept
the images as variables */
:root {
--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
/* colors */
--content: #43256e;
}
/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */
/* this seems like a lot for just one font and I would have to agree
but I wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc. T_T) which is why there are so many!
*/
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
font-style: italic;
font-weight: bold;
}
body {
font-family: "Nunito", sans-serif;
margin: 0;
background-color: #08031a;
/* you can delete the line below if you'd prefer to not use an image */
background-size: 65px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
/* below this line is CSS for the layout */
/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
max-width: 900px;
/* this is the width of your layout! */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
color: #fcc3ff;
font-weight: bold;
/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}
#header {
width: 100%;
background-color: #ffa6da;
/* header color here! */
height: 150px;
/* this is only for a background image! */
/* if you want to put images IN the header,
you can add them directly to the <div id="header"></div> element! */
background-image: var(--header-image);
background-size: 100%;
}
/* navigation section!! */
#navbar {
height: 40px;
background-color: #a0006b;
/* navbar color */
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 10px;
}
/* navigation links*/
#navbar li a {
color: #ed64f5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
/* navigation link when a link is hovered over */
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #a0006b;
width: 200px;
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
/* this is the color of the main content area,
between the sidebars! */
main {
background-color: #bd2289;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092d;
/* background color for footer */
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
/* this centers the footer text */
}
h1,
h2,
h3 {
color: #ed64f5;
}
h1 {
font-size: 25px;
}
strong {
/* this styles bold text */
color: #ed64f5;
}
/* this is just a cool box, it's the darker colored one */
.box {
background-color: #13092d;
border: 1px solid #ed64f5;
padding: 10px;
}
/* CSS for extras */
#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #13092d;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page?
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the
"max-width" value below
*/
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
#navbar ul {
flex-wrap: wrap;
}
}
</style>
<script src="components.js"></script>
</body>

337
gamereviews.html Normal file
View File

@@ -0,0 +1,337 @@
<body>
<div id="container">
<div id="header" style="height: 188px"></div>
<div id="headerArea">
<div id="navbar-container"></div>
</div>
<div id="flex">
<!-- left !-->
<aside id="leftSidebar" style="margin-right: 10px">
<script
type="text/javascript"
src="https://counter.websiteout.com/js/30/0/0/0"
></script>
<div id="leftSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
<!-- MIDDLE !-->
<main>
<p><a href="reviews.html">← Back to all reviews</a></p>
<h1>Game Reviews!</h1>
<p>
Obviously, my opinion is important, especially so on the
internet, so I'll be sharing my thoughts on all kinds of
things.
</p>
<p>
Of course, these are not just opinions, they are facts, and
as such, if you disagree, you are wrong. Objectively.
</p>
<p>
Some reviews may be detailed, while others might just have a
brief summary and score.
</p>
<p><strong>List of reviews</strong></p>
<ul>
<li>
<a href="reviews/world-of-warcraft.html"
>World of Warcraft</a
>
</li>
</ul>
<p>
I find the modern 0-10 or 0-5 rating systems to be poorly
formatted, as people seem to think a 7/10 is okay, and that
5/10 is bad. As such, my rating scale will be -5 to 5, with
0 being a neutral score.
</p>
<p>
A neutral score? How horrible, everything must either be
good or bad!!! No.
</p>
<p>
Some things are just, okay, and nothing special but nothing
bad either, and I think it's important to have those in
reviews too, I'd go so far as to say that something I rate a
0, is still worth consuming if one desires to, it's when we
go below 0 that I am already starting to recommend not
toucing it.
</p>
</main>
<!-- right !-->
<aside id="rightSidebar" style="margin-left: 10px">
<div id="rightSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
</div>
<footer id="footer" style="margin-top: 10px"></footer>
</div>
<!-- THIS IS THE CSS !-->
<style>
/* user styles */
/* styles are what change the color and sizes of stuff on your site. */
/* these are variables that are being used in the code
these tended to confuse some people, so I only kept
the images as variables */
:root {
--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
/* colors */
--content: #43256e;
}
/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */
/* this seems like a lot for just one font and I would have to agree
but I wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc. T_T) which is why there are so many!
*/
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
font-style: italic;
font-weight: bold;
}
body {
font-family: "Nunito", sans-serif;
margin: 0;
background-color: #08031a;
/* you can delete the line below if you'd prefer to not use an image */
background-size: 65px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
/* below this line is CSS for the layout */
/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
max-width: 900px;
/* this is the width of your layout! */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
color: #fcc3ff;
font-weight: bold;
/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}
#header {
width: 100%;
background-color: #ffa6da;
/* header color here! */
height: 150px;
/* this is only for a background image! */
/* if you want to put images IN the header,
you can add them directly to the <div id="header"></div> element! */
background-image: var(--header-image);
background-size: 100%;
}
/* navigation section!! */
#navbar {
height: 40px;
background-color: #a0006b;
/* navbar color */
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 10px;
}
/* navigation links*/
#navbar li a {
color: #ed64f5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
/* navigation link when a link is hovered over */
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #a0006b;
width: 200px;
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
/* this is the color of the main content area,
between the sidebars! */
main {
background-color: #bd2289;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092d;
/* background color for footer */
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
/* this centers the footer text */
}
h1,
h2,
h3 {
color: #ed64f5;
}
h1 {
font-size: 25px;
}
strong {
/* this styles bold text */
color: #ed64f5;
}
/* this is just a cool box, it's the darker colored one */
.box {
background-color: #13092d;
border: 1px solid #ed64f5;
padding: 10px;
}
/* CSS for extras */
#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #13092d;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page?
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the
"max-width" value below
*/
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
#navbar ul {
flex-wrap: wrap;
}
}
</style>
<script src="components.js"></script>
</body>

345
moviereviews.html Normal file
View File

@@ -0,0 +1,345 @@
<body>
<div id="container">
<div id="header" style="height: 188px"></div>
<div id="headerArea">
<div id="navbar-container"></div>
</div>
<div id="flex">
<!-- left !-->
<aside id="leftSidebar" style="margin-right: 10px">
<script
type="text/javascript"
src="https://counter.websiteout.com/js/30/0/0/0"
></script>
<div id="leftSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
<!-- MIDDLE !-->
<main>
<h1>Reviews!</h1>
<p>
Obviously, my opinion is important, especially so on the
internet, so I'll be sharing my thoughts on all kinds of
things.
</p>
<p>
Of course, these are not just opinions, they are facts, and
as such, if you disagree, you are wrong. Objectively.
</p>
<p>
Some reviews may be detailed, while others might just have a
brief summary and score.
</p>
<p><strong>Categories</strong></p>
<ul>
<li>
<a href="gamereviews.html">Games</a>
</li>
<li>
<a href="moviereviews.html">Movies</a>
</li>
<li>
<a href="tvreviews.html">TV/Series</a>
</li>
<li>
<a href="bookreviews.html">Books</a>
</li>
<li>
<a href="comicreviews.html">Comics/Manga etc.</a>
</li>
</ul>
<p>
I find the modern 0-10 or 0-5 rating systems to be poorly
formatted, as people seem to think a 7/10 is okay, and that
5/10 is bad. As such, my rating scale will be -5 to 5, with
0 being a neutral score.
</p>
<p>
A neutral score? How horrible, everything must either be
good or bad!!! No.
</p>
<p>
Some things are just, okay, and nothing special but nothing
bad either, and I think it's important to have those in
reviews too, I'd go so far as to say that something I rate a
0, is still worth consuming if one desires to, it's when we
go below 0 that I am already starting to recommend not
toucing it.
</p>
</main>
<!-- right !-->
<aside id="rightSidebar" style="margin-left: 10px">
<div id="rightSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
</div>
<footer id="footer" style="margin-top: 10px"></footer>
</div>
<!-- THIS IS THE CSS !-->
<style>
/* user styles */
/* styles are what change the color and sizes of stuff on your site. */
/* these are variables that are being used in the code
these tended to confuse some people, so I only kept
the images as variables */
:root {
--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
/* colors */
--content: #43256e;
}
/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */
/* this seems like a lot for just one font and I would have to agree
but I wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc. T_T) which is why there are so many!
*/
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
font-style: italic;
font-weight: bold;
}
body {
font-family: "Nunito", sans-serif;
margin: 0;
background-color: #08031a;
/* you can delete the line below if you'd prefer to not use an image */
background-size: 65px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
/* below this line is CSS for the layout */
/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
max-width: 900px;
/* this is the width of your layout! */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
color: #fcc3ff;
font-weight: bold;
/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}
#header {
width: 100%;
background-color: #ffa6da;
/* header color here! */
height: 150px;
/* this is only for a background image! */
/* if you want to put images IN the header,
you can add them directly to the <div id="header"></div> element! */
background-image: var(--header-image);
background-size: 100%;
}
/* navigation section!! */
#navbar {
height: 40px;
background-color: #a0006b;
/* navbar color */
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 10px;
}
/* navigation links*/
#navbar li a {
color: #ed64f5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
/* navigation link when a link is hovered over */
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #a0006b;
width: 200px;
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
/* this is the color of the main content area,
between the sidebars! */
main {
background-color: #bd2289;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092d;
/* background color for footer */
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
/* this centers the footer text */
}
h1,
h2,
h3 {
color: #ed64f5;
}
h1 {
font-size: 25px;
}
strong {
/* this styles bold text */
color: #ed64f5;
}
/* this is just a cool box, it's the darker colored one */
.box {
background-color: #13092d;
border: 1px solid #ed64f5;
padding: 10px;
}
/* CSS for extras */
#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #13092d;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page?
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the
"max-width" value below
*/
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
#navbar ul {
flex-wrap: wrap;
}
}
</style>
<script src="components.js"></script>
</body>

41
reviews.html
View File

@@ -19,24 +19,55 @@
<!-- MIDDLE !-->
<main>
<h1>Reviews!</h1>
<p>
Obviously, my opinion is important, especially so on the
internet, so I'll be sharing my thoughts on all kinds of
things.
</p>
<p>
Of course, these are not just opinions, they are facts, and
as such, if you disagree, you are wrong. Objectively.
</p>
<p>
Some reviews may be detailed, while others might just have a
brief summary and score.
</p>
<p><strong>Categories</strong></p>
<ul>
<li>
<a href="">Games</a>
<a href="gamereviews.html">Games</a>
</li>
<li>
<a href="">Movies</a>
<a href="moviereviews.html">Movies</a>
</li>
<li>
<a href="">TV/Series</a>
<a href="tvreviews.html">TV/Series</a>
</li>
<li>
<a href="">Books</a>
<a href="bookreviews.html">Books</a>
</li>
<li>
<a href="">Comics/Manga etc.</a>
<a href="comicreviews.html">Comics/Manga etc.</a>
</li>
</ul>
<p>
I find the modern 0-10 or 0-5 rating systems to be poorly
formatted, as people seem to think a 7/10 is okay, and that
5/10 is bad. As such, my rating scale will be -5 to 5, with
0 being a neutral score.
</p>
<p>
A neutral score? How horrible, everything must either be
good or bad!!! No.
</p>
<p>
Some things are just, okay, and nothing special but nothing
bad either, and I think it's important to have those in
reviews too, I'd go so far as to say that something I rate a
0, is still worth consuming if one desires to, it's when we
go below 0 that I am already starting to recommend not
toucing it.
</p>
</main>
<!-- right !-->
<aside id="rightSidebar" style="margin-left: 10px">

527
reviews/world-of-warcraft.html Normal file
View File

@@ -0,0 +1,527 @@
<body>
<div id="container">
<div id="header" style="height: 188px"></div>
<div id="headerArea">
<div id="navbar-container"></div>
</div>
<div id="flex">
<!-- left !-->
<aside id="leftSidebar" style="margin-right: 10px">
<script
type="text/javascript"
src="https://counter.websiteout.com/js/30/0/0/0"
></script>
<div id="leftSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
<!-- MIDDLE !-->
<main>
<p><a href="../gamereviews.html">← Back to game reviews</a></p>
<h1>World of Warcraft</h1>
<p><em>Last updated on: March 7, 2026</em></p>
<strong>Overall Rating: </strong>
<p>
<span style="color: lightcoral; font-size: small">
-5 -4 -3 -2 -1
</span>
<span style="color: white; font-size: small">0</span>
<span style="color: lightgreen; font-size: small"
>1 2 3
<span style="color: rgb(0, 255, 0); font-size: large"
>4</span
>
5
</span>
</p>
<h2>Initial Thoughts</h2>
<p>
World of Warcraft is a complex game to review, as it has
many aspects, multiple versions and a long history of
expansions. In this review, there will be thoughts on
multiple versions of the game, as well as different ratings
for each one, above is the overall rating for the game as a
whole, but depending on the expansion, it may differ
greatly. The reviews are also separated into different
sections, depending on the era of the game, to which each
expansion has been categorized based on both how I
personally think they fit, and how Blizzard seems to treat
them. Expansions colored in grey are ones I do not consider
as part of any era, but have been placed to the closest one,
but will not contribute to the rating of the era. Each era
will also have an expansion considered as the "peak" of the
era, and if it was possible to play any expansion from that
era as it was during then, that expansion would be the one I
recommend playing. Things related to expansions, but not
part of the review, will be at the bottom of the page.
</p>
<h2 style="color: white">The Classic Era</h2>
<p>
<em style="font-size: small">
Disclaimer: I did not play these expansions as they came
out, I have only played them through the WoW Classic
releases, and I cannot speak to their original
experience.
</em>
</p>
<strong>Era Rating: </strong>
<p>
<span style="color: lightcoral; font-size: small">
-5 -4 -3 -2 -1
</span>
<span style="color: white; font-size: small">0</span>
<span style="color: lightgreen; font-size: small"
>1 2 3
<span style="color: rgb(0, 255, 0); font-size: large"
>4</span
>
5
</span>
</p>
<p>
The Classic Era, what I consider to be the Warcraft 4
experience, it finishes storylines set in the Warcraft
games, and culminates to it's peak in Wrath of the Lich
King, where the story of Arthas is concluded. This was the
point where the game was at it's most popular, as it was the
most polished and new-player friendly MMO at the time, and
people wanted to finish the Warcraft story. This is the era
in which the game was at it's social peak, as it had more
focus on group content, but was still playable solo for the
most part. For players just getting into the game, Classic
is where I would recommend starting, as the slow leveling
system allows new players to learn the game and experience
the world at a good pace, and have the social interactions
you would expect from an MMO, without having to go out of
your way to find them. I strongly recommend joining a
leveling guild, to both ask for help and make some friends
along the way.
</p>
<h3>Vanilla</h3>
<strong>Rating:</strong>
<p>3</p>
<p>
Some consider Vanilla to be the best version of the game,
and while I do think it has a certain charm, it is not
something I would keep playing after reaching max level,
without knowing that new content was coming, such as TBC.
</p>
<h3>The Burning Crusade</h3>
<p><strong>Rating:</strong></p>
<p>3</p>
<p>
I doubt there are many who consider TBC to be the best
expansion, but I do think everyone agrees on it being a good
expansion, it added a lot of quality of life improvements
and new content to the game. It also continued Illidan's
story, and helped refine WoW as a game, while staying close
to the Vanilla experience.
</p>
<h3>Wrath of the Lich King</h3>
<p><strong>Rating:</strong></p>
<p>5</p>
<p>
I think everyone knew this was going to be the best rated
expansion from the Classic Era, and arguing against it is
not easy. From finishing the story of Arthas, to improving
things like quest loot drop rates, and adding the first hero
class to the game with the Death Knight, WotLK is the
finishing touch to the Warcraft 4 experience, to the Classic
Era, and had a major influence to the game as a whole,
though some of that influence was not for the better, but
I'll talk on that more at the bottom of the page.
</p>
<h2 style="color: white">The Modern Era</h2>
<strong>Era Rating: </strong>
<p>
<span style="color: lightcoral; font-size: small">
-5 -4 -3 -2 -1
</span>
<span style="color: white; font-size: small">0</span>
<span style="color: lightgreen; font-size: small"
>1 2 3 4 5
</span>
</p>
<h3><span style="color: grey">Cataclysm</span></h3>
<p>
Cataclysm feels much more like an update than an expansion,
it overhauled a lot, and while it did bring new content,
when most people hear "Cataclysm", they think about how the
world changed and systems were modernized. It's hard to
review, as it'd be reviewing changes to the core game,
rather than the expansion content. If you must have a number
to represent it, it'd have to be a 2.
</p>
<h3>Mists of Pandaria</h3>
<h3>Warlords of Draenor</h3>
<h3>Legion</h3>
<p><strong>Rating:</strong></p>
<p>5</p>
<p>
Legion was the peak of the Modern Era, it did for Illidan
what WotLK did for Arthas, concluding the story of him and
The Burning Legion, focusing a lot on class fantasy with
order halls and artifact weapons, and was overall a very
satisfying expansion to play, with a lot of great quality
content and quality of life improvements. While some
consider systems it brought in, such as the artifact weapons
which were a grind for people at the top level, to be a bad
thing, I believe for the average player, Legion did nothing
but good. It was the best expansion since WotLK and if one
doesn't consider how WotLK closed the Warcraft story, then
as a way more modern experience of World of Warcraft, Legion
may be considered the best expansion in the game.
</p>
<h3>Battle for Azeroth</h3>
<h2 style="color: white">Current Era</h2>
<strong>Era Rating: </strong>
<p>
<span style="color: lightcoral; font-size: small">
-5 -4 -3 -2 -1
</span>
<span style="color: white; font-size: small">0</span>
<span style="color: lightgreen; font-size: small"
>1
<span style="color: rgb(0, 255, 0); font-size: large"
>2</span
>
3 4 5
</span>
</p>
<h3><span style="color: grey">Shadowlands</span></h3>
<p>
Shadowlands, considered by many as the worst expansion, also
didn't feel like it fit into the Modern Era, it also isn't
treated as part of the Current Era by Blizzard, so it's not
considered as part of either. It is story-wise a bad
expansion, as Jailer came out of nowhere, and a lot of
characters felt like they did not match their previous
iterations, but gameplay-wise and content-wise, such as
cosmetics, and zones, it wasn't bad and shouldn't be blindly
hated, but rather criticized for its major flaws in story.
I'd give it a -5 for people who are interested in the story
of WoW, a 0 for people who aren't as caught up with the
story and don't know about why certain things about it are
bad, and 2 for just gameplay and content.
</p>
<h3>Dragonflight</h3>
<p><strong>Rating:</strong></p>
<p>2</p>
<p>
Dragonflight, a return to form for Wow, it definitely was a
major improvement after Shadowlands, but it felt like a safe
expansion right after the major fail, where it might have
benefited from taking more of a risk. It felt like an
expansion on the level of BfA, but right after Shadowlands,
whereas BfA was after Legion, which was an incredible
expansion, so while it was an improvement, it didn't feel
like WoW had returned to what it should be at, though
objectively, it did.
</p>
<h3>The War Within</h3>
<p><strong>Rating:</strong></p>
<p>3</p>
<p>
The beginning of the Worldsoul Saga, The War Within is a
good expansion, the story is good, zones are nice and
gameplay is solid. It's an improvement to Dragonflight, but
as it's just the start of a larger story, it's doing a lot
of the foundational building, which doesn't make it as
exciting as previous one-expansion stories, but the buildup
it has is great and gives promise to WoW returning to its
former glory.
</p>
<h3>Midnight</h3>
<p><strong>Rating:</strong></p>
<p>3</p>
<p>
The current expansion at the time of writing, Midnight just
launched a few days ago. Dungeons are out, but most of the
content is yet to come, so I can't give a full review, but
so far, the leveling campaigns were fun, the reworks classes
got in order to fit their fantasies better are amazing, and
overall, Midnight seems like it will improve upon what The
War Within started.
</p>
</main>
<!-- right !-->
<aside id="rightSidebar" style="margin-left: 10px">
<div id="rightSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
</div>
<footer id="footer" style="margin-top: 10px"></footer>
</div>
<!-- THIS IS THE CSS !-->
<style>
/* user styles */
/* styles are what change the color and sizes of stuff on your site. */
/* these are variables that are being used in the code
these tended to confuse some people, so I only kept
the images as variables */
:root {
--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
/* colors */
--content: #43256e;
}
/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */
/* this seems like a lot for just one font and I would have to agree
but I wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc. T_T) which is why there are so many!
*/
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
font-style: italic;
font-weight: bold;
}
body {
font-family: "Nunito", sans-serif;
margin: 0;
background-color: #08031a;
/* you can delete the line below if you'd prefer to not use an image */
background-size: 65px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
/* below this line is CSS for the layout */
/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
max-width: 900px;
/* this is the width of your layout! */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
color: #fcc3ff;
font-weight: bold;
/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}
#header {
width: 100%;
background-color: #ffa6da;
/* header color here! */
height: 150px;
/* this is only for a background image! */
/* if you want to put images IN the header,
you can add them directly to the <div id="header"></div> element! */
background-image: var(--header-image);
background-size: 100%;
}
/* navigation section!! */
#navbar {
height: 40px;
background-color: #a0006b;
/* navbar color */
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 10px;
}
/* navigation links*/
#navbar li a {
color: #ed64f5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
/* navigation link when a link is hovered over */
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #a0006b;
width: 200px;
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
/* this is the color of the main content area,
between the sidebars! */
main {
background-color: #bd2289;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092d;
/* background color for footer */
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
/* this centers the footer text */
}
h1,
h2,
h3 {
color: #ed64f5;
}
p {
font-size: 15px;
color: #fadeff;
}
h1 {
font-size: 25px;
}
strong {
/* this styles bold text */
color: #ed64f5;
}
/* this is just a cool box, it's the darker colored one */
.box {
background-color: #13092d;
border: 1px solid #ed64f5;
padding: 10px;
}
/* CSS for extras */
#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #13092d;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page?
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the
"max-width" value below
*/
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
#navbar ul {
flex-wrap: wrap;
}
}
</style>
<script src="../components.js"></script>
</body>

345
seriesreviews.html Normal file
View File

@@ -0,0 +1,345 @@
<body>
<div id="container">
<div id="header" style="height: 188px"></div>
<div id="headerArea">
<div id="navbar-container"></div>
</div>
<div id="flex">
<!-- left !-->
<aside id="leftSidebar" style="margin-right: 10px">
<script
type="text/javascript"
src="https://counter.websiteout.com/js/30/0/0/0"
></script>
<div id="leftSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
<!-- MIDDLE !-->
<main>
<h1>Reviews!</h1>
<p>
Obviously, my opinion is important, especially so on the
internet, so I'll be sharing my thoughts on all kinds of
things.
</p>
<p>
Of course, these are not just opinions, they are facts, and
as such, if you disagree, you are wrong. Objectively.
</p>
<p>
Some reviews may be detailed, while others might just have a
brief summary and score.
</p>
<p><strong>Categories</strong></p>
<ul>
<li>
<a href="gamereviews.html">Games</a>
</li>
<li>
<a href="moviereviews.html">Movies</a>
</li>
<li>
<a href="tvreviews.html">TV/Series</a>
</li>
<li>
<a href="bookreviews.html">Books</a>
</li>
<li>
<a href="comicreviews.html">Comics/Manga etc.</a>
</li>
</ul>
<p>
I find the modern 0-10 or 0-5 rating systems to be poorly
formatted, as people seem to think a 7/10 is okay, and that
5/10 is bad. As such, my rating scale will be -5 to 5, with
0 being a neutral score.
</p>
<p>
A neutral score? How horrible, everything must either be
good or bad!!! No.
</p>
<p>
Some things are just, okay, and nothing special but nothing
bad either, and I think it's important to have those in
reviews too, I'd go so far as to say that something I rate a
0, is still worth consuming if one desires to, it's when we
go below 0 that I am already starting to recommend not
toucing it.
</p>
</main>
<!-- right !-->
<aside id="rightSidebar" style="margin-left: 10px">
<div id="rightSidebarPlaceholder">
<p>This content failed to load, try enabling javascript</p>
</div>
</aside>
</div>
<footer id="footer" style="margin-top: 10px"></footer>
</div>
<!-- THIS IS THE CSS !-->
<style>
/* user styles */
/* styles are what change the color and sizes of stuff on your site. */
/* these are variables that are being used in the code
these tended to confuse some people, so I only kept
the images as variables */
:root {
--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
/* colors */
--content: #43256e;
}
/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */
/* this seems like a lot for just one font and I would have to agree
but I wanted to include an example of how to include a custom font.
If you download a font file you can upload it onto your Neocities
and then link it! Many fonts have separate files for each style
(bold, italic, etc. T_T) which is why there are so many!
*/
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: Nunito;
src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
font-style: italic;
font-weight: bold;
}
body {
font-family: "Nunito", sans-serif;
margin: 0;
background-color: #08031a;
/* you can delete the line below if you'd prefer to not use an image */
background-size: 65px;
color: #fceaff;
background-image: var(--body-bg-image);
}
* {
box-sizing: border-box;
}
/* below this line is CSS for the layout */
/* this is a CSS comment
to uncomment a line of CSS, remove the * and the /
before and after the text */
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
max-width: 900px;
/* this is the width of your layout! */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
color: #fcc3ff;
font-weight: bold;
/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}
#header {
width: 100%;
background-color: #ffa6da;
/* header color here! */
height: 150px;
/* this is only for a background image! */
/* if you want to put images IN the header,
you can add them directly to the <div id="header"></div> element! */
background-image: var(--header-image);
background-size: 100%;
}
/* navigation section!! */
#navbar {
height: 40px;
background-color: #a0006b;
/* navbar color */
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 10px;
}
/* navigation links*/
#navbar li a {
color: #ed64f5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
/* navigation link when a link is hovered over */
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #a0006b;
width: 200px;
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
/* this is the color of the main content area,
between the sidebars! */
main {
background-color: #bd2289;
flex: 1;
padding: 20px;
order: 2;
}
/* what's this "order" stuff about??
allow me to explain!
if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
footer {
background-color: #13092d;
/* background color for footer */
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
/* this centers the footer text */
}
h1,
h2,
h3 {
color: #ed64f5;
}
h1 {
font-size: 25px;
}
strong {
/* this styles bold text */
color: #ed64f5;
}
/* this is just a cool box, it's the darker colored one */
.box {
background-color: #13092d;
border: 1px solid #ed64f5;
padding: 10px;
}
/* CSS for extras */
#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #13092d;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page?
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the
"max-width" value below
*/
@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
main {
order: 1;
}
#leftSidebar {
order: 2;
}
#rightSidebar {
order: 3;
}
#navbar ul {
flex-wrap: wrap;
}
}
</style>
<script src="components.js"></script>
</body>