Template 1
index.html
<html>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Website Name</span</title>
<link href=“MY-WEBSITE/style.css” rel=“stylesheet” type=“text/css” media=“all”>
<link href=“MY-WEBSITE/feed.rss” rel=“alternate” type=“application/rss+xml” title=“What’s new on MY-WEBSITE” />
</head>
<body>
<div class=“menu”></div>
<div class=“banner”><img src=“MY-WEBSITE/bannerimage.png”></div>
<div class=“content”>
<div class=“about”>
<h2>About</h2>
<p>Write your about here!</p>
</div>
<div class=“changeLog”>
<h2>Change Log</h2>
<a href=“MY-WEBSITE/feed.rss”>
<img src=“MY-WEBSITE/rss.png” style=“width: 25px; right:5; position: absolute;z-index: 1;margin: 1em”>
</a>
<p>June 2023</p>
<ul>
<li>Put changes here</li>
<li>You might chose to use a table for this</li>
<li>But you don’t have to</li>
</ul>
</div>
<div class=“guestBook”>
<h2>Guestbook</h2>
<p>Put whichever guestbook you picked here!</p>
</div>
<div class=“buttons”>
<h2>Buttons/Webrings/etc</h2>
<p>Lorem Ipsum Whatever</p>
</div>
<div class=“promo”>
<h2>Promos!</h2>
<p>Buy a copy of <a href=“https://marinehaddock.itch.io/kill-the-you-that-cringes”>Kill The You That Cringes</a>!</p>
<p>Check out <a href=“https://tapas.io/series/Beyond-The-End/info”>Beyond the End</a>!</p>
</div>
<div class=“awards”>
<h2>Trophy Cabinet</h2>
<p>Show off your achievements or quiz results etc.</p>
</div>
<div class=“extLinks”>
<h2>Socials</h2>
<p>List wherever else you want people to find you</p>
</div>
</div>
<script src=“MY-WEBSITE/menu.js” defer></script>
</body>
</html>
style.css
Feel free to change colours as you please.
“background-image” can be removed if you don’t have a background image.
“background-repeat: repeat” repeats the image.
html,
body {
height: 100%;
margin: 0;
}
body {
background-image: url(“MY-WEBSITE/bg.png”);
background-color: floralwhite;
background-repeat: repeat;
color: #8542AC;
}
/*Container for responsible flex*/
.content {
float: right;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;
gap: 2em;
width: 80%;
margin: 1em 5%;
}
/*Menu*/
.menu {
width: 10%;
height: 100vh;
top: 0;
position: fixed;
background-color: #F683B4;
display: flex;
flex-direction: column !important;
}
.menu a {
color: white;
text-decoration: none;
font-weight: bold;
margin: 1em;
}
.menu a:hover {
color: #8542AC;
}
.menu a:active {
color: white;
}
/*Banner*/
.banner {
width: 100%;
float: right;
}
.banner img {
width: 100%;
height: 120px;
object-fit: cover;
object-position: center;
}
/*About*/
.about {
order: 1;
flex: 0 1 47%;
height: 25em;
padding: 0.5rem;
overflow:auto;
background-color: white;
}
/*Changelog*/
.changeLog {
order: 2;
flex: 0 1 47%;
padding: 0.5rem;
height: 25em;
overflow:auto;
background-color: white;
position: relative;
}
/*Promo Box*/
.promo {
order: 5;
flex: 0 1 30%;
padding: 0.5rem;
height: 25em;
overflow:auto;
background-color: white;
}
/*Buttons Box*/
.buttons {
order: 4;
flex: 0 1 30%;
padding: 0.5rem;
height: 25em;
overflow:auto;
background-color: white;
}
.buttons img {
display: inline-block;
margin: 0 auto;
}
/*Guestbook*/
.guestBook {
order: 3;
flex: 0 1 30%;
padding: 0.5rem;
height: 25em;
overflow:auto;
background-color: white;
}
/*Awards*/
.awards {
order: 6;
flex: 0 1 47%;
padding: 0.5rem;
height: 25em;
overflow:auto;
background-color: white;
}
.awards img {
display:block;
max-width: 90%;
padding: 0.5em;
margin: 0 auto;
}
/*Ext Links*/
.extLinks {
order: 7;
flex: 0 1 47%;
padding: 0.5rem;
height: 25em;
overflow:auto;
background-color: white;
line-height: 1em;
}
h2 {
color: #F683B4;
text-align: center;
}
@media only screen and (max-width: 1410px) {
.menu {
min-width: 120px;
}
.about, .changeLog, .promo, buttons, guestBook, awards, .extLinks{
flex: 0 1 45%;
}
}
@media only screen and (max-width: 1050px) {
.menu {
min-width: 120px;
}
}
@media screen and (max-width: 812px) {
body {
font-size: 14px;
}
.content {
float: none;
width: auto;
padding: 1em;
}
.banner {
width: 100%;
}
.menu{
flex-flow: row wrap!important;
width: 100%;
height: auto;
position: relative;
background-color: #F683B4;
}
.menu a{
padding: 1em;
}
.about, .changeLog, .promo, .buttons, .guestBook, .awards, .extLinks {
flex: 0 1 100%;
}