From bd4e3793cfddc77fe6546a972821bf5acd668128 Mon Sep 17 00:00:00 2001 From: Martin Schneider Date: Mon, 18 Dec 2023 10:50:02 +0100 Subject: [PATCH] newRep --- shopping-layout/README.md | 0 shopping-layout/index.html | 268 ++++++++++++++++++++++++++++++++ shopping-layout/style.css | 309 +++++++++++++++++++++++++++++++++++++ 3 files changed, 577 insertions(+) create mode 100644 shopping-layout/README.md create mode 100644 shopping-layout/index.html create mode 100644 shopping-layout/style.css diff --git a/shopping-layout/README.md b/shopping-layout/README.md new file mode 100644 index 0000000..e69de29 diff --git a/shopping-layout/index.html b/shopping-layout/index.html new file mode 100644 index 0000000..d4760e8 --- /dev/null +++ b/shopping-layout/index.html @@ -0,0 +1,268 @@ + + + + + + + + + + + + Shopping-Layout + + +
+ +
+
+
+ Blaue Sportschue + +
+ Photo by: Maksim Larin +
+
+
+
+

Asics

+

+ Suede fabric pointed toe stylish cut front low heel sharp on-trend + toe point raised heel drop sides unique silhouette. Bow detail + metallic eyelets leather lining luxurious finish classic courts + formal slingback square... +

+
+

$65 USD

+ + + + + + +

Color:

+
+ + + + + +
+ + +
+
+
+ +
+
+
+ Weiße Sportschue + +
+ Photo by: Daniel Storek +
+
+
+
+

Adidas

+

+ Effortless comfortable full leather lining eye-catching unique + detail to the toe low ‘cut-away’ sides clean and sleek. Polished + finish elegant court shoe work duty stretchy slingback strap mid + kitten heel this ladylike... +

+
+

$30 USD

+ + + + + +

Color:

+
+ + + + + +
+ + +
+
+
+ +
+
+
+ Grün/Graue Sportschue + +
+ Photo by: felipepelaquim +
+
+
+
+

New Balance

+

+ SSuede fabric pointed toe stylish cut front low heel sharp on-trend + toe point raised heel drop sides unique silhouette. Bow detail + metallic eyelets leather lining luxurious finish classic courts + formal slingback square... +

+
+

$45 USD

+
+ + + + +

Color:

+
+ + + + + +
+
+ +
+
+
+
+ + diff --git a/shopping-layout/style.css b/shopping-layout/style.css new file mode 100644 index 0000000..2dccfba --- /dev/null +++ b/shopping-layout/style.css @@ -0,0 +1,309 @@ +.body { + background-color: #f5f5f5; + font-family: "Quicksand", sans-serif; + margin: 0; + border: 0; + padding: 0; +} +/*****************Article******************/ +.article-row { + display: flex; + flex-direction: column; + align-items: center; + margin: 1%; +} +@media screen and (min-width: 786px) { + .article-row { + flex-direction: row; + justify-content: space-evenly; + } +} +.article { + border-radius: 20px; + box-shadow: 0px 5px 10px 5px #e7e7e7; + background-color: #ffffff; + width: 25rem; + margin-bottom: 2rem; + margin-right: 15px; +} +/*****************Bild******************/ +.figure { + margin: 0px; +} +.photo { + position: relative; +} +.article-front-img { + border-top-left-radius: 20px; + border-top-right-radius: 20px; + width: 25rem; + mask-image: gradient( + linear, + left top, + left bottom, + color-stop(0.5, rgba(0, 0, 0, 1)), + color-stop(1, rgba(0, 0, 0, 0)) + ); + -webkit-mask-image: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0.5, rgba(0, 0, 0, 1)), + color-stop(1, rgba(0, 0, 0, 0)) + ); +} +.p-photo-badge { + box-sizing: border-box; + font-size: 0.8rem; + font-weight: 900; + width: 6.5rem; + position: absolute; + top: 15px; + right: 15px; + background-color: #e7e7e7c5; + padding: 0.3rem 0.5rem; + border-radius: 0.3rem; + text-align: center; +} +.badge-vis-1 { + visibility: visible; +} +.badge-vis-2 { + visibility: hidden; +} +.badge-vis-3 { + visibility: visible; +} +.p-photo-credit { + position: absolute; + top: 230px; + left: 10px; + font-size: 0.6rem; +} +/*****************Inhalt******************/ +.article-inhalt { + margin: 0px 15px 15px 15px; +} +.article-inhalt-header { + font-weight: 900; +} +.article-beschreibung { + font-weight: 600; + color: rgb(153, 150, 150); +} +/*****************FormBOX******************/ +.form-box { + background-color: #f5f5f5; + border-radius: 20px; + padding: 10px; +} +.p-price { + text-align: center; + font-weight: 900; + background-color: white; + margin: 5px 5px 0px 5px; + padding: 10px; + border-radius: 5px; +} +.grid-form-box { + margin-top: 1rem; + display: grid; + grid-template-columns: 3rem 1fr 5rem 1fr; + align-items: center; +} +.size-quant-color-label { + font-weight: 600; + color: rgb(153, 150, 150); +} +.select-style { + width: 4rem; + height: 1.5rem; + border: none; + border-radius: 7px; + font-weight: 600; + font-family: "Quicksand"; +} +/*****************CHECKBOX******************/ +/* The container */ + +/* DEFAULT.container { + display: block; + position: relative; + padding-left: 1.5rem; + padding: 0.6rem; + margin-bottom: 12px; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} */ +.container { + display: block; + position: relative; + padding-inline: 1.25rem; + top: -0.7rem; + left: 1rem; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* Hide the browser's default radio button */ +.container input { + position: absolute; + opacity: 0; + cursor: pointer; +} + +/* Create a custom radio button */ +.checkmark { + position: absolute; + top: 0; + left: 0; + height: 25px; + width: 25px; + border-radius: 50%; + transition: 0.2s; +} + +/* On mouse-over, gets bigger */ +.container:hover input ~ .checkmark { + transform: scale(1.2); +} + +/* When the radio button is checked, add a blue background */ +/* .container input:checked ~ .checkmark { + background: #2196f3; +} */ + +/* Create the indicator (the dot/circle - hidden when not checked) */ +.checkmark:after { + content: ""; + position: absolute; + display: none; +} + +/* Show the indicator (dot/circle) when checked */ +.container input:checked ~ .checkmark:after { + display: block; +} + +/* Style the indicator (dot/circle) */ +.container .checkmark:after { + top: 7px; + left: 7px; + width: 9.5px; + height: 9.5px; + border-radius: 50%; + background: white; + border: 1px solid gray; +} + +/*****************ColorpickerCircles******************/ +.sect-colorpicker { + width: 80%; + display: flex; + justify-content: space-around; +} + +.checkmark.colorcircle11 { + background-image: linear-gradient( + 90deg, + rgb(88, 126, 253) 50%, + rgb(88, 126, 253) 50% + ); +} +.checkmark.colorcircle12 { + background-image: linear-gradient( + 90deg, + rgb(250, 99, 53) 50%, + rgb(250, 99, 53) 50% + ); +} +.checkmark.colorcircle13 { + background-image: linear-gradient(90deg, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 50%); +} + +.checkmark.colorcircle21 { + background-image: linear-gradient( + 90deg, + rgb(90, 110, 73) 50%, + rgb(0, 0, 0) 50% + ); +} +.checkmark.colorcircle22 { + background-image: linear-gradient( + 90deg, + rgba(102, 169, 233, 0.658) 50%, + rgb(0, 0, 0) 50% + ); +} +.checkmark.colorcircle23 { + background-image: linear-gradient( + 90deg, + rgb(236, 144, 245) 50%, + rgb(0, 0, 0) 50% + ); +} + +.checkmark.colorcircle31 { + background-image: linear-gradient( + 90deg, + rgb(241, 101, 101) 50%, + rgb(255, 255, 255) 50% + ); +} +.checkmark.colorcircle32 { + background-image: linear-gradient( + 90deg, + rgb(0, 0, 0) 50%, + rgb(255, 255, 255) 50% + ); +} +.checkmark.colorcircle33 { + background-image: linear-gradient( + 90deg, + rgba(0, 0, 255, 1) 50%, + rgba(0, 0, 255, 1) 50% + ); + visibility: hidden; +} + +/**********************************************/ +.button-addtochart { + display: inline-block; + border-radius: 5px; + background-color: rgb(82, 82, 206); + border: none; + color: white; + width: 97%; + height: 2.5rem; + margin: 0px 5px 5px 5px; + font-size: 1rem; + transition: 0.5s; + position: relative; + cursor: pointer; +} +.button-addtochart::after { + content: " \00bb"; + font-size: 1.3rem; + opacity: 0; + transition: 0.5s; + position: absolute; + top: 0.4rem; + left: 5rem; +} +.button-addtochart:hover::after { + padding-left: 25px; + opacity: 1; +} +/***********************SupportClasses***********************/ +.inactive { + pointer-events: none; + cursor: default; +}