oregano 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +2 -0
  3. data/Gemfile +7 -0
  4. data/README.md +3 -0
  5. data/Rakefile +78 -0
  6. data/lib/oregano.rb +14 -0
  7. data/lib/oregano/version.rb +3 -0
  8. data/oregano.gemspec +29 -0
  9. data/sites/slippery/index.md +108 -0
  10. data/templates/escape_velocity/public/LICENSE.txt +63 -0
  11. data/templates/escape_velocity/public/README.txt +36 -0
  12. data/templates/escape_velocity/public/css/font-awesome.min.css +4 -0
  13. data/templates/escape_velocity/public/css/ie/PIE.htc +96 -0
  14. data/templates/escape_velocity/public/css/ie/backgroundsize.min.htc +7 -0
  15. data/templates/escape_velocity/public/css/ie/html5shiv.js +8 -0
  16. data/templates/escape_velocity/public/css/ie/v8.css +74 -0
  17. data/templates/escape_velocity/public/css/images/overlay.png +0 -0
  18. data/templates/escape_velocity/public/css/images/shadow.png +0 -0
  19. data/templates/escape_velocity/public/css/skel.css +222 -0
  20. data/templates/escape_velocity/public/css/style-1000px.css +99 -0
  21. data/templates/escape_velocity/public/css/style-desktop.css +574 -0
  22. data/templates/escape_velocity/public/css/style-mobile.css +417 -0
  23. data/templates/escape_velocity/public/css/style.css +870 -0
  24. data/templates/escape_velocity/public/fonts/FontAwesome.otf +0 -0
  25. data/templates/escape_velocity/public/fonts/fontawesome-webfont.eot +0 -0
  26. data/templates/escape_velocity/public/fonts/fontawesome-webfont.svg +520 -0
  27. data/templates/escape_velocity/public/fonts/fontawesome-webfont.ttf +0 -0
  28. data/templates/escape_velocity/public/fonts/fontawesome-webfont.woff +0 -0
  29. data/templates/escape_velocity/public/images/banner.jpg +0 -0
  30. data/templates/escape_velocity/public/images/pic01.jpg +0 -0
  31. data/templates/escape_velocity/public/images/pic02.jpg +0 -0
  32. data/templates/escape_velocity/public/images/pic03.jpg +0 -0
  33. data/templates/escape_velocity/public/images/pic04.jpg +0 -0
  34. data/templates/escape_velocity/public/images/pic05.jpg +0 -0
  35. data/templates/escape_velocity/public/images/pic06.jpg +0 -0
  36. data/templates/escape_velocity/public/images/pic07.jpg +0 -0
  37. data/templates/escape_velocity/public/images/pic08.jpg +0 -0
  38. data/templates/escape_velocity/public/images/pic09.jpg +0 -0
  39. data/templates/escape_velocity/public/images/pic10.jpg +0 -0
  40. data/templates/escape_velocity/public/index.html +297 -0
  41. data/templates/escape_velocity/public/js/init.js +86 -0
  42. data/templates/escape_velocity/public/js/jquery.dropotron.min.js +2 -0
  43. data/templates/escape_velocity/public/js/jquery.min.js +4 -0
  44. data/templates/escape_velocity/public/js/skel-layers.min.js +2 -0
  45. data/templates/escape_velocity/public/js/skel.min.js +2 -0
  46. data/templates/escape_velocity/public/left-sidebar.html +353 -0
  47. data/templates/escape_velocity/public/no-sidebar.html +299 -0
  48. data/templates/escape_velocity/public/right-sidebar.html +353 -0
  49. data/templates/escape_velocity/template.rb +11 -0
  50. data/templates/simple_style_4/public/another_page.html +90 -0
  51. data/templates/simple_style_4/public/contact.html +96 -0
  52. data/templates/simple_style_4/public/examples.html +152 -0
  53. data/templates/simple_style_4/public/index.html +99 -0
  54. data/templates/simple_style_4/public/page.html +90 -0
  55. data/templates/simple_style_4/public/style/back.png +0 -0
  56. data/templates/simple_style_4/public/style/bullet.png +0 -0
  57. data/templates/simple_style_4/public/style/footer.png +0 -0
  58. data/templates/simple_style_4/public/style/graphic.png +0 -0
  59. data/templates/simple_style_4/public/style/link.png +0 -0
  60. data/templates/simple_style_4/public/style/search.png +0 -0
  61. data/templates/simple_style_4/public/style/side_back.png +0 -0
  62. data/templates/simple_style_4/public/style/side_base.png +0 -0
  63. data/templates/simple_style_4/public/style/side_top.png +0 -0
  64. data/templates/simple_style_4/public/style/style.css +324 -0
  65. data/templates/simple_style_4/public/style/tab.png +0 -0
  66. data/templates/simple_style_4/public/style/tab_selected.png +0 -0
  67. data/templates/simple_style_4/template.rb +11 -0
  68. metadata +223 -0
@@ -0,0 +1,11 @@
1
+ class EscapeVelocity < Oregano::Template
2
+ LOCATION = Pathname(__FILE__).dirname
3
+
4
+ def tangle(body, metadata)
5
+ index_page = Hexp.parse(LOCATION.join('public', 'index.html').read)
6
+
7
+ index_page
8
+ .replace('#main-wrapper') {|main| body.set_attrs(main.attributes) }
9
+ .replace('title, .title') {|title| title.set_children(metadata['title']) }
10
+ end
11
+ end
@@ -0,0 +1,90 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+
4
+ <head>
5
+ <title>simplestyle_4 - another page</title>
6
+ <meta name="description" content="website description" />
7
+ <meta name="keywords" content="website keywords, website keywords" />
8
+ <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
9
+ <link rel="stylesheet" type="text/css" href="style/style.css" />
10
+ </head>
11
+
12
+ <body>
13
+ <div id="main">
14
+ <div id="header">
15
+ <div id="logo">
16
+ <div id="logo_text">
17
+ <!-- class="logo_colour", allows you to change the colour of the text -->
18
+ <h1><a href="index.html">simple<span class="logo_colour">style_4</span></a></h1>
19
+ <h2>Simple. Contemporary. Website Template.</h2>
20
+ </div>
21
+ </div>
22
+ <div id="menubar">
23
+ <ul id="menu">
24
+ <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
25
+ <li><a href="index.html">Home</a></li>
26
+ <li><a href="examples.html">Examples</a></li>
27
+ <li><a href="page.html">A Page</a></li>
28
+ <li class="selected"><a href="another_page.html">Another Page</a></li>
29
+ <li><a href="contact.html">Contact Us</a></li>
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ <div id="content_header"></div>
34
+ <div id="site_content">
35
+ <div id="sidebar_container">
36
+ <div class="sidebar">
37
+ <div class="sidebar_top"></div>
38
+ <div class="sidebar_item">
39
+ <!-- insert your sidebar items here -->
40
+ <h3>Latest News</h3>
41
+ <h4>New Website Launched</h4>
42
+ <h5>January 1st, 2010</h5>
43
+ <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
44
+ </div>
45
+ <div class="sidebar_base"></div>
46
+ </div>
47
+ <div class="sidebar">
48
+ <div class="sidebar_top"></div>
49
+ <div class="sidebar_item">
50
+ <h3>Useful Links</h3>
51
+ <ul>
52
+ <li><a href="#">link 1</a></li>
53
+ <li><a href="#">link 2</a></li>
54
+ <li><a href="#">link 3</a></li>
55
+ <li><a href="#">link 4</a></li>
56
+ </ul>
57
+ </div>
58
+ <div class="sidebar_base"></div>
59
+ </div>
60
+ <div class="sidebar">
61
+ <div class="sidebar_top"></div>
62
+ <div class="sidebar_item">
63
+ <h3>Search</h3>
64
+ <form method="post" action="#" id="search_form">
65
+ <p>
66
+ <input class="search" type="text" name="search_field" value="Enter keywords....." />
67
+ <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
68
+ </p>
69
+ </form>
70
+ </div>
71
+ <div class="sidebar_base"></div>
72
+ </div>
73
+ </div>
74
+ <div id="content">
75
+ <!-- insert the page content here -->
76
+ <h1>Another Page</h1>
77
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
78
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
79
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
80
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
81
+ </div>
82
+ </div>
83
+ <div id="content_footer"></div>
84
+ <div id="footer">
85
+ <p><a href="index.html">Home</a> | <a href="examples.html">Examples</a> | <a href="page.html">A Page</a> | <a href="another_page.html">Another Page</a> | <a href="contact.html">Contact Us</a></p>
86
+ <p>Copyright &copy; simplestyle_4 | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a></p>
87
+ </div>
88
+ </div>
89
+ </body>
90
+ </html>
@@ -0,0 +1,96 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+
4
+ <head>
5
+ <title>simplestyle_4 - contact us</title>
6
+ <meta name="description" content="website description" />
7
+ <meta name="keywords" content="website keywords, website keywords" />
8
+ <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
9
+ <link rel="stylesheet" type="text/css" href="style/style.css" />
10
+ </head>
11
+
12
+ <body>
13
+ <div id="main">
14
+ <div id="header">
15
+ <div id="logo">
16
+ <div id="logo_text">
17
+ <!-- class="logo_colour", allows you to change the colour of the text -->
18
+ <h1><a href="index.html">simple<span class="logo_colour">style_4</span></a></h1>
19
+ <h2>Simple. Contemporary. Website Template.</h2>
20
+ </div>
21
+ </div>
22
+ <div id="menubar">
23
+ <ul id="menu">
24
+ <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
25
+ <li><a href="index.html">Home</a></li>
26
+ <li><a href="examples.html">Examples</a></li>
27
+ <li><a href="page.html">A Page</a></li>
28
+ <li><a href="another_page.html">Another Page</a></li>
29
+ <li class="selected"><a href="contact.html">Contact Us</a></li>
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ <div id="content_header"></div>
34
+ <div id="site_content">
35
+ <div id="sidebar_container">
36
+ <div class="sidebar">
37
+ <div class="sidebar_top"></div>
38
+ <div class="sidebar_item">
39
+ <!-- insert your sidebar items here -->
40
+ <h3>Latest News</h3>
41
+ <h4>New Website Launched</h4>
42
+ <h5>January 1st, 2010</h5>
43
+ <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
44
+ </div>
45
+ <div class="sidebar_base"></div>
46
+ </div>
47
+ <div class="sidebar">
48
+ <div class="sidebar_top"></div>
49
+ <div class="sidebar_item">
50
+ <h3>Useful Links</h3>
51
+ <ul>
52
+ <li><a href="#">link 1</a></li>
53
+ <li><a href="#">link 2</a></li>
54
+ <li><a href="#">link 3</a></li>
55
+ <li><a href="#">link 4</a></li>
56
+ </ul>
57
+ </div>
58
+ <div class="sidebar_base"></div>
59
+ </div>
60
+ <div class="sidebar">
61
+ <div class="sidebar_top"></div>
62
+ <div class="sidebar_item">
63
+ <h3>Search</h3>
64
+ <form method="post" action="#" id="search_form">
65
+ <p>
66
+ <input class="search" type="text" name="search_field" value="Enter keywords....." />
67
+ <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
68
+ </p>
69
+ </form>
70
+ </div>
71
+ <div class="sidebar_base"></div>
72
+ </div>
73
+ </div>
74
+ <div id="content">
75
+ <!-- insert the page content here -->
76
+ <h1>Contact Us</h1>
77
+ <p>Below is an example of how a contact form might look with this template:</p>
78
+ <form action="" method="post">
79
+ <div class="form_settings">
80
+ <p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
81
+ <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
82
+ <p><span>Message</span><textarea class="contact textarea" rows="8" cols="50" name="your_enquiry"></textarea></p>
83
+ <p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="submit" /></p>
84
+ </div>
85
+ </form>
86
+ <p><br /><br />NOTE: A contact form such as this would require some way of emailing the input to an email address.</p>
87
+ </div>
88
+ </div>
89
+ <div id="content_footer"></div>
90
+ <div id="footer">
91
+ <p><a href="index.html">Home</a> | <a href="examples.html">Examples</a> | <a href="page.html">A Page</a> | <a href="another_page.html">Another Page</a> | <a href="contact.html">Contact Us</a></p>
92
+ <p>Copyright &copy; simplestyle_4 | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a></p>
93
+ </div>
94
+ </div>
95
+ </body>
96
+ </html>
@@ -0,0 +1,152 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+
4
+ <head>
5
+ <title>simplestyle_4 - examples</title>
6
+ <meta name="description" content="website description" />
7
+ <meta name="keywords" content="website keywords, website keywords" />
8
+ <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
9
+ <link rel="stylesheet" type="text/css" href="style/style.css" />
10
+ </head>
11
+
12
+ <body>
13
+ <div id="main">
14
+ <div id="header">
15
+ <div id="logo">
16
+ <div id="logo_text">
17
+ <!-- class="logo_colour", allows you to change the colour of the text -->
18
+ <h1><a href="index.html">simple<span class="logo_colour">style_4</span></a></h1>
19
+ <h2>Simple. Contemporary. Website Template.</h2>
20
+ </div>
21
+ </div>
22
+ <div id="menubar">
23
+ <ul id="menu">
24
+ <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
25
+ <li><a href="index.html">Home</a></li>
26
+ <li class="selected"><a href="examples.html">Examples</a></li>
27
+ <li><a href="page.html">A Page</a></li>
28
+ <li><a href="another_page.html">Another Page</a></li>
29
+ <li><a href="contact.html">Contact Us</a></li>
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ <div id="content_header"></div>
34
+ <div id="site_content">
35
+ <div id="sidebar_container">
36
+ <div class="sidebar">
37
+ <div class="sidebar_top"></div>
38
+ <div class="sidebar_item">
39
+ <!-- insert your sidebar items here -->
40
+ <h3>Latest News</h3>
41
+ <h4>New Website Launched</h4>
42
+ <h5>January 1st, 2010</h5>
43
+ <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
44
+ </div>
45
+ <div class="sidebar_base"></div>
46
+ </div>
47
+ <div class="sidebar">
48
+ <div class="sidebar_top"></div>
49
+ <div class="sidebar_item">
50
+ <h3>Useful Links</h3>
51
+ <ul>
52
+ <li><a href="#">link 1</a></li>
53
+ <li><a href="#">link 2</a></li>
54
+ <li><a href="#">link 3</a></li>
55
+ <li><a href="#">link 4</a></li>
56
+ </ul>
57
+ </div>
58
+ <div class="sidebar_base"></div>
59
+ </div>
60
+ <div class="sidebar">
61
+ <div class="sidebar_top"></div>
62
+ <div class="sidebar_item">
63
+ <h3>Search</h3>
64
+ <form method="post" action="#" id="search_form">
65
+ <p>
66
+ <input class="search" type="text" name="search_field" value="Enter keywords....." />
67
+ <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
68
+ </p>
69
+ </form>
70
+ </div>
71
+ <div class="sidebar_base"></div>
72
+ </div>
73
+ </div>
74
+ <div id="content">
75
+ <!-- insert the page content here -->
76
+ <h1>Examples</h1>
77
+ <p>This page contains examples of all the styled elements available as part of this design. Use this page for reference, whilst you build your website.</p>
78
+ <h2>Headings</h2>
79
+ <p>These are the different heading formats:</p>
80
+ <h1>Heading 1</h1>
81
+ <h2>Heading 2</h2>
82
+ <h3>Heading 3</h3>
83
+ <h4>Heading 4</h4>
84
+ <h5>Heading 5</h5>
85
+ <h6>Heading 6</h6>
86
+ <h2>Text</h2>
87
+ <p>The following examples show how the text (within '&lt;p&gt;&lt;/p&gt;' tags) will appear:</p>
88
+ <p><strong>This is an example of bold text</strong></p>
89
+ <p><i>This is an example of italic text</i></p>
90
+ <p><a href="#">This is a hyperlink</a></p>
91
+ <h2>Lists</h2>
92
+ <p>This is an unordered list:</p>
93
+ <ul>
94
+ <li>Item 1</li>
95
+ <li>Item 2</li>
96
+ <li>Item 3</li>
97
+ <li>Item 4</li>
98
+ </ul>
99
+ <p>This is an ordered list:</p>
100
+ <ol>
101
+ <li>Item 1</li>
102
+ <li>Item 2</li>
103
+ <li>Item 3</li>
104
+ <li>Item 4</li>
105
+ </ol>
106
+ <h2>Images</h2>
107
+ <p>images can be placed on the left, in the center or on the right:</p>
108
+ <span class="left"><img src="style/graphic.png" alt="example graphic" /></span>
109
+ <p>
110
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
111
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
112
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
113
+ irure dolor in reprehenderit in voluptate velit esse cillum.
114
+ </p>
115
+ <span class="center"><img src="style/graphic.png" alt="example graphic" /></span>
116
+ <span class="right"><img src="style/graphic.png" alt="example graphic" /></span>
117
+ <p>
118
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
119
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
120
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
121
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
122
+ pariatur.
123
+ </p>
124
+ <h2>Tables</h2>
125
+ <p>Tables should be used to display data and not used for laying out your website:</p>
126
+ <table style="width:100%; border-spacing:0;">
127
+ <tr><th>Item</th><th>Description</th></tr>
128
+ <tr><td>Item 1</td><td>Description of Item 1</td></tr>
129
+ <tr><td>Item 2</td><td>Description of Item 2</td></tr>
130
+ <tr><td>Item 3</td><td>Description of Item 3</td></tr>
131
+ <tr><td>Item 4</td><td>Description of Item 4</td></tr>
132
+ </table>
133
+ <h2>Form Elements</h2>
134
+ <form action="#" method="post">
135
+ <div class="form_settings">
136
+ <p><span>Form field example</span><input type="text" name="name" value="" /></p>
137
+ <p><span>Textarea example</span><textarea rows="8" cols="50" name="name"></textarea></p>
138
+ <p><span>Checkbox example</span><input class="checkbox" type="checkbox" name="name" value="" /></p>
139
+ <p><span>Dropdown list example</span><select id="id" name="name"><option value="1">Example 1</option><option value="2">Example 2</option></select></p>
140
+ <p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="name" value="button" /></p>
141
+ </div>
142
+ </form>
143
+ </div>
144
+ </div>
145
+ <div id="content_footer"></div>
146
+ <div id="footer">
147
+ <p><a href="index.html">Home</a> | <a href="examples.html">Examples</a> | <a href="page.html">A Page</a> | <a href="another_page.html">Another Page</a> | <a href="contact.html">Contact Us</a></p>
148
+ <p>Copyright &copy; simplestyle_4 | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a></p>
149
+ </div>
150
+ </div>
151
+ </body>
152
+ </html>
@@ -0,0 +1,99 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+
4
+ <head>
5
+ <title>simplestyle_4</title>
6
+ <meta name="description" content="website description" />
7
+ <meta name="keywords" content="website keywords, website keywords" />
8
+ <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
9
+ <link rel="stylesheet" type="text/css" href="style/style.css" />
10
+ </head>
11
+
12
+ <body>
13
+ <div id="main">
14
+ <div id="header">
15
+ <div id="logo">
16
+ <div id="logo_text">
17
+ <!-- class="logo_colour", allows you to change the colour of the text -->
18
+ <h1><a href="index.html">simple<span class="logo_colour">style_4</span></a></h1>
19
+ <h2>Simple. Contemporary. Website Template.</h2>
20
+ </div>
21
+ </div>
22
+ <div id="menubar">
23
+ <ul id="menu">
24
+ <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
25
+ <li class="selected"><a href="index.html">Home</a></li>
26
+ <li><a href="examples.html">Examples</a></li>
27
+ <li><a href="page.html">A Page</a></li>
28
+ <li><a href="another_page.html">Another Page</a></li>
29
+ <li><a href="contact.html">Contact Us</a></li>
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ <div id="content_header"></div>
34
+ <div id="site_content">
35
+ <div id="sidebar_container">
36
+ <div class="sidebar">
37
+ <div class="sidebar_top"></div>
38
+ <div class="sidebar_item">
39
+ <!-- insert your sidebar items here -->
40
+ <h3>Latest News</h3>
41
+ <h4>New Website Launched</h4>
42
+ <h5>January 1st, 2010</h5>
43
+ <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
44
+ </div>
45
+ <div class="sidebar_base"></div>
46
+ </div>
47
+ <div class="sidebar">
48
+ <div class="sidebar_top"></div>
49
+ <div class="sidebar_item">
50
+ <h3>Useful Links</h3>
51
+ <ul>
52
+ <li><a href="#">link 1</a></li>
53
+ <li><a href="#">link 2</a></li>
54
+ <li><a href="#">link 3</a></li>
55
+ <li><a href="#">link 4</a></li>
56
+ </ul>
57
+ </div>
58
+ <div class="sidebar_base"></div>
59
+ </div>
60
+ <div class="sidebar">
61
+ <div class="sidebar_top"></div>
62
+ <div class="sidebar_item">
63
+ <h3>Search</h3>
64
+ <form method="post" action="#" id="search_form">
65
+ <p>
66
+ <input class="search" type="text" name="search_field" value="Enter keywords....." />
67
+ <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
68
+ </p>
69
+ </form>
70
+ </div>
71
+ <div class="sidebar_base"></div>
72
+ </div>
73
+ </div>
74
+ <div id="content">
75
+ <!-- insert the page content here -->
76
+ <h1>Welcome to the simplestyle_4 template</h1>
77
+ <p>This standards compliant, simple, fixed width website template is released as an 'open source' design (under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>), which means that you are free to download and use it for anything you want (including modifying and amending it). All I ask is that you leave the 'design from HTML5webtemplates.co.uk' link in the footer of the template, but other than that...</p>
78
+ <p>This template is written entirely in <strong>HTML5</strong> and <strong>CSS</strong>, and can be validated using the links in the footer.</p>
79
+ <p>You can view more free HTML5 web templates <a href="http://www.html5webtemplates.co.uk">here</a>.</p>
80
+ <p>This template is a fully functional 5 page website, with an <a href="examples.html">examples</a> page that gives examples of all the styles available with this design.</p>
81
+ <h2>Browser Compatibility</h2>
82
+ <p>This template has been tested in the following browsers:</p>
83
+ <ul>
84
+ <li>Internet Explorer 8</li>
85
+ <li>Internet Explorer 7</li>
86
+ <li>FireFox 3.5</li>
87
+ <li>Google Chrome 6</li>
88
+ <li>Safari 4</li>
89
+ </ul>
90
+ </div>
91
+ </div>
92
+ <div id="content_footer"></div>
93
+ <div id="footer">
94
+ <p><a href="index.html">Home</a> | <a href="examples.html">Examples</a> | <a href="page.html">A Page</a> | <a href="another_page.html">Another Page</a> | <a href="contact.html">Contact Us</a></p>
95
+ <p>Copyright &copy; simplestyle_4 | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a></p>
96
+ </div>
97
+ </div>
98
+ </body>
99
+ </html>