added a first GUI Prototype
* based on ecom.css * accessible via localhost:8080/
This commit is contained in:
parent
6f6f705495
commit
87bb9d4a44
GPG Key ID:
E8459F3723C52C24
|
|
@ -6,7 +6,17 @@ import org.springframework.web.bind.annotation.GetMapping;
|
|||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
|
||||
@Controller
|
||||
public class GreetingController {
|
||||
public class RequestController {
|
||||
|
||||
@GetMapping("/")
|
||||
public String greeting() {
|
||||
return "redirect:/home";
|
||||
}
|
||||
|
||||
@GetMapping("/home")
|
||||
public String home() {
|
||||
return "home";
|
||||
}
|
||||
|
||||
@GetMapping("/greeting")
|
||||
public String greeting(@RequestParam(name = "name", required = false, defaultValue = "World") String name, Model model) {
|
||||
|
|
@ -14,10 +24,4 @@ public class GreetingController {
|
|||
return "greeting";
|
||||
}
|
||||
|
||||
@GetMapping("/home")
|
||||
public String home(Model model) {
|
||||
//model.addAttribute("name", name);
|
||||
return "home";
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,404 @@
|
|||
:root {
|
||||
font-family: "Fira Sans";
|
||||
line-height: 1.15;
|
||||
|
||||
--u5: calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 );
|
||||
--u4: calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
|
||||
--u3: calc(1em * 1.5 * 1.5 * 1.5);
|
||||
--u2: calc(1em * 1.5 * 1.5);
|
||||
--u1: calc(1em * 1.5);
|
||||
--u0: calc(1em);
|
||||
--u-1: calc(1em * 0.666);
|
||||
--u-2: calc(1em * 0.666 * 0.666);
|
||||
--u-3: calc(1em * 0.666 * 0.666 * 0.666);
|
||||
--u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);
|
||||
|
||||
|
||||
--root-c-base: #ecf0f1;
|
||||
--root-c-base-highlight: #bdc3c7;
|
||||
|
||||
--root-c-primary: #1abc9c;
|
||||
--root-c-primary-highlight: #16a085;
|
||||
|
||||
--root-c-secondary: #9b59b6;
|
||||
--root-c-secondary-highlight: #8e44ad;
|
||||
|
||||
--root-c-black: #2c3e50;
|
||||
--root-c-black-highlight: #34495e;
|
||||
|
||||
|
||||
--c-base: var(--root-c-base);
|
||||
--c-base-highlight: var(--root-c-base-highlight);
|
||||
|
||||
--c-primary:var(--root-c-primary);
|
||||
--c-primary-highlight: var(--root-c-primary-highlight);
|
||||
|
||||
--c-secondary: var(--c-secondary);
|
||||
--c-secondary-highlight: var(--root-c-secondary-highlight);
|
||||
|
||||
--c-black: var(--root-c-black);
|
||||
--c-black-highlight: var(--root-c-black-highlight);
|
||||
}
|
||||
|
||||
.primary {
|
||||
--c-base: var(--root-c-base);
|
||||
--c-base-highlight: var(--root-c-base-highlight);
|
||||
|
||||
--c-primary:var(--root-c-primary);
|
||||
--c-primary-highlight: var(--root-c-primary-highlight);
|
||||
|
||||
--c-secondary: var(--c-secondary);
|
||||
--c-secondary-highlight: var(--root-c-secondary-highlight);
|
||||
|
||||
--c-black: var(--root-c-black);
|
||||
--c-black: var(--root-c-black-highlight);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
--c-base: var(--root-c-base);
|
||||
--c-base-highlight: var(--root-c-base-highlight);
|
||||
|
||||
--c-primary:var(--root-c-secondary);
|
||||
--c-primary-highlight: var(--root-c-secondary-highlight);
|
||||
|
||||
--c-secondary: var(--root-c-primary);
|
||||
--c-secondary-highlight: var(--root-c-primary-highlight);
|
||||
|
||||
--c-black: var(--root-c-black);
|
||||
--c-black-highlight: var(--root-c-black-highlight);
|
||||
}
|
||||
|
||||
.inverted {
|
||||
--c-base: var(--root-c-black);
|
||||
--c-base-highlight: var(--root-c-black-highlight);
|
||||
|
||||
--c-primary:var(--root-c-primary);
|
||||
--c-primary-highlight: var(--root-c-primary-highlight);
|
||||
|
||||
--c-secondary: var(--c-secondary);
|
||||
--c-secondary-highlight: var(--root-c-secondary-highlight);
|
||||
|
||||
--c-black: var(--root-c-base);
|
||||
--c-black-highlight: var(--root-c-base-highlight);
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-size: var(--u0);
|
||||
height: 100%;
|
||||
background-color: var(--c-base);
|
||||
color: var(--c-black)
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: "Fira Mono";
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0.618em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--u2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--u1);
|
||||
}
|
||||
|
||||
h3, h4, h5 {
|
||||
font-size: var(--u0);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* NAV
|
||||
*/
|
||||
|
||||
nav h1 {
|
||||
font-size: var(--u0);
|
||||
margin: 0rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* FOOTER
|
||||
*/
|
||||
|
||||
footer {
|
||||
padding-top: var(--u3);
|
||||
padding-bottom: var(--u1);
|
||||
}
|
||||
|
||||
/*
|
||||
* INPUTS
|
||||
*/
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
|
||||
background-color: var(--c-base);
|
||||
|
||||
border: none;
|
||||
|
||||
border-radius: var(--u-2);
|
||||
margin-top: var(--u0);
|
||||
margin-bottom: var(--u0);
|
||||
|
||||
padding: var(--u0);
|
||||
font-size: var(--u0);
|
||||
color: var(--c-black);
|
||||
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
}
|
||||
|
||||
input[type="text"]::placeholder,
|
||||
input[type="password"]::placeholder {
|
||||
color: var(--c-primary-highlight);
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
button, .botton {
|
||||
font-family: "Fira Mono";
|
||||
|
||||
background-color: var(--c-primary);
|
||||
color: var(--c-base);
|
||||
|
||||
border: none;
|
||||
border-radius: var(--u-2);
|
||||
|
||||
margin-bottom: var(--u0);
|
||||
margin-top: var(--u0);
|
||||
|
||||
padding: var(--u0);
|
||||
|
||||
min-width: 10em;
|
||||
|
||||
font-family: "Fira Mono";
|
||||
text-transform: uppercase;
|
||||
font-size: var(--u0);
|
||||
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
}
|
||||
|
||||
button:active, .botton:active {
|
||||
background-color: var(--c-primary-highlight);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
button,
|
||||
.button {
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
/*
|
||||
* HERO
|
||||
*/
|
||||
|
||||
.hero {
|
||||
background-color: var(--c-primary);
|
||||
color: var(--c-base);
|
||||
}
|
||||
|
||||
.hero-black {
|
||||
background-color: var(--c-black);
|
||||
color: var(--c-base);
|
||||
}
|
||||
|
||||
/*
|
||||
* LAYOUT
|
||||
*/
|
||||
|
||||
.content-width {
|
||||
max-width: 80rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
padding-left: var(--u0);
|
||||
padding-right: var(--u0);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
margin: var(--u0);
|
||||
}
|
||||
|
||||
.flex > .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
flex: 1;
|
||||
margin: var(--u0);
|
||||
padding: var(--u0);
|
||||
border-radius: var(--u0);
|
||||
}
|
||||
|
||||
.grid.base > * {
|
||||
background-color: var(--c-base);
|
||||
color: var(--c-black);
|
||||
}
|
||||
|
||||
.grid.black > * {
|
||||
background-color: var(--c-black);
|
||||
color: var(--c-base);
|
||||
}
|
||||
|
||||
.grid.primary > * {
|
||||
background-color: var(--c-primary);
|
||||
color: var(--c-base);
|
||||
}
|
||||
|
||||
.grid.secondary > * {
|
||||
background-color: var(--c-primary-highlight);
|
||||
color: var(--c-base);
|
||||
}
|
||||
|
||||
.hero-primary .grid.shadow > * {
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
}
|
||||
|
||||
.hero-black .grid.shadow > * {
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
}
|
||||
|
||||
|
||||
.grid.s > .spacer {
|
||||
box-shadow: none;
|
||||
|
||||
margin: calc(var(--u0) * 2);
|
||||
padding: 0px;
|
||||
|
||||
width: 10rem;
|
||||
max-width: 10rem;
|
||||
min-width: 7.5rem;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.grid.s > * {
|
||||
width: 10rem;
|
||||
max-width: 10rem;
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
|
||||
.grid.m > .spacer {
|
||||
box-shadow: none;
|
||||
|
||||
margin: calc(var(--u0) * 2);
|
||||
padding: 0px;
|
||||
|
||||
width: 20rem;
|
||||
max-width: 20rem;
|
||||
min-width: 15rem;
|
||||
height: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.grid.m > * {
|
||||
width: 20rem;
|
||||
max-width: 20rem;
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
.grid.l > .spacer {
|
||||
box-shadow: none;
|
||||
|
||||
margin: calc(var(--u0) * 2);
|
||||
padding: 0px;
|
||||
|
||||
width: 40rem;
|
||||
max-width: 40rem;
|
||||
min-width: 15rem;
|
||||
height: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.grid.l > * {
|
||||
width: 40rem;
|
||||
max-width: 40rem;
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
.vertical-spacer.s {
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
.vertical-spacer.m {
|
||||
min-height: 20rem;
|
||||
}
|
||||
|
||||
.vertical-spacer.l {
|
||||
min-height: 40rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Impov
|
||||
*/
|
||||
|
||||
.input-icon {
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
|
||||
border-radius: var(--u0);
|
||||
}
|
||||
|
||||
.input-icon > input {
|
||||
flex: 1;
|
||||
margin: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-icon > button {
|
||||
margin: 0px;
|
||||
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* CONTENT
|
||||
*/
|
||||
|
||||
.price {
|
||||
opacity: 75%;
|
||||
font-size: var(--u1);
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
|
||||
<svg id="mainImage_create" data-name="mainImage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.2 81.5">
|
||||
<style id="svgStyle">
|
||||
@import url('https://fonts.googleapis.com/css?family=Merriweather');
|
||||
.changeColor {
|
||||
fill: #4f86ed;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 50%;
|
||||
font-family: 'Merriweather', serif;
|
||||
}
|
||||
|
||||
.cls-1 {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.cls-7 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-11,
|
||||
.cls-12,
|
||||
.cls-14,
|
||||
.cls-16,
|
||||
.cls-3 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
stroke: #5c7690;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-11,
|
||||
.cls-12,
|
||||
.cls-3 {
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.cls-14,
|
||||
.cls-15,
|
||||
.cls-16,
|
||||
.cls-3 {
|
||||
stroke-width: 0.5px;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #ffe1d9;
|
||||
}
|
||||
|
||||
.cls-5 {
|
||||
fill: #ffcfbf;
|
||||
}
|
||||
|
||||
.cls-6 {
|
||||
fill: #fecbb6;
|
||||
}
|
||||
|
||||
.cls-9 {
|
||||
fill: #fecb02;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-12 {
|
||||
stroke: #d26f51;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-11 {
|
||||
stroke-width: 0.38px;
|
||||
}
|
||||
|
||||
.cls-11 {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
.cls-12 {
|
||||
stroke-width: 0.19px;
|
||||
}
|
||||
|
||||
.cls-13 {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.cls-14,
|
||||
.cls-15,
|
||||
.cls-16 {
|
||||
stroke: #b0bec5;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.cls-15 {
|
||||
fill: #edf0f2;
|
||||
}
|
||||
|
||||
.cls-16 {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.cls-17 {
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
font-size: 49.87px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cls-18 {
|
||||
fill: #fffdbb;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------
|
||||
SVG Animate
|
||||
---------------------------*/
|
||||
.earMove {
|
||||
transition: all ease-in-out 2s;
|
||||
transform-origin: 50% 50%;
|
||||
animation: earmove 1.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
.faceMove {
|
||||
transition: all ease-in-out 2s;
|
||||
transform-origin: 50% 50%;
|
||||
animation: move 1.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
.neckMove {
|
||||
transition: all ease-in-out 2s;
|
||||
transform-origin: 50% 50%;
|
||||
animation: neck 1.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
|
||||
@keyframes earmove {
|
||||
0% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(-0.7px) translateY(0px);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(-0.7px) translateY(-0.3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-0.7px) translateY(-0.3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(2px) translateY(0px);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(2px) translateY(-0.3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(2px) translateY(-0.3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neck {
|
||||
0% {
|
||||
transform: translateY(0.7px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0.7px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path id="c-1" class="changeColor cls-1" d="M46.62,52.5c5.78,4.9,21.14,8.4,39.19,8.4s33.41-3.5,39.19-8.4c-5.78-4.9-21.14-8.4-39.19-8.4S52.41,47.6,46.62,52.5Z" style="fill: rgb(0, 21, 255);"></path>
|
||||
<path class="cls-2" d="M99.73,47.71H68.65a7.13,7.13,0,0,0-7.13,7.13V60a152.58,152.58,0,0,0,24.3,1.83,157.87,157.87,0,0,0,21.05-1.35V54.84A7.13,7.13,0,0,0,99.73,47.71Z"></path>
|
||||
<path class="cls-3" d="M123.56,55.81C115,58.94,101.27,61,85.81,61c-26,0-47-5.71-47-12.76,0-3.45,5.05-6.58,13.25-8.88"></path>
|
||||
<path class="cls-3" d="M55.37,38.47a140,140,0,0,1,30.44-3c26,0,47,5.71,47,12.76,0,2.4-2.44,4.65-6.69,6.57"></path>
|
||||
<path class="cls-3" d="M53.41,38.95l.94-.24"></path>
|
||||
<path class="cls-4" d="M91.68,47.71l-.75-11.2L79.15,43.84l-1.69,3.87H75.79c0,3.36,3.76,6.08,8.4,6.08s8.4-2.72,8.4-6.08Z"></path>
|
||||
<path class="cls-5 neckMove" d="M78,46.53a27.19,27.19,0,0,0,6.41.82c3.1,0,7.11-2.19,7.11-2.19l-.42-6.2L79.15,43.84Z"></path>
|
||||
<polygon class="earMove" points="92.59 32.22 92.59 28.5 76.77 27.71 76.77 32.22 92.59 32.22"></polygon>
|
||||
<circle class="cls-6 earMove" cx="78.06" cy="34.04" r="2.47"></circle>
|
||||
<path class="cls-4" d="M81.74,57.06,60.63,49.72h0A6.72,6.72,0,1,0,57.7,62.49H93.25C93.25,56.78,81.74,57.06,81.74,57.06Z"></path>
|
||||
<path class="cls-4" d="M77.46,25H90.92a0,0,0,0,1,0,0V39.38a6.73,6.73,0,0,1-6.73,6.73h0a6.73,6.73,0,0,1-6.73-6.73V25A0,0,0,0,1,77.46,25Z"></path>
|
||||
<rect id="c-2" class="changeColor cls-7" x="74.82" y="26.48" width="19.14" height="2.45" transform="translate(1.29 -3.65) rotate(2.49)" style="fill: rgb(0, 21, 255);"></rect>
|
||||
<path id="c-3" class="changeColor cls-7" d="M84.36,18.69h.5a7.8,7.8,0,0,1,7.8,7.8v0a0,0,0,0,1,0,0H76.56a0,0,0,0,1,0,0v0A7.8,7.8,0,0,1,84.36,18.69Z" transform="translate(1.06 -3.66) rotate(2.49)" style="fill: rgb(0, 21, 255);"></path>
|
||||
<polygon id="c-4" class="changeColor cls-8" points="82.44 23.89 92.18 24.32 92.59 24.34 92.48 26.84 80.96 26.33 82.44 23.89" style="fill: rgb(0, 21, 255);"></polygon>
|
||||
<circle class="cls-9 faceMove" cx="78.72" cy="23.73" r="3.73" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
|
||||
<circle class="cls-2 faceMove" cx="78.72" cy="23.73" r="2.36" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
|
||||
<circle class="cls-4 earMove" cx="90.92" cy="34.04" r="2.47"></circle>
|
||||
<path class="cls-4" d="M112.2,53l-9.87-21.92-3-5.48-11.86-.22,7.42,3.35H91.55l5.82,4.58,2,22.26h0A6.72,6.72,0,1,0,112.2,53Z"></path>
|
||||
<ellipse class="faceMove" cx="80.09" cy="33.12" rx="0.53" ry="0.59"></ellipse>
|
||||
<ellipse class="faceMove" cx="86.34" cy="33.12" rx="0.53" ry="0.59"></ellipse>
|
||||
<polyline class="cls-10 faceMove" points="84.19 31.08 81.74 37.01 84.39 37.01"></polyline>
|
||||
<path class="cls-10 faceMove" d="M83.06,40.36a4,4,0,0,1,2.75-1"></path>
|
||||
<line class="cls-11 faceMove" x1="81.07" y1="30.33" x2="78.47" y2="30.58"></line>
|
||||
<line class="cls-11 faceMove" x1="86.34" y1="30.45" x2="88.15" y2="31.08"></line>
|
||||
<line class="cls-12" x1="106.86" y1="47.82" x2="110.99" y2="46.11"></line>
|
||||
<line class="cls-12" x1="107.43" y1="49.9" x2="111.55" y2="48.19"></line>
|
||||
<line class="cls-12" x1="107.99" y1="51.98" x2="112.11" y2="50.27"></line>
|
||||
<g class="cls-13">
|
||||
<rect class="cls-14" x="85.81" y="2.46" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-15" x="96.58" y="2.46" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-14" x="92.19" y="5.95" width="10.77" height="3.5"></rect>
|
||||
<line class="cls-16" x1="107.36" y1="5.95" x2="109.63" y2="5.95"></line>
|
||||
<line class="cls-16" x1="110.68" y1="5.95" x2="111.57" y2="5.95"></line>
|
||||
</g>
|
||||
<g class="cls-13">
|
||||
<rect class="cls-16" x="125" y="23.12" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-15" x="130.39" y="26.62" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="119.62" y="26.62" width="10.77" height="3.5"></rect>
|
||||
<line class="cls-16" x1="141.16" y1="26.62" x2="145.73" y2="26.62"></line>
|
||||
<line class="cls-16" x1="125" y1="23.12" x2="115.4" y2="23.12"></line>
|
||||
<line class="cls-16" x1="117.95" y1="26.62" x2="115.4" y2="26.62"></line>
|
||||
</g>
|
||||
<g class="cls-13">
|
||||
<rect class="cls-16" x="39.34" y="16.12" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="39.34" y="23.11" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="50.11" y="23.11" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="50.11" y="16.12" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-15" x="44" y="19.61" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="33.23" y="19.61" width="10.77" height="3.5"></rect>
|
||||
<line class="cls-16" x1="60.89" y1="19.61" x2="65.51" y2="19.61"></line>
|
||||
<line class="cls-16" x1="39.34" y1="16.12" x2="35.46" y2="16.12"></line>
|
||||
<line class="cls-16" x1="36.45" y1="26.61" x2="33.23" y2="26.61"></line>
|
||||
<line class="cls-16" x1="63.2" y1="23.11" x2="65.51" y2="23.11"></line>
|
||||
</g>
|
||||
<polyline class="cls-3" points="115.4 58.12 115.4 38.27 120.2 37.01"></polyline>
|
||||
<polyline class="cls-3" points="129.01 53.21 129.01 43.14 131.74 42.13"></polyline>
|
||||
<path class="cls-3" d="M115.4,42.13a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,47"></path>
|
||||
<path class="cls-3" d="M115.4,47.34a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,52.22"></path>
|
||||
<path class="cls-3" d="M115.4,52.56a53.27,53.27,0,0,1,8,2l1,.42"></path>
|
||||
<path class="cls-18 faceMove" d="M78.84,26.09l0-4.71L68.05,18.32a.91.91,0,0,0-.45-.13c-1.17,0-2.11,2.46-2.11,5.5s.95,5.5,2.11,5.5a.9.9,0,0,0,.44-.12Z"></path>
|
||||
<path class="cls-5" d="M57.7,62.49H93.25A3.67,3.67,0,0,0,92.92,61H53.43A6.69,6.69,0,0,0,57.7,62.49Z"></path>
|
||||
<path class="cls-12" d="M88.15,60.27s1.7.95,1.7,2.22"></path>
|
||||
<path class="cls-5" d="M101.81,61a6.68,6.68,0,0,0,8.51,0Z"></path>
|
||||
<polygon class="cls-5" points="90.92 30.25 77.46 29.69 77.46 28.64 90.92 29.22 90.92 30.25"></polygon>
|
||||
<text id="title" transform="matrix(1 0 0 1 44.7249 78)">Oops, Page not found</text>
|
||||
</svg>
|
||||
|
||||
<!-- <h1 id="title">404 Page not found</h1> -->
|
||||
<!-- <button id="newBtn" class="btn" disabled>→ Back to Home</button> -->
|
||||
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,261 @@
|
|||
|
||||
<svg id="mainImage_create" data-name="mainImage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.2 81.5">
|
||||
<style id="svgStyle">
|
||||
@import url('https://fonts.googleapis.com/css?family=Merriweather');
|
||||
.changeColor {
|
||||
fill: #4f86ed;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 50%;
|
||||
font-family: 'Merriweather', serif;
|
||||
}
|
||||
|
||||
.cls-1 {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.cls-7 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-11,
|
||||
.cls-12,
|
||||
.cls-14,
|
||||
.cls-16,
|
||||
.cls-3 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
stroke: #5c7690;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-11,
|
||||
.cls-12,
|
||||
.cls-3 {
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.cls-14,
|
||||
.cls-15,
|
||||
.cls-16,
|
||||
.cls-3 {
|
||||
stroke-width: 0.5px;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #ffe1d9;
|
||||
}
|
||||
|
||||
.cls-5 {
|
||||
fill: #ffcfbf;
|
||||
}
|
||||
|
||||
.cls-6 {
|
||||
fill: #fecbb6;
|
||||
}
|
||||
|
||||
.cls-9 {
|
||||
fill: #fecb02;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-12 {
|
||||
stroke: #d26f51;
|
||||
}
|
||||
|
||||
.cls-10,
|
||||
.cls-11 {
|
||||
stroke-width: 0.38px;
|
||||
}
|
||||
|
||||
.cls-11 {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
.cls-12 {
|
||||
stroke-width: 0.19px;
|
||||
}
|
||||
|
||||
.cls-13 {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.cls-14,
|
||||
.cls-15,
|
||||
.cls-16 {
|
||||
stroke: #b0bec5;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.cls-15 {
|
||||
fill: #edf0f2;
|
||||
}
|
||||
|
||||
.cls-16 {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.cls-17 {
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
font-size: 49.87px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cls-18 {
|
||||
fill: #fffdbb;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------
|
||||
SVG Animate
|
||||
---------------------------*/
|
||||
.earMove {
|
||||
transition: all ease-in-out 2s;
|
||||
transform-origin: 50% 50%;
|
||||
animation: earmove 1.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
.faceMove {
|
||||
transition: all ease-in-out 2s;
|
||||
transform-origin: 50% 50%;
|
||||
animation: move 1.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
.neckMove {
|
||||
transition: all ease-in-out 2s;
|
||||
transform-origin: 50% 50%;
|
||||
animation: neck 1.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
|
||||
@keyframes earmove {
|
||||
0% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(-0.7px) translateY(0px);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(-0.7px) translateY(-0.3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-0.7px) translateY(-0.3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-0.3px) translateY(0.6px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(2px) translateY(0px);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(2px) translateY(-0.3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(2px) translateY(-0.3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neck {
|
||||
0% {
|
||||
transform: translateY(0.7px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0.7px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path id="c-1" class="changeColor cls-1" d="M46.62,52.5c5.78,4.9,21.14,8.4,39.19,8.4s33.41-3.5,39.19-8.4c-5.78-4.9-21.14-8.4-39.19-8.4S52.41,47.6,46.62,52.5Z" style="fill: rgb(255, 5, 18);"></path>
|
||||
<path class="cls-2" d="M99.73,47.71H68.65a7.13,7.13,0,0,0-7.13,7.13V60a152.58,152.58,0,0,0,24.3,1.83,157.87,157.87,0,0,0,21.05-1.35V54.84A7.13,7.13,0,0,0,99.73,47.71Z"></path>
|
||||
<path class="cls-3" d="M123.56,55.81C115,58.94,101.27,61,85.81,61c-26,0-47-5.71-47-12.76,0-3.45,5.05-6.58,13.25-8.88"></path>
|
||||
<path class="cls-3" d="M55.37,38.47a140,140,0,0,1,30.44-3c26,0,47,5.71,47,12.76,0,2.4-2.44,4.65-6.69,6.57"></path>
|
||||
<path class="cls-3" d="M53.41,38.95l.94-.24"></path>
|
||||
<path class="cls-4" d="M91.68,47.71l-.75-11.2L79.15,43.84l-1.69,3.87H75.79c0,3.36,3.76,6.08,8.4,6.08s8.4-2.72,8.4-6.08Z"></path>
|
||||
<path class="cls-5 neckMove" d="M78,46.53a27.19,27.19,0,0,0,6.41.82c3.1,0,7.11-2.19,7.11-2.19l-.42-6.2L79.15,43.84Z"></path>
|
||||
<polygon class="earMove" points="92.59 32.22 92.59 28.5 76.77 27.71 76.77 32.22 92.59 32.22"></polygon>
|
||||
<circle class="cls-6 earMove" cx="78.06" cy="34.04" r="2.47"></circle>
|
||||
<path class="cls-4" d="M81.74,57.06,60.63,49.72h0A6.72,6.72,0,1,0,57.7,62.49H93.25C93.25,56.78,81.74,57.06,81.74,57.06Z"></path>
|
||||
<path class="cls-4" d="M77.46,25H90.92a0,0,0,0,1,0,0V39.38a6.73,6.73,0,0,1-6.73,6.73h0a6.73,6.73,0,0,1-6.73-6.73V25A0,0,0,0,1,77.46,25Z"></path>
|
||||
<rect id="c-2" class="changeColor cls-7" x="74.82" y="26.48" width="19.14" height="2.45" transform="translate(1.29 -3.65) rotate(2.49)" style="fill: rgb(255, 5, 18);"></rect>
|
||||
<path id="c-3" class="changeColor cls-7" d="M84.36,18.69h.5a7.8,7.8,0,0,1,7.8,7.8v0a0,0,0,0,1,0,0H76.56a0,0,0,0,1,0,0v0A7.8,7.8,0,0,1,84.36,18.69Z" transform="translate(1.06 -3.66) rotate(2.49)" style="fill: rgb(255, 5, 18);"></path>
|
||||
<polygon id="c-4" class="changeColor cls-8" points="82.44 23.89 92.18 24.32 92.59 24.34 92.48 26.84 80.96 26.33 82.44 23.89" style="fill: rgb(255, 5, 18);"></polygon>
|
||||
<circle class="cls-9 faceMove" cx="78.72" cy="23.73" r="3.73" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
|
||||
<circle class="cls-2 faceMove" cx="78.72" cy="23.73" r="2.36" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
|
||||
<circle class="cls-4 earMove" cx="90.92" cy="34.04" r="2.47"></circle>
|
||||
<path class="cls-4" d="M112.2,53l-9.87-21.92-3-5.48-11.86-.22,7.42,3.35H91.55l5.82,4.58,2,22.26h0A6.72,6.72,0,1,0,112.2,53Z"></path>
|
||||
<ellipse class="faceMove" cx="80.09" cy="33.12" rx="0.53" ry="0.59"></ellipse>
|
||||
<ellipse class="faceMove" cx="86.34" cy="33.12" rx="0.53" ry="0.59"></ellipse>
|
||||
<polyline class="cls-10 faceMove" points="84.19 31.08 81.74 37.01 84.39 37.01"></polyline>
|
||||
<path class="cls-10 faceMove" d="M83.06,40.36a4,4,0,0,1,2.75-1"></path>
|
||||
<line class="cls-11 faceMove" x1="81.07" y1="30.33" x2="78.47" y2="30.58"></line>
|
||||
<line class="cls-11 faceMove" x1="86.34" y1="30.45" x2="88.15" y2="31.08"></line>
|
||||
<line class="cls-12" x1="106.86" y1="47.82" x2="110.99" y2="46.11"></line>
|
||||
<line class="cls-12" x1="107.43" y1="49.9" x2="111.55" y2="48.19"></line>
|
||||
<line class="cls-12" x1="107.99" y1="51.98" x2="112.11" y2="50.27"></line>
|
||||
<g class="cls-13">
|
||||
<rect class="cls-14" x="85.81" y="2.46" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-15" x="96.58" y="2.46" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-14" x="92.19" y="5.95" width="10.77" height="3.5"></rect>
|
||||
<line class="cls-16" x1="107.36" y1="5.95" x2="109.63" y2="5.95"></line>
|
||||
<line class="cls-16" x1="110.68" y1="5.95" x2="111.57" y2="5.95"></line>
|
||||
</g>
|
||||
<g class="cls-13">
|
||||
<rect class="cls-16" x="125" y="23.12" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-15" x="130.39" y="26.62" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="119.62" y="26.62" width="10.77" height="3.5"></rect>
|
||||
<line class="cls-16" x1="141.16" y1="26.62" x2="145.73" y2="26.62"></line>
|
||||
<line class="cls-16" x1="125" y1="23.12" x2="115.4" y2="23.12"></line>
|
||||
<line class="cls-16" x1="117.95" y1="26.62" x2="115.4" y2="26.62"></line>
|
||||
</g>
|
||||
<g class="cls-13">
|
||||
<rect class="cls-16" x="39.34" y="16.12" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="39.34" y="23.11" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="50.11" y="23.11" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="50.11" y="16.12" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-15" x="44" y="19.61" width="10.77" height="3.5"></rect>
|
||||
<rect class="cls-16" x="33.23" y="19.61" width="10.77" height="3.5"></rect>
|
||||
<line class="cls-16" x1="60.89" y1="19.61" x2="65.51" y2="19.61"></line>
|
||||
<line class="cls-16" x1="39.34" y1="16.12" x2="35.46" y2="16.12"></line>
|
||||
<line class="cls-16" x1="36.45" y1="26.61" x2="33.23" y2="26.61"></line>
|
||||
<line class="cls-16" x1="63.2" y1="23.11" x2="65.51" y2="23.11"></line>
|
||||
</g>
|
||||
<polyline class="cls-3" points="115.4 58.12 115.4 38.27 120.2 37.01"></polyline>
|
||||
<polyline class="cls-3" points="129.01 53.21 129.01 43.14 131.74 42.13"></polyline>
|
||||
<path class="cls-3" d="M115.4,42.13a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,47"></path>
|
||||
<path class="cls-3" d="M115.4,47.34a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,52.22"></path>
|
||||
<path class="cls-3" d="M115.4,52.56a53.27,53.27,0,0,1,8,2l1,.42"></path>
|
||||
<path class="cls-18 faceMove" d="M78.84,26.09l0-4.71L68.05,18.32a.91.91,0,0,0-.45-.13c-1.17,0-2.11,2.46-2.11,5.5s.95,5.5,2.11,5.5a.9.9,0,0,0,.44-.12Z"></path>
|
||||
<path class="cls-5" d="M57.7,62.49H93.25A3.67,3.67,0,0,0,92.92,61H53.43A6.69,6.69,0,0,0,57.7,62.49Z"></path>
|
||||
<path class="cls-12" d="M88.15,60.27s1.7.95,1.7,2.22"></path>
|
||||
<path class="cls-5" d="M101.81,61a6.68,6.68,0,0,0,8.51,0Z"></path>
|
||||
<polygon class="cls-5" points="90.92 30.25 77.46 29.69 77.46 28.64 90.92 29.22 90.92 30.25"></polygon>
|
||||
<text id="title" transform="matrix(1 0 0 1 44.7249 78)">Oops, something went wrong</text>
|
||||
</svg>
|
||||
|
||||
<!-- <h1 id="title">404 Page not found</h1> -->
|
||||
<!-- <button id="newBtn" class="btn" disabled>→ Back to Home</button> -->
|
||||
|
||||
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>e-commerce</title>
|
||||
<link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
|
||||
</head>
|
||||
<body>
|
||||
<nav th:replace="fragments/header :: header">Header</nav>
|
||||
<main>
|
||||
<div class='hero'>
|
||||
<div class='content-width'>
|
||||
<h1>Error 404</h1>
|
||||
<div class="">
|
||||
<p>Ein Fehler ist aufgetreten. Die gewünschte Ressource konnte nicht gefunden werden.</p>
|
||||
<!-- animation from https://github.com/blairlee227/IlluStatus, licensed MIT -->
|
||||
<img th:src="@{/img/error_404_illustatus.svg}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-spacer s"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer th:replace="fragments/footer :: footer"></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>e-commerce</title>
|
||||
<link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
|
||||
</head>
|
||||
<body>
|
||||
<nav th:replace="fragments/header :: header">Header</nav>
|
||||
<main>
|
||||
<div class='hero'>
|
||||
<div class='content-width'>
|
||||
<h1>Error 500</h1>
|
||||
<div class="">
|
||||
<p>Ein Fehler ist aufgetreten. Bitte versuche es später nocheinmal.</p>
|
||||
<!-- animation from https://github.com/blairlee227/IlluStatus, licensed MIT -->
|
||||
<img th:src="@{/img/error_generic_illustatus.svg}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-spacer s"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer th:replace="fragments/footer :: footer"></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>e-commerce</title>
|
||||
</head>
|
||||
<body>
|
||||
<footer class="hero-black" th:fragment="footer">
|
||||
<div class='content-width flex'>
|
||||
<h3>Project eCommerce</h3>
|
||||
<div class="spacer"></div>
|
||||
<div>
|
||||
<h4>Seite</h4>
|
||||
<ul>
|
||||
<li><a>Login</a></li>
|
||||
<li><a>Angebote</a></li>
|
||||
<li><a>Suche</a></li>
|
||||
<li><a>Mitarbeiter Login</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Mehr</h4>
|
||||
<ul>
|
||||
<li><a>Nutzungsbedingungen</a></li>
|
||||
<li><a>Datenschutz</a></li>
|
||||
<li><a>Über</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style></style>
|
||||
<meta charset="UTF-8">
|
||||
<title>e-commerce</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="hero-secondary" th:fragment="header">
|
||||
<div class="content-width flex">
|
||||
<h1>Project eCommerce</h1>
|
||||
<a>Angebote</a>
|
||||
<input class="spacer" type="text" placeholder="Nach Produkten suchen...">
|
||||
<button>Login</button>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class='hero' th:fragment="header">
|
||||
<div class='content-width flex'>
|
||||
<h1>Project eCommerce</h1>
|
||||
<button>Angebote</button>
|
||||
<div class='spacer input-icon secondary'>
|
||||
<input type="text" placeholder="Nach Produkten suchen..."/>
|
||||
<button>Finden</button>
|
||||
</div>
|
||||
<button>Login</button>
|
||||
</div>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,88 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>e-commerce</title>
|
||||
<style></style>
|
||||
<link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
|
||||
</head>
|
||||
<body>
|
||||
<div th:replace="fragments/header :: header">Header</div>
|
||||
<nav th:replace="fragments/header :: header">Header</nav>
|
||||
<main>
|
||||
<div class='hero'>
|
||||
<div class='content-width'>
|
||||
<h1>Angebote</h1>
|
||||
<div class='grid m base shadow'>
|
||||
|
||||
<section>
|
||||
<img th:src="@{/img/product-1.jpg}" />
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<p class='price'> 25.14 €</p>
|
||||
<p>
|
||||
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img th:src="@{/img/product-2.jpg}" />
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<p class='price'> 10.14 €</p>
|
||||
<p>
|
||||
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img th:src="@{/img/product-4.jpg}" />
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<p class='price'> 25.14 €</p>
|
||||
<p>
|
||||
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img th:src="@{/img/product-5.jpg}" />
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<p class='price'> 10.14 €</p>
|
||||
<p>
|
||||
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img th:src="@{/img/product-3.jpg}" />
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<p class='price'> 44.14 €</p>
|
||||
<p>
|
||||
|
||||
Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
|
||||
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="spacer"></section>
|
||||
<section class="spacer"></section>
|
||||
<section class="spacer"></section>
|
||||
<section class="spacer"></section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-spacer s"></div>
|
||||
</div>
|
||||
|
||||
<div class=''>
|
||||
<div class='content-width'>
|
||||
<h1>Personalisierte Empfehlungen</h1>
|
||||
<div class="grid l">
|
||||
<img th:src="@{/img/undraw_successful_purchase_secondary.svg}" />
|
||||
<div>
|
||||
<h2>Werde jetzt Kunde</h2>
|
||||
<p> Jetzt Kunde werden und viele Vorteile sichern,
|
||||
wie z.B. personalisierte Empfehlungen. </p>
|
||||
<button>Registieren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-spacer s"></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer th:replace="fragments/footer :: footer"></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in New Issue