Template 3
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=“image”><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=“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
“background-attachment: fixed” keeps the background from scrolling.
“grid-template-rows” have been measured to fit the design; change at own risk.
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-attachment: fixed;
color: #8542AC;
}
.content {
display: grid;
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
background-color: #F683B4;
border: solid #F683B4;
border-width: 2em 5px 5px 5px;
border-radius: 5%;
grid-template-columns: 65% 35%;
grid-template-rows: 125px 125px 150px 150px;
grid-template-areas:
“about image”
“changeLog image”
“buttons guest”
“links guest”;
}
/*Menu*/
.menu {
width: 100%;
height: 3em;
top: 0;
position: fixed;
background-color: #F683B4;
display: flex;
justify-content: flex-end;
flex-direction: row !important;
}
.menu a {
color: white;
text-decoration: none;
font-weight: bold;
margin: 1em;
}
.menu a:hover {
color: #8542AC;
}
.menu a:active {
color: white;
}
/*image*/
.image {
grid-area: image;
}
.image img {
width: 100%;
height: 250px;
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) {
body {
font-size: 14px;
}
.content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;
gap: 2em;
width: 80%;
height: unset;
margin: 1em 5%;
top: 5em;
left: unset;
transform: unset;
}
.image {
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%;
}
}