diff --git a/css/counter.css b/css/counter.css new file mode 100644 index 0000000..06f3d89 --- /dev/null +++ b/css/counter.css @@ -0,0 +1,6 @@ +.wrapper { + width: 100%; + height: 400px; + display: block; + background-color: aqua; +} \ No newline at end of file diff --git a/css/shelf.css b/css/shelf.css new file mode 100644 index 0000000..de2b524 --- /dev/null +++ b/css/shelf.css @@ -0,0 +1,59 @@ +.wrapper { + width: 300px; + height: 100px; + display: block; +} + +.shelf { + width: 100%; + height: 100%; + display: block; + perspective: 400px; /* determines size of the overall element in the final transform */ + backface-visibility: visible; + transform-style: preserve-3d; + perspective-origin: 50% 40%; +} + +.face { + width: 300px; + height: 100px; + display: block; + position: absolute; +} + +.small-face { + width: 100px; + height: 100px; + display: block; + position: absolute; +} +.top-shelf { + background-color: #DAA06D; + transform: rotateX(90deg) translateZ(50px); +} + +.bottom-shelf { + background-color: #DAA06D; + transform: rotateX(-90deg) translateZ(50px); +} + +.right-shelf { + background-color: #6F4E37; + transform: rotateY(90deg) translateZ(50px); + right: 0; +} + +.left-shelf { + background-color: #6F4E37; + transform: rotateY(-90deg) translateZ(50px); +} + +.front-shelf { + background: rgba(255,255,255,0.1); + transform: translateZ(50px); +} + +.back-shelf { + background: #6E260E; + transform: rotateY(180deg) translateZ(50px); +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..04616a7 --- /dev/null +++ b/css/style.css @@ -0,0 +1,52 @@ +/* toy-shelf { + width: 400px; + height: 150px; + display: inline-block; + background-color: chartreuse; +} */ + +body { + background: url(../images/d7YslGq.gif); + line-height: 1.6; + font-size: 16px; +} + +header { +} + +h1,h2,h3 { + line-height: 1.2; +} + +.container { + background-color: white; + width: 85%; + padding: 20px 50px; + margin: 0 auto; +} + +.content { + display: flex; + flex-flow: row wrap-reverse; +} + +.sidebar { + flex: 3 1 20%; + border: 1px solid black; + padding: 20px 40px; +} + +.storefront { + flex: 1 3 fit-content; + margin: 0 auto; +} + +.shelf-group { + display: inline-block; + padding: 0 20px; +} + +shop-counter { + position: relative; + z-index: 2; +} diff --git a/images/MulONxK.gif b/images/MulONxK.gif new file mode 100644 index 0000000..5a1d87e Binary files /dev/null and b/images/MulONxK.gif differ diff --git a/images/NRJjSF0.gif b/images/NRJjSF0.gif new file mode 100644 index 0000000..bc8e206 Binary files /dev/null and b/images/NRJjSF0.gif differ diff --git a/images/d7YslGq.gif b/images/d7YslGq.gif new file mode 100644 index 0000000..4f0cc43 Binary files /dev/null and b/images/d7YslGq.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1a985d2 --- /dev/null +++ b/index.html @@ -0,0 +1,80 @@ + + + + + + + yeet + + +
+
+

yequari's emporium of excellent toys

+

Odd that we only have Transformers though

+
+
+
+ +
+

Featured

+ +
    +
  • Armada Megatron
    • +
  • Leo Prime
    • +
  • Coronation Starscream
    • +
+ + +
    +
  • Armada Starscream
    • +
  • Leo Nemesis Prime
    • +
  • Optimus Prime
    • +
+ + +
+ +
+

New Arrivals

+ +
    +
  • Armada Megatron
    • +
  • Leo Prime
    • +
  • Coronation Starscream
    • +
+ + +
    +
  • Armada Starscream
    • +
  • Leo Nemesis Prime
    • +
  • Optimus Prime
    • +
+ + +
+ +
+
+

+ This site is a work in progress. + I thought it would be cool to work publicly and show off my experimentation and progress. + Check back on Oct 7th to see the completed version! +

+

+ Welcome to yequari's emporium of excellent toys, + the premier stop for all your toys and collectibles in Marigold Town! + Although we currently collect and showcase primarily Transformers, + we deal with toys and collectibles of all makers, brands, and eras. + MISB, used, vintage, modern, we got it all. +

+

+ We accept trade-ins! Want to add to our collection? Go to the trade-in counter. +

+

+ Don't see what you're looking for at the front desk? We might have it in the back. +

+
+
+
+ + \ No newline at end of file diff --git a/js/elements.js b/js/elements.js new file mode 100644 index 0000000..c2a2fa9 --- /dev/null +++ b/js/elements.js @@ -0,0 +1,57 @@ +class ToyShelf extends HTMLElement { + constructor() { + super(); + + const shadow = this.attachShadow({mode: "open", slotAssignment: "named"}); + + const wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); + const shelf = document.createElement("span") + shelf.setAttribute("class", "shelf") + + const topshelf = shelf.appendChild(document.createElement("div")); + topshelf.setAttribute("class", "top-shelf face"); + const leftshelf = shelf.appendChild(document.createElement("div")); + leftshelf.setAttribute("class", "left-shelf small-face"); + const rightshelf = shelf.appendChild(document.createElement("div")); + rightshelf.setAttribute("class", "right-shelf small-face"); + const back = shelf.appendChild(document.createElement("div")); + back.setAttribute("class", "back-shelf face"); + const bottomshelf = shelf.appendChild(document.createElement("div")); + bottomshelf.setAttribute("class", "bottom-shelf face"); + const front = shelf.appendChild(document.createElement("div")); + front.setAttribute("class", "front-shelf face"); + + let style = document.createElement("link"); + style.setAttribute("rel", "stylesheet"); + style.setAttribute("href", "css/shelf.css") + + wrapper.appendChild(shelf); + shadow.appendChild(wrapper); + shadow.appendChild(style); + + } +} + +class ShopCounter extends HTMLElement { + constructor() { + super(); + const shadow = this.attachShadow({mode: "open", slotAssignment: "named"}); + + let style = document.createElement("link"); + style.setAttribute("rel", "stylesheet"); + style.setAttribute("href", "css/counter.css") + + const wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); + const shelf = document.createElement("span") + shelf.setAttribute("class", "counter") + + shadow.appendChild(wrapper); + shadow.appendChild(style); + + } +} + +customElements.define("toy-shelf", ToyShelf); +customElements.define("shop-counter", ShopCounter); \ No newline at end of file