Untitled

<!--Home-->
<!DOCTYPE html>
<?php

  include './db_connect.php';

  $sh_id = '1';
  $sh_title = mysqli_query($con,"SELECT `title` FROM `texts` WHERE `id`='$sh_id'");
  $sh_text = mysqli_query($con,"SELECT `text` FROM `texts` WHERE `id`='$sh_id'");

  $sternkarte = './images/1.png';
  $sternkarte6 = './images/1.6.png';
  $sternkarte18 = './images/1.18.png';

 ?>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <link href='https://fonts.googleapis.com/css?family=Yantramanav' rel='stylesheet'>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <title>Astro Pool - Home</title>
  </head>
  <body>
    <img src="./images/icon.png" alt="Astro-Pool" class="logo">
    <div class="content">
      <ul class="navbar">
        <li class="menu-text">
          <a href="astro-pool/">Home</a>
        </li>
        <li class="menu-text">
          <a href="./aktuelles">Aktuelles am Himmel</a>
        </li>
        <li class="menu-text">
          <a href="astro-pool/einsteiger">Einsteiger</a>
        </li>
        <li class="menu-text">
          <a href="astro-pool/schulen">Schulen</a>
        </li>
        <li class="menu-text">
          <a href="astro-pool/medien">Medien</a>
        </li>
        <li class="menu-text">
          <a href="astro-pool/fragebox">Fragebox</a>
        </li>
        <li class="menu-text">
          <a href="astro-pool/shop">Shop</a>
        </li>
      </ul>
      <div class="spalte">
        <h1 class="title" style="text-align:center">Sternenhimmel im Mai 2020</h1>
        <div class="sternkarte">
          <img src="<?php echo $sternkarte ?>" alt="Der Sternenhimmel im Mai 2020" width="100%" height="100%">
          <br>
          <ul class="time">
              <form action="submit" method="post">
                <button lass="time-btn" type="submit" name="18h">18 Uhr</button>
                <button lass="time-btn" type="submit" name="6h">6 Uhr</button>
                <button lass="time-btn" type="submit" name="22h">22 Uhr</button>
              </form>
          </ul>
          <br>
        </div>
        <div class="sternkarte-text">
          <h3 class="sternkarte-title"><?php echo $sh_title ?></h3>
          <h4 class="text" style="padding-right:6%">Wer abends gegen 22 Uhr nach Südosten blickt, sieht den Orion mit seinen drei markanten Gürtelsternen. Über ihm sind die Hyaden (Stierkopf) mit dem orangen funkelnden Aldebaran erkennbar, noch etwas höher die Plejadensterngruppe. Fast in Zenitnähe strahlt Capella im Fuhrmann. Östlich von ihr entdecken wir die Zwillingssterne Pollux und Castor. Im Südosten geht der hellste Stern am Nachthimmel, Sirius, auf. Der Kleine Hund mit Prokyon steht über ihm. Um diese Zeit kann man den Roten Planeten Mars in den Fischen kaum übersehen.</h4>
        </div>
        <div class="mondphasen">
          <h3 class="sternkarte-title">Mondphasen im Dezember 2020</h3>
          <h4 class="sternkarte-title" style="font-weight:100;">Totale Sonnenfinsternis am 14. Dezember 2020</h4><br>
          <div class="mond-phasen">
            <div class="mond-daten">
              <div class="erster-mond">
                <img style="float: left;" width="25%" height="25%" src="./images/moon_last_quarter.png" alt=""><h4 class="monddaten" style="margin-right:10px; float: left; font-weight:100; vertical-align:10px;">8. Dezember</h4><h4 style="; font-weight:100; font-family:Arial;color:white">Letztes Viertel, Löwe</h4>
              </div>
              <br>
              <br>
              <br>
              <br>
              <br>
              <img style="float: left;" width="25%" height="25%" src="./images/new_moon.png" alt=""><h4 class="monddaten" style="margin-right:10px; float: left; font-weight:100; vertical-align:10px;">14. Dezember</h4><h4 style="margin-top:7.5%; font-weight:100; font-family:Arial; color:white">Neumond, Schlangenträger</h4>
              <br>
              <br>
              <br>
              <br>
              <img style="float: left;" width="25%" height="25%" src="./images/moon_first_quarter.png" alt=""><h4 class="monddaten" style="margin-right:10px; float: left; font-weight:100; vertical-align:10px;">22. Dezember</h4><h4 style="margin-top:7.5%; font-weight:100; font-family:Arial; color:white">Erstes Viertel, Fische</h4>
              <br>
              <br>
              <br>
              <br>
              <img style="float: left;" width="25%" height="25%" src="./images/full_moon.png" alt=""><h4 class="monddaten" style="margin-right:10px; float: left; font-weight:100; vertical-align:10px;">30. Dezember</h4><h4 style="margin-top:7.5%; font-weight:100; font-family:Arial; color:white">Vollmond, Zwillinge</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="spalte" style="">
        <div style="padding-right:10%">
          <h1 class="title" style="text-align:center">Das Ereignis des Monats</h1>
        </div>
        <video autoplay loop width="90%" height="90%" align="right" class="animation">
          <source src="./videos/3.mp4" type="video/mp4">
        </video>
        <h4 class="text" style="padding-right:10%">Der legendäre «Stern von Bethlehem» ist im Dezember 2020 am Südwesthimmel nach Sonnenuntergang zu sehen. Bis zum 21. Dezember rücken Jupiter und Saturn immer enger zusammen.</h4>
        <a href="#">Mehr Infos...</a>
        <div style="padding-right:10%">
          <h1 class="title" style="">Das Objekt des Monats</h1>
        </div>
        <div class="objekt-des-monats">
          <img width="90%" height="90%" src="./images/odm_1.png" alt="Orionnebel M42">
          <h4 class="text" style="padding-right:10%">auhghbppg aigul so OSIJFSILFILSJFOÖOHSSKsrjkjeniaöboeileabrbtvqe  erhtwhpotwtbhbieloituw VTIRBWOOIGWorwltitouWTOSIJZÖWLROITOOIbWOÖEIZ6P özsijböpoarktnjorizjerjriorjtzpronkhrjlorinzrtnjzoöritknrötzlorinzrtriozutnsp</h4><br>
        </div>
        <div class="astrowetter">
          <h3 class="text" style="font-weight:bold">Das Astrowetter heute</h3>
          <h4 class="text">Planen Sie Ihren nächsten Himmelsspaziergang!</h4>
          <iframe src="https://www.meteoblue.com/de/wetter/widget/three?geoloc=detect&nocurrent=0&noforecast=0&days=5&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&layout=dark"  frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" style="width: 575px; height: 610px"></iframe><div><!-- DO NOT REMOVE THIS LINK --><a href="https://www.meteoblue.com/de/wetter/woche/index?utm_source=weather_widget&utm_medium=linkus&utm_content=three&utm_campaign=Weather%2BWidget" target="_blank">Zu meteoblue</a></div><br>
        </div>
      </div>
      <div style="clear:left">
      </div>
    </div>
  </body>
</html>