diff --git a/examples.html b/examples.html new file mode 100644 index 0000000000000000000000000000000000000000..1b34826af31444fb4c5810b7f1d28cf81033de6c --- /dev/null +++ b/examples.html @@ -0,0 +1,130 @@ +<!DOCTYPE HTML> +<html> + +<head> + <title>simple_light - examples</title> + <meta name="description" content="website description" /> + <meta name="keywords" content="website keywords, website keywords" /> + <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> + <link rel="stylesheet" type="text/css" href="style/style.css" /> +</head> + +<body> + <div id="main"> + <div id="header"> + <div id="logo"> + <div id="logo_text"> + <!-- class="logo_colour", allows you to change the colour of the text --> + <h1><a href="index.html">simple<span class="logo_colour">_light</span></a></h1> + <h2>Simple. Contemporary. Website Template.</h2> + </div> + </div> + <div id="menubar"> + <ul id="menu"> + <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --> + <li><a href="index.html">Home</a></li> + <li class="selected"><a href="examples.html">Examples</a></li> + <li><a href="page.html">A Page</a></li> + <li><a href="another_page.html">Another Page</a></li> + <li><a href="contact.html">Contact Us</a></li> + </ul> + </div> + </div> + <div id="site_content"> + <div class="sidebar"> + <h1>Latest News</h1> + <h4>New Website Launched</h4> + <h5>January 1st, 2010</h5> + <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> + <h1>Useful Links</h1> + <ul> + <li><a href="#">link 1</a></li> + <li><a href="#">link 2</a></li> + <li><a href="#">link 3</a></li> + <li><a href="#">link 4</a></li> + </ul> + <h1>Search</h1> + <form method="post" action="#" id="search_form"> + <p> + <input class="search" type="text" name="search_field" value="Enter keywords....." /> + <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" /> + </p> + </form> + </div> + <div id="content"> + <h1>Examples</h1> + <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> + <h2>Headings</h2> + <p>These are the different heading formats:</p> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> + <h2>Text</h2> + <p>The following examples show how the text (within '<p></p>' tags) will appear:</p> + <p><strong>This is an example of bold text</strong></p> + <p><i>This is an example of italic text</i></p> + <p><a href="#">This is a hyperlink</a></p> + <h2>Lists</h2> + <p>This is an unordered list:</p> + <ul> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3</li> + <li>Item 4</li> + </ul> + <p>This is an ordered list:</p> + <ol> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3</li> + <li>Item 4</li> + </ol> + <h2>Images</h2> + <p>images can be placed on the left, in the center or on the right:</p> + <span class="left"><img src="style/graphic.png" alt="example graphic" /></span> + <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. + </p> + <span class="center"><img src="style/graphic.png" alt="example graphic" /></span> + <span class="right"><img src="style/graphic.png" alt="example graphic" /></span> + <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. + </p> + <h2>Tables</h2> + <p>Tables should be used to display data and not used for laying out your website:</p> + <table style="width:100%; border-spacing:0;"> + <tr><th>Item</th><th>Description</th></tr> + <tr><td>Item 1</td><td>Description of Item 1</td></tr> + <tr><td>Item 2</td><td>Description of Item 2</td></tr> + <tr><td>Item 3</td><td>Description of Item 3</td></tr> + <tr><td>Item 4</td><td>Description of Item 4</td></tr> + </table> + <h2>Form Elements</h2> + <form action="#" method="post"> + <div class="form_settings"> + <p><span>Form field example</span><input type="text" name="name" value="" /></p> + <p><span>Textarea example</span><textarea rows="8" cols="50" name="name"></textarea></p> + <p><span>Checkbox example</span><input class="checkbox" type="checkbox" name="name" value="" /></p> + <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> + <p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="name" value="button" /></p> + </div> + </form> + </div> + </div> + <div id="footer"> + <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> + <p>Copyright © simple_light | <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> + </div> + </div> +</body> +</html>