Home

by SwampFall

HTML

<body>
    <div id="header">
        
    </div>
    <div id="body">
        <div id="sidebar">
            <div id="examples">
                <div class="example" onclick="$('iframe').attr('src', 'https://jsfiddle.net/Spectral/qygx26u2/8/embedded/result/');">Examples</div>
                <div class="example" onclick="$('iframe').attr('src', 'https://jsfiddle.net/Spectral/qygx26u2/8/embedded/result/');">Examples</div>
            </div>
            <div id="exercises">
                <div class="exercise"></div>
            </div>
        </div>
        <div id="content">
            <textarea style="width:100%; height: 100%; opacity: 0.7;">Maanamulet {
	Personages {
		James Syndo {
			
		}
		Selena Varuna {
			
		}
		Delia Varuna {
			
		}
		Neil {
			
		}
	}
	Verhaal {
		VM00: DINSDAG 19 JULI / DONDERDAG 18 AUGUSTUS {
			H0:							Proloog {
				JS gaat dood in zijn droom waardoor hij niets meer weet van de afgelopen maand
			}
		}
			H1: 						Zomervakantie {
				James Syndo logeert bij "zijn" oma, omdat ze dicht bij zijn nieuwe school woont.
				Hij heeft het er erg naar zijn zin, ze spelen samen met speelkaarten etc...
				Op een dag komt James thuis en vindt zijn oma levensloos terug in de zetel.
				James stort in. Na een lange huilbui valt hij uiteindelijk in slaap.
			}
		VM01: VRIJDAG 16 SEPTEMBER {
			De volgende ochtend is er niks meer van oma te bespeuren, zelfs niet in James zijn herinneringen.
		}
			H2: 						Start school {
				19 SEPTEMBER 2016:
				James pakt zijn fiets en rijdt naar zijn nieuwe school.
				Zijn opleiding is "Master in de sterrenkunde (Leuven?)".
				Volgt enkele lessen, eet in het schoolrestaurant en gaat terug naar huis.
			}
			H3: 						School making friends etc {
			
		}
			H4: 						Having fun, cinema, frietkot, whatever {
			
		}
		VM02: ZONDAG 16 OKTOBER {
			Zn nieuwe vrienden van H3 keren zich tegen hem, alsof ze hem uit de vriendengroep willen.
		}
			H5: 						Dagboek vanaf having fun...

CSS

html, body {
    margin: 0px;
    padding: 0px;
}
div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
#header {
    width: 100%;
    height: 45px;
    position: fixed;
    background-color: grey;
}
#body {
    padding-top: 45px;
    height: 520px;
    font-size: 0px;
}
#sidebar {
    font-size: initial;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 20%;
    height: inherit;
    vertical-align: top;
    display: inline-block;
    background-color: lightgrey;
}
#examples {
    visibility: visible;
}
.example {
    padding: 5px;
    padding-left: 18px;
}
.example:hover {
    padding: 5px;
    padding-left: 18px;
    background-color: #bbbbbb;
}
#exercises {
    visibility: hidden;
}
#content {
    font-size: initial;
    width: 80%;
    height: inherit;
    display: inline-block;
    background: url("http://m.cdn.blog.hu/vi/vigyazo/image/2zr3qu0.jpg");
}
iframe {
    width: 100%;
    height: 520px;
}
#footer {
    width: 100%;
    height: 65px;
    position: fixed;
    bottom: 0px;
    background-color: grey;
}