commit 6553c10203be05c09f8585e30ab134b687b0fdd7 Author: German Correa Date: Tue Aug 22 16:33:30 2017 -0300 Initial commit diff --git a/READ_ME/HTML5WebTemplates.co.uk.url b/READ_ME/HTML5WebTemplates.co.uk.url new file mode 100644 index 0000000..6da05cd --- /dev/null +++ b/READ_ME/HTML5WebTemplates.co.uk.url @@ -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 diff --git a/READ_ME/PLEASE READ.txt b/READ_ME/PLEASE READ.txt new file mode 100644 index 0000000..49fd57a --- /dev/null +++ b/READ_ME/PLEASE READ.txt @@ -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 \ No newline at end of file diff --git a/READ_ME/Remove the footer link.URL b/READ_ME/Remove the footer link.URL new file mode 100644 index 0000000..13d925c --- /dev/null +++ b/READ_ME/Remove the footer link.URL @@ -0,0 +1,6 @@ +[InternetShortcut] +URL=http://www.html5webtemplates.co.uk/faqs.html +IDList= +HotKey=0 +IconFile=C:\Windows\system32\SHELL32.dll +IconIndex=44 diff --git a/another_page.html b/another_page.html new file mode 100644 index 0000000..b57b0a3 --- /dev/null +++ b/another_page.html @@ -0,0 +1,68 @@ + + + + + night_sky_2 - another page + + + + + + + +
+ +
+ +
+

Another Page

+

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.

+

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.

+

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.

+

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.

+
+
+ +
+ + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..882c1a6 --- /dev/null +++ b/contact.html @@ -0,0 +1,74 @@ + + + + + night_sky_2 - contact us + + + + + + + +
+ +
+ +
+

Contact Us

+

Below is an example of how a contact form might look with this template:

+
+
+

Name

+

Email Address

+

Message

+

 

+
+
+



NOTE: A contact form such as this would require some way of emailing the input to an email address.

+
+
+ +
+ + diff --git a/examples.html b/examples.html new file mode 100644 index 0000000..012d938 --- /dev/null +++ b/examples.html @@ -0,0 +1,130 @@ + + + + + night_sky_2 - examples + + + + + + + +
+ +
+ +
+

Examples

+

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.

+

Headings

+

These are the different heading formats:

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Text

+

The following examples show how the text (within '<p></p>' tags) will appear:

+

This is an example of bold text

+

This is an example of italic text

+

This is a hyperlink

+

Lists

+

This is an unordered list:

+
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
+

This is an ordered list:

+
    +
  1. Item 1
  2. +
  3. Item 2
  4. +
  5. Item 3
  6. +
  7. Item 4
  8. +
+

Images

+

images can be placed on the left, in the center or on the right:

+ example graphic +

+ 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. +

+ example graphic + example graphic +

+ 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. +

+

Tables

+

Tables should be used to display data and not used for laying out your website:

+ + + + + + +
ItemDescription
Item 1Description of Item 1
Item 2Description of Item 2
Item 3Description of Item 3
Item 4Description of Item 4
+

Form Elements

+
+
+

Form field example

+

Textarea example

+

Checkbox example

+

Dropdown list example

+

 

+
+
+
+
+ +
+ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a47388d --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + night_sky_2 + + + + + + + +
+ +
+ +
+

Welcome to the night_sky_2 template

+

This standards compliant, simple, fixed width website template is released as an 'open source' design (under a Creative Commons Attribution 3.0 Licence), 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...

+

This template is written entirely in HTML5 and CSS, and can be validated using the links in the footer.

+

You can view more free HTML5 web templates here.

+

This template is a fully functional 5 page website, with an examples page that gives examples of all the styles available with this design.

+

Browser Compatibility

+

This template has been tested in the following browsers:

+
    +
  • Internet Explorer 8
  • +
  • FireFox 3
  • +
  • Google Chrome 13
  • +
+
+
+ +
+ + diff --git a/page.html b/page.html new file mode 100644 index 0000000..e73bda3 --- /dev/null +++ b/page.html @@ -0,0 +1,68 @@ + + + + + night_sky_2 - a page + + + + + + + +
+ +
+ +
+

A Page

+

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.

+

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.

+

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.

+

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.

+
+
+ +
+ + diff --git a/style/arrow.png b/style/arrow.png new file mode 100644 index 0000000..46ff4b2 Binary files /dev/null and b/style/arrow.png differ diff --git a/style/back.png b/style/back.png new file mode 100644 index 0000000..83e36f6 Binary files /dev/null and b/style/back.png differ diff --git a/style/bullet.png b/style/bullet.png new file mode 100644 index 0000000..ae6094b Binary files /dev/null and b/style/bullet.png differ diff --git a/style/graphic.png b/style/graphic.png new file mode 100644 index 0000000..a3d71e7 Binary files /dev/null and b/style/graphic.png differ diff --git a/style/link.png b/style/link.png new file mode 100644 index 0000000..8e16400 Binary files /dev/null and b/style/link.png differ diff --git a/style/logo.jpg b/style/logo.jpg new file mode 100644 index 0000000..276b036 Binary files /dev/null and b/style/logo.jpg differ diff --git a/style/logo.png b/style/logo.png new file mode 100644 index 0000000..cd9e0f9 Binary files /dev/null and b/style/logo.png differ diff --git a/style/search.png b/style/search.png new file mode 100644 index 0000000..01109b1 Binary files /dev/null and b/style/search.png differ diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..2dbef0a --- /dev/null +++ b/style/style.css @@ -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;} diff --git a/style/tabs.png b/style/tabs.png new file mode 100644 index 0000000..f5b87bc Binary files /dev/null and b/style/tabs.png differ