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

better image mapping used 

script way of making map removed
image map generator used to generate styling
for image map
This commit is contained in:
emma 2025-01-30 09:05:20 -05:00
parent 1e764e68a9
commit a7ecd488cc
3 changed files with 126 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
cafe-events/valentines-day-25/index.html
View File

@ -10,7 +10,20 @@
<body>
<header>for you, emma &lt;3</header>
<div class="container">
<div class="cupcakes"></div>
<div class="tile-one tile"></div>
<div class="tile-two tile"></div>
<div class="tile-three tile"></div>
<div class="tile-four tile"></div>
<div class="tile-five tile"></div>
<div class="tile-six tile"></div>
<div class="tile-seven tile"></div>
<div class="tile-eight tile"></div>
<div class="tile-nine tile"></div>
<div class="tile-ten tile"></div>
<div class="tile-eleven tile"></div>
<div class="tile-twelve tile"></div>
<img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
</div>
<script src="./script/script.js" defer></script>

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

@ -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);
}
}

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

@ -55,3 +55,115 @@ footer {
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;
}