test commit
DexterHK
commit
4b9fa1e9f0
|
|
@ -0,0 +1,49 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>404 - Page Or Resource Not Found</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 24pt;
|
||||
background-color: #000;
|
||||
color: #000;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 40px auto;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
color: #a12727;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a {
|
||||
color:white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.links {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.links a {
|
||||
margin: 0px 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>404 - Page Or Resource Not Found</h1>
|
||||
<div class="links">
|
||||
<a href="/">Bring me back home</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||
<p class="p1">
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Datenschutz </strong></span>
|
||||
<br><br>
|
||||
<strong>wir nehmen Datenschutz ernst.</strong> <br>
|
||||
Der Schutz Ihrer Privatsphäre bei der Verarbeitung persönlicher Daten ist für uns ein wichtiges Anliegen. Wenn Sie unsere Webseite besuchen, speichern unsere Webserver standardmäßig die IP Ihres Internet Service Provider, die Webseite, von der aus Sie uns besuchen, die Webseiten, die Sie bei uns besuchen sowie das Datum und die Dauer des Besuches. Diese Informationen sind für die technische Übertragung der Webseiten und den sicheren Serverbetrieb zwingend erforderlich. Eine personalisierte Auswertung dieser Daten erfolgt nicht.
|
||||
<br><strong>Personenbezogene Daten</strong> <br>
|
||||
Personenbezogene Daten sind Daten über Ihre Person. Diese beinhalten Ihren Namen und Ihre Email Adresse. Sie müssen auch keine personenbezogenen Daten preisgeben um unsere Internetseite besuchen zu können. <br>
|
||||
In einigen Fällen benötigen wir Ihren Namen und Adresse sowie weitere Informationen um Ihnen die gewünschte Dienstleistung anbieten zu können. Wenn Sie einen unserer Services nutzen, sammeln wir in der Regel nur die Daten die notwendig sind um Ihnen unseren Service bieten zu können. Möglicherweise fragen wir Sie nach weiteren Informationen, die aber freiwilliger Natur sind. Wann immer wir personenbezogene Daten verarbeiten, tun wir dies um Ihnen unseren Service anbieten zu können oder um unsere kommerziellen Ziele zu verfolgen.
|
||||
<br><strong>Automatisch gespeicherte nicht personenbezogene Daten</strong>
|
||||
<br>Wenn Sie unsere Internetseiten besuchen, speichern wir aus administrativen und technischen Gründen bestimmte Informationen. Diese sind: Typ und Version des verwendeten Browsers, Datum und Uhrzeit des Zugriffs, sowie die IP Adresse.
|
||||
Diese Daten werden anonymisiert und lediglich für statistische Zwecke bzw. dafür verwendet, unsere Internet- und Onlinedienste zu verbessern.
|
||||
<br>Diese anonymisierten Daten werden getrennt von personenbezogenen Daten auf sicheren Systemen gespeichert und können keinen individuellen Personen zugeordnet werden. Das bedeutet, dass Ihre personenbezogenen Daten jederzeit geschützt bleiben.
|
||||
<br><strong>Cookies</strong> <br>Wenn Sie unsere Internetseiten besuchen speichern wir möglicherweise Informationen auf Ihrem Computer in Form von Cookies. Cookies sind kleine Dateien die von einem Internetserver an Ihren Browser übertragen und auf dessen Festplatte gespeichert werden. Die Rechtsgrundlage für die Verwendung von Cookies stellt dabei Art. 6 Abs. 1 lit f DSGVO dar.
|
||||
Lediglich die Internet Protokoll Adresse wird hierbei gespeichert keine sonstigen personenbezogenen Daten. Diese Information die in den Cookies gespeichert wird erlaubt es, Sie bei dem nächsten Besuch auf unserer Internetseite automatisch wiederzuerkennen, wodurch Ihnen die Nutzung erleichtert wird.
|
||||
<br>Natürlich können Sie unsere Internetseiten auch besuchen ohne Cookies zu akzeptieren. Wenn Sie nicht möchten, dass Ihr Computer beim nächsten Besuch wiedererkannt wird können Sie die Verwendung von Cookies auch ablehnen indem Sie die Einstellungen in Ihrem Browser auf „Cookies ablehnen“ ändern. Die jeweilige Vorgehensweise finden Sie in der Bedienungsanleitung Ihres jeweiligen Browsers. Wenn Sie die Verwendung von Cookies ablehnen, kann es jedoch zu Einschränkungen in der Nutzung mancher Bereiche unserer Internetseiten kommen.
|
||||
Rechtsgrundlage für den Einsatz der Cookies ist unser berechtigtes Interesse gem. Art. 6 Abs. 1 lit. f DSGVO.
|
||||
<br><strong>Sicherheit</strong><br>Wir haben technische und administrative Sicherheitsvorkehrungen getroffen um Ihre personenbezogenen Daten gegen Verlust, Zerstörung, Manipulation und unautorisierten Zugriff zu schützen. All unsere Mitarbeiter sowie für uns tätige Dienstleister sind auf die gültigen Datenschutzgesetze verpflichtet.
|
||||
<br>Wann immer wir personenbezogene Daten sammeln und verarbeiten werden diese verschlüsselt bevor sie übertragen werden. Das heißt, dass Ihre Daten nicht von Dritten missbraucht werden können. Unsere Sicherheitsvorkehrungen unterliegen dabei einem ständigen Verbesserungsprozess und unsere Datenschutzerklärungen werden ständig überarbeitet. Bitte stellen Sie sicher, dass Ihnen die aktuellste Version vorliegt.
|
||||
<br> <strong>Bettroffenenrechte</strong> <br>Bitte kontaktieren Sie uns jederzeit, wenn Sie sich informieren möchten welche personenbezogenen Daten wir über Sie speichern bzw. wenn Sie diese berichtigen oder löschen lassen wollen. Desweiteren haben Sie das Recht auf Einschränkung der Verarbeitung (Art. 18 DSGVO), ein Widerspruchsrechts gegen die Verarbeitung (Art. 21 DSGVO) sowie das Recht auf Datenübertragbarkeit (Art. 20 DSGVO).In diesen Fällen wenden Sie sich bitte direkt an uns.
|
||||
<br><strong>Änderungen dieser Datenschutzerklärung</strong><br>Wir behalten uns das Recht vor, unsere Datenschutzerklärungen zu ändern falls dies aufgrund neuer Technologien notwendig sein sollte. Bitte stellen Sie sicher, dass Ihnen die aktuellste Version vorliegt. Werden an dieser Datenschutzerklärung grundlegende Änderungen vorgenommen, geben wir diese auf unserer Website bekannt.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p3">
|
||||
<span id="titleschwarz" > Erweiterte Suche </span> <br><br>
|
||||
<form action="">
|
||||
<input type="search" class="buchtitel" list="Titel">
|
||||
<datalist id="Titel">
|
||||
<option value="Titel"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" class="buchtiteloptions" list="buchtiteloptionen">
|
||||
<datalist id="buchtiteloptionen">
|
||||
<option value="Percy Jackson: Diebe im Olymp"></option>
|
||||
<option value="The Hundred and One Dalmatians"></option>
|
||||
<option value="Penguin Highway"></option>
|
||||
<option value="Es"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" class="und-wort1" list="Und">
|
||||
<datalist id="Und">
|
||||
<option value="und"></option>
|
||||
<option value="oder"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" class="autor" list="Autor">
|
||||
<datalist id="Autor">
|
||||
<option value="Autor"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" class="autoroptions" list="autoroptionen">
|
||||
<datalist id="autoroptionen">
|
||||
<option value="Rick Riordan"></option>
|
||||
<option value="Dodie Smith"></option>
|
||||
<option value="Tomihiko Morimi"></option>
|
||||
<option value="Stephen Kind"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" class="und-wort2" list="Und" >
|
||||
<datalist id="Und">
|
||||
<option value="und"></option>
|
||||
<option value="oder"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" class="stichwort" list="Stichwort">
|
||||
<datalist id="Stichwort">
|
||||
<option value="Stichwort"></option>
|
||||
</datalist>
|
||||
|
||||
<input type="search" class="stichwörteroptions" list="stichwörteroptionen">
|
||||
<datalist id="stichwörteroptionen">
|
||||
<option value="Wissenschaft"></option>
|
||||
<option value="Progress"></option>
|
||||
<option value="Mano"></option>
|
||||
<option value="Phänomenologie"></option>
|
||||
<option value="Kinder"></option>
|
||||
<option value="Habits"></option>
|
||||
<option value="Algebra"></option>
|
||||
</datalist>
|
||||
|
||||
|
||||
|
||||
<span id="titleschwarz" class="p4" style> Weitere Suchkriterien</span><br><br></p>
|
||||
<span class="p5">Jahr von </span>
|
||||
<input type="date" class="p6" name="Buchdatum1">
|
||||
<span class="p7">bis </span>
|
||||
<input type="date" class="p8" name="Buchdatum2">
|
||||
<span class="p9">Sprache </span>
|
||||
|
||||
<input type="search" class="p10" list="sprachoptionen">
|
||||
<datalist id="sprachoptionen">
|
||||
<option value="Deutsch"></option>
|
||||
<option value="Englisch"></option>
|
||||
<option value="Arabisch"></option>
|
||||
<option value="Französisch"></option>
|
||||
</datalist>
|
||||
|
||||
<span class="p11">Verfügbarkeit</span>
|
||||
<input type="checkbox" class="p12" name="status" value="verfügbareBücher">
|
||||
<span class="p13">verfügbare Bücher</span>
|
||||
|
||||
<a id="suchen" href="">suchen</a>
|
||||
<a id="suchfelderleeren" href="">Suchfelder leeren</a>
|
||||
</form>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Impressum </strong></span>
|
||||
<br><br>
|
||||
Firmensitz<br>
|
||||
Bibliothek Candle GmbH <br>
|
||||
Paul-Wittsack-Straße 10 <br>
|
||||
68163 Mannheim <br>
|
||||
|
||||
Kontaktdaten <br>
|
||||
Telefon: +49XXXXXXXX Montag bis Freitag von 9 bis 18 Uhr <br>
|
||||
Telefax: 069 54 732122 <br>
|
||||
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
||||
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,285 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1.0"/>
|
||||
<title> Candle Bibliothek</title>
|
||||
<link rel="icon" href="pictures/Candle.png" type="image/png">
|
||||
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="firsthead">Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze" class="logo"/> Candle</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
|
||||
<form action="action_page.php">
|
||||
<button type="submit" id="ButtonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
<input type="text" class="searchTerm" placeholder="Suche...">
|
||||
</form>
|
||||
|
||||
<a class="uberUns" href="">Über Uns</a>
|
||||
<a class="buecher" href="">Bücher</a>
|
||||
<a class="meineBuecher" href="">Meine Bücher</a>
|
||||
</div>
|
||||
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</nav>
|
||||
|
||||
<a id="erweiterteSuche" href="">Erweiterte Suche</a>
|
||||
</header>
|
||||
<script>
|
||||
|
||||
|
||||
var showVisible = `
|
||||
.searchTerm{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.searchButton{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.navLinks{
|
||||
pointer-events: none;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
var showNav = `
|
||||
.searchTerm{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
position:relative;
|
||||
left: 17.9em;
|
||||
bottom:18em;
|
||||
width: 150px;
|
||||
}
|
||||
.searchTerm::placeholder {
|
||||
font: 16px/3 sans-serif;
|
||||
}
|
||||
.searchButton{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
position:relative;
|
||||
left: 10em;
|
||||
}
|
||||
#erweiterteSuche{
|
||||
position:relative;
|
||||
left: 8.5em;
|
||||
bottom: 17em;
|
||||
}
|
||||
.uberUns{
|
||||
position:relative;
|
||||
left: 5.45em;
|
||||
bottom: 7.4em;
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
.meineBuecher{
|
||||
position:relative;
|
||||
right: 14em;
|
||||
bottom: 4.8em;
|
||||
width: 160px;
|
||||
height: 60px;
|
||||
}
|
||||
.buecher{
|
||||
position:relative;
|
||||
right: 4.3em;
|
||||
bottom: 10em;
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.navLinks{
|
||||
pointer-events: auto;
|
||||
opacity:1;
|
||||
|
||||
width:100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo{
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.searchButton{
|
||||
position: relative;
|
||||
bottom: 14.98em;
|
||||
left: 21.2em;
|
||||
float:right;
|
||||
color: #ffffff;
|
||||
padding: 0.8em 1em;
|
||||
background: #664220;
|
||||
|
||||
}
|
||||
|
||||
`
|
||||
var disableNav = `
|
||||
.searchTerm{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.searchButton{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.navLinks{
|
||||
pointer-events: none;
|
||||
opacity:0;
|
||||
}
|
||||
.firsthead{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
background-color: #24140d; /*#24140d;*/
|
||||
color:rgb(255, 255, 255); /*#bf6538*/
|
||||
}
|
||||
.logo{
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.searchTerm {
|
||||
position: relative;
|
||||
bottom: 15.05em;
|
||||
float:right;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
padding: 0.915em 2em;
|
||||
background: #664220;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.searchButton{
|
||||
position: relative;
|
||||
bottom: 14.98em;
|
||||
float:right;
|
||||
color: #ffffff;
|
||||
padding: 0.8em 1em;
|
||||
background: #664220;
|
||||
}
|
||||
|
||||
}`
|
||||
navActivated = false;
|
||||
function openNav() {
|
||||
navActivated = !navActivated;
|
||||
if(navActivated){
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = showNav
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
else{
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = disableNav
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var visibleAgain = `
|
||||
.searchTerm{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
.searchButton{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
.navLinks{
|
||||
pointer-events: auto;
|
||||
opacity:1;
|
||||
}
|
||||
.firsthead{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
background-color: #24140d; /*#24140d;*/
|
||||
color:rgb(255, 255, 255); /*#bf6538*/
|
||||
}
|
||||
.logo{
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.searchTerm {
|
||||
position: relative;
|
||||
bottom: 15.05em;
|
||||
float:right;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
padding: 0.915em 2em;
|
||||
background: #664220;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.searchButton{
|
||||
position: relative;
|
||||
bottom: 14.98em;
|
||||
float:right;
|
||||
color: #ffffff;
|
||||
padding: 0.8em 1em;
|
||||
background: #664220;
|
||||
}`
|
||||
|
||||
|
||||
function myFunction(x)
|
||||
{
|
||||
if (x.matches) {
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = disableNav
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
else
|
||||
{
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = visibleAgain
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
|
||||
}
|
||||
var x = window.matchMedia("(max-width: 768px)")
|
||||
myFunction(x)
|
||||
x.addListener(myFunction)
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer id="footer">
|
||||
|
||||
<div id="footer-menu">
|
||||
<ul>
|
||||
<li><a href="">Impressum</a></li>
|
||||
<li><a href="">Kontakt</a></li>
|
||||
<li><a href="">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Kontakt </strong></span>
|
||||
<br><br>
|
||||
|
||||
Kundenservice: +49XXXXXXXXX <br>
|
||||
Telefax: 069 54 732122 <br>
|
||||
E-Mail: 2211780@stud.hs-mannheim.de <br>
|
||||
</p>
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle" >
|
||||
<p class="p2">
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p1">
|
||||
<span id="titleschwarz">HERZLICH WILLKOMMEN!</span>
|
||||
<br><br>
|
||||
Die Bibliothek CANDLE begrüßt Sie ganz herzlich auf ihren Internetseiten. <br> <br>
|
||||
Nutzen Sie unser umfangreiches Angebot aus den beliebtesten Büchern. <br> <br>
|
||||
Wir freuen uns auf Ihren Besuch!
|
||||
<br><br>
|
||||
<span id="titleschwarz">VERANSTALTUNGEN!</span>
|
||||
<br><br>
|
||||
Leserunde | jeden Mittwoch | 17:30 Uhr
|
||||
<br><br>
|
||||
<span style="color: #000;" >HARRY POTTER-REIHE (aktuell) </span>
|
||||
<br><br>
|
||||
<span style="color: #000;">
|
||||
Die erfolgreiche Buchreihe um den Zauberlehrling Harry James Potter umfasst insgesamt sieben Bände.
|
||||
In jedem wird ein Schul- und Lehrjahr von Harry und seinen Freunden auf dem Zauberinternat Hogwarts erzählt.
|
||||
Neben alltäglichen Problemen eines Jugendlichen, wird Harry immer wieder mit dem bösen Magier Lord Voldemort und seinen Gefolgsleuten,
|
||||
den sogenannten Todessern, konfrontiert.
|
||||
</span>
|
||||
<br>
|
||||
<a href="" style="font-style: italic; text-decoration: none; color: #000;" >mehr dazu...</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,556 @@
|
|||
|
||||
*{
|
||||
font-family: sans-serif;
|
||||
margin: 0px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.kopf{
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background-color: #24140d;
|
||||
color:rgb(255, 255, 255);
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
body{
|
||||
background-color: #E5D3B3;
|
||||
}
|
||||
#titleschwarz{
|
||||
font-size: 25px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#titlebraun{
|
||||
font-size: 25px;
|
||||
color: #664220;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#uberuns{
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 150px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#buecher{
|
||||
position: fixed;
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
#meinebuecher{
|
||||
position: fixed;
|
||||
left: 300px;
|
||||
top: 150px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.suchleiste{
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
top: 0px;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
background-color: #664220;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.suchleiste::placeholder{
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
#buttonID{
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 39px;
|
||||
height: 40px;
|
||||
background-color: #664220;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
color: rgb(255, 255, 255);
|
||||
|
||||
}
|
||||
|
||||
#erweitertesuche{
|
||||
color: rgb(255, 255, 255);
|
||||
position: fixed;
|
||||
right: 60px;
|
||||
top: 50px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.p1{
|
||||
overflow-y: scroll;
|
||||
max-width: 87%;
|
||||
max-height: 450px;
|
||||
position: fixed;
|
||||
top: 220px;
|
||||
left: 20px;
|
||||
right:14%;
|
||||
font-size: 15px;
|
||||
color:#664220;
|
||||
bottom: 75px;
|
||||
}
|
||||
|
||||
.p1{
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.p1::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.p2{
|
||||
overflow-y: scroll;
|
||||
max-width: 87%;
|
||||
max-height: 450px;
|
||||
position: fixed;
|
||||
top: 220px;
|
||||
left: 20px;
|
||||
right: 14%;
|
||||
font-size: 15px;
|
||||
line-height: 180%;
|
||||
color:#24140d;
|
||||
bottom: 75px;
|
||||
}
|
||||
|
||||
.p2{
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.p2::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*....................................*/
|
||||
.buchtitel{
|
||||
position: fixed;
|
||||
top: 260px;
|
||||
width: 100px;
|
||||
left:100px;
|
||||
}
|
||||
|
||||
.buchtiteloptions{
|
||||
position: fixed;
|
||||
top: 260px;
|
||||
width: 300px;
|
||||
left:210px;
|
||||
}
|
||||
|
||||
.und-wort1{
|
||||
position: fixed;
|
||||
top: 290px;
|
||||
width: 70px;
|
||||
left:20px;
|
||||
}
|
||||
|
||||
.und-wort2{
|
||||
position: fixed;
|
||||
width: 70px;
|
||||
left:20px;
|
||||
top: 320px;
|
||||
}
|
||||
|
||||
.autor{
|
||||
position: fixed;
|
||||
top: 290px;
|
||||
width: 100px;
|
||||
left:100px;
|
||||
}
|
||||
|
||||
.autoroptions{
|
||||
position: fixed;
|
||||
top: 290px;
|
||||
width: 300px;
|
||||
left:210px;
|
||||
}
|
||||
|
||||
.stichwort{
|
||||
position: fixed;
|
||||
top: 320px;
|
||||
width: 100px;
|
||||
left:100px;
|
||||
}
|
||||
|
||||
.stichwörteroptions{
|
||||
|
||||
position: fixed;
|
||||
top: 320px;
|
||||
width: 300px;
|
||||
left:210px;
|
||||
}
|
||||
|
||||
.p3{
|
||||
|
||||
max-width: 87%;
|
||||
max-height: 450px;
|
||||
position: fixed;
|
||||
top: 220px;
|
||||
left: 20px;
|
||||
right:14%;
|
||||
bottom: 75px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.p4{
|
||||
position: fixed;
|
||||
top: 360px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.p5{
|
||||
position: fixed;
|
||||
top: 410px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.p6{
|
||||
position: fixed;
|
||||
top: 410px;
|
||||
left: 210px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.p7{
|
||||
position: fixed;
|
||||
top: 410px;
|
||||
left: 330px;
|
||||
|
||||
}
|
||||
|
||||
.p8{
|
||||
position: fixed;
|
||||
top: 410px;
|
||||
left: 360px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.p9{
|
||||
position: fixed;
|
||||
top: 440px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.p10{
|
||||
position: fixed;
|
||||
top: 440px;
|
||||
width: 300px;
|
||||
left:210px;
|
||||
|
||||
}
|
||||
|
||||
.p11{
|
||||
position: fixed;
|
||||
top: 470px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.p12{
|
||||
position: fixed;
|
||||
top: 470px;
|
||||
left:210px;
|
||||
}
|
||||
|
||||
.p13{
|
||||
position: fixed;
|
||||
top: 465px;
|
||||
left: 230px;
|
||||
}
|
||||
|
||||
|
||||
#suchen{
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 510px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
#suchfelderleeren{
|
||||
position: fixed;
|
||||
left: 180px;
|
||||
top: 510px;
|
||||
width: 220px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#sidecandle{
|
||||
top: 199px ;
|
||||
right: 0px;
|
||||
position: fixed;
|
||||
height: 800px;
|
||||
width: 12%
|
||||
}
|
||||
@media screen and (max-width:1200px){
|
||||
#sidecandle{
|
||||
width: 12%;
|
||||
}
|
||||
.p1{
|
||||
max-width: 86%;
|
||||
}
|
||||
.p2{
|
||||
max-width: 86%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:1000px){
|
||||
#sidecandle{
|
||||
width: 14%;
|
||||
}
|
||||
.p1{
|
||||
max-width: 84%;
|
||||
}
|
||||
.p2{
|
||||
max-width: 84%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:800px){
|
||||
#sidecandle{
|
||||
width: 16%;
|
||||
}
|
||||
.p1{
|
||||
max-width: 81%;
|
||||
}
|
||||
.p2{
|
||||
max-width: 81%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:620px){
|
||||
|
||||
#sidecandle{
|
||||
width: 16%;
|
||||
}
|
||||
.p1{
|
||||
max-width: 80%;
|
||||
}
|
||||
.p2{
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.buchtitel{
|
||||
left:20px;
|
||||
}
|
||||
.buchtiteloptions{
|
||||
top: 290px;
|
||||
left:20px;
|
||||
}
|
||||
|
||||
.und-wort1{
|
||||
top: 320px;
|
||||
left:20px;
|
||||
}
|
||||
|
||||
.und-wort2{
|
||||
left:20px;
|
||||
top: 380px;
|
||||
}
|
||||
|
||||
.autor{
|
||||
top: 320px;
|
||||
left:100px;
|
||||
}
|
||||
|
||||
.autoroptions{
|
||||
top: 350px;
|
||||
left:20px;
|
||||
}
|
||||
|
||||
.stichwort{
|
||||
top: 380px;
|
||||
}
|
||||
|
||||
.stichwörteroptions{
|
||||
top: 410px;
|
||||
left:20px;
|
||||
}
|
||||
|
||||
.p4{
|
||||
top: 450px;
|
||||
|
||||
}
|
||||
|
||||
.p5{
|
||||
top: 490px;
|
||||
}
|
||||
|
||||
.p6{
|
||||
top: 510px;
|
||||
left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.p7{
|
||||
top: 510px;
|
||||
left: 140px;
|
||||
}
|
||||
|
||||
.p8{
|
||||
top: 510px;
|
||||
left: 170px;
|
||||
}
|
||||
|
||||
.p9{
|
||||
top: 550px;
|
||||
}
|
||||
|
||||
.p10{
|
||||
top: 570px;
|
||||
left:20px;
|
||||
|
||||
}
|
||||
|
||||
.p11{
|
||||
top: 600px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.p12{
|
||||
top: 620px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.p13{
|
||||
top:620px;
|
||||
left: 40px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#suchen{
|
||||
top: 640px;
|
||||
}
|
||||
#suchfelderleeren{
|
||||
top: 640px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.fuss{
|
||||
height: 74px;;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background-color: #24140d;
|
||||
display: flex;
|
||||
bottom: 0px;
|
||||
|
||||
}
|
||||
|
||||
#impressum{
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
bottom: 12px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#kontakt{
|
||||
position: fixed;
|
||||
left: 150px;
|
||||
bottom: 12px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
#datenschutz{
|
||||
position: fixed;
|
||||
left: 300px;
|
||||
bottom: 12px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background-color:#664220 ;
|
||||
color:rgb(255, 255, 255);
|
||||
padding-right:10px;
|
||||
padding-left: 8px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
body{
|
||||
background-color: rgb(66, 60, 54);
|
||||
}
|
||||
*{
|
||||
font-family:arial, "lucida console", sans-serif;
|
||||
}
|
||||
.logo{
|
||||
width:200px;
|
||||
height: 200px;
|
||||
}
|
||||
.firsthead{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
background-color: #24140d;
|
||||
color:rgb(255, 255, 255); /*#bf6538*/
|
||||
|
||||
}
|
||||
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.header{
|
||||
background-color:rgb(99, 56, 10);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.searchTerm {
|
||||
position: relative;
|
||||
bottom: 15.05em;
|
||||
float:right;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
padding: 0.915em 2em;
|
||||
background: #664220;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
margin-right: 1px;
|
||||
|
||||
}
|
||||
|
||||
#erweiterteSuche {
|
||||
all: revert;
|
||||
position: relative;
|
||||
bottom: 12.55em;
|
||||
left:97em;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.searchTerm::placeholder{
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.searchButton{
|
||||
position: relative;
|
||||
bottom: 14.98em;
|
||||
float:right;
|
||||
color: #ffffff;
|
||||
padding: 0.8em 1em;
|
||||
background: #664220;
|
||||
}
|
||||
|
||||
a.active {
|
||||
background: #212529;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px; /* Height of the footer */
|
||||
background-color: #24140d;
|
||||
|
||||
}
|
||||
#footer-menu {
|
||||
display: block;
|
||||
margin-top: 3.3em;
|
||||
}
|
||||
|
||||
#footer-menu ul li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
left: 50em;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: 2.75em;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
padding: 0.8em 2.2em;
|
||||
margin-right: 2px;
|
||||
background: #664220;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
display: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 1em 1.7em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input:before {
|
||||
content: "\f0c9";
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input:checked {
|
||||
background: #1b1f21;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
input:checked + .mylinks {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
.icon-burger {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 5%;
|
||||
transform: translateY(-50%);
|
||||
cursor:pointer;
|
||||
}
|
||||
.icon-burger .line {
|
||||
width: 30px;
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
margin: 5px;
|
||||
border-radius: 3px;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
nav .mylinks {
|
||||
float: none;
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100px;
|
||||
bottom: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
background-color: rgba(0,0,0,.8);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
transition: all .5s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
nav .mylinks a {
|
||||
font-size: 20px;
|
||||
}
|
||||
nav :checked ~ .mylinks {
|
||||
bottom: 0;
|
||||
}
|
||||
nav .icon-burger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav :checked ~ .icon-burger .line:nth-child(1) {
|
||||
transform: translateY(10px) rotate(225deg);
|
||||
}
|
||||
nav :checked ~ .icon-burger .line:nth-child(3) {
|
||||
transform: translateY(-10px) rotate(-225deg);
|
||||
}
|
||||
nav :checked ~ .icon-burger .line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p2">
|
||||
<span id="titlebraun"><strong> Über uns</strong></span>
|
||||
<br><br>
|
||||
In einer Zeit, die von Digitalisierung dominiert wird, werden immer mehr physische
|
||||
Medien in digitale Systeme integriert. <br> Auch wenn dieses Phänomen auf den ersten Blick nur positiv erscheint,
|
||||
zieht es auch große Nachteile mit sich. So ist zum Beispiel nicht jeder Mensch in der finanziellen Lage,
|
||||
sich die nötigen technischen Geräte zu leisten. <br>Selbst wenn die Technik vorhanden ist, kann oder will nicht jeder damit umgehen,
|
||||
manche haben vielleicht sogar gesundheitliche Probleme, die es Ihnen nicht ermöglichen,
|
||||
für längere Zeit auf einem Bildschirm zu schauen. <br>
|
||||
Unsere Bibliothek Candle hat es sich deshalb zum Ziel gesetzt, Bücher in einem greifbaren Zustand anzubieten.
|
||||
Ob „Hamlet“, „Harry Potter“ oder „Der große Gatsby“, bei uns kommt jeder Bücherwurm auf den Geschmack.
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue