saudade/wordfire/wordfire.html
2023-06-17 13:12:52 -07:00

292 lines
6.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- from source -->
<meta name="keywords" content="PETZ 4&amp;5 Playscenz unedited versions">
<title>WORDFIRE'S</title>
<!-- -->
<!-- style -->
<link rel="stylesheet" href="wordfire.css">
<style>
#index {
--light-blue: #06c;
--purple: #909;
--blue: #039;
--red: #c00;
--dark-blue: #336;
--muted-purple: #93c;
--bright-purple: #c0f;
--bright-dark-blue: #009;
--neutral-blue: #ccf;
--bright-dark-purple: #609;
--cream: #ffc;
--pink: #f69;
--very-dark-purple: #306;
}
a { color: var(--light-blue); }
a:active { color: var(--purple); }
a:visited { color: var(--light-blue); }
.blue { color: var(--blue) !important; }
.center { text-align: center; }
.red { color: var(--red) !important; }
.purple { color: var(--purple) !important; }
/* fuck table layouts thanks!!! */
#top-left {
float: left;
width: 149px;
height: 124px;
background-color: var(--dark-blue);
border: 2px solid var(--muted-purple);
}
#header {
float: left;
width: 600px;
height: 124px;
padding: 0;
background-image: url(img/clouds.jpg);
border: 2px solid var(--muted-purple);
border-left: none;
text-align: center;
}
#nav {
clear: both;
float: left;
width: 149px;
height: 1361px;
background-color: var(--dark-blue);
border: 2px solid var(--muted-purple);
border-top: none;
}
#content {
float: left;
width: 592px;
height: 1353px;
padding: 4px;
border: 2px solid var(--muted-purple);
border-left: none;
border-top: none;
}
/* header style */
#header h1 {
font-size: 48px;
font-weight: 700;
color: var(--bright-purple);
font-style: italic;
text-decoration: underline;
margin: 0;
padding: 0;
}
/* nav style */
#nav {
text-align: center;
}
#nav .spacer {
height: 28px;
}
.nav-current, .nav-btn {
display: flex;
flex-direction: column;
justify-content: center;
width: 145px;
height: 26px;
margin-bottom: 2px;
padding: 3px;
text-decoration: none;
color: white;
font-weight: 700;
}
.tall { height: 42px; }
.nav-current {
background-color: var(--bright-dark-blue);
}
.nav-btn {
background-color: var(--purple);
}
.nav-current:hover, .nav-btn:hover {
background-color: var(--neutral-blue);
text-decoration: underline;
}
.nav-current:visited, .nav-btn:visited {
color: white;
}
/* content style */
#content h2 { font-size: 24px; font-style: italic; }
/* seriously fuck tables */
#content #canvas-border {
display: table;
margin: 0 auto;
width: 160px;
height: 180px;
background-image: url(img/frame_dkblue_canvas.gif);
}
#content #canvas-border img { margin: 15px; }
/* has no one heard of the border attribute ????????????? */
#hellbox {
border: 2px solid var(--bright-dark-purple);
width: 580px;
height: 174px;
margin: 0 auto;
background-color: var(--cream);
}
#hellbox2 {
border: 2px ridge var(--pink);
width: 567px;
height: 160px;
padding: 5px;
color: var(--very-dark-purple);
font-size: 24px;
font-weight: 900;
font-family: 'Times New Roman', Times, serif;
}
#hellbox2 img {
padding-top: 15px;
}
#wood-border {
display: table;
margin: 20px auto;
width: 330px;
height: 255px;
background-image: url(img/frame_wood2.gif);
}
#wood-border img { margin: 15px; }
.purple-line {
height: 2px;
width: 285px;
background-color: var(--muted-purple);
float: left;
margin: 5px;
}
#bravenet { margin: 40px 30px; clear: both; }
</style>
<!-- archive menu -->
<script src="/menu.js?@root" type="module"></script>
<!-- polyfills -->
<script src="/polyfills.js?@root" type="module"></script>
</head>
<body id="index">
<div id="top-left"></div>
<div id="header">
<h1>petz**<br>
WORDFIRE'S**petz</h1>
</div>
<div id="nav">
<div class="spacer"></div>
<a href="/" class="nav-current">Home</a>
<a href="/play1/" class="nav-btn">PETZ PLAYSCENZ</a>
<a href="/play2/" class="nav-btn">MORE PLAYSCENZ</a>
<a href="/play3/" class="nav-btn tall">AND>>>MORE PETZ PLAYSCENZ</a>
<a href="/possums/" class="nav-btn">'POSSUMS</a>
<a href="/play4/" class="nav-btn tall">COMPLETED PLAYSCENZ</a>
<a href="/sound/" class="nav-btn">Sound Files</a>
<a href="/precious/" class="nav-btn">PRECIOUS ONEZ</a>
</div>
<div id="content">
<img src="img/fire_line_2.gif" alt="fire_line_2.gif" width="560" style="margin: 0
auto; display: table;">
<h2 class="red">
FOR MORE PETZ BACKGROUNDS, SOUND FILES AND PLAYSCENZ IN THE FUTURE VISIT><a class="red"
href="https://web.archive.org/web/20050912012413/http://home.earthlink.net/~lindajoyce/">http://home.earthlink.net/~lindajoyce/</a>
oz yellow brick road and music available there now!!!!
</h2>
<p class="red small arial center">
<b><i>EVEN PETZ PRAISE HIM</i></b>
<div id="canvas-border" style="margin-top: -10px;">
<img src="img/tigertheangel.jpg" width="130">
</div>
</p>
<div id="hellbox">
<div id="hellbox2">
<i>THIS IS A PETZ 4&5 SITE**ALL ORIGINAL UNEDITED PLAYSCENZ BACKGROUNDS JUST
WAITING FOR YOU**wordfire**</i><br>
<img src="img/vote1.gif">
</div>
</div>
<div id="wood-border">
<img src="img/pupkit03.jpg" alt="pupkit03.jpg" width="300">
</div>
<p style="font-style: italic; font-weight: 900;" class="purple arial">
<span class="big blue">KUDOS:</span>THANK YOU CAROLYN,JUDY, PEEPS AT APKC FORUMS& MINIBYTE
</p>
<p>.</p>
<p>&nbsp;</p>
<div class="purple-line"></div>
<div class="purple-line"></div>
<div id="bravenet">
<img src="img/guestbook.gif" title="Free Guestbook from Bravenet"
alt="Free Guestbook from Bravenet">
<a href="https://www.bravenet.com/">
<img src="img/bn-guestbook.gif" title="Free Guestbook from Bravenet"
alt="Free Guestbook from Bravenet">
</a>
</div>
<div id="god" class="small arial">
<b>The Life,Truth and Power Of GOD</b><br>
<img src="img/animation.gif" width="130" alt="animation.gif"><br>
<b>WORDFIRE</b><br>
<br>
<b>Lots Of KEWL Stuff Here</b><br>
<a href="http://www.pineconecattery.com/" target="tlx_new"><img
src="img/judysbanner.jpg" alt="judysbanner.jpg" width="130"></a><br>
<b>Edited Versions Also Available Of These Playscenz</b>
</div>
</div>
</body>
</html>