hp seite 3 versuch

HTML

<body>
<header id="kopf">
  <div id="left">
    <img id="imgleft" src="http://www.minden-fewo.de/fileadmin/img/2013_layout2_1.jpg">
  <div id="grad">
 <p id="hopp1" style="position:relative;top:30px;">B</p>
  <p id="hopp2" style="position:relative;top:20px; background-position: -100%;">a</p>
 <p id="hopp3" style="position:relative;top:10px; background-position: -200%;">s</p> 
  <p id="hopp4" style="position:relative;top:0px; background-position: -300%;">t</p>
  <p id="hopp5" style="position:relative;top:-10px; background-position: -400%;">i</p>
  <p id="hopp6" style="position:relative;top:0px; background-position: -500%;">1</p>
  <p id="hopp7" style="position:relative;top:10px; background-position: -600%;">0</p>
   <p id="hopp8" style="position:relative;top:20px; background-position: -700%;">1</p>
   <p id="hopp9" style="position:relative;top:30px; background-position: -800%;">2</p>
  

</div>
 
 </div>

  <div id="right">
    <img id="imgright" src="http://karten.plz-suche.org/de/51d1/Karte_Minden.png">
  </div>
</header>


<main>
<div id="links"> 
<h1>
Scripte dieser Homepage</h1>
<p id="scriptlink1" class="scriptlink" >Basti1012 Überschrift</p>
<p id="scriptlink2" class="scriptlink" >Laufbild Footer</p>
<p id="scriptlink3" class="scriptlink" >1link zum script</p>
<p id="scriptlink4" class="scriptlink" >1link zum script</p>
<p id="scriptlink5" class="scriptlink" >1link zum script</p>
<p id="scriptlink6" class="scriptlink" >1link zum script</p>
<p id="scriptlink7" class="scriptlink" >1link zum script</p>
<p id="scriptlink8" class="scriptlink" >1link zum script</p>




</div>
<div id="mitte">
<div id="mittekopf"><h3>Sciptname</h3></div>
<div id="mittebauch">
</div>
</div>


</main>


<footer>
 asdfgh
</footer>


</body>

CSS

body {
 
 
 
	margin: 0px;
  height:100%;
}
header {
  display: flex;
  width: 100%;
  height: auto;

}
header #left {
  flex-basis: 80%;
  flex-shrink: 4;
  flex-grow:4;
 
}
header #right {
  flex-basis: 20%;
  flex-shrink: 1;
  flex-grow: 1;
}
header #imgleft {
  width: 100%;
  height: auto;
}
header #imgright {
  width: 100%;
  height: auto;
}
main {
  display: flex;
  align-items:stretch;
}

#links{
  display: inline-block;
  padding:2%;
  border:2px solid black;
  width:20%;
  height:70%;
  top:calc(30% + 2px);
//hyphens: auto; 
    //    text-align: justify;
  //     word-break: break-all;
}
a{
  color:black;
}
p:active{
  color:blue;
}
a:visited{
  color:yellow;
}

p { 
	font:12px arial, verdana, sans-serif ;
	margin-top: 0px; 
	text-align: justify;
	}
  
  
  #mitte{
    display: flex;
    flex-direction: column;
    vertical-align: top;
    width:100%;
    background:green;
    overflow:hidden;
 
  }
  #mittekopf{
    height:40px;
    padding:1%;
border-bottom:2px solid black;
border-left:2px solid black;
background:yellow;
  }
  #mittebauch{

     border-left:2px solid black;
     flex-grow: 1;
     height: 100%;
  }
 h3 {
	font: italic 30px arial, verdana, sans-serif;
 padding:5px 0 0 10px;
	margin: 1% 0px 0px 0px;
	color:Black;
  display:flex;
	 
}
footer {
  background-color: green;

  background:green url(http://www.ruengener.eu/aussicht/porta/weitwi_2_1600_01.jpg);
  background-size:cover;
  width:97vw;
  height:200px;
  border:2px solid black;
  display:flex;
  animation:backbild  12s linear infinite;
}
@keyframes backbild {
	from { background-position:0px, 0px}
	to { background-position:98vw,100vw}
}

 
 
#grad{
   position:absolute;
   padding:1vw;
 top:0px;
   font-size:10vw;
}
#grad p{
  display: inline-block;

   background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
   background-size: 800%;
 -webkit-background-clip: text;
 -webkit-text-fill-color:transparent;
font-size:100%;
   animation: los 1s linear...

JavaScript

$('#scriptlink1').click(function(){
 
 $('#test1').css("display","block")
   $('#mittebauch').html('<iframe class="frame" width="100%" height="100%" src="https://jsfiddle.net/basti1012/tofyr8kr/embedded/result,css/dark/"></iframe>')
 $('#mittekopf').html('<h3>Basti1012 Überschrift</h3>')
 })
  
 
  $('#scriptlink2').click(function(){
 
 $('#test1').css("display","block")
   $('#scriptinput').html('<iframe class="frame" width="100%" height="100%" src="https://jsfiddle.net/basti1012/jpqbu8jr/embedded/result,css/dark/"></iframe>')
 $('#mittekopf').html('<h3>Footer Laufschrift</h3>')
 })
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

/*
breitefooter=$(document).width()
 
bf=breitefooter/100*24
$('#fuss').css("left",-bf)
$('#fuss').css("width",breitefooter)
sd=10;

for(a=1;a<=sd;a++){
s=document.getElementsByTagName('a')[a].innerHTML;

var h=s.replace("link","");
 
//document.getElementsByTagName('a')[a].innerHTML=h;
}

  background:green url(http://www.ruengener.eu/aussicht/porta/weitwi_2_1600_01.jpg);

#kopf{
  background:green url(http://www.ruengener.eu/aussicht/porta/weitwi_2_1600_01.jpg);
  background-size:cover;
  position:absolute;
  width:100%;
  height:30%;
  border:2px solid black;
  display:flex;
  animation:backbild  12s linear infinite;
}
@keyframes backbild {
	from { background-position:0px, 0px}
	to { background-position:98vw,100vw}
}
*/