Initial commit
This commit is contained in:
commit
6553c10203
8
READ_ME/HTML5WebTemplates.co.uk.url
Normal file
8
READ_ME/HTML5WebTemplates.co.uk.url
Normal file
@ -0,0 +1,8 @@
|
||||
[{000214A0-0000-0000-C000-000000000046}]
|
||||
Prop3=19,2
|
||||
[InternetShortcut]
|
||||
IDList=
|
||||
URL=http://www.html5webtemplates.co.uk/
|
||||
HotKey=0
|
||||
IconFile=C:\Windows\system32\SHELL32.dll
|
||||
IconIndex=277
|
||||
13
READ_ME/PLEASE READ.txt
Normal file
13
READ_ME/PLEASE READ.txt
Normal file
@ -0,0 +1,13 @@
|
||||
Thanks for downloading this template from HTML5WebTemplates.co.uk
|
||||
|
||||
I hope that it suits your needs.
|
||||
|
||||
If you wish to remove the footer link (to http://www.html5webtemplates.co.uk/) I ask that you make a donation of £15 via Paypal.
|
||||
|
||||
You can make a donation at the following address:http://www.html5webtemplates.co.uk/faqs.html
|
||||
|
||||
If you have any questions please feel free to e-mail me at contact@html5webtemplates.co.uk
|
||||
|
||||
Best regards,
|
||||
|
||||
HTML5WebTemplates.co.uk
|
||||
6
READ_ME/Remove the footer link.URL
Normal file
6
READ_ME/Remove the footer link.URL
Normal file
@ -0,0 +1,6 @@
|
||||
[InternetShortcut]
|
||||
URL=http://www.html5webtemplates.co.uk/faqs.html
|
||||
IDList=
|
||||
HotKey=0
|
||||
IconFile=C:\Windows\system32\SHELL32.dll
|
||||
IconIndex=44
|
||||
68
another_page.html
Normal file
68
another_page.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>night_sky_2 - another page</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">night<span class="logo_colour">_sky_2</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><a href="examples.html">Examples</a></li>
|
||||
<li><a href="page.html">A Page</a></li>
|
||||
<li class="selected"><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>Another Page</h1>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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 © night_sky_2 | <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">Website templates</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
74
contact.html
Normal file
74
contact.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>night_sky_2 - contact us</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">night<span class="logo_colour">_sky_2</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><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 class="selected"><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>Contact Us</h1>
|
||||
<p>Below is an example of how a contact form might look with this template:</p>
|
||||
<form action="#" method="post">
|
||||
<div class="form_settings">
|
||||
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
|
||||
<p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
|
||||
<p><span>Message</span><textarea class="contact textarea" rows="8" cols="50" name="your_enquiry"></textarea></p>
|
||||
<p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="contact_submitted" value="submit" /></p>
|
||||
</div>
|
||||
</form>
|
||||
<p><br /><br />NOTE: A contact form such as this would require some way of emailing the input to an email address.</p>
|
||||
</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 © night_sky_2 | <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">Website templates</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
130
examples.html
Normal file
130
examples.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>night_sky_2 - 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">night<span class="logo_colour">_sky_2</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 © night_sky_2 | <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">Website templates</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
75
index.html
Normal file
75
index.html
Normal file
@ -0,0 +1,75 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>night_sky_2</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">6to<span class="logo_colour"> Coloquio Uruguayo de Matemática</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 class="selected"><a href="index.html">Home</a></li>
|
||||
<li><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="#">Hola que tal</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>Welcome to the night_sky_2 template</h1>
|
||||
<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>
|
||||
<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>
|
||||
<p>You can view more free HTML5 web templates <a href="http://www.html5webtemplates.co.uk">here</a>.</p>
|
||||
<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>
|
||||
<h2>Browser Compatibility</h2>
|
||||
<p>This template has been tested in the following browsers:</p>
|
||||
<ul>
|
||||
<li>Internet Explorer 8</li>
|
||||
<li>FireFox 3</li>
|
||||
<li>Google Chrome 13</li>
|
||||
</ul>
|
||||
</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 © night_sky_2 | <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">Website templates</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
68
page.html
Normal file
68
page.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>night_sky_2 - a page</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">night<span class="logo_colour">_sky_2</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><a href="examples.html">Examples</a></li>
|
||||
<li class="selected"><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>A Page</h1>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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 © night_sky_2 | <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">Website templates</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
style/arrow.png
Normal file
BIN
style/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
style/back.png
Normal file
BIN
style/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 B |
BIN
style/bullet.png
Normal file
BIN
style/bullet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
BIN
style/graphic.png
Normal file
BIN
style/graphic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
style/link.png
Normal file
BIN
style/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 911 B |
BIN
style/logo.jpg
Normal file
BIN
style/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
style/logo.png
Normal file
BIN
style/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
style/search.png
Normal file
BIN
style/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
321
style/style.css
Normal file
321
style/style.css
Normal file
@ -0,0 +1,321 @@
|
||||
html{height: 100%;}
|
||||
|
||||
body
|
||||
{ font-family: "lucida sans", arial, sans-serif;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-size: .78em;
|
||||
background: #090708;
|
||||
color: #5D5D5D;}
|
||||
|
||||
p
|
||||
{ margin: 0px;
|
||||
padding: 0px 0px 16px 0px;
|
||||
line-height: 1.7em;}
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{ font: normal 179% 'century gothic', arial, sans-serif;
|
||||
color: #43423F;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 15px 0 5px 0;}
|
||||
|
||||
h2
|
||||
{ font: normal 170% 'century gothic', arial, sans-serif;
|
||||
color: #0AB6F6;}
|
||||
|
||||
h3
|
||||
{ font: normal 125% 'century gothic', arial, sans-serif;}
|
||||
|
||||
h4, h5, h6
|
||||
{ margin: 0;
|
||||
padding: 0 0 5px 0;
|
||||
font: normal 120% arial, sans-serif;
|
||||
color: #0AB6F6;}
|
||||
|
||||
h5, h6
|
||||
{ font: italic 95% arial, sans-serif;
|
||||
color: #888;}
|
||||
|
||||
h6
|
||||
{ color: #362C20;}
|
||||
|
||||
a, a:hover
|
||||
{ border-bottom: 1px dotted;
|
||||
color: #635B53;
|
||||
text-decoration: none;}
|
||||
|
||||
a:hover
|
||||
{ border-bottom: 1px solid;
|
||||
color: #00C5EE;}
|
||||
|
||||
img
|
||||
{ border: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;}
|
||||
|
||||
a
|
||||
{ outline: none;}
|
||||
|
||||
form
|
||||
{ padding: 0;
|
||||
margin: 0;}
|
||||
|
||||
.left
|
||||
{ float: left;
|
||||
margin-right: 10px;}
|
||||
|
||||
.right
|
||||
{ float: right;
|
||||
margin-left: 10px;}
|
||||
|
||||
.center
|
||||
{ display: block;
|
||||
text-align: center;
|
||||
margin: 0 auto;}
|
||||
|
||||
blockquote
|
||||
{ margin: 20px 0px 20px 0px;
|
||||
padding: 10px 20px 0px 20px;
|
||||
border: 1px solid #E5E5DB;
|
||||
background: #FFF;}
|
||||
|
||||
ul
|
||||
{ margin: 2px 0px 18px 16px;
|
||||
padding: 0px;}
|
||||
|
||||
ul li
|
||||
{ list-style-type: square;
|
||||
margin: 0px 0px 6px 0px;
|
||||
padding: 0px;}
|
||||
|
||||
ol
|
||||
{ margin: 8px 0px 0px 24px;
|
||||
padding: 0px;}
|
||||
|
||||
ol li
|
||||
{ margin: 0px 0px 11px 0px;
|
||||
padding: 0px;}
|
||||
|
||||
#main, #logo, #menubar, #site_content, #footer
|
||||
{ margin-left: auto;
|
||||
margin-right: auto;}
|
||||
|
||||
#main
|
||||
{ padding-bottom: 40px;}
|
||||
|
||||
#header
|
||||
{ background: transparent url(logo.jpg) no-repeat;}
|
||||
|
||||
#logo
|
||||
{ width: 860px;
|
||||
position: relative;
|
||||
height: 200px;}
|
||||
|
||||
#logo #logo_text
|
||||
{ position: absolute;
|
||||
top: 47px;
|
||||
left: 0;}
|
||||
|
||||
#logo h1, #logo h2
|
||||
{ font: normal 300% 'century gothic', arial, sans-serif;
|
||||
border-bottom: 0;
|
||||
text-transform: none;
|
||||
margin: 0;}
|
||||
|
||||
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover
|
||||
{ padding: 22px 0 0 0;
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
border: 0;}
|
||||
|
||||
#logo_text h1 a .logo_colour
|
||||
{ color: #FC9C04;}
|
||||
|
||||
#logo_text a:hover .logo_colour
|
||||
{ color: #FFF;}
|
||||
|
||||
#logo_text h2
|
||||
{ font-size: 120%;
|
||||
padding: 4px 0 0 0;
|
||||
color: #fff;}
|
||||
|
||||
#menubar
|
||||
{ width: 870px;
|
||||
height: 46px;
|
||||
padding-top: 4px;
|
||||
padding-left: 4px;}
|
||||
|
||||
ul#menu
|
||||
{ float: right;
|
||||
margin: 0px;}
|
||||
|
||||
ul#menu li
|
||||
{ float: left;
|
||||
margin: 5px 0 0 0;
|
||||
padding: 0 0 0 0px;
|
||||
list-style: none;}
|
||||
|
||||
ul#menu li a
|
||||
{ letter-spacing: 0.1em;
|
||||
font-family: sans-serif;
|
||||
font-size: 120%;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 20px;
|
||||
text-decoration: none;
|
||||
padding: 9px 15px 5px 15px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
border: none;}
|
||||
|
||||
ul#menu li.selected a
|
||||
{ height: 20px;
|
||||
padding: 7px 15px 4px 15px;}
|
||||
|
||||
ul#menu li.selected
|
||||
{ margin: 7px 0 0 0;}
|
||||
|
||||
ul#menu li.selected a, ul#menu li.selected a:hover
|
||||
{ color: #FC9C04;}
|
||||
|
||||
ul#menu li a:hover
|
||||
{ color: #FC9C04;}
|
||||
|
||||
#site_content
|
||||
{ width: 858px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 10px 20px 20px 20px;
|
||||
background: #F6F6F0 url(back.png) repeat-y;
|
||||
border: 15px solid #FFF;}
|
||||
|
||||
.sidebar
|
||||
{ float: right;
|
||||
width: 190px;
|
||||
padding: 0 15px 20px 15px;}
|
||||
|
||||
.sidebar ul
|
||||
{ width: 178px;
|
||||
padding: 4px 0 0 0;
|
||||
margin: 4px 0 30px 0;}
|
||||
|
||||
.sidebar li
|
||||
{ list-style: none;
|
||||
padding: 0 0 7px 0; }
|
||||
|
||||
.sidebar li a, .sidebar li a:hover
|
||||
{ padding: 0 0 0 35px;
|
||||
display: block;
|
||||
background: transparent url(link.png) no-repeat left center;
|
||||
border: 0;}
|
||||
|
||||
.sidebar li a.selected
|
||||
{ color: #444;}
|
||||
|
||||
#content
|
||||
{ text-align: left;
|
||||
width: 613px;
|
||||
padding: 0;}
|
||||
|
||||
#content ul
|
||||
{ margin: 2px 0 22px 0px;}
|
||||
|
||||
#content ul li
|
||||
{ list-style-type: none;
|
||||
background: url(bullet.png) no-repeat;
|
||||
margin: 0 0 0 0;
|
||||
padding: 0 0 4px 25px;
|
||||
line-height: 1.5em;}
|
||||
|
||||
#footer
|
||||
{ width: 916px;
|
||||
font-family: 'trebuchet ms', sans-serif;
|
||||
font-size: 90%;
|
||||
height: 28px;
|
||||
padding: 20px 0 5px 0;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
color: #EEF3CD;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;}
|
||||
|
||||
#footer p
|
||||
{ padding: 0;}
|
||||
|
||||
#footer a, #footer a:hover
|
||||
{ color: #EEF3CD;
|
||||
text-decoration: none;}
|
||||
|
||||
#footer a:hover
|
||||
{ text-decoration: underline;}
|
||||
|
||||
.search
|
||||
{ color: #555;
|
||||
border: 1px solid #DDD;
|
||||
width: 134px;
|
||||
padding: 5px;}
|
||||
|
||||
.form_settings
|
||||
{ margin: 15px 0 0 0;}
|
||||
|
||||
.form_settings p
|
||||
{ padding: 0 0 4px 0;}
|
||||
|
||||
.form_settings span
|
||||
{ float: left;
|
||||
width: 200px;
|
||||
text-align: left;}
|
||||
|
||||
.form_settings input, .form_settings textarea
|
||||
{ padding: 5px;
|
||||
width: 299px;
|
||||
font: 100% arial;
|
||||
border: 1px solid #E5E5DB;
|
||||
background: #FFF;
|
||||
color: #47433F;}
|
||||
|
||||
.form_settings .submit
|
||||
{ font: 100% arial;
|
||||
border: 0;
|
||||
width: 99px;
|
||||
margin: 0 0 0 212px;
|
||||
height: 33px;
|
||||
padding: 2px 0 3px 0;
|
||||
cursor: pointer;
|
||||
background: #3B3B3B;
|
||||
color: #FFF;}
|
||||
|
||||
.form_settings textarea, .form_settings select
|
||||
{ font: 100% arial;
|
||||
width: 299px;}
|
||||
|
||||
.form_settings select
|
||||
{ width: 310px;}
|
||||
|
||||
.form_settings .checkbox
|
||||
{ margin: 4px 0;
|
||||
padding: 0;
|
||||
width: 14px;
|
||||
border: 0;
|
||||
background: none;}
|
||||
|
||||
.separator
|
||||
{ width: 100%;
|
||||
height: 0;
|
||||
border-top: 1px solid #D9D5CF;
|
||||
border-bottom: 1px solid #FFF;
|
||||
margin: 0 0 20px 0;}
|
||||
|
||||
table
|
||||
{ margin: 10px 0 30px 0;}
|
||||
|
||||
table tr th, table tr td
|
||||
{ background: #3B3B3B;
|
||||
color: #FFF;
|
||||
padding: 7px 4px;
|
||||
text-align: left;}
|
||||
|
||||
table tr td
|
||||
{ background: #E5E5DB;
|
||||
color: #47433F;
|
||||
border-top: 1px solid #FFF;}
|
||||
BIN
style/tabs.png
Normal file
BIN
style/tabs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 374 B |
Loading…
Reference in New Issue
Block a user