+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pictures/bin.png b/pictures/bin.png
new file mode 100644
index 0000000..2befbcc
Binary files /dev/null and b/pictures/bin.png differ
diff --git a/pictures/es.jpg b/pictures/es.jpg
new file mode 100644
index 0000000..fadad15
Binary files /dev/null and b/pictures/es.jpg differ
diff --git a/pictures/extend_hover.png b/pictures/extend_hover.png
new file mode 100644
index 0000000..31c13ff
Binary files /dev/null and b/pictures/extend_hover.png differ
diff --git a/pictures/penguin_highway.jpg b/pictures/penguin_highway.jpg
new file mode 100644
index 0000000..5f291d5
Binary files /dev/null and b/pictures/penguin_highway.jpg differ
diff --git a/pictures/percy_jackson_diebe_im_olymp.jpg b/pictures/percy_jackson_diebe_im_olymp.jpg
new file mode 100644
index 0000000..073bc3d
Binary files /dev/null and b/pictures/percy_jackson_diebe_im_olymp.jpg differ
diff --git a/pictures/photo.png b/pictures/photo.png
new file mode 100644
index 0000000..e69de29
diff --git a/pictures/question_mark.png b/pictures/question_mark.png
new file mode 100644
index 0000000..0b1b27c
Binary files /dev/null and b/pictures/question_mark.png differ
diff --git a/pictures/question_mark_hover.png b/pictures/question_mark_hover.png
new file mode 100644
index 0000000..b2a0713
Binary files /dev/null and b/pictures/question_mark_hover.png differ
diff --git a/pictures/shopping_cart.png b/pictures/shopping_cart.png
new file mode 100644
index 0000000..383da3d
Binary files /dev/null and b/pictures/shopping_cart.png differ
diff --git a/pictures/the_hundred_and_one_dalmatians.jpg b/pictures/the_hundred_and_one_dalmatians.jpg
new file mode 100644
index 0000000..80193f2
Binary files /dev/null and b/pictures/the_hundred_and_one_dalmatians.jpg differ
diff --git a/plusminusbutton.js b/plusminusbutton.js
new file mode 100644
index 0000000..34232f5
--- /dev/null
+++ b/plusminusbutton.js
@@ -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);
+ }
+ });
+ });
+
\ No newline at end of file
diff --git a/probestyle.css b/probestyle.css
index 384e484..2339d7a 100644
--- a/probestyle.css
+++ b/probestyle.css
@@ -7,6 +7,7 @@
}
+
.kopf{
margin: 0px;
width: 100%;
@@ -20,7 +21,10 @@
body{
background-color: #E5D3B3;
+ overflow: hidden;
}
+
+
#titleschwarz{
font-size: 25px;
color: #000;
@@ -28,7 +32,7 @@ body{
#titlebraun{
font-size: 25px;
- color: #664220;
+ color: #24140D;
font-style: italic;
}
@@ -37,10 +41,11 @@ body{
margin: 0px;
}
+/*buttons*/
#uberuns{
position: fixed;
left: 0px;
- top: 150px;
+ top: 149px;
width: 120px;
height: 35px;
background-color:#664220 ;
@@ -53,10 +58,11 @@ body{
text-decoration: none;
}
+
#buecher{
position: fixed;
left: 150px;
- top: 150px;
+ top: 149px;
width: 120px;
height: 35px;
background-color:#664220 ;
@@ -68,10 +74,11 @@ body{
text-align: center;
text-decoration: none;
}
+
#meinebuecher{
position: fixed;
left: 300px;
- top: 150px;
+ top: 149px;
width: 120px;
height: 35px;
background-color:#664220 ;
@@ -83,7 +90,16 @@ body{
text-align: center;
text-decoration: none;
}
-
+
+/*warenkorbsymbol im header*/
+#warenKorbID
+{
+ position: fixed;
+ right: -70px;
+ top: 150px;
+ width: 120px;
+ height: 35px;
+}
.suchleiste{
position: fixed;
@@ -103,6 +119,7 @@ body{
color: rgb(255, 255, 255);
}
+/*loupe*/
#buttonID{
position: fixed;
right: 0px;
@@ -117,15 +134,14 @@ body{
}
-#erweitertesuche{
- color: rgb(255, 255, 255);
- position: fixed;
- right: 60px;
- top: 50px;
- text-align: center;
- text-decoration: none;
-}
+#sidecandle{
+ top: 199px ;
+ right: 0px;
+ position: fixed;
+ height: 100%;
+ width: 12%
+}
#BuchHeader{
position: fixed;
@@ -135,6 +151,15 @@ body{
color:#000000;
}
+.main #warenkorbHeader{
+ position: absolute;
+ top: 0px;
+ left: 30px;
+ font-size: 50px;
+ color:#ffffff;
+ font-family:Calibri;
+ font-weight:400;
+}
.p1{
overflow-y: scroll;
@@ -149,9 +174,6 @@ body{
bottom: 75px;
}
-
-
-
.p1{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
@@ -181,248 +203,183 @@ body{
display: none;
}
-/* Dieser Teil ist für Bücher,
-eine eigene Style CSS sollte dafür erstellt werden */
-.buchBilder{
- width: 200px;
- height: 300px;
+/*erweiterte Suche starts*/
+#erweitertesuche{
+ color: rgb(255, 255, 255);
position: fixed;
- top: 320px;
- left: 70px;
-}
-
-#buechertitel{
- position: fixed;
- top: 320px;
- left: 300px;
- font-size: 25px;
-}
-
-#verfasser{
- position: relative;
- top: 380px;
- left: 300px;
-}
-#verfasserWert{
- position: relative;
- top: 360px;
- left: 380px;
-}
-#erscheingungsjahr{
- position: relative;
- top: 365px;
- left: 300px;
-}
-#erscheingungsjahrwert{
- position: relative;
- top: 338px;
- left: 435px;
-}
-
-#verlag{
- position: relative;
- top: 320px;
- left: 300px;
-}
-#verlagwert{
- position: relative;
- top: 275px;
- left: 360px;
-}
-#kategorie{
- position: relative;
- top: 260px;
- left: 300px;
-}
-#kategoriewert{
- position: relative;
- top: 214px;
- left: 380px;
-}
-
-
-/* Dieser Teil ist für Meine Bücher,
-eine eigene Style CSS sollte dafür erstellt werden */
-#DivChunkData
- {
- border: '1px solid #000';
- margin-top : 8;
- margin-right: 8;
- float: left;
-
- line-height: 1.2;
- }
-
-
-#meineBucherverfasserWert{
- position: relative;
- top: 361px;
- left: 330px;
-
-}
-#Aboholbereit{
- position: fixed;
- left: 300px;
- top: 550px;
- width: 180px;
- height: 25px;
- background-color:#7DAD47 ;
- color:rgb(255, 255, 255);
- padding-right:0px;
- padding-left: 0px;
- padding-top: 10px;
- padding-bottom: 0px;
+ right: 60px;
+ top: 50px;
text-align: center;
text-decoration: none;
}
-#Bucherwartung{
- position: relative;
- top: 540px;
- left: 300px;
+
+.hauptcontainer{
+ overflow-y: scroll;
+ position:absolute;
+ display:flex;
+ height: 62%;
+ width: 100%;
+ top:200px;
}
-/*....................................*/
-.buchtitel{
- position: fixed;
- top: 260px;
+.hauptcontainer{
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.hauptcontainer::-webkit-scrollbar {
+ display: none;
+}
+
+#titelerweitertesuche{
+ position: absolute;
+ font-size: 25px;
+ color: #000;
+ left: 15px;
+ top:30px;
+}
+
+.hauptcontainer .buchtitel{
+ position: absolute;
+ top: 80px;
left:100px;
width: 100px;
}
-.buchtiteloptions{
- position: fixed;
- top: 260px;
- width: 300px;
+.hauptcontainer .buchtiteloptions{
+ position: absolute;
+ top: 80px;
+ width: 70%;
left:210px;
}
-.und-wort1{
- position: fixed;
- top: 290px;
+.hauptcontainer .und-wort1{
+ position: absolute;
+ top: 110px;
width: 70px;
left:20px;
}
-.und-wort2{
- position: fixed;
+.hauptcontainer .und-wort2{
+ position: absolute;
width: 70px;
left:20px;
- top: 320px;
+ top: 140px;
}
-.autor{
- position: fixed;
- top: 290px;
+.hauptcontainer .autor{
+ position: absolute;
+ top: 110px;
width: 100px;
left:100px;
}
-.autoroptions{
- position: fixed;
- top: 290px;
- width: 300px;
+.hauptcontainer .autoroptions{
+ position: absolute;
+ top: 110px;
+ width: 70%;
left:210px;
}
-.stichwort{
- position: fixed;
- top: 320px;
+.hauptcontainer .stichwort{
+ position: absolute;
+ top: 140px;
width: 100px;
left:100px;
}
-.stichwörteroptions{
+.hauptcontainer .stichwörteroptions{
- position: fixed;
- top: 320px;
- width: 300px;
+ position: absolute;
+ top: 140px;
+ width: 70%;
left:210px;
}
-.p3{
+/*.hauptcontainer .p3{
max-width: 87%;
max-height: 450px;
- position: fixed;
+ position:absolute;
top: 220px;
left: 20px;
right:14%;
bottom: 75px;
-}
+}*/
-.p4{
- position: fixed;
- top: 360px;
+.hauptcontainer #weiteresuchkriterien{
+ position: absolute;
+ font-size: 17px;
+ color: #000;
+ left: 25px;
+ top: 180px;
+}
+
+.hauptcontainer .jahrvon{
+ position: absolute;
+ top: 220px;
left: 20px;
}
-.p5{
- position: fixed;
- top: 410px;
- left: 20px;
-}
-
-.p6{
- position: fixed;
- top: 410px;
+.hauptcontainer .anfangsdatum{
+ position: absolute;
+ top: 220px;
left: 210px;
height: 20px;
}
-.p7{
- position: fixed;
- top: 410px;
+.hauptcontainer .bis{
+ position: absolute;
+ top: 220px;
left: 340px;
}
-.p8{
- position: fixed;
- top: 410px;
+.hauptcontainer .endsdatum{
+ position: absolute;
+ top: 220px;
left: 380px;
height: 20px;
}
-.p9{
- position: fixed;
- top: 440px;
+.hauptcontainer .sprache{
+ position: absolute;
+ top: 260px;
left: 20px;
}
-.p10{
- position: fixed;
- top: 440px;
- width: 300px;
+.hauptcontainer .spracheingabe{
+ position: absolute;
+ top: 260px;
+ width: 70%;
left:210px;
}
-.p11{
- position: fixed;
- top: 470px;
+.hauptcontainer .verfügbarkeit{
+ position: absolute;
+ top: 300px;
left: 20px;
}
-.p12{
- position: fixed;
- top: 470px;
+.hauptcontainer .checkbox{
+ position: absolute;
+ top: 300px;
left:210px;
}
-.p13{
- position: fixed;
- top: 465px;
+.hauptcontainer .kommentar{
+ position: absolute;
+ top: 300px;
left: 230px;
}
-
-#suchen{
- position: fixed;
+.hauptcontainer #suchen{
+ position: absolute;
left: 20px;
- top: 510px;
+ top: 380px;
width: 120px;
height: 35px;
background-color:#664220 ;
@@ -437,10 +394,10 @@ eine eigene Style CSS sollte dafür erstellt werden */
}
-#suchfelderleeren{
- position: fixed;
+.hauptcontainer #suchfelderleeren{
+ position: absolute;
left: 180px;
- top: 510px;
+ top: 380px;
width: 220px;
height: 35px;
background-color:#664220 ;
@@ -453,18 +410,587 @@ eine eigene Style CSS sollte dafür erstellt werden */
text-decoration: none;
border-radius: 8px;
}
-
-#sidecandle{
- top: 199px ;
- right: 0px;
- position: fixed;
+/*---------WarenKorb BEGINS--------*/
+.main{
height: 100%;
- width: 12%
+ position: absolute;
+ top:200px;
+ left: 0px;
+ width: 95%;
+}
+.main{
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.main::-webkit-scrollbar {
+ display: none;
+}
+.containerOfAll {
+ overflow-y: scroll;
+ background-color: #E5D3B3;
+ display: flex;
+ position: absolute;
+ top: 70px;
+ left: 35px;
+ width: 1000px;
+ height: 55%;
+}
+.containerOfAll{
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.containerOfAll::-webkit-scrollbar {
+ display: none;
+}
+
+/*first book in warenkorb and its details*/
+#firstItem
+{
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ width:100%;
+ height:80%;
+}
+
+.haupt{
+ width: 100%;
+ height: 62%;
+ position: absolute;
+ display: flex;
+ overflow-y:scroll;
+ top: 200px;
+}
+
+.haupt{
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.haupt::-webkit-scrollbar {
+ display: none;
+}
+
+.haupt #firstItem{
+ position: relative;
+ top: 25px;
+ left: 30px;
+ width: 100%;
+ height: 80%;
+}
+
+.haupt .headerinItem{
+ position: relative;
+ top: -200px;
+ left: 150px;
+ color: #000;
+}
+
+.haupt .discinItem{
+ position: relative;
+ top: -180px;
+ left: 150px;
+ width: 200px;
+ color: #000;
+ text-align: left;
+}
+
+.haupt .greenbutton{
+ position: absolute;
+ top: 165px;
+ left: 150px;
+ width: 100px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:#7DAD47 ;
+}
+
+.haupt #firstItem #shoppingwagen{
+ position: absolute;
+ width: 30px;
+ top:165px;
+ right: 60px;
+}
+
+.haupt .percypar{
+ position: absolute;
+ top: 250px;
+ width: 80%;
+ color: #000;
+ text-align: left;
+}
+/*first item ends*/
+
+/*second book in warenkorb and its details */
+#secondItem{
+ position: absolute;
+ top: 300px;
+ left: 15px;
+ width: 100%;
+}
+
+.haupt{
+ width: 100%;
+ height: 62%;
+ position: absolute;
+ display: flex;
+ overflow-y:scroll;
+ top: 200px;
+}
+
+.haupt{
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.haupt::-webkit-scrollbar {
+ display: none;
+}
+
+.haupt #secondItem{
+ position: relative;
+ top: 25px;
+ left: 30px;
+ width: 100%;
+ height: 80%;
+}
+
+.haupt .headerinItem{
+ position: relative;
+ top: -200px;
+ left: 150px;
+ color: #000;
+}
+
+.haupt .discinItem{
+ position: relative;
+ top: -180px;
+ left: 150px;
+ width: 200px;
+ color: #000;
+ text-align: left;
+}
+
+.haupt .redbutton{
+ position: absolute;
+ top: 165px;
+ left: 150px;
+ width: 180px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:red ;
}
-/*extra Large Devices*/
+.haupt #secondItem #shoppingwagen{
+ position: absolute;
+ width: 30px;
+ top:165px;
+ right: 60px;
+}
+
+.haupt .percypar{
+ position: absolute;
+ top: 250px;
+ width: 80%;
+ color: #000;
+ text-align: left;
+}
+/*second item ends*/
+
+/*third book in warenkorb and its details */
+
+#thirdItem{
+ position: absolute;
+ top: 580px;
+ left: 15px;
+ width:100%
+}
+/*third item ends*/
+
+/*fourth book in warenkorb and its details */
+
+#fourthItem{
+ position: absolute;
+ top: 880px;
+ left: 15px;
+ width:100%
+}
+/*fourth item ends*/
+
+
+#reservieren
+{
+ background-color: #E5D3B3;
+ position: absolute;
+ top: 70px;
+ left: 1050px;
+ width: 300px;
+ height: 150px;
+}
+
+#jetztReservieren{
+ position: relative;
+ top: 50px;
+ left: 75px;
+ width: 120px;
+ height: 55px;
+ background-color:#664220 ;
+ color:rgb(255, 255, 255);
+ padding-right:15px;
+ padding-left: 15px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ text-align: center;
+ text-decoration: none;
+ border-radius: 8px;
+}
+
+#ArtikelWarenkorb{
+ position: relative;
+ top: 20px;
+ left: 100px;
+ align-items: center;
+}
+
+.headerinItem{
+ position: relative;
+ top: -200px;
+ left: 150px;
+ width: 400px;
+}
+.discinItem{
+ position: absolute;
+ top: 50px;
+ left: 150px;
+}
+
+.main .containerOfAll .items .greenbutton{
+ position: absolute;
+ top: 165px;
+ left: 150px;
+ width: 100px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:#7DAD47 ;
+}
+.main .containerOfAll .items .redbutton{
+ position: absolute;
+ top: 165px;
+ left: 150px;
+ width: 180px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:red ;
+}
+
+.inputPlusMinus{
+ position: absolute;
+ top: 185px;
+ left: 800px;
+}
+
+.binPicture{
+ position: absolute;
+ top: -15px;
+ left: 100px;
+}
+
+
+#minusButton{
+position: absolute;
+top: -15px;
+left: 0px;
+}
+
+#plusButton{
+ position: absolute;
+ top: -15px;
+ left: 70px;
+ }
+
+.plus-minus-input .input-group-field {
+ text-align: center;
+ position:absolute;
+ width: 30px;
+ height: 20px;
+ top: -15px;
+ left: 28px;
+}
+
+.plus-minus-input .input-group-field::-webkit-inner-spin-button,
+.plus-minus-input .input-group-field ::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.plus-minus-input .input-group-button .circle {
+ border-radius: 50%;
+ padding: 0.15em 0.35em;
+}
+
+/*------WarenKorb ENDS-------*/
+
+/*buecher begins */
+.containerofbuecher{
+ overflow-y: scroll;
+ overflow-x: hidden ;
+ display: flex;
+ position: absolute;
+ top: 200px;
+ width: 100%;
+ height: 66%;
+}
+.containerofbuecher{
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.containerofbuecher::-webkit-scrollbar {
+ display: none;
+}
+
+#büchertitel{
+ position: absolute;
+top:35px;
+left:35px;
+font-size: 30px;
+}c
+
+.containerofbuecher #firstItem{
+ position: absolute;
+ top:100px;
+ left: 45px;
+}
+
+.containerofbuecher #secondItem{
+ position: absolute;
+ top:400px;
+ left: 45px;
+}
+
+.containerofbuecher #thirdItem{
+ position: absolute;
+ top:700px;
+ left: 45px;
+}
+
+.containerofbuecher #fourthItem{
+ position: absolute;
+ top:1000px;
+ left: 45px;
+}
+
+.containerofbuecher .items .redbutton{
+ position: absolute;
+ top: 165px;
+ left: 150px;
+ width: 180px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:red ;
+}
+
+.containerofbuecher .items .greenbutton{
+ position: absolute;
+ top: 165px;
+ left: 150px;
+ width: 100px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:#7DAD47 ;
+}
+
+.containerofbuecher .items .binPicture{
+ position: absolute;
+ top: 170px;
+ left: 90%;
+}
+
+/*meine Bücher begins*/
+.containerofmeinebuecher{
+ overflow-y: scroll;
+ overflow-x: hidden ;
+ display: flex;
+ position: absolute;
+ top: 200px;
+ width: 100%;
+ height: 65%;
+}
+.containerofmeinebuecher{
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+.containerofmeinebuecher::-webkit-scrollbar {
+ display: none;
+}
+
+#meinebüchertitel{
+ position: absolute;
+top:35px;
+left:35px;
+font-size: 30px;
+}
+
+.containerofmeinebuecher #firstItem{
+ position: absolute;
+ top:100px;
+ left: 45px;
+}
+
+.containerofmeinebuecher #secondItem{
+ position: absolute;
+ top:400px;
+ left: 45px;
+}
+
+.containerofmeinebuecher #thirdItem{
+ position: absolute;
+ top:700px;
+ left: 45px;
+}
+
+.containerofmeinebuecher #fourthItem{
+ position: absolute;
+ top:1000px;
+ left: 45px;
+}
+
+.containerofmeinebuecher .items .redbutton{
+ position: absolute;
+ top: 120px;
+ left: 150px;
+ width: 200px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:red ;
+}
+
+.containerofmeinebuecher .items .greenbutton{
+ position: absolute;
+ top: 120px;
+ left: 150px;
+ width: 200px;
+ height: 25px;
+ color:rgb(255, 255, 255);
+ padding-top: 7px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 15px;
+ background-color:#7DAD47 ;
+}
+
+.containerofmeinebuecher .items .binPicture{
+ position: absolute;
+ top: 170px;
+ left: 90%;
+}
+
+.containerofmeinebuecher .items #message{
+ position: absolute;
+ top: 170px;
+ left: 150px;
+ width: 700px;
+}
+/*------ ANMELDEN BEGINS-----*/
+#obererText{
+ position: fixed;
+ top: 270px;
+ left: 50px;
+}
+#anmeldeInput{
+ position: fixed;
+ top: 330px;
+ left: 50px;
+}
+#AnmeldeInput{
+ position: relative;
+ top: 3px;
+
+}
+#anmeldebutton{
+ position: relative;
+ top: 50px;
+ right:180px;
+ width: 120px;
+ height: 55px;
+ background-color:#664220 ;
+ color:rgb(255, 255, 255);
+ padding-right:15px;
+ padding-left: 15px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ text-align: center;
+ text-decoration: none;
+ border-radius: 8px;
+}
+/*----- ANMELDEN ENDS-------*/
+
+
+
+/*Largest Devices*/
+@media screen and (max-width:1400px){
+ #sidecandle{
+ width: 12%;
+ }
+ .p1{
+ max-width: 86%;
+ }
+ .p2{
+ max-width: 86%;
+ }
+ .containerOfAll{
+ width: 85%;
+ left: 35px;
+ height: 65%;
+ }
+ .containerOfAll .items .inputPlusMinus{
+ left: 600px;
+ }
+
+ .main #reservieren{
+ top: 600px;
+ left: 100px;
+
+ }
+
+ .main{
+ overflow-x: hidden;
+ position: absolute;
+ top:200px;
+ right: 10px;
+ height: 65%;
+}
+
+}
+
+/*Large Devices*/
@media screen and (max-width:1200px){
#sidecandle{
width: 12%;
@@ -475,9 +1001,30 @@ eine eigene Style CSS sollte dafür erstellt werden */
.p2{
max-width: 86%;
}
+ .containerOfAll{
+ width: 85%;
+ left: 35px;
+ height: 500px;
+ }
+ .containerOfAll .items .inputPlusMinus{
+ left: 600px;
+ }
+
+ .main #reservieren{
+ top: 600px;
+ left: 100px;
+
+ }
+ .main{
+ overflow-x: hidden;
+ position: absolute;
+ top:200px;
+ right: 10px;
+ height: 65%;
+}
}
-/*Large Devices*/
+/*medium Devices*/
@media screen and (max-width:1000px){
#sidecandle{
width: 14%;
@@ -488,9 +1035,25 @@ eine eigene Style CSS sollte dafür erstellt werden */
.p2{
max-width: 84%;
}
+ .containerOfAll .items .inputPlusMinus{
+ left: 500px;
}
-/*medium Devices*/
+.containerOfAll{
+ width: 90%;
+}
+
+.main{
+
+ height: 65%;
+}
+.containerofmeinebuecher .items #message{
+ width: 400px;
+}
+
+}
+/*small Devices*/
@media screen and (max-width:800px){
+
#sidecandle{
width: 16%;
}
@@ -500,6 +1063,39 @@ eine eigene Style CSS sollte dafür erstellt werden */
.p2{
max-width: 81%;
}
+
+ .containerofbuecher .items .binPicture{
+ left: 80%;
+ }
+
+ .containerofmeinebuecher .items .binPicture{
+ left: 80%;
+ }
+
+ .containerOfAll .items .inputPlusMinus{
+ left: 280px;
+ }
+ .containerOfAll{
+ width: 90%;
+ }
+ .main #reservieren{
+ top: 600px;
+ left: 100px;
+
+ }
+ .main {
+ height: 65%;
+
+ }
+ .main .containerOfAll .items .redbutton{
+ width: 100px;
+ height: 40px;
+ top: 150px;
+ }
+
+ .containerofmeinebuecher .items #message{
+ width: 240px;
+ }
/*Burger Menu*/
/*invisibility and deactivate buttons*/
#uberuns{
@@ -538,8 +1134,8 @@ eine eigene Style CSS sollte dafür erstellt werden */
.icon-burger {
display: none;
position: fixed;
- top: 2%;
- right: 1%;
+ top: 24px;
+ right: 10px;
transform: translateY(-50%);
cursor:pointer;
}
@@ -583,129 +1179,133 @@ eine eigene Style CSS sollte dafür erstellt werden */
top: 150px;
}
+/*erweiterte Suche*/
+.hauptcontainer .buchtitel{
+ left:20px;
+}
+.hauptcontainer .buchtiteloptions{
+ top: 110px;
+ left:20px;
+}
+
+.hauptcontainer .und-wort1{
+ top: 140px;
+ left:20px;
+}
+
+.hauptcontainer .und-wort2{
+ left:20px;
+ top: 200px;
+}
+
+.hauptcontainer .autor{
+ top: 140px;
+ left:100px;
+}
+
+.hauptcontainer .autoroptions{
+ top: 170px;
+ left:20px;
+}
+
+.hauptcontainer .stichwort{
+ top: 200px;
+}
+
+.hauptcontainer .stichwörteroptions{
+ top: 230px;
+ left:20px;
+}
+
+.hauptcontainer #weiteresuchkriterien{
+ top: 270px;
}
-/*small Devices*/
+
+.hauptcontainer .jahrvon{
+ top: 300px;
+}
+
+.hauptcontainer .anfangsdatum{
+ top: 330px;
+ left: 20px;
+
+}
+
+.hauptcontainer .bis{
+ top: 330px;
+ left: 140px;
+}
+
+.hauptcontainer .endsdatum{
+ top: 330px;
+ left: 170px;
+}
+
+.hauptcontainer .sprache{
+ top: 370px;
+}
+
+.hauptcontainer .spracheingabe{
+ top: 400px;
+ left:20px;
+
+}
+
+.hauptcontainer .verfügbarkeit{
+ top: 430px;
+ left: 20px;
+}
+
+.hauptcontainer .checkbox{
+ top: 460px;
+ left: 20px;
+}
+
+.hauptcontainer .kommentar{
+ top:460px;
+ left: 40px;
+ font-size: 15px;
+}
+
+.hauptcontainer #suchen{
+ top: 500px;
+}
+.hauptcontainer #suchfelderleeren{
+ top: 500px;
+}
+
+
+}
+/*extra small Devices*/
@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;
+ .headerinItem{
+ word-break: break-word;
+ font-size: 15px;
+ width: 200px;
}
- .p4{
- top: 450px;
-
+ .main .containerOfAll .items .redbutton{
+ width: 100px;
+ height: 40px;
}
- .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%;
diff --git a/uberUns.html b/uberUns.html
index 85c8dc4..110f1a3 100644
--- a/uberUns.html
+++ b/uberUns.html
@@ -17,14 +17,16 @@
Candle
diff --git a/warenkorb.html b/warenkorb.html
new file mode 100644
index 0000000..f262bd7
--- /dev/null
+++ b/warenkorb.html
@@ -0,0 +1,219 @@
+
+
+
+
+
+
+
+
+
Candle Bibliothek
+
+
+
+
+
+
+
+
+
+
+ Bibliothek 
+
Candle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
von Rick Riordan
+
Verfügbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
von Tomihiko Morimi
+
Verfügbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
