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%;

}

}