initial commit
This commit is contained in:
commit
7d44f60311
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
.vscode/
|
||||||
|
build
|
||||||
16
Pipfile
Normal file
16
Pipfile
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
[[source]]
|
||||||
|
name = "pypi"
|
||||||
|
url = "https://pypi.org/simple"
|
||||||
|
verify_ssl = true
|
||||||
|
|
||||||
|
[dev-packages]
|
||||||
|
autopep8 = "*"
|
||||||
|
pylint = "*"
|
||||||
|
|
||||||
|
[packages]
|
||||||
|
flask = "*"
|
||||||
|
frozen-flask = "*"
|
||||||
|
markdown2 = "*"
|
||||||
|
|
||||||
|
[requires]
|
||||||
|
python_version = "3.7"
|
||||||
207
Pipfile.lock
generated
Normal file
207
Pipfile.lock
generated
Normal file
|
|
@ -0,0 +1,207 @@
|
||||||
|
{
|
||||||
|
"_meta": {
|
||||||
|
"hash": {
|
||||||
|
"sha256": "79b68d0ec55be365cc035492817a2cc21bfdb3970441e08c23a13766e7bc4e5d"
|
||||||
|
},
|
||||||
|
"pipfile-spec": 6,
|
||||||
|
"requires": {
|
||||||
|
"python_version": "3.7"
|
||||||
|
},
|
||||||
|
"sources": [
|
||||||
|
{
|
||||||
|
"name": "pypi",
|
||||||
|
"url": "https://pypi.org/simple",
|
||||||
|
"verify_ssl": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"default": {
|
||||||
|
"click": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:2335065e6395b9e67ca716de5f7526736bfa6ceead690adf616d925bdc622b13",
|
||||||
|
"sha256:5b94b49521f6456670fdb30cd82a4eca9412788a93fa6dd6df72c94d5a8ff2d7"
|
||||||
|
],
|
||||||
|
"version": "==7.0"
|
||||||
|
},
|
||||||
|
"flask": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:ad7c6d841e64296b962296c2c2dabc6543752985727af86a975072dea984b6f3",
|
||||||
|
"sha256:e7d32475d1de5facaa55e3958bc4ec66d3762076b074296aa50ef8fdc5b9df61"
|
||||||
|
],
|
||||||
|
"index": "pypi",
|
||||||
|
"version": "==1.0.3"
|
||||||
|
},
|
||||||
|
"frozen-flask": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:0a7a71334210ce84f8cbd1dc23c8b265d3e21748805c09c77d0e6fbcc4faab14",
|
||||||
|
"sha256:83858d6ed8b9d3fa7fc9523e415e65fb86b99352798d7695f63cffbd59a56269"
|
||||||
|
],
|
||||||
|
"index": "pypi",
|
||||||
|
"version": "==0.15"
|
||||||
|
},
|
||||||
|
"itsdangerous": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:321b033d07f2a4136d3ec762eac9f16a10ccd60f53c0c91af90217ace7ba1f19",
|
||||||
|
"sha256:b12271b2047cb23eeb98c8b5622e2e5c5e9abd9784a153e9d8ef9cb4dd09d749"
|
||||||
|
],
|
||||||
|
"version": "==1.1.0"
|
||||||
|
},
|
||||||
|
"jinja2": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:065c4f02ebe7f7cf559e49ee5a95fb800a9e4528727aec6f24402a5374c65013",
|
||||||
|
"sha256:14dd6caf1527abb21f08f86c784eac40853ba93edb79552aa1e4b8aef1b61c7b"
|
||||||
|
],
|
||||||
|
"version": "==2.10.1"
|
||||||
|
},
|
||||||
|
"markdown2": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:7ff88e00b396c02c8e1ecd8d176cfa418fb01fe81234dcea77803e7ce4f05dbe",
|
||||||
|
"sha256:882d3607fc023cdea0ac2cd0e1147617fcb0361cb1133d3ff095417f995ff270"
|
||||||
|
],
|
||||||
|
"index": "pypi",
|
||||||
|
"version": "==2.3.8"
|
||||||
|
},
|
||||||
|
"markupsafe": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:00bc623926325b26bb9605ae9eae8a215691f33cae5df11ca5424f06f2d1f473",
|
||||||
|
"sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161",
|
||||||
|
"sha256:09c4b7f37d6c648cb13f9230d847adf22f8171b1ccc4d5682398e77f40309235",
|
||||||
|
"sha256:1027c282dad077d0bae18be6794e6b6b8c91d58ed8a8d89a89d59693b9131db5",
|
||||||
|
"sha256:24982cc2533820871eba85ba648cd53d8623687ff11cbb805be4ff7b4c971aff",
|
||||||
|
"sha256:29872e92839765e546828bb7754a68c418d927cd064fd4708fab9fe9c8bb116b",
|
||||||
|
"sha256:43a55c2930bbc139570ac2452adf3d70cdbb3cfe5912c71cdce1c2c6bbd9c5d1",
|
||||||
|
"sha256:46c99d2de99945ec5cb54f23c8cd5689f6d7177305ebff350a58ce5f8de1669e",
|
||||||
|
"sha256:500d4957e52ddc3351cabf489e79c91c17f6e0899158447047588650b5e69183",
|
||||||
|
"sha256:535f6fc4d397c1563d08b88e485c3496cf5784e927af890fb3c3aac7f933ec66",
|
||||||
|
"sha256:62fe6c95e3ec8a7fad637b7f3d372c15ec1caa01ab47926cfdf7a75b40e0eac1",
|
||||||
|
"sha256:6dd73240d2af64df90aa7c4e7481e23825ea70af4b4922f8ede5b9e35f78a3b1",
|
||||||
|
"sha256:717ba8fe3ae9cc0006d7c451f0bb265ee07739daf76355d06366154ee68d221e",
|
||||||
|
"sha256:79855e1c5b8da654cf486b830bd42c06e8780cea587384cf6545b7d9ac013a0b",
|
||||||
|
"sha256:7c1699dfe0cf8ff607dbdcc1e9b9af1755371f92a68f706051cc8c37d447c905",
|
||||||
|
"sha256:88e5fcfb52ee7b911e8bb6d6aa2fd21fbecc674eadd44118a9cc3863f938e735",
|
||||||
|
"sha256:8defac2f2ccd6805ebf65f5eeb132adcf2ab57aa11fdf4c0dd5169a004710e7d",
|
||||||
|
"sha256:98c7086708b163d425c67c7a91bad6e466bb99d797aa64f965e9d25c12111a5e",
|
||||||
|
"sha256:9add70b36c5666a2ed02b43b335fe19002ee5235efd4b8a89bfcf9005bebac0d",
|
||||||
|
"sha256:9bf40443012702a1d2070043cb6291650a0841ece432556f784f004937f0f32c",
|
||||||
|
"sha256:ade5e387d2ad0d7ebf59146cc00c8044acbd863725f887353a10df825fc8ae21",
|
||||||
|
"sha256:b00c1de48212e4cc9603895652c5c410df699856a2853135b3967591e4beebc2",
|
||||||
|
"sha256:b1282f8c00509d99fef04d8ba936b156d419be841854fe901d8ae224c59f0be5",
|
||||||
|
"sha256:b2051432115498d3562c084a49bba65d97cf251f5a331c64a12ee7e04dacc51b",
|
||||||
|
"sha256:ba59edeaa2fc6114428f1637ffff42da1e311e29382d81b339c1817d37ec93c6",
|
||||||
|
"sha256:c8716a48d94b06bb3b2524c2b77e055fb313aeb4ea620c8dd03a105574ba704f",
|
||||||
|
"sha256:cd5df75523866410809ca100dc9681e301e3c27567cf498077e8551b6d20e42f",
|
||||||
|
"sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7"
|
||||||
|
],
|
||||||
|
"version": "==1.1.1"
|
||||||
|
},
|
||||||
|
"werkzeug": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:865856ebb55c4dcd0630cdd8f3331a1847a819dda7e8c750d3db6f2aa6c0209c",
|
||||||
|
"sha256:a0b915f0815982fb2a09161cb8f31708052d0951c3ba433ccc5e1aa276507ca6"
|
||||||
|
],
|
||||||
|
"version": "==0.15.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"develop": {
|
||||||
|
"astroid": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:6560e1e1749f68c64a4b5dee4e091fce798d2f0d84ebe638cf0e0585a343acf4",
|
||||||
|
"sha256:b65db1bbaac9f9f4d190199bb8680af6f6f84fd3769a5ea883df8a91fe68b4c4"
|
||||||
|
],
|
||||||
|
"version": "==2.2.5"
|
||||||
|
},
|
||||||
|
"autopep8": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:4d8eec30cc81bc5617dbf1218201d770dc35629363547f17577c61683ccfb3ee"
|
||||||
|
],
|
||||||
|
"index": "pypi",
|
||||||
|
"version": "==1.4.4"
|
||||||
|
},
|
||||||
|
"isort": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:c40744b6bc5162bbb39c1257fe298b7a393861d50978b565f3ccd9cb9de0182a",
|
||||||
|
"sha256:f57abacd059dc3bd666258d1efb0377510a89777fda3e3274e3c01f7c03ae22d"
|
||||||
|
],
|
||||||
|
"version": "==4.3.20"
|
||||||
|
},
|
||||||
|
"lazy-object-proxy": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:159a745e61422217881c4de71f9eafd9d703b93af95618635849fe469a283661",
|
||||||
|
"sha256:23f63c0821cc96a23332e45dfaa83266feff8adc72b9bcaef86c202af765244f",
|
||||||
|
"sha256:3b11be575475db2e8a6e11215f5aa95b9ec14de658628776e10d96fa0b4dac13",
|
||||||
|
"sha256:3f447aff8bc61ca8b42b73304f6a44fa0d915487de144652816f950a3f1ab821",
|
||||||
|
"sha256:4ba73f6089cd9b9478bc0a4fa807b47dbdb8fad1d8f31a0f0a5dbf26a4527a71",
|
||||||
|
"sha256:4f53eadd9932055eac465bd3ca1bd610e4d7141e1278012bd1f28646aebc1d0e",
|
||||||
|
"sha256:64483bd7154580158ea90de5b8e5e6fc29a16a9b4db24f10193f0c1ae3f9d1ea",
|
||||||
|
"sha256:6f72d42b0d04bfee2397aa1862262654b56922c20a9bb66bb76b6f0e5e4f9229",
|
||||||
|
"sha256:7c7f1ec07b227bdc561299fa2328e85000f90179a2f44ea30579d38e037cb3d4",
|
||||||
|
"sha256:7c8b1ba1e15c10b13cad4171cfa77f5bb5ec2580abc5a353907780805ebe158e",
|
||||||
|
"sha256:8559b94b823f85342e10d3d9ca4ba5478168e1ac5658a8a2f18c991ba9c52c20",
|
||||||
|
"sha256:a262c7dfb046f00e12a2bdd1bafaed2408114a89ac414b0af8755c696eb3fc16",
|
||||||
|
"sha256:acce4e3267610c4fdb6632b3886fe3f2f7dd641158a843cf6b6a68e4ce81477b",
|
||||||
|
"sha256:be089bb6b83fac7f29d357b2dc4cf2b8eb8d98fe9d9ff89f9ea6012970a853c7",
|
||||||
|
"sha256:bfab710d859c779f273cc48fb86af38d6e9210f38287df0069a63e40b45a2f5c",
|
||||||
|
"sha256:c10d29019927301d524a22ced72706380de7cfc50f767217485a912b4c8bd82a",
|
||||||
|
"sha256:dd6e2b598849b3d7aee2295ac765a578879830fb8966f70be8cd472e6069932e",
|
||||||
|
"sha256:e408f1eacc0a68fed0c08da45f31d0ebb38079f043328dce69ff133b95c29dc1"
|
||||||
|
],
|
||||||
|
"version": "==1.4.1"
|
||||||
|
},
|
||||||
|
"mccabe": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:ab8a6258860da4b6677da4bd2fe5dc2c659cff31b3ee4f7f5d64e79735b80d42",
|
||||||
|
"sha256:dd8d182285a0fe56bace7f45b5e7d1a6ebcbf524e8f3bd87eb0f125271b8831f"
|
||||||
|
],
|
||||||
|
"version": "==0.6.1"
|
||||||
|
},
|
||||||
|
"pycodestyle": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:95a2219d12372f05704562a14ec30bc76b05a5b297b21a5dfe3f6fac3491ae56",
|
||||||
|
"sha256:e40a936c9a450ad81df37f549d676d127b1b66000a6c500caa2b085bc0ca976c"
|
||||||
|
],
|
||||||
|
"version": "==2.5.0"
|
||||||
|
},
|
||||||
|
"pylint": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:5d77031694a5fb97ea95e828c8d10fc770a1df6eb3906067aaed42201a8a6a09",
|
||||||
|
"sha256:723e3db49555abaf9bf79dc474c6b9e2935ad82230b10c1138a71ea41ac0fff1"
|
||||||
|
],
|
||||||
|
"index": "pypi",
|
||||||
|
"version": "==2.3.1"
|
||||||
|
},
|
||||||
|
"six": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:3350809f0555b11f552448330d0b52d5f24c91a322ea4a15ef22629740f3761c",
|
||||||
|
"sha256:d16a0141ec1a18405cd4ce8b4613101da75da0e9a7aec5bdd4fa804d0e0eba73"
|
||||||
|
],
|
||||||
|
"version": "==1.12.0"
|
||||||
|
},
|
||||||
|
"typed-ast": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:18511a0b3e7922276346bcb47e2ef9f38fb90fd31cb9223eed42c85d1312344e",
|
||||||
|
"sha256:262c247a82d005e43b5b7f69aff746370538e176131c32dda9cb0f324d27141e",
|
||||||
|
"sha256:2b907eb046d049bcd9892e3076c7a6456c93a25bebfe554e931620c90e6a25b0",
|
||||||
|
"sha256:354c16e5babd09f5cb0ee000d54cfa38401d8b8891eefa878ac772f827181a3c",
|
||||||
|
"sha256:4e0b70c6fc4d010f8107726af5fd37921b666f5b31d9331f0bd24ad9a088e631",
|
||||||
|
"sha256:630968c5cdee51a11c05a30453f8cd65e0cc1d2ad0d9192819df9978984529f4",
|
||||||
|
"sha256:66480f95b8167c9c5c5c87f32cf437d585937970f3fc24386f313a4c97b44e34",
|
||||||
|
"sha256:71211d26ffd12d63a83e079ff258ac9d56a1376a25bc80b1cdcdf601b855b90b",
|
||||||
|
"sha256:95bd11af7eafc16e829af2d3df510cecfd4387f6453355188342c3e79a2ec87a",
|
||||||
|
"sha256:bc6c7d3fa1325a0c6613512a093bc2a2a15aeec350451cbdf9e1d4bffe3e3233",
|
||||||
|
"sha256:cc34a6f5b426748a507dd5d1de4c1978f2eb5626d51326e43280941206c209e1",
|
||||||
|
"sha256:d755f03c1e4a51e9b24d899561fec4ccaf51f210d52abdf8c07ee2849b212a36",
|
||||||
|
"sha256:d7c45933b1bdfaf9f36c579671fec15d25b06c8398f113dab64c18ed1adda01d",
|
||||||
|
"sha256:d896919306dd0aa22d0132f62a1b78d11aaf4c9fc5b3410d3c666b818191630a",
|
||||||
|
"sha256:ffde2fbfad571af120fcbfbbc61c72469e72f550d676c3342492a9dfdefb8f12"
|
||||||
|
],
|
||||||
|
"markers": "implementation_name == 'cpython'",
|
||||||
|
"version": "==1.4.0"
|
||||||
|
},
|
||||||
|
"wrapt": {
|
||||||
|
"hashes": [
|
||||||
|
"sha256:4aea003270831cceb8a90ff27c4031da6ead7ec1886023b80ce0dfe0adf61533"
|
||||||
|
],
|
||||||
|
"version": "==1.11.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
app.py
Normal file
25
app.py
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
from flask import Flask, render_template, Markup, redirect
|
||||||
|
import markdown2
|
||||||
|
import os
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
templates = [x for x in os.listdir("data") if x not in ["index.md"]]
|
||||||
|
print(templates)
|
||||||
|
@app.route("/")
|
||||||
|
def main():
|
||||||
|
return render_template("index.html", content=Markup(markdown2.markdown_path("data/index.md")), extras=["cuddled-lists"])
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/<md>/")
|
||||||
|
def render(md):
|
||||||
|
return render_template("index.html", content=Markup(markdown2.markdown_path(f"data/{md}.md")))
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/<md>")
|
||||||
|
def redir(md):
|
||||||
|
return redirect(f"/{md}/",)
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
app.run("0.0.0.0", 8080)
|
||||||
11
data/hidden_service.md
Normal file
11
data/hidden_service.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
# The story so far
|
||||||
|
> Our friendly IT guy John has set up a hidden service to control his VM's.
|
||||||
|
> The only problem is that his rival in the company, Dave, kind of wants to screw John over.
|
||||||
|
> This is not an issue for John, he is quite capable with coding and knows exactly which commands to use. This is quite useful when he wants to hide the commands from Dave.
|
||||||
|
> Dave did however figure out where the server is hosted: [wsecho.voidcorp.nl](https://wsecho.voidcorp.nl)!
|
||||||
|
> Now dave wants to find John's password to really screw him over. He knows dave so it probably isn't hidden too well...
|
||||||
|
|
||||||
|
## Your mission
|
||||||
|
1. Hack into the server
|
||||||
|
2. Read the hidden password (format=`flag{xxx}`)
|
||||||
|
3. Report back to Dave (aka the sender of this mission) with the password!
|
||||||
10
data/index.md
Normal file
10
data/index.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
# Voidcorp Challenges
|
||||||
|
This site has some CTF challenges, all have different levels of challenge.
|
||||||
|
|
||||||
|
## Beginner
|
||||||
|
> These challenges are of beginner level. They are rather easy.
|
||||||
|
|
||||||
|
## Intermediate
|
||||||
|
> These challenges are a bit harder, they also won't explain too much about how to use them
|
||||||
|
|
||||||
|
* A small [Hidden Service](/hidden_service/) used by an admin.
|
||||||
17
freeze.py
Normal file
17
freeze.py
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
from flask_frozen import Freezer
|
||||||
|
from app import app, templates
|
||||||
|
|
||||||
|
|
||||||
|
# app.config["FREEZER_IGNORE_MIMETYPE_WARNINGS"] = True
|
||||||
|
freezer = Freezer(app)
|
||||||
|
|
||||||
|
|
||||||
|
@freezer.register_generator
|
||||||
|
def render():
|
||||||
|
for p in templates:
|
||||||
|
p = p.rpartition(".")[0]
|
||||||
|
yield {"md": p}
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
freezer.freeze()
|
||||||
8
static/black_white/READ_ME/HTML5WebTemplates.co.uk.url
Normal file
8
static/black_white/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
static/black_white/READ_ME/PLEASE READ.txt
Normal file
13
static/black_white/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
static/black_white/READ_ME/Remove the footer link.URL
Normal file
6
static/black_white/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
|
||||||
75
static/black_white/another_page.html
Normal file
75
static/black_white/another_page.html
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>black_white - 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=UTF-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
|
||||||
|
</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">black<span class="logo_colour">_white</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">
|
||||||
|
<!-- insert your sidebar items here -->
|
||||||
|
<h3>Latest News</h3>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<p></p>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<h3>Useful Links</h3>
|
||||||
|
<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>
|
||||||
|
<h3>Search</h3>
|
||||||
|
<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">
|
||||||
|
<!-- insert the page content here -->
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
Copyright © black_white | <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">Free CSS Templates</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
static/black_white/contact.html
Normal file
79
static/black_white/contact.html
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>black_white - 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=UTF-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
|
||||||
|
</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">black<span class="logo_colour">_white</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">
|
||||||
|
<!-- insert your sidebar items here -->
|
||||||
|
<h3>Latest News</h3>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<p></p>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<h3>Useful Links</h3>
|
||||||
|
<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>
|
||||||
|
<h3>Search</h3>
|
||||||
|
<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">
|
||||||
|
<!-- insert the page content here -->
|
||||||
|
<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">
|
||||||
|
Copyright © black_white | <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">Free CSS Templates</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
135
static/black_white/examples.html
Normal file
135
static/black_white/examples.html
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>black_white - 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=UTF-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
|
||||||
|
</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">black<span class="logo_colour">_white</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">
|
||||||
|
<!-- insert your sidebar items here -->
|
||||||
|
<h3>Latest News</h3>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<p></p>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<h3>Useful Links</h3>
|
||||||
|
<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>
|
||||||
|
<h3>Search</h3>
|
||||||
|
<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">
|
||||||
|
<!-- insert the page content here -->
|
||||||
|
<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">
|
||||||
|
Copyright © black_white | <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">Free CSS Templates</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
static/black_white/index.html
Normal file
80
static/black_white/index.html
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>black_white</title>
|
||||||
|
<meta name="description" content="website description" />
|
||||||
|
<meta name="keywords" content="website keywords, website keywords" />
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/style/style.css" title="style" />
|
||||||
|
</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">black<span class="logo_colour">_white</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">
|
||||||
|
<!-- insert your sidebar items here -->
|
||||||
|
<h3>Latest News</h3>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<p></p>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<h3>Useful Links</h3>
|
||||||
|
<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>
|
||||||
|
<h3>Search</h3>
|
||||||
|
<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">
|
||||||
|
<!-- insert the page content here -->
|
||||||
|
<h1>Welcome to the black_white 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 9</li>
|
||||||
|
<li>FireFox 25</li>
|
||||||
|
<li>Google Chrome 31</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="footer">
|
||||||
|
Copyright © black_white | <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">Free CSS Templates</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
static/black_white/page.html
Normal file
75
static/black_white/page.html
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>black_white - 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=UTF-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
|
||||||
|
</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">black<span class="logo_colour">_white</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">
|
||||||
|
<!-- insert your sidebar items here -->
|
||||||
|
<h3>Latest News</h3>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<p></p>
|
||||||
|
<h4>New Website Launched</h4>
|
||||||
|
<h5>July 1st, 2014</h5>
|
||||||
|
<p>2014 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
|
||||||
|
<h3>Useful Links</h3>
|
||||||
|
<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>
|
||||||
|
<h3>Search</h3>
|
||||||
|
<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">
|
||||||
|
<!-- insert the page content here -->
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
Copyright © black_white | <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">Free CSS Templates</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
static/style/background.png
Normal file
BIN
static/style/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
static/style/bullet.png
Normal file
BIN
static/style/bullet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
BIN
static/style/graphic.png
Normal file
BIN
static/style/graphic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
static/style/link.png
Normal file
BIN
static/style/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 911 B |
BIN
static/style/search.png
Normal file
BIN
static/style/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
292
static/style/style.css
Normal file
292
static/style/style.css
Normal file
|
|
@ -0,0 +1,292 @@
|
||||||
|
html
|
||||||
|
{ height: 100%;}
|
||||||
|
|
||||||
|
*
|
||||||
|
{ margin: 0;
|
||||||
|
padding: 0;}
|
||||||
|
|
||||||
|
body
|
||||||
|
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
|
||||||
|
background: #F0EFE2 url(background.png) repeat;
|
||||||
|
color: #000;}
|
||||||
|
|
||||||
|
p
|
||||||
|
{ padding: 0 0 20px 0;
|
||||||
|
line-height: 1.7em;}
|
||||||
|
|
||||||
|
img
|
||||||
|
{ border: 0;}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
{ font: normal 175% 'century gothic', arial, sans-serif;
|
||||||
|
color: #000;
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
padding: 15px 0 5px 0;}
|
||||||
|
|
||||||
|
h2
|
||||||
|
{ font: normal 175% 'century gothic', arial, sans-serif;}
|
||||||
|
|
||||||
|
h4, h5, h6
|
||||||
|
{ margin: 0;
|
||||||
|
padding: 0 0 5px 0;
|
||||||
|
font: normal 120% arial, sans-serif;}
|
||||||
|
|
||||||
|
h5, h6
|
||||||
|
{ font: italic 95% arial, sans-serif;
|
||||||
|
padding: 0 0 15px 0;}
|
||||||
|
|
||||||
|
a, a:hover
|
||||||
|
{ outline: none;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #000;}
|
||||||
|
|
||||||
|
a:hover
|
||||||
|
{ text-decoration: none;}
|
||||||
|
|
||||||
|
.left
|
||||||
|
{ float: left;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 10px;}
|
||||||
|
|
||||||
|
.right
|
||||||
|
{ float: right;
|
||||||
|
width: auto;
|
||||||
|
margin-left: 10px;}
|
||||||
|
|
||||||
|
.center
|
||||||
|
{ display: block;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px auto;}
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
{ margin: 20px 0;
|
||||||
|
padding: 10px 20px 0 20px;
|
||||||
|
border: 1px solid #E5E5DB;
|
||||||
|
background: #FFF;}
|
||||||
|
|
||||||
|
ul
|
||||||
|
{ margin: 2px 0 22px 17px;}
|
||||||
|
|
||||||
|
ul li
|
||||||
|
{ list-style-type: circle;
|
||||||
|
margin: 0 0 6px 0;
|
||||||
|
padding: 0 0 4px 5px;}
|
||||||
|
|
||||||
|
ol
|
||||||
|
{ margin: 8px 0 22px 20px;}
|
||||||
|
|
||||||
|
ol li
|
||||||
|
{ margin: 0 0 11px 0;}
|
||||||
|
|
||||||
|
#main, #logo, #menubar, #site_content, #footer
|
||||||
|
{ margin-left: auto;
|
||||||
|
margin-right: auto;}
|
||||||
|
|
||||||
|
#header
|
||||||
|
{ background: transparent;
|
||||||
|
height: 202px;}
|
||||||
|
|
||||||
|
#logo
|
||||||
|
{ width: 898px;
|
||||||
|
position: relative;
|
||||||
|
height: 148px;
|
||||||
|
border-bottom: 2px solid #FFF;}
|
||||||
|
|
||||||
|
#logo #logo_text
|
||||||
|
{ position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
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;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
text-decoration: none;}
|
||||||
|
|
||||||
|
#logo_text h1 a .logo_colour
|
||||||
|
{ color: #FFF;}
|
||||||
|
|
||||||
|
#logo_text h2
|
||||||
|
{ font-size: 100%;
|
||||||
|
padding: 4px 0 0 0;
|
||||||
|
color: #FFF;}
|
||||||
|
|
||||||
|
#menubar
|
||||||
|
{ width: 898px;
|
||||||
|
height: 52px;
|
||||||
|
padding: 0;
|
||||||
|
background: #000;}
|
||||||
|
|
||||||
|
ul#menu, ul#menu li
|
||||||
|
{ float: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;}
|
||||||
|
|
||||||
|
ul#menu li
|
||||||
|
{ list-style: none;}
|
||||||
|
|
||||||
|
ul#menu li a
|
||||||
|
{ letter-spacing: 0.1em;
|
||||||
|
font: normal 100% arial, sans-serif;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
height: 17px;
|
||||||
|
margin: 10px 0 0 10px;
|
||||||
|
padding: 9px 26px 6px 26px;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
background: transparent;}
|
||||||
|
|
||||||
|
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
|
||||||
|
{ color: #FFF;
|
||||||
|
background: transparent url(transparent_light.png) repeat;}
|
||||||
|
|
||||||
|
#site_content
|
||||||
|
{ width: 854px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 auto 0 auto;
|
||||||
|
padding: 0 24px 20px 20px;
|
||||||
|
background: #FFF;}
|
||||||
|
|
||||||
|
.sidebar
|
||||||
|
{ float: right;
|
||||||
|
width: 210px;
|
||||||
|
padding: 0 15px 20px 15px;}
|
||||||
|
|
||||||
|
.sidebar ul
|
||||||
|
{ width: 198px;
|
||||||
|
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 40px;
|
||||||
|
display: block;
|
||||||
|
background: transparent url(link.png) no-repeat left center;}
|
||||||
|
|
||||||
|
.sidebar li a.selected
|
||||||
|
{ color: #7E2451;
|
||||||
|
text-decoration: none;}
|
||||||
|
|
||||||
|
#content
|
||||||
|
{ text-align: left;
|
||||||
|
float: left;
|
||||||
|
width: 595px;
|
||||||
|
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 6px 0;
|
||||||
|
padding: 0 0 4px 25px;
|
||||||
|
line-height: 1.5em;}
|
||||||
|
|
||||||
|
#footer
|
||||||
|
{ width: 898px;
|
||||||
|
font: normal 100% 'lucida sans unicode', arial, sans-serif;
|
||||||
|
height: 33px;
|
||||||
|
padding: 24px 0 5px 0;
|
||||||
|
text-align: center;
|
||||||
|
background: transparent;
|
||||||
|
color: #FFF;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;}
|
||||||
|
|
||||||
|
#footer a
|
||||||
|
{ color: #FFF;
|
||||||
|
text-decoration: none;}
|
||||||
|
|
||||||
|
#footer a:hover
|
||||||
|
{ color: #FFF;
|
||||||
|
text-decoration: underline;}
|
||||||
|
|
||||||
|
.search
|
||||||
|
{ color: #5D5D5D;
|
||||||
|
border: 1px solid #BBB;
|
||||||
|
width: 134px;
|
||||||
|
padding: 4px;
|
||||||
|
font: 100% arial, sans-serif;}
|
||||||
|
|
||||||
|
#colours
|
||||||
|
{ height: 0px;
|
||||||
|
text-align: right;
|
||||||
|
padding: 66px 16px 0px 300px;}
|
||||||
|
|
||||||
|
.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: 1px solid;
|
||||||
|
width: 99px;
|
||||||
|
margin: 0 0 0 212px;
|
||||||
|
height: 33px;
|
||||||
|
padding: 2px 0 3px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #000;
|
||||||
|
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: #F0EFE2;
|
||||||
|
color: #47433F;
|
||||||
|
border-top: 1px solid #FFF;}
|
||||||
BIN
static/style/transparent.png
Normal file
BIN
static/style/transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 B |
BIN
static/style/transparent_light.png
Normal file
BIN
static/style/transparent_light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 B |
17
templates/index.html
Normal file
17
templates/index.html
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Voidcorp challenges!</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
{{content}}
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue