Informatik#Final-Mod-ZUKUNFT

In this example below you will see how to do a Informatik#Final-Mod-ZUKUNFT 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 ©
  • HTML
  • CSS
  • JavaScript
    <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<p style="color:red; font-size:10px;">(in Bearbeitung)</p></a>
         <a href="#">Präsens<p style="color:red; font-size:10px;">(in Bearbeitung)</p></a>
         <a href="#">Zukunft<p style="color:red; font-size:10px;">(in Bearbeitung)</p></a>
  </div>
    </div>
    </div>
    <b id="name">Marten Karl</b>
    
    <!--<a style="padding-left:25%;padding-top:0;font-family:'Bungee Hairline', cursive;text-align: center;letter-spacing: 20px;position: absolute;"><b>Physik</a></b>-->  
  </ul>
</nav>


<b id="clock" href="#"><div id="txt"></div></b>
  
  
  <div class="header">
    <div id="header-text" class="partner">
      <h1>Zukunft</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">
  <div="Der Urknall">
  <div class="Utxtheader">
     <h3>Big Crunch</h3>
  </div>  
    </br>
<p class="UKtxt" style="border: 2px solid rgba(0, 0, 0, 0.4);">Alles was man hoch wirft, kommt auch irgendwann wieder runter. Diese zugegeben nicht ganz so spektakuläre Erfahrung macht ein Kind schon ganz klein. Später in der Schule lernt dieses Kind dann aber, dass es in der Natur 4 verschiedene Grundkräfte gibt, und die Gravitation als eine von ihnen für das Zurückfallen der Dinge verantwortlich ist. Und je stärker der Wurf nach oben war, desto länger dauert es bis das Ding seinen höchsten Punkt erreicht und mit dem Zurückfallen beginnt. Dem Universum geht es da nicht anders. Seine ganzen Sterne und Galaxien entfernen sich seit dem Urknall voneinander. Das ist in etwa so, als hätte man all die galaktische Materie ringsum vom Zentrum weggeworfen. Nach der Big Crunch Theorie fällt diese aber irgendwann wieder in sich zusammen. Genau wie beim hochgeworfenen Ball auf der Erde soll es auch bei der Ausbreitung des Universums einen „höchsten“ Punkt geben, bei dem die Expansion aufhört und alles wieder rückwärts zusammendriftet.
  </br>
  </br>
Nach einer bestimmten Zeit kommt sich dann alles wieder näher, die komplette Materie wird dann, so wie beim Urknall, wieder in einem Punkt vereint sein. Das wäre dann der Big Crunch. Was danach passiert sei jetzt mal dahingestellt. Ob der Big Crunch tatsächlich eintritt, hängt von der Dichte und der Ausbreitungsgeschwindigkeit des Universums ab. Wir erinnern uns: Je schneller der Ball nach oben geworfen wird, desto länger dauert es bis der Umkehrpunkt erreicht ist. Es kann auch sein, dass der Ball (oder das Universum) überhaupt nicht mehr zurückfällt. Das ist dann der Fall, wenn die Startgeschwindigkeit so groß ist, dass die Gravitationskraft für eine entsprechende Abbremsung einfach nicht mehr ausreicht. Beim Ball kann man sehr leicht ausrechnen, wann er wieder auf der Erde aufschlagen wird. Beim Universum allerdings fehlt uns dazu eine genaue Angabe über die Materiedichte des Universums, die bei diesem Prozess eine so entscheidende Rolle spielt. Die großen Unbekannten dabei: Dunkle Energie und dunkle Materie. Ihr Einfluss auf die Dichte des Universums ist noch nicht erfasst. Der Big Crunch gilt heute aber als unwahrscheinlichstes der 3 Szenarien. Da kann man nichts anderes tun, als zähneknirschend auf die nächsten Ergebnisse der Astrophysiker warten.

</p>

<img src="http://www.planet-wissen.de/natur/weltall/universum/derurknalldieenstehungunseresuniversums100~_v-gseapremiumxl.jpg" style="width: 40%; height: 400px; margin-right: 25px; min-height: 150px; max-height: 400px; margin-right: 20px; margin-left: 20px; min-height: 150px; max-height: 400px;-webkit-border-radius: 400px; -moz-border-radius: 400px; border-radius: 400px;">

</div>
<div class="Der Urknall">
  <div class="Utxtheader">
     <h3 style="padding-top: 75px;">Big Rip</h3>
  </div> 
  </br>
  <p class="UKtxt" style="border: 2px solid rgba(0, 0, 0, 0.4);">Der Big Rip ist die jüngste der 3 Theorien und stellt das wohl dramatischste Ende für das Universum dar. Dieses Szenario wurde im Jahr 2003 entwickelt und hat einiges mit der dunklen Energie zu tun: Wir befinden uns heute in einem sich ausdehnenden Universum, das können Astronomen relativ leicht mit Entfernungsmessungen zu anderen Galaxien nachweisen. Nun ist die dadurch ermittelte Ausbreitungsgeschwindigkeit aber nicht konstant, das Universum breitet sich mit immer größer werdender Geschwindigkeit aus. Und das wird irgendwann zum Problem. Irgendwann kommt ein Punkt, an dem die Dinge dieser Ausdehnung nicht mehr standhalten können und regelrecht auseinander gerissen werden. Und das ist dann das Ende, ein kosmischer Endknall, bei dem alles Sein zerberstet und vernichtet wird. Aber keine Angst, bis dahin dauert's noch ein wenig. Der Big Rip würde in 22 Milliarden Jahren allem ein Ende setzen, so die anfänglichen Vermutungen.
</br>
</br>
Nun gab es aber Entwarnung. Der finale Knall wird nach heutigen Berechnungen nicht vor 30-50 Milliarden Jahren stattfinden. Und was hat das alles nun mit dunkler Energie zu tun? Ganz einfach, mit ihr wird versucht, die immer rascher anwachsende Ausdehnung des Universums zu erklären. Naja, so einfach ist es dann doch wieder nicht. Was genau die dunkle Energie ist, wo sie herkommt, und ob sie konstant bleibt, wissen wir bis heute nicht. Bleibt noch eine Kleinigkeit über den Big Rip zu sagen: Die Zeit davor. Was passiert wann und wo? 60 Millionen Jahre vor dem Big Rip werden die Galaxien anfangen ihre Form zu verlieren und auseinander zu driften. 3 Monate vor dem Ende zerfallen die Sonnensysteme. 30 Minuten davor zerbricht die Erde, sollte sie noch existieren. Und schließlich, 10^-19 Sekunden vor dem Aus, zerreißen Atome samt ihren Kernen. Was für eine elegante Sinfonie der Zerstörung.
</p>
  
  <img src="https://images.sciencedaily.com/2015/06/150630155221_1_900x600.jpg" style="width: 40%; float:left; margin-right: 20px; margin-left: 20px; min-height: 150px; max-height: 400px;-webkit-border-radius: 400px; -moz-border-radius: 400px; border-radius: 400px;"> 
  
</div>
  
</br>
</br>

<div class="DunkleEnergie">
  <div class="DEtxtheader">
     <h3>Big Whimper</h3>
  </div> 
  
  <p class="DEtxt" style="border: 2px solid rgba(0, 0, 0, 0.4);">Das große Jammern wird es genannt, dieses dritte Szenario vom Ende aller Dinge. Dabei wird es niemanden mehr geben, der am Ende jammern kann. Alles Leben und sämtliche lebensfreundliche Gebiete werden längst ausgelöscht sein, wenn die große Dunkelheit einbricht. Der Big Whimper stellt ein langsames Vergehen der Dinge bei ewiger Raumexpansion dar, also genau das Gegenteil zum Big Crunch. Heute gibt es noch viele Milliarden Sterne, und ständig bilden sich neue. Aber irgendwann wird den Sternen der Brennstoff ausgehen, und neues Material für die Entstehung von Sternen wird immer knapper. So kommt zwangsläufig der Punkt, an dem die letzten Sterne vergehen und so die ewige Dunkelheit im Universum einsetzen wird. Die noch verbliebene Materie kümmert das anfangs wenig. Aber auch sie wird vergehen: Durch Gravitationswellen, die jedes Objekt abstrahlt, geht Energie bzw. Masse verloren. Quantenmechanische Effekte bringen schwarze Löcher, Neutronensterne und weiße Zwerge zum Verdampfen. Und am Ende wird nichts übrig sein als immer energieärmer werdende Photonen und ein paar Elementarteilchen.</p>

<div id="circle"></div>  
  

</div>

</div>
  


</div>


</body>


/*Downloaded from https://www.codeseek.co/MGK_888/informatikfinal-mod-zukunft-vgLxdJ */
    @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');

.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);
}

/*.header {
    background-color: none;
    background-position: center center;
    background-size: cover;
    height: 400px;
    width: 100%;
}*/

#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(73,73,73,1);
  font-family: 'Permanent Marker', cursive;
  font-size: 125px;
  min-size: 50px;
  font-weight: 900;
  letter-spacing: 20px;
  text-align: center;
  position: relative;
  line-height: 60px;
  margin: 0;
  text-shadow: 10px 10px 0.001px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-size: 28px;
  font-weight: 100;
}

.Utxtheader {
  font-family: 'Permanent Marker', cursive;
  font-size: 25px;
  margin-left: 25px;
  text-shadow: 5px 5px 0.001px rgba(0, 0, 0, 0.1);
}

.ZEtxtheader {
  font-family: 'Permanent Marker', cursive;
  font-size: 25px;
  margin: 25px;
  float: left;
  text-shadow: 5px 5px 0.001px rgba(0, 0, 0, 0.1);
}

.DEtxtheader {
  font-family: 'Permanent Marker', cursive;
  font-size: 25px;
  margin: 25px;
  text-shadow: 5px 5px 0.001px rgba(0, 0, 0, 0.1);
}

.DunkleEnergie {
  float: left;
}

.UKtxt {
  font-family: 'PT Sans', sans-serif;
  width: 50%;
  text-align: justify;
  margin-left: 25px;
  text-decoration: none;
  float: left;
  min-height: 150px;
  max-height: 400px;
  overflow: scroll;
  padding: 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
}

.ZEtxt {
  font-family: 'PT Sans', sans-serif;
  width: 50%;
  text-align: justify;
  margin-left: 25px;
  text-decoration: none;
  float: left;
  min-height: 150px;
  max-height: 400px;
  overflow: scroll;
  padding: 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
}

.DEtxt {
  font-family: 'PT Sans', sans-serif;
  width: 50%;
  text-align: justify;
  margin: 25px;
  text-decoration: none;
  float: left;
  min-height: 150px;
  max-height: 400px;
  overflow: scroll;
  padding: 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);
}

 #circle {
      width: 400px;
      height: 400px;
      -webkit-border-radius: 400px;
      -moz-border-radius: 400px;
      border-radius: 400px;
      background: black;
      margin-right: 120px;
      float: right;
      margin-bottom: 10px;
    }

hr{
    width: 80%; 
    height: 2px; 
    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;*/


/*Downloaded from https://www.codeseek.co/MGK_888/informatikfinal-mod-zukunft-vgLxdJ */
    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;
}

Comments