Merge branch 'johannes1' of Studium/Internet-Technologien into master
This commit is contained in:
Johannes Theiner
Gitea
commit
c89740abd4
|
|
@ -1,2 +1,3 @@
|
|||
*.iml
|
||||
/target
|
||||
/target
|
||||
.idea
|
||||
50
pom.xml
50
pom.xml
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<properties>
|
||||
<java.version>1.8</java.version>
|
||||
<checkstyle_file>checkstyle.xml</checkstyle_file>
|
||||
<checkstyle.file>checkstyle.xml</checkstyle.file>
|
||||
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
|
||||
</properties>
|
||||
|
||||
|
|
@ -27,6 +27,20 @@
|
|||
<role>Developer</role>
|
||||
</roles>
|
||||
</developer>
|
||||
<developer>
|
||||
<name>Charlotte Friedemann</name>
|
||||
<email>charlotte.friedemann@informatik-emden.de</email>
|
||||
<roles>
|
||||
<role>Developer</role>
|
||||
</roles>
|
||||
</developer>
|
||||
<developer>
|
||||
<name>Julian Hinxlage</name>
|
||||
<email>julian.hinxlage@informatik-emden.de</email>
|
||||
<roles>
|
||||
<role>Developer</role>
|
||||
</roles>
|
||||
</developer>
|
||||
</developers>
|
||||
|
||||
|
||||
|
|
@ -101,7 +115,7 @@
|
|||
<encoding>${project.build.sourceEncoding}</encoding>
|
||||
<logViolationsToConsole>true</logViolationsToConsole>
|
||||
<consoleOutput>true</consoleOutput>
|
||||
<configLocation>${checkstyle_file}</configLocation>
|
||||
<configLocation>${checkstyle.file}</configLocation>
|
||||
</configuration>
|
||||
<executions>
|
||||
<execution>
|
||||
|
|
@ -176,7 +190,7 @@
|
|||
<groupId>org.apache.maven.plugins</groupId>
|
||||
<artifactId>maven-checkstyle-plugin</artifactId>
|
||||
<configuration>
|
||||
<configLocation>${checkstyle_file}</configLocation>
|
||||
<configLocation>${checkstyle.file}</configLocation>
|
||||
</configuration>
|
||||
<version>3.0.0</version>
|
||||
<reportSets>
|
||||
|
|
@ -202,12 +216,31 @@
|
|||
|
||||
|
||||
<dependencies>
|
||||
|
||||
<!---->
|
||||
<dependency>
|
||||
<groupId>javax.servlet</groupId>
|
||||
<artifactId>javax.servlet-api</artifactId>
|
||||
<version>4.0.1</version>
|
||||
<scope>provided</scope>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>javax.faces</groupId>
|
||||
<artifactId>jsf-api</artifactId>
|
||||
<version>2.1</version>
|
||||
<scope>provided</scope>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.apache.myfaces.core</groupId>
|
||||
<artifactId>myfaces-api</artifactId>
|
||||
<version>2.3.3</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.apache.myfaces.core</groupId>
|
||||
<artifactId>myfaces-impl</artifactId>
|
||||
<version>2.3.3</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
|
||||
<!--Annotations-->
|
||||
|
|
@ -223,6 +256,17 @@
|
|||
<version>13.0</version>
|
||||
<scope>compile</scope>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>com.google.code.gson</groupId>
|
||||
<artifactId>gson</artifactId>
|
||||
<version>2.8.0</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.mariadb.jdbc</groupId>
|
||||
<artifactId>mariadb-java-client</artifactId>
|
||||
<version>2.4.1</version>
|
||||
</dependency>
|
||||
|
||||
<!--JUnit-->
|
||||
<dependency>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,188 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
|
||||
<div class="m-col-l-4">
|
||||
<img class="m-image" src="https://source.unsplash.com/DxAzOKSiPoE/900x900" alt="Buchcover">
|
||||
</div>
|
||||
<div class="m-col-l-4">
|
||||
<h1>Your soul is a river</h1>
|
||||
<br>
|
||||
<h2>Nikita Gill</h2>
|
||||
<br>
|
||||
<span>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
|
||||
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Ut wisi enim ad minim veniam,
|
||||
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</span>
|
||||
</div>
|
||||
<div class="m-col-l-4">
|
||||
<div class="m-block">
|
||||
<h3>19,99 €</h3>
|
||||
<br>
|
||||
gewöhnlich versandfertig in <span class="m-text m-success">2-3 Tagen</span>
|
||||
<br>
|
||||
<br>
|
||||
<div class="m-button m-success">
|
||||
<a href="#">
|
||||
<i class="fas fa-cart-plus"></i>
|
||||
in den Warenkorb
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,24 +3,13 @@
|
|||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<script>
|
||||
function getStylesheet() {
|
||||
var dark = true;
|
||||
if (dark) {
|
||||
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
|
||||
} else {
|
||||
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
|
||||
}
|
||||
}
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
getStylesheet();
|
||||
</script>
|
||||
<noscript>
|
||||
<link href="css/m-light.css" rel="stylesheet">
|
||||
</noscript>
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -30,15 +19,48 @@
|
|||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a>
|
||||
<div class="m-button m-default m-col-t-1 m-push-l-10">
|
||||
<a href="login.html"><span class="fas fa-user"> Anmelden/Registrieren</span></a>
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
@ -46,31 +68,51 @@
|
|||
|
||||
<div class="m-container">
|
||||
|
||||
<h1 class="m-text-center">Belletristik</h1>
|
||||
<div class="m-row">
|
||||
<h1 class="m-text-center">Geschichten</h1>
|
||||
|
||||
<div class="m-row slider">
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption>Krimis</figcaption>
|
||||
<figcaption class="m-text-center">Krimis</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/eIVJAkj1uCs/900x900" alt="Glühbirne">
|
||||
<figcaption>Thriller</figcaption>
|
||||
<figcaption class="m-text-center">Thriller</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/C6CVXJMXwqs/900x900" alt="Rose">
|
||||
<figcaption>Liebesromane</figcaption>
|
||||
<figcaption class="m-text-center">Liebesromane</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/3OiYMgDKJ6k/900x900" alt="Adventure">
|
||||
<figcaption class="m-text-center">Abenteuer</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/RmoWqDCqN2E/900x900" alt="Weltraum">
|
||||
<figcaption class="m-text-center">Science & Fiction</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/JKRL7ofWWAA/900x900" alt="Fantasy">
|
||||
<figcaption class="m-text-center">Fantasy</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="m-text-center">Fachbücher</h1>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-row slider">
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/2xU7rYxsTiM/900x900" alt="Tastatur">
|
||||
|
|
@ -80,7 +122,7 @@
|
|||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/OApHds2yEGQ/900x900" alt="Münzen">
|
||||
<figcaption>Finanzen</figcaption>
|
||||
<figcaption>Wirtschaft</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
|
|
@ -89,27 +131,66 @@
|
|||
<figcaption>Medienwissenschaften</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/gKUC4TMhOiY/900x900" alt="Microsskope">
|
||||
<figcaption>Naturwissenschaften</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/Pz3EHf-KJfc/900x900" alt="japanische Schrift">
|
||||
<figcaption>Sprachen</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/1HDyLnA3g8k/900x900" alt="Klippen">
|
||||
<figcaption>Geologie</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1 class="m-text-center">Kinderbücher</h1>
|
||||
<h1 class="m-text-center">Ratgeber</h1>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-row slider">
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/EMZxDosijJ4/900x900" alt="2 Kinder beim lesen">
|
||||
<figcaption>Lesen lernen</figcaption>
|
||||
<figcaption>Erziehung</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/yjXlyrKIz2A/900x900" alt="Farben">
|
||||
<figcaption>Malbücher</figcaption>
|
||||
<img src="https://source.unsplash.com/APDMfLHZiRA/900x900" alt="Pfanne">
|
||||
<figcaption>Kochen</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/3y1zF4hIPCg/900x900" alt="Puzzle">
|
||||
<figcaption>Puzzle</figcaption>
|
||||
<img src="https://source.unsplash.com/E-b_VNmtGJY/900x900" alt="Person auf Gleisen">
|
||||
<figcaption>Selbsthilfe</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/oJ7SV6vQfBA/900x900" alt="Bohrer">
|
||||
<figcaption>Heimwerken</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/EDZTb2SQ6j0/900x900" alt="Laptop">
|
||||
<figcaption>Computer & Internet</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/1NzJggtJ6j4/900x900" alt="Person mit Karte im Wald">
|
||||
<figcaption>Reiseführer</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -125,44 +206,79 @@
|
|||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Your Brand</a></h3>
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Showcase</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Download</a></h3>
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Packages</a></li>
|
||||
<li><a href="#">Source</a></li>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Contact</h3>
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="mailto:you@your.brand">E-mail</a></li>
|
||||
<li><a href="https://github.com/your-brand">GitHub</a></li>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Blog</a></h3>
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">News</a></li>
|
||||
<li><a href="#">Archive</a></li>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Your Brand. Copyright © <a href="mailto:you@your.brand">You</a>,
|
||||
2017. All rights reserved.</p>
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3 m-block">
|
||||
<h4>Addresse:</h4>
|
||||
Max Mustermann<br>
|
||||
Musterstraße 42<br>
|
||||
12345 Musterstadt
|
||||
</div>
|
||||
<div class="m-col-t-4 m-block m-push-t-5">
|
||||
<h4>Konto</h4>
|
||||
IBAN: 12345••••••••••••••••••••••••111<br>
|
||||
Inhaber: Max Mustermann<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row m-block">
|
||||
<div class="m-col-t-4">
|
||||
<img src="https://source.unsplash.com/DxAzOKSiPoE/100x100" class="m-image" alt="Buchcover">
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h3>Your soul is a river - Nikita Gill</h3>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h4 class="m-text-right">3 x 19,99 €</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row m-block">
|
||||
<div class="m-col-t-4">
|
||||
<img src="https://source.unsplash.com/DxAzOKSiPoE/100x100" class="m-image" alt="Buchcover">
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h3>Your soul is a river - Nikita Gill</h3>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h4 class="m-text-right">19,99 €</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row m-block">
|
||||
<div class="m-col-t-4">
|
||||
<img src="https://source.unsplash.com/DxAzOKSiPoE/100x100" class="m-image" alt="Buchcover">
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h3>Your soul is a river - Nikita Gill</h3>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h4 class="m-text-right">19,99 €</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-10">
|
||||
<h1 class="m-text-right">Summe: 99,95 €</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3 m-push-t-3 m-button m-danger">
|
||||
<a href="#">Abbrechen</a>
|
||||
</div>
|
||||
<div class="m-col-t-3 m-push-t-3 m-button m-success">
|
||||
<a href="#">Bestätigen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
.onoffswitch {
|
||||
position: relative; width: 88px;
|
||||
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||
}
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.onoffswitch-label {
|
||||
display: block; overflow: hidden; cursor: pointer;
|
||||
border: 2px solid #999999; border-radius: 50px;
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
display: block; width: 200%; margin-left: -100%;
|
||||
transition: margin 0.3s ease-in 0s;
|
||||
}
|
||||
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||
display: block; float: left; width: 50%; height: 50px; padding: 0; line-height: 50px;
|
||||
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
content: "";
|
||||
padding-left: 10px;
|
||||
background-color: #EEEEEE; color: #FFFFFF;
|
||||
}
|
||||
.onoffswitch-inner:after {
|
||||
content: "";
|
||||
padding-right: 10px;
|
||||
background-color: #EEEEEE; color: #999999;
|
||||
text-align: right;
|
||||
}
|
||||
.onoffswitch-switch {
|
||||
display: block; width: 38px; margin: 6px;
|
||||
background: #A1A1A1;
|
||||
position: absolute; top: 0; bottom: 0;
|
||||
right: 34px;
|
||||
border: 2px solid #999999; border-radius: 50px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
background-color: #27A1CA;
|
||||
}
|
||||
|
||||
label, input { display:block; }
|
||||
input.text { margin-bottom:12px; width:95%; padding: .4em; }
|
||||
fieldset { padding:0; border:0; margin-top:25px; }
|
||||
h1 { font-size: 1.2em; margin: .6em 0; }
|
||||
div#users-contain { width: 350px; margin: 20px 0; }
|
||||
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
|
||||
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
|
||||
.ui-dialog .ui-state-error { padding: .3em; }
|
||||
.validateTips { border: 1px solid transparent; padding: 0.3em; }
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
@charset 'UTF-8';
|
||||
/* Slider */
|
||||
.slick-loading .slick-list
|
||||
{
|
||||
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('./fonts/slick.eot');
|
||||
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus
|
||||
{
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before
|
||||
{
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: .75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev
|
||||
{
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev
|
||||
{
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next
|
||||
{
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next
|
||||
{
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots
|
||||
{
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: .25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before
|
||||
{
|
||||
opacity: .75;
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
|
||||
<h1 class="m-text-center">Kriminalromane</h1>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Die Suche <br> Charlotte Link</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/eIVJAkj1uCs/900x900" alt="Glühbirne">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Todesschmerz <br> Tim Svart</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/C6CVXJMXwqs/900x900" alt="Rose">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Leid und letzter Tag <br> Elias Haller</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Tiefe Havel <br> Tim Pieper</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Wie der Tod so still <br> Roxann Hill</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/eIVJAkj1uCs/900x900" alt="Glühbirne">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Erfolgreich tot <br> Margot Jung</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/C6CVXJMXwqs/900x900" alt="Rose">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Engelsschlaf<br> Catherine Shepherd</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Die ewigen Toten <br> Simon Beckett</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Die Suche <br> Charlotte Link</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/eIVJAkj1uCs/900x900" alt="Glühbirne">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Die Suche <br> Charlotte Link</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/C6CVXJMXwqs/900x900" alt="Rose">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Die Suche <br> Charlotte Link</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/7mqsZsE6FaU/900x900" alt="Polizei Auto">
|
||||
<figcaption class="m-text-left" style="font-size:16px"> Die Suche <br> Charlotte Link</p></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-button m-flat m-fullwidth"><a href="#">weitere Bücher</a></div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,2 +1,9 @@
|
|||
<a href="search.html">suche</a>
|
||||
<a href="catalog.html">Katalog</a>
|
||||
<a href="start.html">Startseite</a><br>
|
||||
<a href="catalog.html">Katalog</a><br>
|
||||
<a href="login.html">Login</a><br>
|
||||
<a href="register.html">Registrierung</a><br>
|
||||
<a href="detailpage.html">Bücherliste</a><br>
|
||||
<a href="book.html">Buchdetails</a><br>
|
||||
<a href="confirmation.html">Bestätigung</a><br>
|
||||
<a href="shoppingcart.html">Warenkorb</a><br>
|
||||
<a href="orderinfo.html">Bestellinfos</a>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class = "m-container">
|
||||
<div class="m-row">
|
||||
<h2 class="m-col-t-2 m-push-t-5">
|
||||
Anmeldung
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
|
||||
<div class = "m-container">
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-5">
|
||||
Benutzername:
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-5">
|
||||
Passwort:
|
||||
<input type="password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-5">
|
||||
<input type="submit" value="Login" alt="Login">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="add-address-form" title="Addresse hinzufügen">
|
||||
<form>
|
||||
<fieldset>
|
||||
<label for="add-name">Name</label>
|
||||
<input type="text" name="name" id="add-name" class="text ui-widget-content ui-corner-all">
|
||||
<label for="add-email">Straße</label>
|
||||
<input type="text" name="email" id="add-email" class="text ui-widget-content ui-corner-all">
|
||||
<label for="add-ort">Ort</label>
|
||||
<input type="text" name="password" id="add-password" class="text ui-widget-content ui-corner-all">
|
||||
|
||||
<!-- Allow form submission with keyboard without duplicating the dialog button -->
|
||||
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="add-account-form" title="Zahlungsart hinzufügen">
|
||||
<form>
|
||||
<fieldset>
|
||||
<label for="name">BIC</label>
|
||||
<input type="text" name="name" id="acc-name" class="text ui-widget-content ui-corner-all">
|
||||
<label for="email">IBAN</label>
|
||||
<input type="text" name="email" id="acc-email" class="text ui-widget-content ui-corner-all">
|
||||
<label for="password">Inhaber</label>
|
||||
<input type="text" name="password" id="acc-password" v class="text ui-widget-content ui-corner-all">
|
||||
|
||||
<!-- Allow form submission with keyboard without duplicating the dialog button -->
|
||||
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
<h1 class="m-text-center">Addresse</h1>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3">
|
||||
<div class="m-block m-primary">
|
||||
Max Mustermann<br>
|
||||
Musterstraße 42<br>
|
||||
12345 Musterstadt
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<div class="m-block m-success">
|
||||
Max Mustermann<br>
|
||||
Musterstraße 43<br>
|
||||
12345 Musterstadt
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<div class="m-block">
|
||||
Max Mustermann<br>
|
||||
Musterstraße 45<br>
|
||||
12345 Musterstadt
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<div class="m-block">
|
||||
Max Mustermann<br>
|
||||
Musterstraße 1<br>
|
||||
12345 Musterstadt
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3">
|
||||
<div class="m-block">
|
||||
Max Mustermann<br>
|
||||
Musterstraße 30<br>
|
||||
12345 Musterstadt
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-col-t-3">
|
||||
<div class="m-block m-text-center">
|
||||
<button id="add-address" class="fas fa-plus fa-4x"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="m-text-center">Zahlungsart</h1>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4">
|
||||
<div class="m-block m-primary">
|
||||
PayPal<br>
|
||||
m••••••@•••••.de
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<div class="m-block m-success">
|
||||
Bankeinzug<br>
|
||||
IBAN: 12345••••••••••••••••••••••••111<br>
|
||||
Inhaber: Max Mustermann
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<div class="m-block m-text-center">
|
||||
<button id="add-account" class="fas fa-plus fa-4x"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$( function() {
|
||||
var address, account, account_form, address_form,
|
||||
|
||||
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
|
||||
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
|
||||
name = $( "#name" ),
|
||||
email = $( "#email" ),
|
||||
password = $( "#password" ),
|
||||
allFields = $( [] ).add( name ).add( email ).add( password ),
|
||||
tips = $( ".validateTips" );
|
||||
|
||||
function checkRegexp( o, regexp, n ) {
|
||||
if ( !( regexp.test( o.val() ) ) ) {
|
||||
o.addClass( "ui-state-error" );
|
||||
updateTips( n );
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function addUser() {
|
||||
|
||||
}
|
||||
|
||||
address = $( "#add-address-form" ).dialog({
|
||||
autoOpen: false,
|
||||
height: 400,
|
||||
width: 350,
|
||||
modal: true,
|
||||
buttons: {
|
||||
"hinzufügen": addUser,
|
||||
Cancel: function() {
|
||||
dialog.dialog( "close" );
|
||||
}
|
||||
},
|
||||
close: function() {
|
||||
form[ 0 ].reset();
|
||||
allFields.removeClass( "ui-state-error" );
|
||||
}
|
||||
});
|
||||
|
||||
account = $( "#add-account-form" ).dialog({
|
||||
autoOpen: false,
|
||||
height: 400,
|
||||
width: 350,
|
||||
modal: true,
|
||||
buttons: {
|
||||
"hinzufügen": addUser,
|
||||
Cancel: function() {
|
||||
dialog.dialog( "close" );
|
||||
}
|
||||
},
|
||||
close: function() {
|
||||
form[ 0 ].reset();
|
||||
allFields.removeClass( "ui-state-error" );
|
||||
}
|
||||
});
|
||||
|
||||
account_form = account.find( "form" ).on( "submit", function( event ) {
|
||||
event.preventDefault();
|
||||
addUser();
|
||||
});
|
||||
|
||||
address_form = account.find( "form" ).on( "submit", function( event ) {
|
||||
event.preventDefault();
|
||||
addUser();
|
||||
});
|
||||
|
||||
$( "#add-account" ).button().on( "click", function() {
|
||||
account.dialog( "open" );
|
||||
});
|
||||
$( "#add-address" ).button().on( "click", function() {
|
||||
address.dialog( "open" );
|
||||
});
|
||||
} );
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class = "m-container">
|
||||
<div class="m-row">
|
||||
<h2 class="m-col-t-2 m-push-t-5">
|
||||
Registrierung
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
|
||||
<div class = "m-container">
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-5">
|
||||
Email:
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-5">
|
||||
Benutzername:
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-5">
|
||||
Passwort:
|
||||
<input type="password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-2 m-push-t-5">
|
||||
<input type="submit" value="Registrieren" alt="Registrieren">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<script>
|
||||
function getStylesheet() {
|
||||
var dark = true;
|
||||
if (dark) {
|
||||
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
|
||||
} else {
|
||||
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
|
||||
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
|
||||
}
|
||||
}
|
||||
|
||||
getStylesheet();
|
||||
</script>
|
||||
<noscript>
|
||||
<link href="css/m-light.css" rel="stylesheet">
|
||||
</noscript>
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
|
||||
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="">
|
||||
<div class="m-row">
|
||||
<a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a>
|
||||
<div class="m-button m-default m-col-t-1 m-push-l-10">
|
||||
<a href="login.html"><span class="fas fa-user"> Anmelden/Registrieren</span></a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-6 m-push-l-3">
|
||||
<input type="text" style="font-size: 300%">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="m-col-t-1 m-push-l-3">
|
||||
<div class="m-button m-success">
|
||||
<a href="search.html"><span class="fas fa-search">
|
||||
</span></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="m-row m-block m-default">
|
||||
<div class="m-col-t-3">
|
||||
<img src="images/tree.png" alt="Baum" class="m-image">
|
||||
</div>
|
||||
<div class="m-col-t-7">
|
||||
<h3>Baum</h3>
|
||||
<br/>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
|
||||
massa.
|
||||
</div>
|
||||
<div class="m-col-t-2">
|
||||
<h2>2 €</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Your Brand</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Showcase</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Download</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">Packages</a></li>
|
||||
<li><a href="#">Source</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Contact</h3>
|
||||
<ul>
|
||||
<li><a href="mailto:you@your.brand">E-mail</a></li>
|
||||
<li><a href="https://github.com/your-brand">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Blog</a></h3>
|
||||
<ul>
|
||||
<li><a href="#">News</a></li>
|
||||
<li><a href="#">Archive</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Your Brand. Copyright © <a href="mailto:you@your.brand">You</a>,
|
||||
2017. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">(1) Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Mein Account</a>
|
||||
<ol>
|
||||
<li><a href="#">Meine Bestellungen</a></li>
|
||||
<li><a href="#">Adressen & Konten</a></li>
|
||||
<li><a href="#">Abmelden</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="m-container">
|
||||
<div class="m-row m-block">
|
||||
<div class="m-col-t-4">
|
||||
<img src="https://source.unsplash.com/DxAzOKSiPoE/100x100" class="m-image" alt="Buchcover">
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h3>Your soul is a river - Nikita Gill</h3>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<div class = "m-row">
|
||||
<h4 class="m-text-right">19,99 €</h4>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4 m-push-t-6">
|
||||
<input type="number" name="quantity" value="3" min="1" max="10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4 m-push-t-6 m-button m-small m-danger">
|
||||
<a href="#">Entfernen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row m-block">
|
||||
<div class="m-col-t-4">
|
||||
<img src="https://source.unsplash.com/DxAzOKSiPoE/100x100" class="m-image" alt="Buchcover">
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h3>Your soul is a river - Nikita Gill</h3>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<div class = "m-row">
|
||||
<h4 class="m-text-right">19,99 €</h4>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4 m-push-t-6">
|
||||
<input type="number" name="quantity" value="1" min="1" max="10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4 m-push-t-6 m-button m-small m-danger">
|
||||
<a href="#">Entfernen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row m-block">
|
||||
<div class="m-col-t-4">
|
||||
<img src="https://source.unsplash.com/DxAzOKSiPoE/100x100" class="m-image" alt="Buchcover">
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<h3>Your soul is a river - Nikita Gill</h3>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<div class = "m-row">
|
||||
<h4 class="m-text-right">19,99 €</h4>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4 m-push-t-6">
|
||||
<input type="number" name="quantity" value="1" min="1" max="10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-4 m-push-t-6 m-button m-small m-danger">
|
||||
<a href="#">Entfernen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-5 m-push-t-7">
|
||||
<h1 class="m-text-right">Summe(3 Items): 99,95 €</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-row">
|
||||
<div class="m-col-t-3 m-push-t-5 m-button m-success">
|
||||
<a href="#">Jetzt Kaufen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<!Doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Amazon light</title>
|
||||
|
||||
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
|
||||
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
|
||||
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
<link href="css/slick-theme.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav id="navigation">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
|
||||
<a id="m-navbar-show" href="#navigation" title="Show navigation"
|
||||
class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
|
||||
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
|
||||
<div class="m-row">
|
||||
<ol class="m-col-t-6 m-col-m-none">
|
||||
<li><a href="#">Katalog</a></li>
|
||||
<li><a href="#">Warenkorb</a></li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="4">
|
||||
<li>
|
||||
<a href="#">Anmelden</a>
|
||||
<ol>
|
||||
<li><a href="#">Registrieren</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="m-col-t-6 m-col-m-none" start="6">
|
||||
<li>
|
||||
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
|
||||
<ol>
|
||||
<li>Dark Theme
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
|
||||
<label class="onoffswitch-label" for="myonoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div id="m-landing-image" style="background-image: url('https://source.unsplash.com/HH4WBGNyltc/1920x1280')">
|
||||
<div id="m-landing-cover">
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<h1 class="m-text-center m-success">Amazon light</h1>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<h2 class="m-text-center">Sie haben noch nie ein richtig gutes Buch gelesen ?</h2>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<h2 class="m-text-center">Dann können wir auch nicht helfen</h2>
|
||||
</div>
|
||||
<br>
|
||||
<div class="m-row">
|
||||
<div class="m-button m-info">
|
||||
<a href="#">
|
||||
Zum Katalog
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<h3 class="m-text-center">Aktuelle Angebote</h3>
|
||||
|
||||
<div class="m-row slider">
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/LJeWmU9ecO4/900x900" alt="Polizei Auto">
|
||||
<figcaption class="m-text-center">20% auf Krimis</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/xS0zRRygc9I/900x900" alt="Gewürze">
|
||||
<figcaption class="m-text-center">10% auf Kochbücher</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/xekxE_VR0Ec/900x900" alt="Code">
|
||||
<figcaption class="m-text-center">13% auf Code</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/qQC8tyG_JVA/900x900" alt="Rote Berge mit Fluss">
|
||||
<figcaption class="m-text-center">17% auf Geologie</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/L8-0SAy-aoQ/900x900" alt="Paar vor Sonnenuntergang">
|
||||
<figcaption class="m-text-center">5% auf Romane</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/yI3weKNBRTc/900x900" alt="graue Wand">
|
||||
<figcaption class="m-text-center">4% auf nichts</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/3OiYMgDKJ6k/900x900" alt="gray">
|
||||
<figcaption class="m-text-center">3 für 2</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/BGB_von_1896.jpg" alt="Weltraum">
|
||||
<figcaption class="m-text-center">3% auf BGB</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="m-col-t-4">
|
||||
<figure class="m-figure">
|
||||
<img src="https://source.unsplash.com/kDDHfgS7Gjo/900x900" alt="Fantasy">
|
||||
<figcaption class="m-text-center">100% auf alles</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<div class="m-container">
|
||||
<div class="m-row">
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Hilfe</h3>
|
||||
<ul>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Rückgabe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Zahlung</h3>
|
||||
<ul>
|
||||
<li><a href="#">Kreditkarten</a></li>
|
||||
<li><a href="#">Gutscheine</a></li>
|
||||
<li><a href="#">Bankeinzug</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-clearfix-t"></div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3>Amazon light</h3>
|
||||
<ul>
|
||||
<li><a href="#">Über</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="m-col-s-3 m-col-t-6">
|
||||
<h3><a href="#">Rechtliches</a></h3>
|
||||
<ul>
|
||||
<li><a href="https://joethei.xyz/impress">Impressum</a></li>
|
||||
<li><a href="https://joethei.xyz/privacy">Datenschutz</a></li>
|
||||
<li><a href="https://joethei.xyz/disclaimer">Haftung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-row">
|
||||
<div class="m-col-l-10 m-push-l-1">
|
||||
<p>Amazon light. Copyright © <a href="#">B1</a>,
|
||||
2019. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
||||
<script>
|
||||
function changeTheme() {
|
||||
|
||||
if(document.getElementById('myonoffswitch').checked) {
|
||||
swapStyleSheet("dark", "#22272e", "8muUTAmcWU4");
|
||||
}else {
|
||||
swapStyleSheet("light", "#cb4b16", "o0Qqw21-0NI");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function swapStyleSheet(sheet, color, image) {
|
||||
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
|
||||
document.getElementById("pagecolor").setAttribute("content", color);
|
||||
document.getElementById("m-landing-image").style.backgroundImage = "url('https://source.unsplash.com/" + image + "/1920x1280')";
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.slider').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 3
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue