zepp
/
my-cafe-events
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

image map creation process 

reposition container
create javascript for creating clickable divs
over each piece of chocolate
use flex to position divs
This commit is contained in:
emma 2025-01-29 22:37:53 -05:00
parent 57604e0be7
commit df84316ad4
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
cafe-events/valentines-day-25/script/script.js
View File

@ -0,0 +1,14 @@
const chocolateContainer = document.querySelector(".chocolates");
const notesForEmma = {
};
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 4; j++) {
const tile = document.createElement("div");
tile.classList.add("chocolate");
tile.style.height = "14vh";
tile.style.width = "7vw";
chocolateContainer.appendChild(tile);
}
}

11
cafe-events/valentines-day-25/style/style.css
View File

@ -25,13 +25,14 @@ body {
} }
.chocolates { .chocolates {
display: flex;
flex-wrap: wrap;
height: 44vh; height: 44vh;
width: 18vw; width: 32vw;
top: 15vh; top: 15vh;
left: 6vw; left: 12vw;
padding-left: 1.25rem; padding-left: 2rem;
padding-top: 1.25rem; padding-top: 2rem;
padding-right: .5rem;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }