Skip to content

Commit 5c8c54a

Browse files
boxbot6boxbot6
committed
Initial commit
0 parents  commit 5c8c54a

36 files changed

+809
-0
lines changed

‎.nojekyll

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 boxbot6
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# A simple free HTML website template for hosting on GitHub and elsewhere:
2+
3+
![Simple website template in the style of a folder](images/simple-website-template-folder-style-v1-sample.png)
4+
5+
## Click on the link below to open and try out the template.
6+
7+
* [Click this link to view the website being created from this repository and hosted on github-pages.](https://boxbot6.github.io/simple-website-template-folder-style-v1/)
8+
9+
## To copy and use the template:
10+
* Create a new folder on your computer and name it - this folder will be your new websites root directory folder.
11+
* Use the green '\<\> Code' button at the top of this repository's github page to 'Download ZIP' of this repository.
12+
* Unzip the download and copy the internal contents to the new folder keeping all its subfolders intact.
13+
* 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 (as shown further down on this page) or simply move the complete new root directory folder to wherever else you wish to host it.
14+
15+
## To edit your new website:
16+
* Open the index.html file from your new 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/)).
17+
* (To test the website while you are editing - save changes and then click on the index.html and a browser window will open and display the results of your current edits - refresh the browser tab after saving any further edits to display subsequent changes).
18+
* Update \<title\> with your own info.
19+
* Put any images you want to use into the images folder and link to them in the index.html by copying how its done for the demo images.
20+
* Duplicate, add or remove elements that you want and reposition them on the page to suit your own purposes.
21+
* If you are new to coding the header tabs might look a little complicated at first because they contain options for displaying different images dependant on if you are hovering over them, clicking on them or currently viewing that particular page etc. (as well as having different demo sizes for the tabs) - just rename or duplicate the existing ones for ease until you are comfortable with how they work (all the icons for the tabs are stored in images).
22+
* Update any other elements\/text on the page as required including the footer and then check that all the links are working (see the links already included in the template for examples).
23+
* Edit the .css file to change the website presentation and styles.
24+
* Delete or \<\!\-\- comment out \-\-\> anything not needed.
25+
* Add any new pages you want by studying and copying the way the code is used for the existing pages (or just rename the existing pages and tabs to what you want).
26+
* Edit the index.html files for the other pages including any new pages you have created (every page should have an index.html that is located in their own subdirectory folder) - add your own content to each of these subsequent pages as you did for the home page.
27+
* When you are happy with everything host it on GitHub as below, upload it to a hosting service or move the main root directory folder to the location where you wish to host it from your own server.
28+
29+
## Using free github hosting:
30+
GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository (Size\/usage limits apply: sites may be no larger than 1 GB with a soft bandwidth limit of 100 GB per month).
31+
32+
### github repository bit:
33+
* Sign in to your account on [Github.com](https://github.com/), go to 'Your repositories' and select 'New' (top right).
34+
* In 'create a new repository' give the new repository a name (this name will also apply to your website), add an optional description, keep check box 'Public' to make your repository and website created from it visible online to the general public. (don't add a README file, .gitignore or Licence here, the relevant files will be added later).
35+
* Press 'Create repository' at the bottom.
36+
* This will take you to Quick setup, select 'uploading an existing file'
37+
* On the next page drag and drop all the files and folders together as a bundle from inside the new root directory folder that you made earlier in 'To copy and use the template' onto the upload section.
38+
* Press 'Commit changes' at the bottom
39+
* After creating the repository double-check that it is listed as Public (if not change the visibility in settings).
40+
* Change the Licence etc. at this time if you want to.
41+
### github-pages bit:
42+
* Now use 'Settings' to open GitHub Pages (shown as Pages in the column on the left).
43+
* Select Source - Deploy from a branch, select main, then save.
44+
* Wait a few minutes for the website to be created and become active - when its done the https address will be shown in github-pages - copy the link and you can use it in the option below to replace this README.md file with a simpler one that displays just the name and description of your own website and contains the link to that new site.
45+
46+
<br>
47+
48+
Example of a simple README.md file to replace this one:
49+
50+
---
51+
52+
# HTML Website Hosting For:
53+
54+
### put-your-website-name-here
55+
56+
<br>
57+
58+
* [Click this link to view the website being created from this repository by github-pages.](https://put-your-github-name-here.github.io/put-your-website-name-here/)
59+
60+
<br>
61+
62+
(After creating your own website you can edit this README.md to show your own sites name above and update the https link beneath it to take you to your new websites address (find the link in github-pages)). - You can then write your own description here and if you want add an image to help visitors quickly see what your site looks like - you can then delete this comment!)
63+
64+
---
65+
66+
<br>
67+
68+
Code for the above example: (replace the text in your repository's README.md with this).
69+
70+
# HTML Website Hosting For:
71+
72+
### put-your-website-name-here
73+
74+
<br>
75+
76+
* [Click this link to view the website being created from this repository by github-pages.](https://put-your-github-name-here.github.io/put-your-website-name-here/)
77+
78+
<br>
79+
80+
(After creating your own website you can edit this README.md to show your own sites name above and update the https link beneath it to take you to your new websites address (find the link in github-pages)). - You can then write your own description here and if you want add an image to help visitors quickly see what your site looks like - you can then delete this comment!)
81+
82+
<br>
83+
84+
<br>
85+
86+
Share and include the link from GitHub Pages which can be used directly or entered into a search bar for anybody to visit your site.
87+
88+
<br>
89+
90+
<br>
91+
92+
**Update:** If you are having trouble getting your site to appear in google search results:
93+
94+
You may have to wait a day or so for your GitHub repository to show up in google searches but the github.io (github-pages website version) may not be indexed for many days or even weeks after you create it - there are many different remedies on the internet explaining how to get your site indexed quicker by google search - here are a few pointers:
95+
* Go to google search console to verify your site (there are various ways to do this but the easiest is probably to enter your github-sites URL, download a file and put it in the main directory of your repository, then after waiting a couple of minutes for github-sites to update the addition of the new file and become active again verify it in google search console).
96+
* Add a sitemap.xml and robots.txt to the main directory of your site to encourage google to index your site if it is crawled.
97+
* Also add the sitemap directly in google search console as well.
98+
* Make a lot of external links to and from your site so it can be easily accessed in many different ways by the bots.
99+
* **Please note:** Images may take even longer to be indexed because a different slower googlebot is used for image crawling (you can try also including the location of the images in the sitemap to help).
100+
101+
<br>
102+
103+
Visit the link below to view the website being created from this repository by github-pages.
104+
105+
[https://boxbot6.github.io/simple-website-template-folder-style-v1/](https://boxbot6.github.io/simple-website-template-folder-style-v1/)
106+
107+
108+
<br>

‎about/index.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
5+
<head>
6+
<title>Website Template | Simple Folder Style | Html | Css | About Page</title>
7+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8+
<meta charset="utf-8">
9+
<link rel="stylesheet" type="text/css" href="../style.css" />
10+
</head>
11+
12+
13+
<body style="background-image: url('../images/banner-sky.jpg');background-repeat:repeat-x;">
14+
<div class="box">
15+
16+
17+
18+
<div class="row header">
19+
<div class="header-tabs">
20+
<div class="tab-container">
21+
<a href="../index.html">
22+
<img src="../images/button-noncurrent-normal.png" onMouseOver="this.src='../images/button-hover-noncurrent-normal.png'" onMouseOut="this.src='../images/button-noncurrent-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
23+
</a>
24+
<div class="tab-text">Home</div>
25+
</div>
26+
<div class="tab-container">
27+
<a href="index.html">
28+
<img src="../images/button-current-normal.png" onMouseOver="this.src='../images/button-hover-current-normal.png'" onMouseOut="this.src='../images/button-current-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
29+
</a>
30+
<div class="tab-text current-tab">About</div>
31+
</div>
32+
<div class="tab-container">
33+
<a href="../references/index.html">
34+
<img src="../images/button-noncurrent-normal.png" onMouseOver="this.src='../images/button-hover-noncurrent-normal.png'" onMouseOut="this.src='../images/button-noncurrent-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
35+
</a>
36+
<div class="tab-text">References</div>
37+
</div>
38+
<div class="tab-container">
39+
<a href="../contact/index.html">
40+
<img src="../images/button-noncurrent-normal.png" onMouseOver="this.src='../images/button-hover-noncurrent-normal.png'" onMouseOut="this.src='../images/button-noncurrent-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
41+
</a>
42+
<div class="tab-text">Contact</div>
43+
</div>
44+
</div>
45+
46+
47+
<div class="header-banner">
48+
</div>
49+
</div>
50+
51+
52+
53+
<div class="row content">
54+
<div class="content-text">
55+
<h1>About:</h1>
56+
<hr>
57+
<p>Sorry, no content here yet.</p>
58+
<br />
59+
<br />
60+
<h2>Heading (h2):</h2>
61+
<p>Sample medium-sized text.</p>
62+
<br />
63+
</div>
64+
65+
66+
<div class="content-text">
67+
<h1>Heading (h1)</h1>
68+
<h2 class="center">Heading (h2) (centered)</h2>
69+
<h3>Heading (h3)</h3>
70+
<h4>Heading (h4)</h4>
71+
<h5>Heading (h5)</h5>
72+
<h6>Heading (h6)</h6>
73+
</div>
74+
</div>
75+
76+
77+
78+
<div class="row footer">
79+
<div class="footer">
80+
<a href="../index.html">Home</a> |
81+
<a href="index.html" class="current-page">About</a> |
82+
<a href="../references/index.html">References</a> |
83+
<a href="../contact/index.html">Contact</a> &nbsp;
84+
<p>Copyright © your copyright here. All Rights Reserved.</p>
85+
</div>
86+
</div>
87+
88+
89+
90+
</div>
91+
</body>
92+
</html>

‎contact/index.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
5+
<head>
6+
<title>Website Template | Simple Folder Style | Html | Css | Contact Page</title>
7+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8+
<meta charset="utf-8">
9+
<link rel="stylesheet" type="text/css" href="../style.css" />
10+
</head>
11+
12+
13+
<body style="background-image: url('../images/banner-sky.jpg');background-repeat:repeat-x;">
14+
<div class="box">
15+
16+
17+
18+
<div class="row header">
19+
<div class="header-tabs">
20+
<div class="tab-container">
21+
<a href="../index.html">
22+
<img src="../images/button-noncurrent-normal.png" onMouseOver="this.src='../images/button-hover-noncurrent-normal.png'" onMouseOut="this.src='../images/button-noncurrent-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
23+
</a>
24+
<div class="tab-text">Home</div>
25+
</div>
26+
<div class="tab-container">
27+
<a href="../about/index.html">
28+
<img src="../images/button-noncurrent-normal.png" onMouseOver="this.src='../images/button-hover-noncurrent-normal.png'" onMouseOut="this.src='../images/button-noncurrent-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
29+
</a>
30+
<div class="tab-text">About</div>
31+
</div>
32+
<div class="tab-container">
33+
<a href="../references/index.html">
34+
<img src="../images/button-noncurrent-normal.png" onMouseOver="this.src='../images/button-hover-noncurrent-normal.png'" onMouseOut="this.src='../images/button-noncurrent-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
35+
</a>
36+
<div class="tab-text">References</div>
37+
</div>
38+
<div class="tab-container">
39+
<a href="index.html">
40+
<img src="../images/button-current-normal.png" onMouseOver="this.src='../images/button-hover-current-normal.png'" onMouseOut="this.src='../images/button-current-normal.png'" onclick="this.src='../images/button-click-normal.png'" alt="References" height="35">
41+
</a>
42+
<div class="tab-text current-tab">Contact</div>
43+
</div>
44+
</div>
45+
46+
47+
<div class="header-banner">
48+
</div>
49+
</div>
50+
51+
52+
53+
<div class="row content">
54+
<div class="content-text">
55+
<h1>Contact:</h1>
56+
<hr>
57+
<p>Sorry, no content here yet.</p>
58+
</div>
59+
</div>
60+
61+
62+
63+
<div class="row footer">
64+
<div class="footer">
65+
<a href="../index.html">Home</a> |
66+
<a href="../about/index.html">About</a> |
67+
<a href="../references/index.html">References</a> |
68+
<a href="index.html" class="current-page">Contact</a> &nbsp;
69+
<p>Copyright © your copyright here. All Rights Reserved.</p>
70+
</div>
71+
</div>
72+
73+
74+
75+
</div>
76+
</body>
77+
</html>

‎downloads/simple_website_template_folder_style_v1.zip

481 Bytes
Binary file not shown.

‎images/banner-sky.jpg

28 KB
Loading

‎images/button-click-long.png

50.2 KB
Loading

‎images/button-click-medium.png

48.7 KB
Loading

‎images/button-click-normal.png

46 KB
Loading

‎images/button-click-short.png

41.7 KB
Loading

‎images/button-current-long.png

40.8 KB
Loading

‎images/button-current-medium.png

39.7 KB
Loading

‎images/button-current-normal.png

38.3 KB
Loading

‎images/button-current-short.png

35.2 KB
Loading

‎images/button-hover-current-long.png

44.6 KB
Loading

‎images/button-hover-current-medium.png

43.7 KB
Loading

‎images/button-hover-current-normal.png

41.4 KB
Loading

‎images/button-hover-current-short.png

38.1 KB
Loading

‎images/button-hover-noncurrent-long.png

47.9 KB
Loading

‎images/button-hover-noncurrent-medium.png

46.5 KB
Loading

‎images/button-hover-noncurrent-normal.png

43.5 KB
Loading

‎images/button-hover-noncurrent-short.png

40 KB
Loading

‎images/button-noncurrent-long.png

40.5 KB
Loading

‎images/button-noncurrent-medium.png

39.4 KB
Loading

‎images/button-noncurrent-normal.png

37.7 KB
Loading

‎images/button-noncurrent-short.png

37 KB
Loading

‎images/download-icon-1.png

13.1 KB
Loading

‎images/simple-website-template-folder-style-v1-sample-2.png

199 KB
Loading

‎images/simple-website-template-folder-style-v1-sample.png

301 KB
Loading

‎images/test-image-1.jpg

179 KB
Loading

‎images/test-image-2.jpg

1.42 MB
Loading

‎images/test-image-3.jpg

857 KB
Loading

0 commit comments

Comments
 (0)