diff --git a/cafe-events/valentines-day-25/index.html b/cafe-events/valentines-day-25/index.html index b47e349..56f6ea1 100644 --- a/cafe-events/valentines-day-25/index.html +++ b/cafe-events/valentines-day-25/index.html @@ -10,7 +10,20 @@
for you, emma <3
-
+ +
+
+
+
+
+
+
+
+
+
+
+
+ a box of chocolate cupcakes
diff --git a/cafe-events/valentines-day-25/script/script.js b/cafe-events/valentines-day-25/script/script.js index 510fa3a..3da4e44 100644 --- a/cafe-events/valentines-day-25/script/script.js +++ b/cafe-events/valentines-day-25/script/script.js @@ -1,4 +1,3 @@ -const chocolateContainer = document.querySelector(".cupcakes"); const notesForEmma = { noteOne: "", noteTwo: "", @@ -13,13 +12,3 @@ const notesForEmma = { noteEleven: "", noteTwelve: "", }; - -for (let i = 0; i < 3; i++) { - for (let j = 0; j < 4; j++) { - const tile = document.createElement("div"); - tile.classList.add("cupcake"); - tile.style.height = "14vh"; - tile.style.width = "7vw"; - chocolateContainer.appendChild(tile); - } -} \ No newline at end of file diff --git a/cafe-events/valentines-day-25/style/style.css b/cafe-events/valentines-day-25/style/style.css index d0dc437..1105452 100644 --- a/cafe-events/valentines-day-25/style/style.css +++ b/cafe-events/valentines-day-25/style/style.css @@ -54,4 +54,116 @@ footer { width: 100vw; height: 10vh; background: hotpink; +} + +.tile { + cursor: pointer; +} + +.tile-one { + position: absolute; + left: 26.61%; + top: 25.78%; + width: 10.05%; + height: 16.25%; + z-index: 2; +} + +.tile-two { + position: absolute; + left: 38.39%; + top: 25.94%; + width: 11.2%; + height: 16.64%; + z-index: 2; +} + +.tile-three { + position: absolute; + left: 50.52%; + top: 25.78%; + width: 11.88%; + height: 17.34%; + z-index: 2; +} + +.tile-four { + position: absolute; + left: 63.44%; + top: 25.94%; + width: 10.89%; + height: 17.27%; + z-index: 2; +} + +.tile-five { + position: absolute; + left: 25.68%; + top: 43.05%; + width: 10.94%; + height: 17.27%; + z-index: 2; +} + +.tile-six { + position: absolute; + left: 37.81%; + top: 43.59%; + width: 11.41%; + height: 17.03%; + z-index: 2; +} + +.tile-seven { + position: absolute; + left: 49.74%; + top: 43.44%; + width: 12.5%; + height: 17.73%; + z-index: 2; +} + +.tile-eight { + position: absolute; + left: 62.76%; + top: 43.52%; + width: 12.4%; + height: 17.73%; + z-index: 2; +} + +.tile-nine { + position: absolute; + left: 24.74%; + top: 60.94%; + width: 10.57%; + height: 16.48%; + z-index: 2; +} + +.tile-ten { + position: absolute; + left: 37.03%; + top: 61.33%; + width: 11.77%; + height: 16.56%; + z-index: 2; +} + +.tile-eleven { + position: absolute; + left: 49.64%; + top: 61.64%; + width: 12.03%; + height: 17.19%; + z-index: 2; +} + +.tile-twelve { + position: absolute; + left: 62.55%; + top: 61.8%; + width: 13.07%; + height: 17.11%; + z-index: 2; } \ No newline at end of file