finished about pages

This commit is contained in:
Hendrik Schutter 2020-01-17 18:03:28 +01:00
parent 66f4e319fa
commit dac2d0511a
5 changed files with 76 additions and 85 deletions

View File

@ -19,7 +19,6 @@
</div> </div>
</nav> </nav>
<main> <main>
<div class='hero'> <div class='hero'>
<div class='content-width'> <div class='content-width'>
<h1>Angebote</h1> <h1>Angebote</h1>

View File

@ -7,10 +7,11 @@
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<main class='hero'> <main>
<div class='content-width'> <div class='content-width'>
<h1>Über uns</h1> <h1>Über uns</h1>
<div> <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</div> </div>
</div> </div>
<div class="vertical-spacer s"></div> <div class="vertical-spacer s"></div>

View File

@ -1,92 +1,81 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org"> <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>eCommerce</title> <title>e-commerce</title>
<link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/> <link rel="stylesheet" type="text/css" href="css/ecom.css">
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<main> <main>
<div class='hero'> <div class='hero'>
<div class='content-width'> <div class='content-width'>
<h1>Angebote</h1> <h1>Angebote</h1>
<div class='grid m base shadow'> <div class='grid m base shadow'>
<section>
<section> <img th:src="@{/img/product-1.jpg}" />
<img th:src="@{/img/product-1.jpg}" /> <h2>Lorem Ipsum</h2>
<h2>Lorem Ipsum</h2> <p class='price'> 25.14 €</p>
<p class='price'> 25.14 €</p> <p>
<p> Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. </p>
</p> </section>
</section> <section>
<img th:src="@{/img/product-2.jpg}" />
<section> <h2>Lorem Ipsum</h2>
<img th:src="@{/img/product-2.jpg}" /> <p class='price'> 10.14 €</p>
<h2>Lorem Ipsum</h2> <p>
<p class='price'> 10.14 €</p> Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
<p> </p>
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. </section>
</p> <section>
</section> <img th:src="@{/img/product-3.jpg}" />
<h2>Lorem Ipsum</h2>
<section> <p class='price'> 25.14 €</p>
<img th:src="@{/img/product-4.jpg}" /> <p>
<h2>Lorem Ipsum</h2> Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
<p class='price'> 25.14 €</p> </p>
<p> </section>
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. <section>
</p> <img th:src="@{/img/product-4.jpg}" />
</section> <h2>Lorem Ipsum</h2>
<p class='price'> 10.14 €</p>
<section> <p>
<img th:src="@{/img/product-5.jpg}" /> Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
<h2>Lorem Ipsum</h2> </p>
<p class='price'> 10.14 €</p> </section>
<p> <section>
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. <img th:src="@{/img/product-5.jpg}" />
</p> <h2>Lorem Ipsum</h2>
</section> <p class='price'> 44.14 €</p>
<p>
<section> Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
<img th:src="@{/img/product-3.jpg}" /> </p>
<h2>Lorem Ipsum</h2> </section>
<p class='price'> 44.14 €</p> <section class="spacer"></section>
<p> <section class="spacer"></section>
<section class="spacer"></section>
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. <section class="spacer"></section>
</div>
</p>
</section>
<section class="spacer"></section>
<section class="spacer"></section>
<section class="spacer"></section>
<section class="spacer"></section>
</div>
</div> </div>
<div class="vertical-spacer s"></div> <div class="vertical-spacer s"></div>
</div> </div>
<!-- TODO only shown if not logged in--> <div class=''>
<div class=''>
<div class='content-width'> <div class='content-width'>
<h1>Personalisierte Empfehlungen</h1> <h1>Personalisierte Empfehlungen</h1>
<div class="grid l"> <div class="grid l">
<img th:src="@{/img/undraw_successful_purchase_secondary.svg}" /> <img th:src="@{/img/undraw_successful_purchase_secondary.svg}"/>
<div> <div>
<h2>Werde jetzt Kunde</h2> <h2>Werde jetzt Kunde</h2>
<p> Jetzt Kunde werden und viele Vorteile sichern, <p> Jetzt Kunde werden und viele Vorteile sichern,
wie z.B. personalisierte Empfehlungen. </p> wie z.B. personalisierte Empfehlungen. </p>
<p> <button>Registieren</button>
<a class="button" th:href="@{/register}">Registieren</a> </div>
</p> </div>
</div>
</div>
</div> </div>
<div class="vertical-spacer s"></div> <div class="vertical-spacer s"></div>
</div> </div>
</main> </main>
<footer th:replace="fragments/footer :: footer"></footer> <footer th:replace="fragments/footer :: footer"></footer>
</body> </body>
</html> </html>

View File

@ -7,10 +7,11 @@
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<main class='hero'> <main>
<div class='content-width'> <div class='content-width'>
<h1>Datenschutzerklärung</h1> <h1>Datenschutzerklärung</h1>
<div> <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</div> </div>
</div> </div>
<div class="vertical-spacer s"></div> <div class="vertical-spacer s"></div>

View File

@ -7,10 +7,11 @@
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<main class='hero'> <main>
<div class='content-width'> <div class='content-width'>
<h1>Allgemeine Geschäftsbedingungen</h1> <h1>Allgemeine Geschäftsbedingungen</h1>
<div> <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</div> </div>
</div> </div>
<div class="vertical-spacer s"></div> <div class="vertical-spacer s"></div>