diff --git a/mockup-css/css/ecom.css b/mockup-css/css/ecom.css new file mode 100644 index 0000000..c79d09c --- /dev/null +++ b/mockup-css/css/ecom.css @@ -0,0 +1,479 @@ +: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) +} + +main { + min-height: 100%; +} + + +h1, h2, h3, h4, h5 { + font-family: "Fira Mono"; + padding-top: 1em; + padding-bottom: 0.618em; + text-transform: uppercase; +} + +p { + padding-top: 1em; +} + +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; +} + +table { + width: 100%; + border-collapse: collapse; +} + +table td, +table th { + padding: var(--u0); + text-align: center; +} + +table th { + background-color: var(--c-primary); + color: var(--c-base); +} + +table tr:nth-child(2n+1) { + background-color: var(--c-base-highlight); +} + +/* + * NAV + */ + +nav { + +} + +nav h1 { + font-size: var(--u0); + margin: 0rem; +} + +nav li { + display: flex; + flex-direction: column; +} + +nav li li { + margin-left: var(--u0); +} + +nav li a { + padding: var(--u0); + transition: all 0.1s ease-out; +} + +nav li a:hover, +nav li a.selected { + padding: var(--u0); + background-color: var(--c-primary); + color: var(--c-base); +} +/* + * FOOTER + */ + +footer { + padding-top: var(--u3); + padding-bottom: var(--u1); +} + +/* + * INPUTS + */ + +form * { + width: 100%; +} + +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, .button { + font-family: "Fira Mono"; + font-weight: bold; + + 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, .button: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; + font-weight: bold; +} + +/* + * 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); +} + +.bar-flex { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +.bar-flex > * { + margin: var(--u0); +} + +.bar-flex > .spacer { + flex: 1; +} + +.sidebar-layout { + display: flex; + align-items: stretch; + justify-content: center; + flex-wrap: wrap; +} + +.sidebar-layout > *:nth-child(2) { + flex: 1; +} + +.grid { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; +} + +.grid.vertical-center { + align-items: center; + height: 100%; +} + +.grid.center { + justify-content: space-around; +} + +.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 > * { + 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; +} diff --git a/mockup-css/ecom-frontpage.html b/mockup-css/ecom-frontpage.html new file mode 100644 index 0000000..005be60 --- /dev/null +++ b/mockup-css/ecom-frontpage.html @@ -0,0 +1,125 @@ + + + + + Frontpage + + + + + +
+ +
+
+

Angebote

+
+ +
+ +

Lorem Ipsum

+

25.14 €

+

+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. +

+
+ +
+ +

Lorem Ipsum

+

10.14 €

+

+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. +

+
+ +
+ +

Lorem Ipsum

+

25.14 €

+

+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. +

+
+ +
+ +

Lorem Ipsum

+

10.14 €

+

+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. +

+
+ +
+ +

Lorem Ipsum

+

44.14 €

+

+ + Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte. + +

+
+ +
+
+
+
+
+
+
+
+ +
+
+

Personalisierte Empfehlungen

+
+ +
+

Werde jetzt Kunde

+

Jetzt Kunde werden und viele Vorteile sichern, + wie z.B. personalisierte Empfehlungen.

+ +
+
+
+
+
+
+ + + + diff --git a/mockup-css/form-view.html b/mockup-css/form-view.html new file mode 100644 index 0000000..e40c930 --- /dev/null +++ b/mockup-css/form-view.html @@ -0,0 +1,158 @@ + + + + + Frontpage + + + + + + +
+ + +
+

Geldbuchungen

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IdDatumBetragGegenkontoBetreff
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
#1002019-10-08100,50 €Lieferant: HansBestellungen: #41
+

+

+ Manuelle Buchung +

+
+
+ + + diff --git a/mockup-css/login.html b/mockup-css/login.html new file mode 100644 index 0000000..0d31692 --- /dev/null +++ b/mockup-css/login.html @@ -0,0 +1,48 @@ + + + + + Frontpage + + + + +
+
+

+ + +

+

+ + +

+ +
+
+ + + + diff --git a/mockup-css/pics/product-1.jpg b/mockup-css/pics/product-1.jpg new file mode 100644 index 0000000..62f6e56 Binary files /dev/null and b/mockup-css/pics/product-1.jpg differ diff --git a/mockup-css/pics/product-2.jpg b/mockup-css/pics/product-2.jpg new file mode 100644 index 0000000..7f9ac2d Binary files /dev/null and b/mockup-css/pics/product-2.jpg differ diff --git a/mockup-css/pics/product-3.jpg b/mockup-css/pics/product-3.jpg new file mode 100644 index 0000000..e72eedc Binary files /dev/null and b/mockup-css/pics/product-3.jpg differ diff --git a/mockup-css/pics/product-4.jpg b/mockup-css/pics/product-4.jpg new file mode 100644 index 0000000..6b4238a Binary files /dev/null and b/mockup-css/pics/product-4.jpg differ diff --git a/mockup-css/pics/product-5.jpg b/mockup-css/pics/product-5.jpg new file mode 100644 index 0000000..9df33c5 Binary files /dev/null and b/mockup-css/pics/product-5.jpg differ diff --git a/mockup-css/pics/product-6.jpg b/mockup-css/pics/product-6.jpg new file mode 100644 index 0000000..e62439b Binary files /dev/null and b/mockup-css/pics/product-6.jpg differ diff --git a/mockup-css/pics/product-7.jpg b/mockup-css/pics/product-7.jpg new file mode 100644 index 0000000..8ed5b56 Binary files /dev/null and b/mockup-css/pics/product-7.jpg differ diff --git a/mockup-css/undraw/undraw_successful_purchase_secondary.svg b/mockup-css/undraw/undraw_successful_purchase_secondary.svg new file mode 100644 index 0000000..96780fa --- /dev/null +++ b/mockup-css/undraw/undraw_successful_purchase_secondary.svg @@ -0,0 +1 @@ +successful purchase