Template 2
index.html
<html>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Website Name</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=“content”>
<div class=“banner”><img src=“MY-WEBSITE/bannerimage.png”></div>
<div class=“menu”></div>
<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; z-index: 1;”>
</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=“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
Customise heights in “grid-template-rows” to fit what works for you.
You can move the sections in “grid-template-areas” to suit your needs, but do so carefully.
html,
body {
height: 100%;
margin: 0;
}
body {
background-image: url(“MY-WEBSITE/bg.png”);
background-color: floralwhite;
background-repeat: repeat;
color: #8542AC;
}
.content {
margin: 0 10%;
background-color: white;
display: grid;
grid-template-columns: 5% 10% 20% 65%;
grid-template-rows: 240px 15em 15em 15em 15em;
grid-template-areas:
“banner banner banner banner”
“buffer menu about changeLog”
“buffer menu about guest”
“buffer menu about buttons”
“buffer menu links awards”;
}
/*Menu*/
.menu {
grid-area: menu;
background-color: #F683B4;
text-align: center;
padding: 2em;
}
.menu a {
color: white;
text-decoration: none;
font-weight: bold;
margin: 1em;
}
.menu a:hover {
color: #8542AC;
}
.menu a:active {
color: white;
}
/*Banner*/
.banner {
grid-area: banner;
}
.banner img {
width: 100%;
height: 240px;
object-fit: cover;
object-position: center;
}
/*About*/
.about {
grid-area: about;
padding: 0.5rem;
overflow:auto;
background-color: white;
}
/*Changelog*/
.changeLog {
grid-area: changeLog;
padding: 0.5rem;
overflow:auto;
background-color: white;
}
/*Promo Box*/
.promo {
grid-area: promo;
padding: 0.5rem;
overflow:auto;
background-color: white;
}
/*Buttons Box*/
.buttons {
grid-area: buttons;
padding: 0.5rem;
overflow:auto;
background-color: white;
}
.buttons img {
display: inline-block;
margin: 0 auto;
}
/*Guestbook*/
.guestBook {
grid-area: guest;
padding: 0.5rem;
overflow:auto;
background-color: white;
}
/*Awards*/
.awards {
grid-area: awards;
padding: 0.5rem;
overflow:auto;
background-color: white;
}
.awards img {
display:block;
max-width: 90%;
padding: 0.5em;
margin: 0 auto;
}
/*Ext Links*/
.extLinks {
grid-area: links;
padding: 0.5rem;
overflow:auto;
background-color: white;
line-height: 1em;
}
h2 {
color: #F683B4;
text-align: center;
}
@media only screen and (max-width: 1410px) {
.content {
float: right;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: space-around;
width: 80%;
margin: 1em 5%;
}
.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;
padding: 5px;
}
.menu a{
padding: 1em;
}
.about, .changeLog, .promo, .buttons, .guestBook, .awards, .extLinks {
flex: 0 1 100%;
}