localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Merge branch 'master' of git.mosad.xyz:localhorst/e-commerce

Browse Source
This commit is contained in:
CodeSteak 2020-01-19 18:43:51 +01:00
commit d4e670218f
12 changed files with 308 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mockup-css/ecom-frontpage.html
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>

9
prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
View File

@ -44,12 +44,17 @@ public class RequestController {
@GetMapping("/articledetail") @GetMapping("/articledetail")
public String articledetail() { public String articledetail() {
return "articleDetail"; return "articledetail";
} }
@GetMapping("/searchresults") @GetMapping("/searchresults")
public String searchresults() { public String searchresults() {
return "searchResults"; return "searchresults";
}
@GetMapping("/shoppingcart")
public String shoppingcart() {
return "shoppingcart";
} }
@GetMapping("/intern/customerdetail") @GetMapping("/intern/customerdetail")

30
prototype/src/main/resources/static/css/articleDetail.css
View File

@ -1,30 +0,0 @@
.articledetail {
max-width: 100%;
padding: 2em;
background-color: var(--c-primary);
}
.availability {
color: var(--root-c-secondary);
}
.checkout {
border: 0px;
border-left: 2px;
border-color: var(--c-white);
border-style: solid;
}
.quantity {
display: flex;
}
.quantity label {
min-width: 5em;
margin-bottom: 0px;
padding-left: 15px;
}
.checkout button {
background-color: var(--root-c-secondary);
}

28
prototype/src/main/resources/static/css/ecom.css
View File

@ -35,7 +35,7 @@
--c-primary: var(--root-c-primary); --c-primary: var(--root-c-primary);
--c-primary-highlight: var(--root-c-primary-highlight); --c-primary-highlight: var(--root-c-primary-highlight);
--c-secondary: var(--c-secondary); --c-secondary: var(--root-c-secondary);
--c-secondary-highlight: var(--root-c-secondary-highlight); --c-secondary-highlight: var(--root-c-secondary-highlight);
--c-black: var(--root-c-black); --c-black: var(--root-c-black);
@ -137,6 +137,7 @@ a:visited {
p { p {
padding-top: var(--u0); padding-top: var(--u0);
padding-bottom: var(--u0); padding-bottom: var(--u0);
color: var(--c-black);
} }
h1 { h1 {
@ -313,6 +314,10 @@ label {
font-weight: bold; font-weight: bold;
} }
label.nolinebreak {
display:inline;
}
input.linestyle { input.linestyle {
background-color: transparent; background-color: transparent;
border-bottom: var(--u-4) solid var(--c-primary); border-bottom: var(--u-4) solid var(--c-primary);
@ -339,6 +344,14 @@ fieldset {
color: var(--c-base); color: var(--c-base);
} }
.primarytext{
color: var(--c-primary)
}
.secondarytext{
color: var(--c-secondary)
}
/* /*
* LAYOUT * LAYOUT
*/ */
@ -381,7 +394,6 @@ fieldset {
height: 0px; height: 0px;
} }
.bar-flex { .bar-flex {
display: flex; display: flex;
align-items: center; align-items: center;
@ -564,3 +576,15 @@ fieldset {
font-size: var(--u1); font-size: var(--u1);
text-align: right; text-align: right;
} }
.center-text {
text-align: center;
}
.leftspace {
padding-left: 1em;
}

56
prototype/src/main/resources/static/css/searchResults.css
View File

@ -1,56 +0,0 @@
.container {
}
.searchresults {
max-width: 100%;
padding: 2em;
background-color: var(--c-white);
border: 0px;
}
.sidebar {
border: 0px;
border-right: 2px;
border-style: solid;
border-color: white;
}
.articlelist {
background-color: var(--c-white);
}
.article {
padding: 1em;
}
img {
width: 75%
}
h2 {
padding-bottom: 0px;
}
.articlelink {
color: var(--c-white);
background-color: var(--c-white);
border: 0px;
}
.articlelink:hover {
color: var(--root-c-secondary)
}
h1 {
padding: 0px;
padding-bottom: 0.5em;
}
hr {
border-top: 2px solid white;
width: 75%;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
}

3
prototype/src/main/resources/templates/about.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>Ü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>

32
prototype/src/main/resources/templates/articleDetail.html
View File

@ -3,22 +3,18 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>e-commerce</title> <title>e-commerce</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/css/ecom.css" rel="stylesheet"/> <link href="/css/ecom.css" rel="stylesheet"/>
<link href="/css/articleDetail.css" rel="stylesheet"/>
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<div class="hero"> <main>
<main> <div class="detailgrid">
<div class="articledetail"> <div class="m">
<div class="row"> <img src="/img/product-1.jpg"/>
<div class="picture col-4">
<img src="/img/product-1.jpg" />
</div> </div>
<div class="articleinfo col-6"> <div class="m">
<h2>Tolle Kamera</h2> <h1>Tolle Kamera</h1>
<p>25.14 €</p> <h2>25.14 €</h2>
<p> <p>
Eine TOLLE Kamera <br> Eine TOLLE Kamera <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br> Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
@ -26,13 +22,13 @@
Indianerehrenwort! Indianerehrenwort!
</p> </p>
</div> </div>
<div class="checkout col-2"> <div class="s">
<h2>50.28 €</h2> <h1>50.28 €</h1>
<p class="availability">Auf Lager</p> <h2 class="secondarytext">Auf Lager</h2>
<br> <br>
<form> <form>
<div class="quantity row"> <div>
<label>Menge:</label> <label class="nolinebreak">Menge:</label>
<select size="1"> <select size="1">
<option>2</option> <option>2</option>
</select> </select>
@ -43,9 +39,7 @@
<button>In den Einkaufswagen</button> <button>In den Einkaufswagen</button>
</div> </div>
</div> </div>
</div> </main>
</main>
</div>
<footer th:replace="fragments/footer :: footer"></footer> <footer th:replace="fragments/footer :: footer"></footer>
</body> </body>
</html> </html>

31
prototype/src/main/resources/templates/home.html
View File

@ -1,18 +1,17 @@
<!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>
@ -21,7 +20,6 @@
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> <section>
<img th:src="@{/img/product-2.jpg}" /> <img th:src="@{/img/product-2.jpg}" />
<h2>Lorem Ipsum</h2> <h2>Lorem Ipsum</h2>
@ -30,36 +28,30 @@
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> <section>
<img th:src="@{/img/product-4.jpg}" /> <img th:src="@{/img/product-3.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> <section>
<img th:src="@{/img/product-5.jpg}" /> <img th:src="@{/img/product-4.jpg}" />
<h2>Lorem Ipsum</h2> <h2>Lorem Ipsum</h2>
<p class='price'> 10.14 €</p> <p class='price'> 10.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> <section>
<img th:src="@{/img/product-3.jpg}" /> <img th:src="@{/img/product-5.jpg}" />
<h2>Lorem Ipsum</h2> <h2>Lorem Ipsum</h2>
<p class='price'> 44.14 €</p> <p class='price'> 44.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 class="spacer"></section> <section class="spacer"></section>
<section class="spacer"></section> <section class="spacer"></section>
<section class="spacer"></section> <section class="spacer"></section>
@ -68,19 +60,16 @@
</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>
</p>
</div> </div>
</div> </div>
</div> </div>

3
prototype/src/main/resources/templates/privacy.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>

102
prototype/src/main/resources/templates/searchResults.html
View File

@ -3,87 +3,71 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>e-commerce</title> <title>e-commerce</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/css/ecom.css" rel="stylesheet"/> <link href="/css/ecom.css" rel="stylesheet"/>
<link href="/css/searchResults.css" rel="stylesheet"/>
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<main> <div class="hero">
<div class="hero"> <main class="sidebar-layout content-width">
<div class="searchresults"> <nav class="sidebar-layout">
<div class="row"> <ul class="secondary">
<div class="sidebar col-2"> <li><a>Aufnahmegeräte</a></li>
<h1>Kategorie</h1> <li><a>Computer</a></li>
<ul> <li><a>Fernseher</a></li>
<li><span>Aufnahmegeräte</span></li> <li><a>Handys</a></li>
<li><span>Computer</span></li> <li><a>Unterhaltungselektronik</a></li>
<li><span>Fernseher</span></li> <li><a>Sonstiges</a></li>
<li><span>Handys</span></li>
<li><span>Unterhaltungselektronik</span></li>
<li><span>Sonstiges</span></li>
</ul> </ul>
</div> </nav>
<div class="articlelist col-10">
<div class="row article"> <div class="content-width">
<div class="col-3 articleimg"> <div class='content-width'>
<img src="/img/product-1.jpg" /> <h1>Suchergebnisse</h1>
</div> <div class='grid m base shadow'>
<div class="col-9 articledesc">
<h2> <section>
<form action="/articleDetail" method="GET"> <img src="img/product-1.jpg">
<input type="submit" value="Tolle Kamera" class="articlelink"> <h2>Tolle Kamera</h2>
</form> <p class='price'> 25.14 €</p>
</h2>
<h1> 25.14 €</h1>
<p> <p>
Eine TOLLE Kamera <br> Eine TOLLE Kamera <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br> Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
Aber glaub mir, sie is echt echt TOLL! <br> Aber glaub mir, sie is echt echt TOLL! <br>
Indianerehrenwort! Indianerehrenwort!
</p> </p>
</div> </section>
</div>
<hr> <section>
<div class="row article"> <img src="img/product-2.jpg">
<div class="col-3 articleimg"> <h2>Bluetooth Kopfhörer</h2>
<img src="/img/product-2.jpg" /> <p class='price'> 10.14 €</p>
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articleDetail" method="GET">
<input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
</form>
</h2>
<h1> 10.14 €</h1>
<p> <p>
Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen. Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
</p> </p>
</div> </section>
</div>
<hr> <section>
<div class="row article"> <img src="img/product-3.jpg">
<div class="col-3 articleimg"> <h2>???</h2>
<img src="/img/product-3.jpg" /> <p class='price'> 25.14 €</p>
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articleDetail" method="GET">
<input type="submit" value="???" class="articlelink">
</form>
</h2>
<h1> 44.14 €</h1>
<p> <p>
Ich weiß selbst nich was das genau sein soll.<br> Ich weiß selbst nich was das genau sein soll.<br>
Wenn dus willst kannst es gern haben, musst nur das Geld überweisen. Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
</p> </p>
</section>
<section class="spacer"></section>
<section class="spacer"></section>
<section class="spacer"></section>
<section class="spacer"></section>
</div> </div>
</div> </div>
<div class="vertical-spacer s"></div>
</div> </div>
</div>
</div>
</div>
</main> </main>
</div>
<footer th:replace="fragments/footer :: footer"></footer> <footer th:replace="fragments/footer :: footer"></footer>
</body> </body>
</html> </html>

111
prototype/src/main/resources/templates/shoppingCart.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>e-commerce</title>
<link href="/css/ecom.css" rel="stylesheet"/>
</head>
<body>
<nav th:replace="fragments/header :: header">Header</nav>
<main class="detailgrid">
<div class="l">
<h1 class="center-text">Warenkorb</h1>
<table>
<tr>
<th>Bild</th>
<th>Name</th>
<th>Preis</th>
<th>Menge</th>
<th></th>
</tr>
<tr>
<td><img th:src="@{/img/product-1.jpg}" class="s"/></td>
<td>Kamera</td>
<td>100,50 €</td>
<td>
<select size="1">
<option>1</option>
</select>
</td>
<td>
<button>löschen</button>
</td>
</tr>
<tr>
<td><img th:src="@{/img/product-2.jpg}" class="s"/></td>
<td>Earbuds</td>
<td>63,95 €</td>
<td>
<select size="1">
<option>1</option>
</select>
</td>
<td>
<button>löschen</button>
</td>
</tr>
<tr>
<td><img th:src="@{/img/product-3.jpg}" class="s"/></td>
<td>USB-Magic Light</td>
<td>11,90 €</td>
<td>
<select size="1">
<option>1</option>
</select>
</td>
<td>
<button>löschen</button>
</td>
</tr>
<tr>
<td><img th:src="@{/img/product-4.jpg}" class="s"/></td>
<td>3D Magic Stativ</td>
<td>15,99 €</td>
<td>
<select size="1">
<option>1</option>
</select>
</td>
<td>
<button>löschen</button>
</td>
</tr>
<tr>
<td><img th:src="@{/img/product-5.jpg}" class="s"/></td>
<td>Ersatzfernbedinung</td>
<td>7,95 €</td>
<td>
<select size="1">
<option>1</option>
</select>
</td>
<td>
<button>löschen</button>
</td>
</tr>
</table>
</p>
</div>
<div class="s">
<h1 class="center-text">Checkout</h1>
<div class="hero">
<div class="leftspace">
<h2>Bestellübersicht</h2>
<p>Artikel: 200,29 €</p>
<p>Lieferung: 5,00 €</p>
<h2 class="secondarytext">Gesamt: 205,29 €</h2>
<h2>Versandadresse:</h2>
<p>Max Mustermann</p>
<p>Musterstraße 42</p>
<p>42424 Mustertal</p>
<button class="secondary">kostenpflichtig bestellen</button>
</div>
</div>
</div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>

3
prototype/src/main/resources/templates/terms.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>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>