website

M293-1/.htaccess

+AuthType Basic
+AuthName "Geschützter Bereich"
+AuthUserFile /srv/vhosts/inf-293-22h-m293user18.iet-gibb.net/tmp/.htpasswd
+Require valid-user
\ No newline at end of file

M293-1/.htpasswd

+inf-293-22h-m293user18:$apr1$vznatqop$XST6vbh4QTeQ5eDRjlubl0
\ No newline at end of file

M293-1/css/custom.css

+.header-image {
+    background-image: url(../img/black-hole.jpg);
+    height: 100vh;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+    z-index: -1;
+}
+.facebook {
+    color: #fff!important;
+    background-color: #4267B2!important
+}
+.twitter {
+    color: #fff!important;
+    background-color: #1DA1F2!important
+}
+.youtube {
+    color: #fff!important;
+    background-color: #FF0000!important
+}
+.instagram {
+    color: #fff!important;
+    background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)
+}
+.linkedin {
+    color: #fff!important;
+    background-color: #007bb5!important
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+  
+  /* Modal Content/Box */
+  .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+  }
+  
+  /* The Close Button */
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
\ No newline at end of file

M293-1/css/w3-theme-black.css

+.w3-theme-l5 {
+    color: #000 !important;
+    background-color: #f0f0f0 !important
+}
+
+.w3-theme-l4 {
+    color: #000 !important;
+    background-color: #cccccc !important
+}
+
+.w3-theme-l3 {
+    color: #fff !important;
+    background-color: #999999 !important
+}
+
+.w3-theme-l2 {
+    color: #fff !important;
+    background-color: #666666 !important
+}
+
+.w3-theme-l1 {
+    color: #fff !important;
+    background-color: #333333 !important
+}
+
+.w3-theme-d1 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d2 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d3 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d4 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-d5 {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-light {
+    color: #000 !important;
+    background-color: #f0f0f0 !important
+}
+
+.w3-theme-dark {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme-action {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-theme {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-text-theme {
+    color: #000000 !important
+}
+
+.w3-border-theme {
+    border-color: #000000 !important
+}
+
+.w3-hover-theme:hover {
+    color: #fff !important;
+    background-color: #000000 !important
+}
+
+.w3-hover-text-theme:hover {
+    color: #000000 !important
+}
+
+.w3-hover-border-theme:hover {
+    border-color: #000000 !important
+}
\ No newline at end of file

M293-1/css/wildbow.css

+html,body,p,h1,h2,h3,h4,h5,h6 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
+
+h1 {
+  color: #26201D;
+}
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #483C34;
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+  }
+  
+  ul li {float: left;}
+  
+  ul li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+
+  ul li.right {float: right;}
+  
+  @media screen and (max-width: 600px) {
+    ul li.right, 
+    ul li {float: none;}
+  }
+  ul li a:hover {
+    background-color: #997F6D;;
+  }
+  li {
+    padding-left: 11%;
+  }
+
+footer {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #26201D;
+}
+
+h4 {
+    display: inline;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+  
+  @media screen and (max-width: 600px) {
+    footer h4.right, 
+    footer h4 {float: none;}
+  }
+
+  .profile {
+    max-width: 100%;
+    height: auto;
+    display: inline;
+  }
+
+button {
+  padding: 0;
+  border: none;
+  background: none;
+  color: #ffff;
+}
+button:hover {
+  cursor: pointer;
+}
+
+.modal {
+  z-index: 3;
+  display: none;
+  padding-top: 100px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4)
+}
+
+.modal-content {
+  margin: auto;
+  background-color: #fff;
+  position: relative;
+  padding: 0;
+  outline: 0;
+  width: 600px
+}
+@media (max-width:600px) {
+  .w3-modal-content {
+      margin: 0 10px;
+      width: auto!important
+  }
+  .w3-modal {
+      padding-top: 30px
+  }
+}
+@media (max-width:768px) {
+  .w3-modal-content {
+      width: 500px
+  }
+  .w3-modal {
+      padding-top: 50px
+  }
+}
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+.contact-color {
+  border-bottom: 6px solid #483C34!important;
+}
+
+.item {
+  display: inline-block;
+}
+/* on PC */
+@media screen and (min-width: 550px) {
+  .wbpp {
+    float: left;
+    width: 40%;
+    padding-right: 15px;
+  }
+  .wbpp img {
+    width: 100%;
+  }
+  .text1 {
+    float: left;
+    width: 60%;
+  }
+}
+/* on Mobile */
+@media screen and (max-width: 550px) {
+  .wbpp {
+    width: 100%;
+  }
+  .wbpp img {
+    width: 100%;
+  }
+  .text1 {
+    width: 100%;
+  }
+}
+
+table {
+  width: 100%;
+  border: 1px solid #000000;
+}
+
+th, td {
+  border: 1px solid #000000;
+  text-align: left;
+  padding: 8px;
+}
\ No newline at end of file

M293-1/impressum.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>W3.CSS Template</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="./css/wildbow.css">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<style>
+</style>
+</head>
+<body id="myPage">
+
+<!-- Header -->
+<header class="w3-display-container w3-content w3-center" style="max-width:1500px">
+    <img class="w3-image" src="/img/Logoheader.jpg" alt="Windbow main characters" width="1500" height="600">
+    
+    
+<!-- Navbar -->
+<ul>
+    <li><a href="index.html">Wildbow</a></li>
+    <li><a href="parahumans.html">Parahumans</a></li>
+    <li><a href="otherverse.html">Otherverse</a></li>
+    <li><a href="twig.html">Twig</a></li>
+    <li><a href="links.html">Links</a></li>
+  </ul>
+</header>
+
+<!-- Main content -->
+<div class="w3-main">
+
+    
+  <div class="w3-row w3-padding-64">
+    <div class="w3-twothird w3-container">
+      <h1 class="">Impressum</h1>
+      <p>Nora Sugden<br/>Haldimoosstrasse 30<br/>4922 Bützberg<br/>Switzerland<br/><strong>E-Mail</strong>: noraevelyns@hotmail.com<br/><br/><strong>Haftungsausschluss</strong><br/>Der Autor übernimmt keine Gewähr für die Richtigkeit, Genauigkeit, Aktualität, Zuverlässigkeit und Vollständigkeit der Informationen.<br/>Haftungsansprüche gegen den Autor wegen Schäden materieller oder immaterieller Art, die aus dem Zugriff oder der Nutzung bzw. Nichtnutzung der veröffentlichten Informationen, durch Missbrauch der Verbindung oder durch technische Störungen entstanden sind, werden ausgeschlossen.<br/><br/>Alle Angebote sind freibleibend. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.<br/><br/><strong>Haftungsausschluss für Inhalte und Links</strong><br/>Verweise und Links auf Webseiten Dritter liegen ausserhalb unseres Verantwortungsbereichs. Es wird jegliche Verantwortung für solche Webseiten abgelehnt. Der Zugriff und die Nutzung solcher Webseiten erfolgen auf eigene Gefahr des jeweiligen Nutzers.<br/><br/><strong>Urheberrechtserklärung</strong><br/>Die Urheber- und alle anderen Rechte an Inhalten, Bildern, Fotos oder anderen Dateien auf dieser Website, gehören ausschliesslich Nora Sugden oder den speziell genannten Rechteinhabern. Für die Reproduktion jeglicher Elemente ist die schriftliche Zustimmung des Urheberrechtsträgers im Voraus einzuholen.<br/><br/><strong>Quelle</strong>: <a style='color:inherit;text-decoration:none;' href='https://brainbox.swiss/'>BrainBox Solutions</a></p>
+    </div>
+<!-- END MAIN -->
+</div>
+<footer id="myFooter">
+  <div class="">
+      <h4 style="float: left;"><button id="myBtn">Contact</button></h4>
+      <h4 style="float: right;"><a style='text-decoration:none;' href="impressum.html">Impressum</a></h4>
+</footer>
+<!-- The Modal -->
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <!-- Contact Container -->
+    <div class="w3-container w3-padding-64 w3-theme-l5" id="contact">
+      <div class="w3-row">
+          <div class="w3-col m5">
+              <div class="w3-padding-16"><span class="w3-xlarge contact-color">Contact Wildbow</span></div>
+              <h3>Address</h3>
+              <p>Any questions or messages to the man himself?</p>
+              <p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i>&nbsp;&nbsp;Ottowa, Canada</p>
+              <p><i class="fa fa-phone w3-text-teal w3-xlarge"></i>&nbsp;&nbsp;+00 1234567890</p>
+              <p><i class="fa fa-envelope-o w3-text-teal w3-xlarge"></i>&nbsp;&nbsp;Wildbowpig at gmail dot com</p>
+          </div>
+          <div class="w3-col m7">
+              <form class="w3-container w3-card-4 w3-padding-16 w3-white" action="https://www.w3schools.com/action_page.php" target="_blank">
+                  <div class="w3-section">
+                      <label>Name</label>
+                      <input class="w3-input" type="text" name="Name" required="">
+                  </div>
+                  <div class="w3-section">
+                      <label>Email</label>
+                      <input class="w3-input" type="text" name="Email" required="">
+                  </div>
+                  <div class="w3-section">
+                      <label>Message</label>
+                      <input class="w3-input" type="text" name="Message" required="">
+                  </div>
+                  <input class="w3-check" type="checkbox" checked="" name="Like">
+                  <label>I agree to the terms of service.</label>
+                  <button type="submit" class="w3-button w3-right w3-theme">Send</button>
+              </form>
+          </div>
+      </div>
+  </div>
+  </div>
+
+</div>
+
+<script>
+  // Get the modal
+  var modal = document.getElementById("myModal");
+  
+  // Get the button that opens the modal
+  var btn = document.getElementById("myBtn");
+  
+  // Get the <span> element that closes the modal
+  var span = document.getElementsByClassName("close")[0];
+  
+  // When the user clicks the button, open the modal 
+  btn.onclick = function() {
+    modal.style.display = "block";
+  }
+  
+  // When the user clicks on <span> (x), close the modal
+  span.onclick = function() {
+    modal.style.display = "none";
+  }
+  
+  // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+  </script>
+
+
+</body>
+</html>