committinggggg
DexterHK
parent
d8dcb0aef0
commit
217d3c7ac5
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"liveServer.settings.port": 5501
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<!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>
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1 class="kopf" >
|
||||||
|
<br><br>
|
||||||
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meineBuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shoppingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="homepage">
|
||||||
|
|
||||||
|
<h1 id="BuchHeader">
|
||||||
|
Anmelden
|
||||||
|
</h1>
|
||||||
|
<p class="p2" id="obererText">Über die Websieite werden personenbenzogene Daten erhoben und genutzt. Für Details, beizhene Sie sich bitte auf die Seite Datenschutz</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="anmeldeInput">
|
||||||
|
<p >Angaben zur Anmeldung</p>
|
||||||
|
<hr style="background-color:#A78766; height: 2px; width: 200px; border: none; position: relative;
|
||||||
|
top:3px">
|
||||||
|
|
||||||
|
<div id="AnmeldeInput">
|
||||||
|
|
||||||
|
<p>Karten-ID</p>
|
||||||
|
<input type="text" >
|
||||||
|
</br>
|
||||||
|
</br>
|
||||||
|
<p>Passwort</p>
|
||||||
|
<input type="password" >
|
||||||
|
<a href="" id="anmeldebutton">Anmelden</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="collapsible">Open Collapsible</button>
|
||||||
|
<div class="content">
|
||||||
|
<p>Lorem ipsum...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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,138 @@
|
||||||
|
<!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 <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meinebuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="containerofbuecher">
|
||||||
|
<p id="büchertitel">Bücher</p>
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Percy Jackson: Diebe im Olymp
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Rick Riordan <br>
|
||||||
|
Erscheinungsjahr: 2010 <br>
|
||||||
|
Verlag: Carlsen <br>
|
||||||
|
Kategorie: Fantasy
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="percy.html">Verfügbar</a>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
The Hundred and One Dalmatians
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Dodie Smith <br>
|
||||||
|
Erscheinungsjahr: 2015 <br>
|
||||||
|
Verlag: Farshore <br>
|
||||||
|
Kategorie: Kinderbuch
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="dalmatians.html">Verfügbar ab: 30.04.2023</a>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
|
<hr style="width:92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="thirdItem" class="items">
|
||||||
|
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Penguin Highway
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
|
||||||
|
Erscheinungsjahr: 2019 <br>
|
||||||
|
Verlag: Yen On <br>
|
||||||
|
Kategorie: Fantasy
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="penguin.html">Verfügbar</a>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="fourthItem" class="items" >
|
||||||
|
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Es
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Stephen King <br>
|
||||||
|
Erscheinungsjahr: 2011 <br>
|
||||||
|
Verlag: Heyne <br>
|
||||||
|
Kategorie: Horror
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="es.html" >Verfügbar ab: 10.05.2023</a>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/shopping_cart.png" width="25" height="25"></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<!--Burger-->
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -108,4 +108,5 @@ function unset()
|
||||||
document.head.appendChild(styleSheet)
|
document.head.appendChild(styleSheet)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
<!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 <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meinebuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="haupt">
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items" >
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
The Hundred and One Dalmatians
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Dodie Smith <br>
|
||||||
|
Erscheinungsjahr: 2015 <br>
|
||||||
|
Verlag: Farshore <br>
|
||||||
|
Kategorie: Kinderbuch
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="">Verfügbar ab: 03.04.2023</a>
|
||||||
|
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||||
|
|
||||||
|
<p class="percypar">
|
||||||
|
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||||
|
When Missis and Pongo's darling Dalmatian puppies are stolen, they know just who to suspect... the evil Cruella de Vill She's enough to
|
||||||
|
scare the spots off a pup and she would love nothing more than to turn them into a spotty fur coat! <br><br>
|
||||||
|
With the help of some fearless furry friends, the parents set off on a brave rescue attempt. But can the Dalmatian parents rescue their precious pups in time?
|
||||||
|
<br><br>
|
||||||
|
<strong style="font-size: 25px;">Details</strong> <br>
|
||||||
|
ISBN: 978-1-4052-7840-9 <br>
|
||||||
|
Sprahce: Englisch <br>
|
||||||
|
Stichwörter: Dalmatiner, Hunde, England, Welpen
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -17,14 +17,16 @@
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="bücher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
|
|
|
||||||
|
|
@ -17,23 +17,24 @@
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="bücher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="homepage">
|
|
||||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
|
||||||
<p class="p3">
|
<div class="hauptcontainer">
|
||||||
<span id="titleschwarz" > Erweiterte Suche </span> <br><br>
|
<span id="titelerweitertesuche" > Erweiterte Suche </span> <br><br>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input type="search" class="buchtitel" list="Titel">
|
<input type="search" value="Titel" class="buchtitel" list="Titel">
|
||||||
<datalist id="Titel">
|
<datalist id="Titel">
|
||||||
<option value="Titel"></option>
|
<option value="Titel"></option>
|
||||||
</datalist>
|
</datalist>
|
||||||
|
|
@ -41,13 +42,13 @@
|
||||||
<input type="text" class="buchtiteloptions" list="buchtiteloptionen">
|
<input type="text" class="buchtiteloptions" list="buchtiteloptionen">
|
||||||
|
|
||||||
|
|
||||||
<input type="search" class="und-wort1" list="Und">
|
<input type="search" value="und" class="und-wort1" list="Und">
|
||||||
<datalist id="Und">
|
<datalist id="Und">
|
||||||
<option value="und"></option>
|
<option value="und"></option>
|
||||||
<option value="oder"></option>
|
<option value="oder"></option>
|
||||||
</datalist>
|
</datalist>
|
||||||
|
|
||||||
<input type="search" class="autor" list="Autor">
|
<input type="search" value="Autor" class="autor" list="Autor">
|
||||||
<datalist id="Autor">
|
<datalist id="Autor">
|
||||||
<option value="Autor"></option>
|
<option value="Autor"></option>
|
||||||
</datalist>
|
</datalist>
|
||||||
|
|
@ -55,13 +56,13 @@
|
||||||
<input type="text" class="autoroptions" list="autoroptionen">
|
<input type="text" class="autoroptions" list="autoroptionen">
|
||||||
|
|
||||||
|
|
||||||
<input type="search" class="und-wort2" list="Und" >
|
<input type="search" value="und" class="und-wort2" list="Und" >
|
||||||
<datalist id="Und">
|
<datalist id="Und">
|
||||||
<option value="und"></option>
|
<option value="und"></option>
|
||||||
<option value="oder"></option>
|
<option value="oder"></option>
|
||||||
</datalist>
|
</datalist>
|
||||||
|
|
||||||
<input type="search" class="stichwort" list="Stichwort">
|
<input type="search" value="Stichwort" class="stichwort" list="Stichwort">
|
||||||
<datalist id="Stichwort">
|
<datalist id="Stichwort">
|
||||||
<option value="Stichwort"></option>
|
<option value="Stichwort"></option>
|
||||||
</datalist>
|
</datalist>
|
||||||
|
|
@ -71,31 +72,29 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<span id="titleschwarz" class="p4" style> Weitere Suchkriterien</span><br><br></p>
|
<span id="weiteresuchkriterien" style> Weitere Suchkriterien</span><br><br></p>
|
||||||
<span class="p5">Jahr von </span>
|
<span class="jahrvon">Jahr von </span>
|
||||||
<input type="date" class="p6" name="Buchdatum1">
|
<input type="date" class="anfangsdatum" name="Buchdatum1">
|
||||||
<span class="p7">bis </span>
|
<span class="bis">bis </span>
|
||||||
<input type="date" class="p8" name="Buchdatum2">
|
<input type="date" class="endsdatum" name="Buchdatum2">
|
||||||
<span class="p9">Sprache </span>
|
<span class="sprache">Sprache </span>
|
||||||
|
<input type="search" class="spracheingabe" list="sprachoptionen">
|
||||||
<input type="search" class="p10" list="sprachoptionen">
|
|
||||||
<datalist id="sprachoptionen">
|
<datalist id="sprachoptionen">
|
||||||
<option value="Deutsch"></option>
|
<option value="Deutsch"></option>
|
||||||
<option value="Englisch"></option>
|
<option value="Englisch"></option>
|
||||||
<option value="Arabisch"></option>
|
<option value="Arabisch"></option>
|
||||||
<option value="Französisch"></option>
|
<option value="Französisch"></option>
|
||||||
</datalist>
|
</datalist>
|
||||||
|
<span class="verfügbarkeit">Verfügbarkeit</span>
|
||||||
<span class="p11">Verfügbarkeit</span>
|
<input type="checkbox" class="checkbox" name="status" value="verfügbareBücher">
|
||||||
<input type="checkbox" class="p12" name="status" value="verfügbareBücher">
|
<span class="kommentar">verfügbare Bücher</span>
|
||||||
<span class="p13">verfügbare Bücher</span>
|
|
||||||
|
|
||||||
<a id="suchen" href="">suchen</a>
|
<a id="suchen" href="">suchen</a>
|
||||||
<a id="suchfelderleeren" href="">Suchfelder leeren</a>
|
<a id="suchfelderleeren" href="">Suchfelder leeren</a>
|
||||||
</form>
|
</form>
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--Link JS file-->
|
<!--Link JS file-->
|
||||||
<script src="burgerIcon.js"></script>
|
<script src="burgerIcon.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
<!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 <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meinebuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="haupt">
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Es
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Stephen King <br>
|
||||||
|
Erscheinungsjahr: 2011 <br>
|
||||||
|
Verlag: Heyne <br>
|
||||||
|
Kategorie: Horror
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="">Verfügbar ab: 10.05.2023</a>
|
||||||
|
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||||
|
|
||||||
|
<p class="percypar">
|
||||||
|
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||||
|
Inhalt:
|
||||||
|
In Derry, Maine, schlummert das Böse in der Kanalisation: Alle 28 Jahre wacht es auf und muss fressen.
|
||||||
|
Jetzt taucht »Es« wieder empor. Sieben Freunde entschließen sich, dem Grauen entgegenzutreten und ein Ende zu setzen.
|
||||||
|
<br><br>
|
||||||
|
<strong style="font-size: 25px;">Details</strong> <br>
|
||||||
|
ISBN: 978-3-453-43577-3 <br>
|
||||||
|
Sprahce: Deutsch <br>
|
||||||
|
Stichwörter: Horror, clown, Teenager, Monster
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -17,14 +17,16 @@
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="bücher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
|
|
|
||||||
13
index.html
13
index.html
|
|
@ -17,16 +17,19 @@
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="bücher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||||
|
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||||
|
|
|
||||||
|
|
@ -17,14 +17,16 @@
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="bücher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="meineBuecher.html">Meine Bücher</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
<!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 <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meinebuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="containerofmeinebuecher">
|
||||||
|
<p id="meinebüchertitel">Meine Bücher</p>
|
||||||
|
<!--first item-->
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Percy Jackson: Diebe im Olymp
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Rick Riordan <br>
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Sofort Abholbereit</a>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
<p id="message">Diese Reservierung verfällt, wenn das Buch nicht bis zum 24.04.2023 abgeholt wurde.</p>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
The Hundred and One Dalmatians
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Dodie Smith <br>
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="">Abholbereit am: 03.05.2023</a>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
<p id="message">Dieses buch ist für Sie reserviert.</p>
|
||||||
|
<hr style="width:92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="thirdItem" class="items">
|
||||||
|
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Penguin Highway
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Tomihiko Morimi <br>
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Rückgabe am: 03.05.2023</a>
|
||||||
|
<hr style="width: 92%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="fourthItem" class="items" >
|
||||||
|
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Es
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Stephen King <br>
|
||||||
|
</p>
|
||||||
|
<a class="redbutton" href="" >Rückgabe am: 03.05.2023</a>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/extend_hover.png" width="25" height="25"></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<!--Burger-->
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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,96 @@
|
||||||
|
<!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 <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meinebuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="haupt">
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Penguin Highway
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Tomihiko Morimi <br>
|
||||||
|
Erscheinungsjahr: 2019 <br>
|
||||||
|
Verlag: Yen On <br>
|
||||||
|
Kategorie: Fantasy
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Verfügbar</a>
|
||||||
|
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||||
|
|
||||||
|
<p class="percypar">
|
||||||
|
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||||
|
I may only be in fourth grade, but I know more than most adults. I take notes every day and read all kinds of books, so I have a solid grasp on the world
|
||||||
|
around me. But suddenly, there are penguins in my town! I know it has something to do with the lady at the dentist and her weird powers, and I'm going to get to the bottom of it...
|
||||||
|
<br><br>
|
||||||
|
<strong style="font-size: 25px;">Details</strong> <br>
|
||||||
|
ISBN: 978-1-9753-8260-5 <br>
|
||||||
|
Sprache: Englisch <br>
|
||||||
|
Stichwörter: Penguine, Freundschaft, Meer, Küste
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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,99 @@
|
||||||
|
<!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 <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meinebuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="haupt">
|
||||||
|
<!--First Item-->
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Percy Jackson: Diebe im Olymp
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">Verfasser: Rick Riordan <br>
|
||||||
|
Erscheinungsjahr: 2010 <br>
|
||||||
|
Verlag: Carlsen <br>
|
||||||
|
Kategorie: Fantasy
|
||||||
|
</p>
|
||||||
|
<a class="greenbutton" href="">Verfügbar</a>
|
||||||
|
<img id="shoppingwagen" src="pictures/shopping_cart.png" alt="shoppingwagen" href=""></a>
|
||||||
|
|
||||||
|
<p class="percypar">
|
||||||
|
<strong style="font-size: 25px;">Inhalt</strong> <br>
|
||||||
|
Percy versteht die Welt nicht mehr. Jedes Jahr fliegt er von einer anderen Schule. Ständig passieren ihm seltsame Unfälle. Und jetzt soll er
|
||||||
|
auch noch an dem Tornado schuld sein! Langsam wird ihm klar: irgendjemand hat es auf ihn abgesehen. Als Percy sich mit Hilfe seines Freundes Grover vor
|
||||||
|
einem Minotaurus ins Camp Half-Blood rettet, erfährt er die Wahrheit: Sein Vater ist der Meeresgott Poseidon, Percy also ein Halbgott. Und er hat einen mächtigen
|
||||||
|
Feind: Kronos, den Titanen. Die Gotter stehen Kopf- und Percy und seine Freunde vor einem unglaublichen Abenteuer...
|
||||||
|
<br><br>
|
||||||
|
<strong style="font-size: 25px;">Details</strong> <br>
|
||||||
|
ISBN: 978-3-551-55661-5 <br>
|
||||||
|
Sprache: Deutsch <br>
|
||||||
|
Stichwörter: Griechenland, Griechische Sagen, Griechische Götter, Zeus, Demeter, Persephone, Hera, Hades, Poseidon, Athene, Aphrodite, Ares, Hephaistos,
|
||||||
|
Apollo, Artemis, Hermes, Dionysos, Sage, Sagen
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Link JS file-->
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 667 KiB |
|
|
@ -0,0 +1,37 @@
|
||||||
|
jQuery(document).ready(function(){
|
||||||
|
// This button will increment the value
|
||||||
|
$('[data-quantity="plus"]').click(function(e){
|
||||||
|
// Stop acting like a button
|
||||||
|
e.preventDefault();
|
||||||
|
// Get the field name
|
||||||
|
fieldName = $(this).attr('data-field');
|
||||||
|
// Get its current value
|
||||||
|
var currentVal = parseInt($('input[name='+fieldName+']').val());
|
||||||
|
// If is not undefined
|
||||||
|
if (!isNaN(currentVal)) {
|
||||||
|
// Increment
|
||||||
|
$('input[name='+fieldName+']').val(currentVal + 1);
|
||||||
|
} else {
|
||||||
|
// Otherwise put a 0 there
|
||||||
|
$('input[name='+fieldName+']').val(0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// This button will decrement the value till 0
|
||||||
|
$('[data-quantity="minus"]').click(function(e) {
|
||||||
|
// Stop acting like a button
|
||||||
|
e.preventDefault();
|
||||||
|
// Get the field name
|
||||||
|
fieldName = $(this).attr('data-field');
|
||||||
|
// Get its current value
|
||||||
|
var currentVal = parseInt($('input[name='+fieldName+']').val());
|
||||||
|
// If it isn't undefined or its greater than 0
|
||||||
|
if (!isNaN(currentVal) && currentVal > 0) {
|
||||||
|
// Decrement one
|
||||||
|
$('input[name='+fieldName+']').val(currentVal - 1);
|
||||||
|
} else {
|
||||||
|
// Otherwise put a 0 there
|
||||||
|
$('input[name='+fieldName+']').val(0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
1190
probestyle.css
1190
probestyle.css
File diff suppressed because it is too large
Load Diff
10
uberUns.html
10
uberUns.html
|
|
@ -17,14 +17,16 @@
|
||||||
<br><br> Candle
|
<br><br> Candle
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
<a id="buecher" href="bücher.html">Bücher</a>
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||||
<form action="">
|
<form action="">
|
||||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||||
</form>
|
</form>
|
||||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
<a id="erweitertesuche" href="erweitertesuche.html">Erweiterte Suche</a>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
<!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 style="background-color:#987554;">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<script src="burgerIcon.js"></script>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
|
|
||||||
|
<h1 class="kopf" >
|
||||||
|
<br><br>
|
||||||
|
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||||
|
width="200" height="192"/> </a>
|
||||||
|
<br><br> Candle
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
<a id="uberuns" href="uberuns.html">Über Uns</a>
|
||||||
|
<a id="buecher" href="buecher.html">Bücher</a>
|
||||||
|
<a id="meinebuecher" href="meinebuecher.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>
|
||||||
|
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||||
|
width="50" height="50"/> </a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<h1 id="warenkorbHeader">
|
||||||
|
Warenkorb
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="containerOfAll">
|
||||||
|
<script src="plusminusbutton.js" type="text/javascript"></script>
|
||||||
|
<!-- Change the `data-field` of buttons and `name` of input field's for multiple plus minus buttons-->
|
||||||
|
|
||||||
|
<!--First Item-->
|
||||||
|
<div id="firstItem" class="items" >
|
||||||
|
<img src="pictures/percy_jackson_diebe_im_olymp.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Percy Jackson: Diebe im Olymp
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Rick Riordan</p>
|
||||||
|
<a class="greenbutton" href="percy.html">Verfügbar</a>
|
||||||
|
|
||||||
|
<!--Buttons-->
|
||||||
|
<div class="inputPlusMinus">
|
||||||
|
<div class="input-group plus-minus-input">
|
||||||
|
<div class="input-group-button">
|
||||||
|
|
||||||
|
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||||
|
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input class="input-group-field" type="number" name="quantity" value="0">
|
||||||
|
<div class="input-group-button">
|
||||||
|
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||||
|
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Second Item-->
|
||||||
|
<div id="secondItem" class="items">
|
||||||
|
<img src="pictures/the_hundred_and_one_dalmatians.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
The Hundred and One Dalmatians
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Dodie Smith</p>
|
||||||
|
<a class="redbutton" href="dalmatians.html">Verfügbar ab: 30.04.2023</a>
|
||||||
|
|
||||||
|
<!--Buttons-->
|
||||||
|
<div class="inputPlusMinus">
|
||||||
|
<div class="input-group plus-minus-input">
|
||||||
|
<div class="input-group-button">
|
||||||
|
|
||||||
|
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||||
|
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input class="input-group-field" type="number" name="quantity" value="0">
|
||||||
|
<div class="input-group-button">
|
||||||
|
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||||
|
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Third Item-->
|
||||||
|
<div id="thirdItem" class="items">
|
||||||
|
<img src="pictures/penguin_highway.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Penguin Highway
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Tomihiko Morimi</p>
|
||||||
|
<a class="greenbutton" href="penguin.html">Verfügbar</a>
|
||||||
|
|
||||||
|
<!--Buttons-->
|
||||||
|
<div class="inputPlusMinus">
|
||||||
|
<div class="input-group plus-minus-input">
|
||||||
|
<div class="input-group-button">
|
||||||
|
|
||||||
|
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||||
|
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input class="input-group-field" type="number" name="quantity" value="0">
|
||||||
|
<div class="input-group-button">
|
||||||
|
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||||
|
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
<hr style="width: 96%;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--fourth Item-->
|
||||||
|
<div id="fourthItem" class="items" >
|
||||||
|
<img src="pictures/es.jpg" width="125" height="200"/>
|
||||||
|
<h3 class="headerinItem">
|
||||||
|
Es
|
||||||
|
</h3>
|
||||||
|
<p class="discinItem">von Stephen Kind</p>
|
||||||
|
<a class="redbutton" href="es.html" >Verfügbar ab: 10.05.2023</a>
|
||||||
|
|
||||||
|
<!--Buttons-->
|
||||||
|
<div class="inputPlusMinus">
|
||||||
|
<div class="input-group plus-minus-input">
|
||||||
|
<div class="input-group-button">
|
||||||
|
|
||||||
|
<button type="button" class="button hollow circle" id="minusButton" data-quantity="minus" data-field="quantity">
|
||||||
|
<i class="fa fa-minus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input class="input-group-field" type="number" name="quantity" value="0">
|
||||||
|
<div class="input-group-button">
|
||||||
|
<button type="button" class="button hollow circle" id="plusButton" data-quantity="plus" data-field="quantity">
|
||||||
|
<i class="fa fa-plus" style="opacity: 0.7;" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="binPicture" href=""><img src="pictures/bin.png" width="25" height="25"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Reservieren-->
|
||||||
|
<div id="reservieren">
|
||||||
|
<h2 id="ArtikelWarenkorb"> 3 Artikel</h2>
|
||||||
|
<a id="jetztReservieren" href="">Jetzt reservieren</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
|
<script>
|
||||||
|
var widthissue = false;
|
||||||
|
window.addEventListener("resize", function(event) {
|
||||||
|
if(window.innerWidth > 800 && widthissue) {
|
||||||
|
widthissue = false
|
||||||
|
unset()
|
||||||
|
}
|
||||||
|
else if(window.innerWidth < 800) widthissue = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav id="activeid" class="active">
|
||||||
|
<div class="navLinks">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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