<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
- <link href="style.css" rel="stylesheet" type="text/css" media="all">
+ <link href="styles.css" rel="stylesheet" type="text/css" media="all">
<link href="favicon.png" rel="icon" type="image/png" />
</head>
<body>
- <h1>Miso's Neocities Page!</h1>
- <p>
- Herein lies my personal Neocities page, I guess... Have fun!
- </p>
+ <div class="hgrid">
+ <nav>
+ <ul class="nav-list">
+ <li><a href="index.html">Home!</a></li>
+ </ul>
+ </nav>
+ <div class="vgrid main-area">
+ <h1>Miso's Neocities Page!</h1>
+ <main>
+ <p>
+ Hello, I'm misomosispi! Don't mind me!
+ Just learning some HTML and CSS and
+ screwing around with that!
+ </p>
+ <p>
+ I want to keep with the Neocities tradition
+ by doing cute, small blog-style posts like
+ shrines, portfolios, and stuff like that!
+ </p>
+ <p>
+ And I really wanna improve styling...
+ </p>
+ </main>
+ </div>
+ </div>
</body>
</html>
color: black;
font-family: Verdana;
}
+.nav-list {
+ list-style-type: none;
+}
+.nav-list li {
+ background: url(ItemBackground.png);
+ padding: 4px;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ text-align: center;
+}
+.nav-list li a {
+ color: white;
+ text-decoration: none;
+}
+.hgrid {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.vgrid {
+ display: auto;
+}
+.main-area {
+ background: url(ItemBackground.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ aspect-ratio: 1 / 1;
+ padding: 5%;
+ color: white;
+}