Informatik#Final-Mod-JETZT

In this example below you will see how to do a Informatik#Final-Mod-JETZT with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MGK_888, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MGK_888 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Informatik#Final-Mod-JETZT</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="Informatik#Final-Mod-PRÄSENS.css"></link>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}	
  
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<title>Informatik Hausarbeit</title>
</head>
<body onload="startTime()">
<nav class="fixed-nav-bar">
  <!-- Fixed navigation bar content -->
  <ul>
    <a href="#">Home</a>
    <div class="dropdown">
    <a href="#" class="dropbtn">Themen</a>
       <div class="dropdown-content">
    <a href="#">Vergangenheit</a>
         <a href="#">Präsens</a>
         <a href="#">Zukunft</a>
  </div>
    </div>
    </div>
    <b id="name">Marten Karl</b>
    
  </ul>
</nav>

<b id="clock" href="#"><div id="txt"></div></b>
  
  
  <div class="header">
    <div id="header-text" class="partner">
      <h1>Jetzt</h1>
 </br>
 </br>
 </br>
    <div class="tooltip"><i>Physik</i>
  <span class="tooltiptext">Ein Projekt des Informatikkurses Q1 2016/17</span>
</div>
    </div>
  </div>

</br>
<hr>
</br>

<div class="Information">
  
  <h2>Kollision mit der Andromeda Galaxie</h2>  
  
  <div class="Maintxt">
<p class="Introtxt">Das Schicksal unserer Heimatgalaxie ist besiegelt: Die Milchstraße wird mit ihrer Nachbargalaxie Andromeda kollidieren und völlig umgekrempelt werden. Der interstellare Zusammenstoß wird die gigantischen Spiralgalaxien miteinander verschmelzen, sagt die US-Weltraumbehörde Nasa voraus . Allerdings kommt das Ende nicht gerade plötzlich: In rund vier Milliarden Jahren prallen die Sternensysteme aufeinander. Genug Zeit also, sich auf das Aus vorzubereiten.
  <br>
  <br>

"Nach fast einem Jahrhundert Spekulationen haben wir endlich ein klares Bild davon, was während der kommenden Milliarden Jahre passieren wird", sagte Sangmo Tony Sohn vom Space Telescope Science Institute (STScI) in Baltimore.
  
<br>
<br>
  
Seit Langem wissen Astronomen, dass sich die Andromeda-Galaxie und die Milchstraße annähern. Beide rasen mit etwa 400.000 Kilometern pro Stunde aufeinander zu. Unklar war bislang aber, ob sie miteinander kollidieren, sich nur streifen oder sogar verfehlen werden, weil sich die genaue Flugrichtung der Andromeda-Galaxie nicht feststellen ließ. Mit dem Hubble -Teleskop sei es nun erstmals gelungen, auch die seitwärts gerichtete Bewegung der Andromeda-Galaxie zu messen, sagte STScI-Teamleiter Roeland van der Marel. Dazu nahmen die Astronomen mit Hubble unsere Nachbargalaxie über sieben Jahre immer wieder ins Visier. Die hochauflösenden Bilder des Teleskops erlaubten den Forschern, die seitliche Bewegung der Galaxie zu messen.</p>
</div>
 
  <h3>Sieh ein Video dazu!</h3>  
<iframe class="AndroMilch" src="https://www.youtube.com/embed/PrIk6dKcdoU" allowfullscreen></iframe>
  
  <h2>Wie wird der Himmel dann aussehen?</h2>
  
<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://1.bp.blogspot.com/-YNnoF6zz-tA/VWwP_wjg7hI/AAAAAAAAAaA/25npKR8CYGA/s1600/WDED.jpg">
  
  <img class="mySlides" src="https://4.bp.blogspot.com/-6KKal4j1mi0/VSWBm5ABO-I/AAAAAAAAflU/shvwgwMFSuk/s1600/milky-way-collision-with-andromeda.jpg">
  
  <img class="mySlides" src="https://i.ytimg.com/vi/Ie9OTtnhNGQ/maxresdefault.jpg">
  
  <img class="mySlides" src="https://k30.kn3.net/taringa/B/5/E/9/E/2/-UnholyFrenzy/67F.png">
  
  <img class="mySlides" src="http://scienceblogs.de/astrodicticum-simplex/wp-content/blogs.dir/28/files/2012/07/i-57b076d40bfa8f41b069031ebf310ae4-galkol0.jpg">
  
  <img class="mySlides" src="http://images.cdn.impresa.pt/sicnot/2015-03-10-AP120531021810.jpg/original">
  
  <img class="mySlides" src="https://lh3.googleusercontent.com/-5BSGkZhre_w/UJ1y7QzwqdI/AAAAAAAADaI/AOf-BXAyJSY/s3600/%25D0%25A1%25D1%2582%25D0%25BE%25D0%25BB%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25B2%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5%2520%25D0%25B3%25D0%25B0%25D0%25BB%25D0%25BB%25D0%25B0%25D0%25BA%25D1%2582%25D0%25B8%25D0%25BA%2520%25D0%2590%25D0%25BD%25D0%25B4%25D1%2580%25D0%25BE%25D0%25BC%25D0%25B5%25D0%25B4%25D1%258B%2520%25D0%25B8%2520%25D0%259C%25D0%25BB%25D0%25B5%25D1%2587%25D0%25BD%25D0%25BE%25D0%25B3%25D0%25BE%2520%25D0%25BF%25D1%2583%25D1%2582%25D0%25B8%25208.png">
  
  <img class="mySlides" src="https://cdn.spacetelescope.org/archives/images/wallpaper4/ann1206a.jpg">
</div>


  
  
</div>
  




</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MGK_888/informatikfinal-mod-jetzt-bgEZWw */
@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Bungee+Hairline|Codystar|Delius+Swash+Caps|Megrim|Montserrat+Subrayada');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Yatra+One');
@import url('https://fonts.googleapis.com/css?family=Space+Mono');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Dosis');
@import url('https://fonts.googleapis.com/css?family=Raleway');

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 160, 135, 0.9);
  color: white;
}
a:link {
    color: white;
    background-color: transparent;
    text-decoration: none;
    padding-right: 30px;
    font-family: 'Montserrat', sans-serif;
}
a:visited {
    color: black;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: rgb(212, 232, 211);
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
#name {
  margin-right: 20px;
  font-family: 'Megrim', cursive;
  float: right;
}
#clock {
  color: black;
  position: fixed;
  margin-top: 50px;
  padding-left: 10px;
  font-family: 'Dosis', sans-serif;
  z-index: 2;
}
.dropbtn {
    background-color: rgba(0, 160, 135, 0.0);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
    margin-top: 15px;
}
.dropdown:hover .dropbtn {
    background-color: rgb(0, 160, 135);
}
body {
    font-family: "Lato", sans-serif;
    background-color: white;
}
.backimg {
  width: 100%;
  height: 400px;
  margin-top: 42px;
  position: fixed;
  z-index: -1;
}
#header-text {
  margin: 0 auto;
  position: relative;
  text-align: center;
  padding-top: 150px;
  width: 100%;
}
.tooltip {
    color: black;
    font-family: 'Megrim', cursive;;
    text-align: center;
    font-size: 28px;
    font-weight: 100;
    position: relative;
    display: inline-block;
    border-bottom: none;
}
.tooltiptext {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-size: 15px;
  font-weight: 200;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
h1 { 
  color: rgba(0,0,0,0.75);
  font-family: 'Permanent Marker', cursive;
  font-size: 125px;
  min-size: 50px;
  font-weight: 900;
  letter-spacing: 20px;
  text-align: center;
  position: relative;
  margin: 0;
  line-height: 60px;
  text-shadow: 10px 10px 1px rgba(216, 0, 0, 0.5), -10px 10px 1px rgba(22, 196, 0, 0.5);
}
h2 {
  color: black;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-size: 28px;
  font-weight: 100;
}
h3 {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 25px;
}
.Introtxt {
  margin: auto;
  width: 75%;
  font-size: 20px;
  font-family: 'Raleway', sans-serif;
  padding-top: 50px;
  padding-bottom: 50px;
  z-index: 1;
  background: white;
}
.AndroMilch {
  width: 600px;
  height: 300px;
  margin: auto;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
}
.mySlides {
  margin: 0;
  width: 100%;
}
hr{
    width: 80%; 
    height: 1px; 
    margin: 0 auto;
    background: black;
}



/* 
font-family: 'Codystar', cursive;
font-family: 'Montserrat Subrayada', sans-serif;
font-family: 'Delius Swash Caps', cursive;
font-family: 'Bungee Hairline', cursive;
font-family: 'Megrim', cursive;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Yatra One', cursive;
font-family: 'Space Mono', monospace;
font-family: 'Permanent Marker', cursive;
font-family: 'PT Sans', sans-serif;
font-family: 'Raleway', sans-serif;
*/

Comments