Plan: Plan

by dirkk0

HTML

<!--Header-->
	<header id="header">
	
			</a>

<div class="title"><h1><font color="white">Stundenplan für Schüler</font
    ></h1></div>
<ul>
</ul>
	</header>
 <!--End header-->
 <div class="accordian">
	<ul>
		<li>
			<div class="image_title">
				<a href="">Klick hier, damit du die Erklärung siehst</a>
			</div>
			<a href="http://jsfiddle.net/dirkk0/kctub50f/49/show/" target=_blank>
				<img src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2010/09/spiral-notebooks.th.png"/>
			</a>
        </li>
        <li>
			<div class="image_title">
				<a href="">Wie haben wir den Stundenplan gemacht?</a>
			</div>
			<a href="http://www.jeasyui.com/tutorial/dd/dnd3.php" target=_blank>
				<img src="https://campustocareer.files.wordpress.com/2012/08/10714087-what-when-where-why-how-who-questions-white-chalk-handwriting-on-vintage-slate-blackboards-in-color.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="">Gerade zum Stundenplan</a>
			</div>
			<a href="http://jsfiddle.net/dirkk0/vzsr4grb/2/show/" target=_blank>
				<img src="http://materialminds.com/wp-content/uploads/2014/02/Success-vs-Failure1.jpg"/>
			</a>
		</li>
	</ul>
</div>

 <!--End menu-->
<section id="section">
	<html lang="en">


  <title>id demo</title>
  <style>
 
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 <h1><font color="white">Willkommen!</font>
     <div id=""><p><font color="white">Diese Seite ist spezial für Schüler, die ihren Stundenplan vergessen. Jetzt gibt es keine Chance  ihren Stundenplan wieder zu vergessen!</font></p></div>
 

	
	<aside id="aside">
<!--Footer-->
	<footer class="footer">
		<div id="left">
            <div><p><font color="white">Authoren: Daniela Angelova und Dirk Krause </p>
                <p>&copy2015 - Alle Rechte vorbehalten!</p></font></div>
		</div>
		<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new...

CSS

footer { 
    display: block;
}
* {
	margin: 0; 
	padding: 0;
}
body {
    background-color:#CBCBBF;
	font-family: arial, verdana, tahoma;
}
.accordian {
	width: 798px; height: 320px;
	overflow: hidden;
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 2000px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

/*Image title styles*/
.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}

JavaScript

http://www.jeasyui.com/tutorial/dd/dnd3.php
https://achildinmind.files.wordpress.com/2014/04/what-why-how2.jpg




https://campustocareer.files.wordpress.com/2012/08/10714087-what-when-where-why-how-who-questions-white-chalk-handwriting-on-vintage-slate-blackboards-in-color.jpg ...... beste