dennis/Website-Templates
1
0
Fork 0
mirror of https://github.com/dawidolko/Website-Templates.git synced 2026-02-04 01:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Website templates

Browse Source
This commit is contained in:
Dawid Olko
2023-07-26 19:33:39 +02:00
commit 0d2d73a034
10339 changed files with 2002333 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
drifting/clean.html Normal file
View File

@@ -0,0 +1,121 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="pat" />
<meta name="keywords" content="site, keywords, here" />
<meta name="description" content="site description here" />
<title>drifting v1.0</title>
<link rel="stylesheet" type="text/css" href="css/drifting_screen.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="css/drifting_print.css" media="print" />
</head>
<body>
<!-- Layout container starts -->
<div id="layoutBox">
<!-- HEADER: controls the header layout, images, title and subTitle. -->
<div id="headerBox">
<div id="headerLeftBox">
<span class="title">
drifting v1.0
</span>
<br />
<span class="subTitle">
because shovelling hurts
</span>
</div>
<div id="headerRightBox">
&nbsp;
</div>
</div>
<!-- MENU: include as many submenus as you want. Menu groups should begin with a
<h1> and then all menu links need to be defined in a <div class="menuGroup">.
The <span class="noDisplay"> | </span> after each link only needs to be included
if this site will be loaded in a text only browser -->
<div id="menuBox">
<h1>
menu 1
</h1>
<div class="menuGroup">
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 1" /> item 1</a><span class="noDisplay"> | </span>
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 2" /> item 2</a><span class="noDisplay"> | </span>
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 3" /> item 3</a><span class="noDisplay"> | </span>
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 4" /> item 4</a><span class="noDisplay"> | </span>
</div>
<h1>
menu 2
</h1>
<div class="menuGroup">
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 1" /> item 1</a><span class="noDisplay"> | </span>
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 2" /> item 2</a><span class="noDisplay"> | </span>
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 3" /> item 3</a><span class="noDisplay"> | </span>
<a href="clean.html" title="menu item"><img src="images/menu_icon.gif" alt="menu item 4" /> item 4</a><span class="noDisplay"> | </span>
</div>
<!-- NEWS: define news chunks in <p> and use <h2> for the date/title -->
<h1>
news
</h1>
<div class="newsGroup">
<h2>news heading</h2>
<p>
news item
</p>
</div>
<!-- MENU FOOTER: could include a site search field here -->
<div class="menuFooter">
&nbsp;
</div>
</div>
<!-- MAIN CONTENT : to add new headings, include a <h1> and then as many <p> blocks
as you'd like. <h2> will create subheadings. To finish a section, include a
<br/> to clearly define it. -->
<div id="mainContent">
<h1>section 1</h1>
<p>
Content here.
</p>
<h1>section 2</h1>
<h2>sub section 1</h2>
<p>
More content here.
</p>
<h2>seb section 2</h2>
<p>
Even more content here.
</p>
<br />
<!-- FOOTER: whatever you want in here - maybe a last updated or breadcrumb? -->
<div class="footer">
valid <a href="http://validator.w3.org/check/referer" title="validate markup">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer" title="validate CSS">CSS</a> <br />
last updated / copyright here | design by <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact">snop</a>
</div>
</div>
<!-- BUG FIX: This corrects another IE rendering bug.... You notice it only when the menu container length is
greater than the main content container. Without this, when an a:hover is triggered in the main container,
IE reflows the page and cuts off the menu at the bottom of the main container. -->
<div class="spacer">
</div>
</div>
<!-- Layout container ends -->
</body>
</html>

182
drifting/css/drifting_print.css Normal file
View File

@@ -0,0 +1,182 @@
/* -- ELEMENT STYLES -- */
body {
font-family: arial, helvetica, arial, sans-serif;
font-size: 80%;
color: #234163;
background-color: #FFFFFF;
margin: 2px;
}
a {
color: #5A799D;
}
a:hover {
text-decoration:none;
background-color: #EEEEEE;
}
acronym {
cursor: help;
border: 0px;
}
img {
border: 0px;
}
ul {
list-style-image: url(../images/bullet.gif);
}
/* -- MAIN CONTAINER -- */
#layoutBox {
float: left;
border: 1px solid #5A799D;
background-color: #FFFFFF;
padding: 10px;
}
/* -- HEADER CONTAINER -- */
#headerBox {
height: 4em;
border: 1px solid #5A799D;
background: #7897BB url(../images/hdr_bg.jpg) repeat-x bottom;
}
#headerLeftBox {
float: left;
width: 40%;
height:4em;
background: url(../images/hdr_left.jpg) no-repeat bottom left;
text-align: right;
}
#headerRightBox {
float: right;
width: 40%;
height: 4em;
background: url(../images/hdr_right.jpg) no-repeat bottom right;
}
/* -- HEADER STYLES -- */
.title {
font-family: times new roman, helvetica, arial, sans-serif;
font-size: 280%;
font-weight: bold;
font-style: italic;
color: #FFFFFF;
line-height: 0.9em;
}
.subTitle {
font-size: 90%;
color: #5A799D;
}
/* -- MENU CONTAINER (don't display for print) -- */
#menuBox {
display: none;
}
/* -- CONTENT CONTAINER -- */
#mainContent {
margin-top: 10px;
}
#mainContent br {
margin-top: 10px;
}
#mainContent p {
padding: 0px 5px 2px 10px;
}
.spacer{
height: 1px;
clear: both;
}
/* -- HEADER/FOOTER STYLES (menuBox & mainContent) -- */
#mainContent h1, #menuBox h1, .menuFooter, .footer {
font-family: times new roman, helvetica, arial, sans-serif;
font-size: 125%;
font-weight: bold;
letter-spacing: 0.05em;
color: #5A799D;
background: #EEF3FA url(../images/hdr_icon.gif) no-repeat bottom right;
border: 1px solid #5A799D;
display: block;
padding: 2px 2px 2px 10px;
margin: 0 0 10px 0;
}
#mainContent h1, .footer {
border-right: 1px solid #5A799D;
}
#menuBox h1 {
border-left: 1px solid #5A799D;
}
#mainContent h2 {
font-size: 80%;
font-weight: bold;
background-color: #EEEEEE;
display: block;
padding: 0px 0px 0px 5px;
margin-bottom: 0px;
}
#mainContent h2 {
margin-left: 10px;
}
#mainContent h1, #mainContent h2, .footer {
clear: right; /* Set to both if you don't care about Internet Explorer */
}
.footer {
font-family: arial, helvetica, arial, sans-serif;
font-size: 80%;
font-weight: normal;
}
.footer a:hover {
background-color: #D6E1F1;
}
.footer br {
margin: -20px;
}
/* -- IMAGE STYLES -- */
.imgRight, .imgLeft {
padding: 10px 5px 5px 10px;
border: 1px solid #FFFFFF;
}
.imgRight {
float: right;
}
/* Below style will not work correctly unless clear = "both" on the
#mainContent h1, #mainContent h2, .footer class */
.imgLeft {
float: left;
}

234
drifting/css/drifting_screen.css Normal file
View File

@@ -0,0 +1,234 @@
/* -- ELEMENT STYLES -- */
body {
font-family: arial, helvetica, arial, sans-serif;
font-size: 80%;
color: #234163;
background-color: #EEF3FA;
margin: 30px;
}
a {
color: #5A799D;
}
a:hover {
text-decoration:none;
background-color: #EEEEEE;
}
acronym {
cursor: help;
border-bottom: 1px dashed #AAAAAA;
}
img {
border: 0px;
}
ul {
list-style-image: url(../images/bullet.gif);
}
/* -- MAIN CONTAINER -- */
#layoutBox {
float: left;
border: 1px solid #5A799D;
background-color: #FFFFFF;
padding: 10px;
}
/* -- HEADER CONTAINER -- */
#headerBox {
height: 4em;
border: 1px solid #5A799D;
background: #7897BB url(../images/hdr_bg.jpg) repeat-x bottom;
}
#headerLeftBox {
float: left;
width: 40%;
height:4em;
background: url(../images/hdr_left.jpg) no-repeat bottom left;
text-align: right;
}
#headerRightBox {
float: right;
width: 40%;
height: 4em;
background: url(../images/hdr_right.jpg) no-repeat bottom right;
}
/* -- HEADER STYLES -- */
.title {
font-family: times new roman, helvetica, arial, sans-serif;
font-size: 280%;
font-weight: bold;
font-style: italic;
color: #FFFFFF;
line-height: 0.9em;
}
.subTitle {
font-size: 90%;
color: #5A799D;
}
/* -- MENU CONTAINER -- */
#menuBox {
float: left;
width: 15em;
margin: 10px 0 0 0;
border-right: 1px solid #5A799D;
text-align: left;
}
#menuBox p {
margin: 5px 0 20px 2px;
}
#menuBox br {
margin-top: 30px;
}
/* -- CONTENT CONTAINER -- */
#mainContent {
margin: 10px 0 0 16em;
border-left: 1px solid #5A799D;
}
#mainContent br {
margin-top: 10px;
}
#mainContent p {
padding: 0px 5px 2px 10px;
}
.spacer {
height: 1px;
clear: both;
}
/* Used by items meant for text only rendering */
.noDisplay {
display: none;
}
/* -- HEADER/FOOTER STYLES (menuBox & mainContent) -- */
#mainContent h1, #menuBox h1, .menuFooter, .footer {
font-family: times new roman, helvetica, arial, sans-serif;
font-size: 125%;
font-weight: bold;
letter-spacing: 0.05em;
color: #5A799D;
background: #EEF3FA url(../images/hdr_icon.gif) no-repeat bottom right;
border-top: 1px solid #5A799D;
border-bottom: 1px solid #5A799D;
display: block;
padding: 2px 2px 2px 10px;
margin: 0 0 10px 0;
}
#mainContent h1, .footer {
border-right: 1px solid #5A799D;
}
.menuFooter, .footer {
margin-bottom: 0px;
}
#menuBox h1, .menuFooter {
border-left: 1px solid #5A799D;
}
#mainContent h2, #menuBox h2 {
font-size: 80%;
font-weight: bold;
background-color: #EEEEEE;
display: block;
padding: 0px 0px 0px 5px;
margin-bottom: 0px;
}
#mainContent h2 {
margin-left: 10px;
}
#mainContent h1, #mainContent h2, .footer {
clear: right; /* Set to both if you don't care about Internet Explorer */
}
.footer {
font-family: arial, helvetica, arial, sans-serif;
font-size: 80%;
font-weight: normal;
border-right: 1px solid #5A799D;
border-left: 0px;
}
.footer a:hover {
background-color: #D6E1F1;
}
.footer br {
margin: -20px;
}
/* -- MENU/NEWS ITEM STYLES -- */
.newsGroup {
padding: 0px 5px 0px 5px;
margin-bottom: 30px;
}
.menuGroup {
padding: 5px 0 5px 0;
margin-bottom: 30px;
}
.menuGroup a {
color: #35567C;
text-indent: 3em;
text-decoration: none;
margin-bottom: 2px;
display: block;
}
.menuGroup a:hover {
color: #FFFFFF;
background-color: #5A799D;
}
/* -- IMAGE STYLES -- */
.imgRight, .imgLeft {
padding: 10px 5px 5px 10px;
border: 1px solid #FFFFFF;
}
.imgRight {
float: right;
}
/* Below style will not work correctly unless clear = "both" on the
#mainContent h1, #mainContent h2, .footer class */
.imgLeft {
float: left;
}

BIN
drifting/images/bullet.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 B

BIN
drifting/images/hdr_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 B

BIN
drifting/images/hdr_icon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 836 B

BIN
drifting/images/hdr_left.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
drifting/images/hdr_right.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
drifting/images/menu_icon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 B

BIN
drifting/images/stadium.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

149
drifting/index.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="pat" />
<meta name="keywords" content="drifting, pat, OWD" />
<meta name="description" content="OWD winter template" />
<title>drifting v1.0</title>
<link rel="stylesheet" type="text/css" href="css/drifting_screen.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="css/drifting_print.css" media="print" />
</head>
<body>
<!-- Layout container starts -->
<div id="layoutBox">
<!-- HEADER: controls the header layout, images, title and subTitle. -->
<div id="headerBox">
<div id="headerLeftBox">
<span class="title">
drifting v1.0
</span>
<br />
<span class="subTitle">
because shovelling hurts
</span>
</div>
<div id="headerRightBox">
&nbsp;
</div>
</div>
<!-- MENU: include as many submenus as you want. Menu groups should begin with a
<h1> and then all menu links need to be defined in a <div class="menuGroup">.
The <span class="noDisplay"> | </span> after each link only needs to be included
if this site will be loaded in a text only browser -->
<div id="menuBox">
<h1>
info
</h1>
<div class="menuGroup">
<a href="#origins" title="how it started"><img src="images/menu_icon.gif" alt="menu item 1" /> origins</a><span class="noDisplay"> | </span>
<a href="#template" title="about the template"><img src="images/menu_icon.gif" alt="menu item 2" /> template</a><span class="noDisplay"> | </span>
<a href="#next" title="what's next?"><img src="images/menu_icon.gif" alt="menu item 3" /> next</a><span class="noDisplay"> | </span>
<a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact"><img src="images/menu_icon.gif" alt="menu item 4" /> contact</a><span class="noDisplay"> | </span>
</div>
<h1>
sources
</h1>
<div class="menuGroup">
<a href="http://www.deviantart.com" title="mmmm art"><img src="images/menu_icon.gif" alt="menu item 1" /> deviantART</a><span class="noDisplay"> | </span>
<a href="http://www.iso50.com" title="vector and design work"><img src="images/menu_icon.gif" alt="menu item 2" /> ISO50</a><span class="noDisplay"> | </span>
<a href="http://www.number27.org/" title="information design"><img src="images/menu_icon.gif" alt="menu item 3" /> NUMBER27</a><span class="noDisplay"> | </span>
<a href="http://www.2advanced.com" title="flash web desgn"><img src="images/menu_icon.gif" alt="menu item 4" /> 2advanced</a><span class="noDisplay"> | </span>
<a href="http://www.trevorvanmeter.com/flash.html" title="pixel art and flash"><img src="images/menu_icon.gif" alt="menu item 5" /> TVM</a><span class="noDisplay"> | </span>
</div>
<!-- NEWS: define news chunks in <p> and use <h2> for the date/title -->
<h1>
news
</h1>
<div class="newsGroup">
<h2>2005.02.13</h2>
<p>
Done and done.
</p>
<h2>2005.02.10</h2>
<p>
Internet Explorer is going to give me an <a href="http://www.petitiononline.com/msiepng/petition.html" title="PNG transparency">ulcer</a>.
</p>
<h2>2005.02.07</h2>
<p>
The look is coming together. Now onto the header images.
</p>
</div>
<!-- MENU FOOTER: could include a site search field here -->
<div class="menuFooter">
&nbsp;
</div>
</div>
<!-- MAIN CONTENT : to add new headings, include a <h1> and then as many <p> blocks
as you'd like. <h2> will create subheadings. To finish a section, include a
<br/> to clearly define it. -->
<div id="mainContent">
<a name="origins"></a>
<h1>origins</h1>
<p>
My first shot at a pure <acronym title="Cascading Style Sheet">CSS</acronym> design layout. It made me really appreciate Flash and only doing things once. The layout is pretty traditional; news and menu to the left, content to the right. All classes have meaningful names and should be pretty easy to change. If you want a clean version, go <a href="clean.html" title="clean drifting v1.0">here</a>. This template also includes a layout for print media that looks like <a href="print.html" title="print view of drifting v1.0">so</a>.
</p>
<br />
<a name="template"></a>
<h1>template</h1>
<h2>compatibility</h2>
<img src="images/stadium.jpg" alt="image example" width="201" height="121" title="image example" class="imgRight"/>
<p>
This template is a pure <acronym title="Cascading Style Sheet">CSS</acronym> layout. It validates successfully with <a href="http://www.w3.org" title="World Wide Web Consortium">www.w3.org</a> as
<acronym title="eXtensible Hypertext Markup Language">XHTML</acronym> 1.0 Strict. Since it's tableless, and the element/font sizes are defined
relatively, it gracefully increases/decreases in size for different resolutions and text sizes (I designed it at <acronym title="measure of screen resoluation in pixels: width by height)">1280x1024</acronym> so I still think it looks best there at <acronym title="firefox: ctrl+0">normal</acronym> font size). It renders consistently in:
</p>
<ul>
<li><a href="http://www.mozilla.org/products/firefox/" title="download Firefox">Firefox 1.0</a></li>
<li><a href="http://www.netscape.com" title="download Netscape">Netscape 7.02</a></li>
<li><a href="http://www.opera.com" title="download Opera">Opera 7.54</a></li>
<li><a href="http://www.microsoft.com/windows/ie/default.mspx" title="download Internet Explorer">Internet Explorer 6.0</a></li>
</ul>
<h2>thanks</h2>
<p>
There's no way I would've finished this without all the code examples on <acronym title="Open Web Design">OWD</acronym>. Much appreciated for helping me figure out how to get this template to work in <acronym title="Damn you...">IE</acronym>. Also thanks to <acronym title="ericlussier (at) gmail (dot) com">Eric</acronym> for the example pic I mangled to the right.
</p>
<br />
<a name="next"></a>
<h1>next</h1>
<p>
Once I finish my own site, I think my next template will be for spring. It's been a looooong winter and I need to see other colours outside besides white and grey. That, and I'm tired of the cold and it's <a href="http://www.pdga.com" title="Professional Discgolf Association: Best. Game. Ever.">discgolf</a> time. If you have any comments or questions, feel free to <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact">send</a> them my way.
</p>
<br />
<!-- FOOTER: whatever you want in here - maybe a last updated or breadcrumb? -->
<div class="footer">
valid <a href="http://validator.w3.org/check/referer" title="validate markup">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer" title="validate CSS">CSS</a> <br />
last updated / copyright here | design by <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact">snop</a>
<br />
<font size="-1"><font size="-1" face="Arial, Helvetica, sans-serif">
<!--This theme is free for distriubtion, so long as link to openwebdesing.org and florida-villa.com stay on the theme-->
Courtesy <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a><a href="http://www.dubaiapartments.biz" target="_blank"><img src="spacer.gif" width="5" height="5" border="0"/></a>Thanks
to <a href="http://www.florida-villa.com" target="_blank">Florida Vacation Homes</a> </font></font></div>
</div>
<!-- BUG FIX: This corrects another IE rendering bug.... You notice it only when the menu container length is
greater than the main content container. Without this, when an a:hover is triggered in the main container,
IE reflows the page and cuts off the menu at the bottom of the main container. -->
<div class="spacer">
</div>
</div>
<!-- Layout container ends -->
</body>
</html>

142
drifting/print.html Normal file
View File

@@ -0,0 +1,142 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="pat" />
<meta name="keywords" content="drifting, pat, OWD" />
<meta name="description" content="OWD winter template" />
<title>drifting v1.0</title>
<link rel="stylesheet" type="text/css" href="css/drifting_print.css" media="screen, tv, projection, print" />
</head>
<body>
<!-- Layout container starts -->
<div id="layoutBox">
<!-- HEADER: controls the header layout, images, title and subTitle. -->
<div id="headerBox">
<div id="headerLeftBox">
<span class="title">
drifting v1.0
</span>
<br />
<span class="subTitle">
because shovelling hurts
</span>
</div>
<div id="headerRightBox">
&nbsp;
</div>
</div>
<!-- MENU: include as many submenus as you want. Menu groups should begin with a
<h1> and then all menu links need to be defined in a <div class="menuGroup">. -->
<div id="menuBox">
<h1>
info
</h1>
<div class="menuGroup">
<a href="#origins" title="how it started"><img src="images/menu_icon.gif" alt="menu icon" /> origins</a><span class="noDisplay"> | </span>
<a href="#template" title="about the template"><img src="images/menu_icon.gif" alt="menu icon" /> template</a><span class="noDisplay"> | </span>
<a href="#next" title="what's next?"><img src="images/menu_icon.gif" alt="menu icon" /> next</a><span class="noDisplay"> | </span>
<a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact"><img src="images/menu_icon.gif" alt="menu icon" /> contact</a><span class="noDisplay"> | </span>
</div>
<h1>
sources
</h1>
<div class="menuGroup">
<a href="http://www.deviantart.com" title="mmmm art"><img src="images/menu_icon.gif" alt="menu icon" /> deviantART</a><span class="noDisplay"> | </span>
<a href="http://www.iso50.com" title="vector and design work"><img src="images/menu_icon.gif" alt="menu icon" /> ISO50</a><span class="noDisplay"> | </span>
<a href="http://www.number27.org/" title="information design"><img src="images/menu_icon.gif" alt="menu icon" /> NUMBER27</a><span class="noDisplay"> | </span>
<a href="http://www.2advanced.com" title="flash web desgn"><img src="images/menu_icon.gif" alt="menu icon" /> 2advanced</a><span class="noDisplay"> | </span>
<a href="http://www.trevorvanmeter.com/flash.html" title="pixel art and flash"><img src="images/menu_icon.gif" alt="menu icon" /> TVM</a><span class="noDisplay"> | </span>
</div>
<!-- NEWS: define news chunks in <p> and use <h2> for the date/title -->
<h1>
news
</h1>
<div class="newsGroup">
<h2>2005.02.13</h2>
<p>
Done and done.
</p>
<h2>2005.02.10</h2>
<p>
Internet Explorer is going to give me an <a href="http://www.petitiononline.com/msiepng/petition.html" title="PNG transparency">ulcer</a>.
</p>
<h2>2005.02.07</h2>
<p>
The look is coming together. Now onto the header images.
</p>
</div>
<!-- MENU FOOTER: could include a site search field here -->
<div class="menuFooter">
&nbsp;
</div>
</div>
<!-- MAIN CONTENT : to add new headings, include a <h1> and then as many <p> blocks
as you'd like. <h2> will create subheadings. To finish a section, include a
<br/> to clearly define it. -->
<div id="mainContent">
<a name="origins"></a>
<h1>origins</h1>
<p>
My first shot at a pure <acronym title="Cascading Style Sheet">CSS</acronym> design layout. It made me really appreciate Flash and only doing things once. The layout is pretty traditional; news and menu to the left, content to the right. All classes have meaningful names and should be pretty easy to change. If you want a clean version, go <a href="clean.html" title="clean drifting v1.0">here</a>. This template also includes a layout for print media that looks like <a href="print.html" title="print view of drifting v1.0">so</a>.
</p>
<br />
<a name="template"></a>
<h1>template</h1>
<h2>compatibility</h2>
<img src="images/stadium.jpg" alt="image example" width="201" height="121" title="image example" class="imgRight"/>
<p>
This template is a pure <acronym title="Cascading Style Sheet">CSS</acronym> layout. It validates successfully with <a href="http://www.w3.org" title="World Wide Web Consortium">www.w3.org</a> as
<acronym title="eXtensible Hypertext Markup Language">XHTML</acronym> 1.0 Strict. Since it's tableless, and the element/font sizes are defined
relatively, it gracefully increases/decreases in size for different resolutions and text sizes (I designed it at <acronym title="measure of screen resoluation in pixels: width by height)">1280x1024</acronym> so I still think it looks best there at <acronym title="firefox: ctrl+0">normal</acronym> font size). It renders consistently in:
</p>
<ul>
<li><a href="http://www.mozilla.org/products/firefox/" title="download Firefox">Firefox 1.0</a></li>
<li><a href="http://www.netscape.com" title="download Netscape">Netscape 7.02</a></li>
<li><a href="http://www.opera.com" title="download Opera">Opera 7.54</a></li>
<li><a href="http://www.microsoft.com/windows/ie/default.mspx" title="download Internet Explorer">Internet Explorer 6.0</a></li>
</ul>
<h2>thanks</h2>
<p>
There's no way I would've finished this without all the code examples on <acronym title="Open Web Design">OWD</acronym>. Much appreciated for helping me figure out how to get this template to work in <acronym title="Damn you...">IE</acronym>. Also thanks to <acronym title="ericlussier (at) gmail (dot) com">Eric</acronym> for the example pic I mangled to the right.
</p>
<br />
<a name="next"></a>
<h1>next</h1>
<p>
Once I finish my own site, I think my next template will be for spring. It's been a looooong winter and I need to see other colours outside besides white and grey. That, and I'm tired of the cold and it's <a href="http://www.pdga.com" title="Professional Discgolf Association: Best. Game. Ever.">discgolf</a> time. If you have any comments or questions, feel free to <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact">send</a> them my way.
</p>
<br />
<!-- FOOTER: whatever you want in here - maybe a last updated or breadcrumb? -->
<div class="footer">
valid <a href="http://validator.w3.org/check/referer" title="validate markup">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer" title="validate CSS">CSS</a> <br />
last updated / copyright here | design by <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact">snop</a>
</div>
</div>
<!-- BUG FIX: This corrects another IE rendering bug.... You notice it only when the menu container length is
greater than the main content container. Without this, when an a:hover is triggered in the main container,
IE reflows the page and cuts off the menu at the bottom of the main container. -->
<div class="spacer">
</div>
</div>
<!-- Layout container ends -->
</body>
</html>

5
drifting/readme.md Normal file
View File

@@ -0,0 +1,5 @@
## Project Description
* [live example](https://learning-zone.github.io/website-templates/drifting/)
![alt text](https://github.com/learning-zone/Website-Templates/blob/master/assets/drifting.png "drifting")