forked from learning-zone/website-templates
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (132 loc) · 8.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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">
</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">
</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>