initial commit

merge-requests/1/head
Julius de Jeu 2019-06-13 12:10:54 +02:00
commit 7d44f60311
24 changed files with 1068 additions and 0 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.vscode/
build

16
Pipfile Normal file
View 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
View 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
View 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
View 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
View 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
View 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()

View 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

View 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

View 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

View 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 &copy; 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>

View 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>&nbsp;</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 &copy; 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>

View 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 '&lt;p&gt;&lt;/p&gt;' 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>&nbsp;</span><input class="submit" type="submit" name="name" value="button" /></p>
</div>
</form>
</div>
</div>
<div id="footer">
Copyright &copy; 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>

View 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 &copy; 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>

View 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 &copy; 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
static/style/bullet.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 989 B

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 911 B

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
View 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;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 B

17
templates/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Voidcorp challenges!</title>
</head>
<body>
<header>
</header>
<main>
{{content}}
</main>
<footer>
</footer>
</body>
</html>