First Design with two fractals

This is the first design and first version of Fractex. It includes two fractals: the julia-fractal and the mandelbrot set.

.gitignore

@@ -0,0 +1,2 @@
+# IntelliJ project files
+.idea

.htaccess

@@ -0,0 +1,3 @@
+Allow from all
+
+DirectoryIndex julia.html

css/class.css

@@ -0,0 +1,82 @@
+/*
+ * Sections for the index page
+ */
+.section {
+	margin-bottom: 50px;
+	padding: 35px 25px;
+	background-color: #0c0c0c;
+}
+
+.section h2 {
+	margin-bottom: 30px;
+}
+
+/*
+ * Previews
+ */
+.preview {
+	display: inline-block;
+	position: relative;
+	margin: 10px;
+	background-color: #1a1a1a;
+	width: 300px;
+	height: 300px;
+}
+
+.preview .preview_image {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	right: 10px;
+	bottom: 46px;
+	background-position: center;
+	background-size: cover;
+}
+
+.preview .preview_text {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 15px;
+	text-align: center;
+	background-color: #1a1a1a;
+	color: inherit;
+}
+
+/*
+ * Boxes on the right side for information
+ */
+.box {
+	margin: 0;
+	padding: 30px;
+	background-color: #0c0c0c;
+}
+
+.box.title {
+	position: relative;
+	background-color: #282828;
+	text-align: center;
+}
+
+.box.title:before {
+	position: absolute;
+	top: 32px;
+	left: -12px;
+	content: '';
+	background-color: inherit;
+	transform: rotate(45deg);
+	width: 24px;
+	height: 24px;
+}
+
+/*
+ * Media Queries
+ */
+@media only all and (max-width: 1150px)
+{
+	.box.title:before {
+		top: -12px;
+		left: 48%;
+	}
+}

css/reset.css

@@ -0,0 +1,52 @@
+/*
+ * http://meyerweb.com/eric/tools/css/reset/
+ * v2.0 | 20110126
+ * License: none (public domain)
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	font-size: 100%;
+	vertical-align: baseline;
+	box-sizing: border-box;
+}
+
+/*
+ * HTML5 display-role reset for older browsers
+ */
+article, aside, details, figcaption, figure,
+footer, header, menu, nav, section, main {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,198 @@
+html,
+body {
+	font-family: 'Josefin Sans', sans-serif;
+	letter-spacing: 0.05em;
+	background-color: #111;
+	color: #eee;
+}
+
+#header {
+	background-color: #050505;
+	overflow: hidden;
+}
+
+#header #header_title {
+	float: left;
+	width: 200px;
+}
+
+#header #header_title a {
+	display: block;
+	padding: 25px;
+	text-decoration: none;
+	color: #eee;
+}
+
+#header #header_nav {
+	float: right;
+	height: 90px;
+}
+
+#header #header_nav ul li {
+	display: inline-block;
+}
+
+#header #header_nav ul li a {
+	display: block;
+	margin: 0 10px;
+	padding: 35px 25px 30px;
+	font-size: 20px;
+	font-weight: bold;
+	text-decoration: none;
+	color: inherit;
+}
+
+#header #header_nav ul li a:hover:first-letter {
+	color: #d91e18;
+}
+
+#main {
+	margin: 30px 0 0;
+	overflow: hidden;
+}
+
+#main #left {
+	float: left;
+	margin: 20px;
+	width: 800px;
+}
+
+#main #left #explorer {
+	position: relative;
+	width: 800px;
+	height: auto;
+	overflow: hidden;
+}
+
+#main #left #explorer #fractal {
+	width: 800px;
+	height: 600px;
+}
+
+#main #left #explorer #overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+#main #left #explorer #overlay p {
+	padding: 20px 80px;
+	text-align: center;
+	width: 100%;
+}
+
+#main #left #explorer #control {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	text-align: center;
+}
+
+#main #right {
+	margin: 20px 20px 20px 880px;
+}
+
+#footer {
+	padding: 10px;
+	font-size: 0.8em;
+	text-align: center;
+}
+
+/*
+ * Media Queries
+ */
+@media only all and (max-width: 1350px)
+{
+	#main #left {
+		width: 600px;
+	}
+
+	#main #left #explorer {
+		width: 600px;
+	}
+
+	#main #left #explorer #fractal {
+		width: 600px;
+		height: 450px;
+	}
+
+	#main #right {
+		margin-left: 680px;
+	}
+}
+
+@media only all and (max-width: 1150px)
+{
+	#header #header_title {
+		float: none;
+		width: 100%;
+	}
+
+	#header #header_nav {
+		float: none;
+		height: auto;
+	}
+
+	#main #left {
+		float: none;
+		width: 100%;
+		margin: 20px auto;
+	}
+
+	#main #left #explorer {
+		width: 100%;
+	}
+
+	#main #left #explorer #fractal {
+		margin: 0 auto;
+	}
+
+	#main #left #explorer #overlay {
+		width: 600px;
+		height: 450px;
+		margin: 0 auto;
+	}
+
+	#main #left #explorer #overlay p {
+		padding: 10px;
+	}
+
+	#main #right {
+		margin: 75px 100px 20px;
+	}
+}
+
+@media only all and (max-width: 650px)
+{
+	#header #header_nav ul li {
+		display: list-item;
+	}
+
+	#header #header_nav ul li a {
+		padding: 20px;
+	}
+
+	#main #left #explorer #fractal {
+		width: 400px;
+		height: 300px;
+		margin: 0 auto;
+	}
+
+	#main #left #explorer #overlay {
+		width: 400px;
+		height: 300px;
+	}
+
+	#main #left #explorer #control {
+		position: static;
+		padding: 10px;
+		width: 100%;
+	}
+
+    #main #right {
+	    margin: 20px;
+    }
+}