Skip to content
GitLab
Commit 2a05c937 authored by Bao's avatar Bao
Browse files

Upload New File

parent 3333429a
Show whitespace changes
Inline Side-by-side
examples.html 0 → 100644
View file @ 2a05c937
<!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 '&lt;p&gt;&lt;/p&gt;' 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>&nbsp;</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 &copy; 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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal