/
sample.html
182 lines (163 loc) · 10.4 KB
/
sample.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS World Tour: The Beauty in CSS Design</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<!--
This is a revised version of the HTML file that was built for the CSS Zen Garden project.
The original project can be seen at http://csszengarden.com.
This file validates on the W3C Validator at http://validator.w3.org with 2 warnings.
Cool.
There might be some additional elements added to this file to allow for some design flexibility.
-->
</head>
<body>
<header>
<hgroup>
<h1>CSS World Tour</h1>
<h2>An Exhibition and Celebration of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</hgroup>
</header>
<section id="intro">
<p>
A demonstration of what can be accomplished visually through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.
</p>
<p>
Download the sample <a href="sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="style.css" title="This page's sample CSS, the file you may modify.">css file.</a>
</p>
</section>
<section id="struggle">
<h3>The Struggle</h3>
<p>
Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, and broken <abbr title="Cascading Style Sheets">CSS</abbr> support.
</p>
<p>
Today, we are looking to emerge from these trials and tribulations and celebrate new standards being proposed and implemented by the <abbr title="World Wide Web Consortium">W3C</abbr> and <abbr title="Web Standards Project">WaSP</abbr> and exciting new features being pushed forward by the major browser creators.
</p>
<p>
The CSS World Tour invites you to explore new possibilities. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.
</p>
</section>
<section id="about">
<h3>So What is This About?</h3>
<p>
As is the case with any developing technology, it is always exciting to test the boundaries and see what is happening on the bleeding edge of innovation.
</p>
<p>
The CSS World Tour aims to educate, excite, inspire, and encourage participation. For beginners, this can serve as a great training ground to see what other people have done. For seasoned veterans, this can serve as an opportunity to showcase skills.
</p>
<p>
To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.
</p>
<p>
Often referred to as the presentation layer, <abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure.
</p>
</section>
<section id="participation">
<h3>Participation</h3>
<p>
You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr> file. This may seem daunting at first if you've never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.
</p>
<p>
Download the sample <a href="sample.html" title="This page's source HTML code, not to be modified.">HTML file</a> and <a href="style.css" title="This page's sample CSS, the file you may modify.">CSS file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don't submit half-finished work) upload your .css file to a web server under your control. <a href="#" title="Use the contact form to send us your Sample Page">Send us a link</a> to the file and if we choose to use it, we will contact you for the full archive of your site files. Final submissions will be placed on our server.
</p>
</section>
<section id="benefits">
<h3>Benefits</h3>
<p>
Why participate? For recognition, inspiration, and a resource we can all refer to when looking to showcase the power and function of <abbr title="Cascading Style Sheets">CSS</abbr>. This is sorely needed, even today. More and more major sites are starting to develop approaches to building web content that accommodate a constantly shifting landscape and can take advantage of the latest innovations, but not enough have. Think about a Space Station with an Amusement Park and Museum in it.
</p>
</section>
<section id="requirements">
<h3>Requirements</h3>
<p>
We would like to see as much <abbr title="Cascading Style Sheets, version 3">CSS3</abbr> as possible. That being said, it would be classy to make accommodations for browsers that can't handle all of the latest stuff. The CSS World Tour is about <abbr title="Cascading Style Sheets">CSS</abbr> in all of it's wonderful forms: all the latest bleeding-edge tricks, as well as all the gorgeous looking, standards-compliant, accessible design. The only real requirement we have is that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.
</p>
<p>
Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn't work at all in Internet Explorer 8, for instance, it may not be the end of the world. It would be nice if your site was, at the least, usable.
</p>
<p>
We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.
</p>
<p>
This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="#">submission guidelines</a>), but we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View license information."> one on this site</a> so that others may learn from your work.
</p>
</section>
<aside id="link_lists">
<nav id="designs">
<h3>Select a Design:</h3>
<!-- list of links begins here. There will be no more than 8 links per page -->
<ul>
<li>
<a href="#" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.cssworldtour.com/" class="design_link">Your Name</a>
</li>
<li>
<a href="#" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.cssworldtour.com/" class="design_link">Your Friend</a>
</li>
<li>
<a href="#" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.cssworldtour.com/" class="design_link">Your Mom</a>
</li>
<li>
<a href="#" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.cssworldtour.com/" class="design_link">Your Uncle</a>
</li>
<li>
<a href="#" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.cssworldtour.com/" class="design_link">Your Dad</a>
</li>
<li>
<a href="#" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.cssworldtour.com/" class="design_link">Your Auntie</a>
</li>
<li>
<a href="#" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.cssworldtour.com/" class="design_link">Your Pet</a>
</li>
<li>
<a href="#" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.cssworldtour.com/" class="design_link">Batman</a>
</li>
</ul>
</nav>
<nav id="archives">
<h3>Archives:</h3>
<ul>
<li>
<a href="#" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs »</a>
</li>
<li>
<a href="#" title="View previous set of designs. AccessKey: p" accesskey="p">« <span class="accesskey">p</span>revious designs</a>
</li>
<li>
<a href="#" title="View every submission to the World Tour. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a>
</li>
</ul>
</nav>
<nav id="resources">
<h3>Resources:</h3>
<ul>
<li>
<a href="#" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v">View This Design’s <abbr title="Cascading Style Sheets">CSS</abbr></a>
</li>
<li>
<a href="#" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><abbr title="Cascading Style Sheets">CSS</abbr> <span class="accesskey">R</span>esources</a>
</li>
<li>
<a href="#" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><abbr title="Frequently Asked Questions">FA<span class="accesskey">Q</span></abbr></a>
</li>
<li>
<a href="#" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a>
</li>
<li>
<a href="#" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a>
</li>
</ul>
</nav>
</aside>
<footer>
<ul>
<li><a href="http://validator.w3.org/" title="Check the validity of this site's HTML">HTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/" title="Check the validity of this site's CSS">css</a></li>
<li><a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a></li>
</ul>
</footer>
</body>
</html>