diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/.nojekyll @@ -0,0 +1 @@ + diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..09c6c00 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 boxbot6 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..1c7382c --- /dev/null +++ b/README.md @@ -0,0 +1,49 @@ +### This GitHub repository is being used to host the website: + +# website-template-simple-single-page-v1 + +![A simple single page website template](images/website-template-simple-single-page-v1-sample-1.png) + +* [Click this link to visit and try the website being created from this repository and hosted on github-pages.](https://boxbot6.github.io/website-template-simple-single-page-v1/) + +
+ +(After creating your own website using this template and github-pages you can edit this README.md to show your own sites name above and update the link to take you to your new sites address (you can find your new sites address by looking in Settings > Pages (github-pages)) - you can then delete all these comments below!) + +## To Use the Template: +* Create a new folder on your computer and name it - this folder will be your new websites main root directory folder. +* Use the green '\<\> Code' button at the top of this repository's page in github to 'Download ZIP' of this repository. +* Unzip and copy all the downloads contents to the new root directory folder keeping its folder layout intact. +* This folder now contains your new website ready to be personalised by editing the contents as outlined in the section below and when you are happy with the results you can host it for free on GitHub (see 'Using Free Github Hosting' section below) or simply move the complete new root directory folder to wherever else you wish to host it. + +## To Edit the Website: +* Open the copied index.html file from inside your new root directory folder (using Notepad or another html editor) and edit the contents to create your own home page (A good beginners guide here: [HTML For Beginners The Easy Way: Start Learning HTML & CSS Today](https://html.com/)). +* (To test the website as you are editing it - click the index.html file and it should automatically open a browser window and show the results of your current edits - refresh this window to update subsequent edits). +* Add any images you wish to use to the images folder. +* Update and check all the new links are working (see the links already included in the template for examples). +* Edit the .css file to change the website appearance and styles. +* Delete or \<\!\-\- comment out \-\-\> anything not needed. +* Edit the index.html files for any other pages if your website has more than one page (each pages index.html is located in their own subdirectory folder) - add your own content to each of these subsequent pages. +* When you are happy with everything upload or move the main root directory folder to where you wish to host it. + +## Using Free Github Hosting: (size/usage limits) +* Sign in to your account on [Github.com](https://github.com/), go to 'Your repositories' and select 'New' (top right). +* In 'create a new repository' give the new repository a name (this name also applies to your website), add an optional description if you want, keep check box 'Public' to make your repository and website visible to the general public online. (don't add a README file, .gitignore or Licence here, the relevant files will be added later). +* Press 'Create repository' at the bottom. +* This will take you to Quick setup, select 'uploading an existing file' +* On the next page that appears, drag and drop all the internal files and folders together from inside the new root directory folder that you made in 'To Use the Template' onto the upload section. +* Press 'Commit changes' at the bottom. +* Check the new repository is shown to be Public (if not change the visibility in settings). +* Change the Licence now if you want to. +* Now use 'Settings' to open GitHub Pages (shown as Pages at the bottom of 'Code and automation' in the menu column on the left). +* Select Source - Deploy from a branch, select main, then save. +* Wait a few minutes for the website to be created - when its done the https address will be shown in github-pages - copy the link and update the README.md file to show the name of your new website and update the link to the one given for your new site. + +
+ +--- + +* [Click this link to see more templates.](https://boxbot6.github.io/simple-website-templates/) + +
+ diff --git a/downloads/website-template-simple-single-page-v1.zip b/downloads/website-template-simple-single-page-v1.zip new file mode 100644 index 0000000..deab36d Binary files /dev/null and b/downloads/website-template-simple-single-page-v1.zip differ diff --git a/images/download-icon-1.png b/images/download-icon-1.png new file mode 100644 index 0000000..6436de2 Binary files /dev/null and b/images/download-icon-1.png differ diff --git a/images/test-image-1.jpg b/images/test-image-1.jpg new file mode 100644 index 0000000..e60b0bf Binary files /dev/null and b/images/test-image-1.jpg differ diff --git a/images/test-image-2.jpg b/images/test-image-2.jpg new file mode 100644 index 0000000..7c58651 Binary files /dev/null and b/images/test-image-2.jpg differ diff --git a/images/test-image-3.jpg b/images/test-image-3.jpg new file mode 100644 index 0000000..8450e37 Binary files /dev/null and b/images/test-image-3.jpg differ diff --git a/images/website-template-simple-single-page-v1-sample-1.png b/images/website-template-simple-single-page-v1-sample-1.png new file mode 100644 index 0000000..400330e Binary files /dev/null and b/images/website-template-simple-single-page-v1-sample-1.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9a36f00 --- /dev/null +++ b/index.html @@ -0,0 +1,175 @@ + + + + + + Website Template | Simple Single-Page | Html | Css | Home Page + + + + + + + +
+ + +
+
+

This is a single-page html/css website template hosted on github.

+
+

Heading (h2)

+

Place your text here, place your text here, place your text here, place your text here, + place your text here, place your text here, place your text here, place your text here, + place your text here, place your text here, place your text here, place your text here, + place your text here, place your text here, place your text here, place your text here, + place your text here, place your text here, place your text here, place your text here, + place your text here, place your text here, place your text here, place your text here.

+
+ +

Heading (h3)

+

Sample medium-sized text.

+
+ +

Heading (h3)

+

Place your text here.

+
+ +

Downloads:

+

Files included:

+ + +
+ +
+ +
+ + +
+ + + +

test-image-1 (float-right) + +
+ + +

+ + List Link 1. (test-image-1)

+ +

+ + List Link 2. (test-image-2)

+ +

+ + List Link 3. (test-image-3)

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + +

test-image-2 (text-aligned) + +
+ + +
+ + + +

test-image-2 (centered) + +
+ + +
+ + + +

test-image-2 (align-right) + +
+ + +
+ + + +

test-image-3 (centered grid) + + + + + +

test-image-3 (centered grid) + + + + + +

test-image-3 (centered grid) + +
+
+
+ + +
+
+

Copyright © your copyright here. No Rights Reserved.

+
+
+ + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..ad4cdc1 --- /dev/null +++ b/style.css @@ -0,0 +1,198 @@ +html, +body { + height: 100%; + margin-left: 0; + margin-right: 0; + margin-top: 0; + margin-bottom: 0; +} + + +/*===============box used here to expand empty pages to fill screen to the bottom==============*/ + +.box { + display: flex; + flex-flow: column; + height: 100%; +} + +.box .row.header { + flex: 0 1 auto; +} + +.box .row.content { + flex: 1 1 auto; +} + +.box .row.footer { + flex: 0 1 auto; +} + + + +.header-tabs { + margin-top: 0.6cm; + margin-bottom: 0cm; + text-align: left; + height: 27px; +} + +.tab-container { + color:black; + font-size: 17px; + font-weight: 500; /* normal (400), bold (700) */ + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + text-align:center; + width: auto; + height: auto; + vertical-align: center; + text-align: center; + display: table-cell; + padding-left: 30px; +} + +.tab-container:hover { + color: #5f5b32; +} + + +.tab-text { + position: relative; + top: -20px; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; +} + + +.header-banner { + margin-top: 0cm; + margin-bottom: 0cm; + text-align: left; + background-color: transparent; + height: 60px; +} + + + +.content-text { + color: black; + text-align: left; + margin-top: 0cm; + margin-bottom: 0cm; + margin-left: 50px; + margin-right: 50px; + font-size: medium; + font-family: 'Times New Roman'; +} + + +.content-text-no-line-space { + margin-top: 0cm; + margin-bottom: 0cm; +} + + +content-image { + display:inline-block; + margin:0px; + margin-top:0px; + margin-bottom:15px; + text-align: center; + font-size: medium; + font-family: 'Times New Roman'; +} + + +content-image-spaced { + display:inline-block; + margin:25px; + margin-top:25px; + margin-bottom:25px; + text-align: center; + font-size: medium; + font-family: 'Times New Roman'; +} + + +.footer { + text-align: center; + color: #393939; + background-color: #c6a786; + /*overflow: hidden;*/ + padding-top: 6px; + padding-bottom: 1px; + margin-top:auto; + margin-left: 0; + margin-right: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: small; + line-height: 15px; +} +a:link { + color: #393939 +} +a:visited { + color: #669999 +} +a:hover { + color: #0000FF +} + + + + +/*===============used to center anything==============*/ + +.center { + text-align: center; +} + +.align-right { + text-align: right; +} + +.align-left { + text-align: left; +} + +/*============float images to left or right ============*/ + +.float-right { + float: right; + margin: 0px 0px 15px 15px; + +} + +.float-left { + float: left; + margin: 0px 0px 15px 15px; +} + + +.download-button { + background-color: #0a95ff; /* blue */ + border: none; + border-radius: 8px; + color: white; + padding: 15px 32px; + vertical-align:middle; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 20px; + font-family:tahoma; + transition-duration: 0.4s; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.download-button:hover { + background-color: #0074cc; /* dark blue */ +} + + +.download-button:active { + background-color: #0057b1; /* darker blue */ + transition-duration: 0.1s; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.3); + /*transform: translateY(2px);*/ \ No newline at end of file