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