diff --git a/animal/index.html b/animal/index.html index 0457c7e..f60e1f1 100644 --- a/animal/index.html +++ b/animal/index.html @@ -7,10 +7,17 @@ Animal Crossing Monopoly + -
- -
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/animal/script.js b/animal/script.js index 832369f..7ee949b 100644 --- a/animal/script.js +++ b/animal/script.js @@ -8,4 +8,24 @@ fish = [{ color: "light blue", value: "2", img: "" -}] \ No newline at end of file + }]; + +// Get the element +let elem = document.querySelector('.card'); + +// Update the ID and add a class +// clone.classList.add('text-large1'); + +// Inject it into the DOM +for (let i = 0; i < 100; i++){ + // elem.after(clone); + let clone = elem.cloneNode(true); + elem.after(clone); + // elem.parentNode.appendChild(clone) +} + +$('.card').on('click', function (e) { + e.preventDefault(); + + $(this).toggleClass('flipped'); +}); \ No newline at end of file diff --git a/animal/style.css b/animal/style.css index e69de29..2fd7191 100644 --- a/animal/style.css +++ b/animal/style.css @@ -0,0 +1,49 @@ +#container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; + width: 100vw; + height: 100vh; + flex-wrap: wrap; + /* position: relative; */ + perspective: 20000px; + margin:1rem; + /* margin: 20px auto; */ + /* border-radius: 100px; */ +} + +.card { + width: 100px; + height: 100px; + display: flex; + /* position: absolute; */ + transform-style: preserve-3d; + transition: transform .5s; + border-radius: 100px; +} + +.card figure { + margin: 0; + padding: .5rem; + display: block; + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border-radius: 100px; + /* border-radius: 100px; */ +} + +.card .front { + background: lightseagreen +} + +.card .back { + background: lightsalmon; + transform: rotateY(180deg); +} + +.card.flipped { + transform: rotateY(180deg); +} \ No newline at end of file