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

code refactoring and additions

Browse Source 
changed js object back to double quotes
added clickable items for interactivity
added styling for clickable items
This commit is contained in:
zepp 2025-02-01 19:54:04 -05:00
parent 7bf4b6efc1
commit 0d02025b7d
5 changed files with 93 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
cafe-events/valentines-day-25/img/baxter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

6
cafe-events/valentines-day-25/img/transgender-pride-flag.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480">
<rect fill="#5BCEFA" width="800" height="480" />
<rect fill="#F5A9B8" width="800" height="288" y="96" />
<rect fill="#FFF" width="800" height="96" y="192" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 273 B

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

@ -9,23 +9,33 @@
<body>
<header><p class="header-text">For you, Emma</p></header>
<div class="container">
<div class="tileOne tile"></div>
<div class="tileTwo tile"></div>
<div class="tileThree tile"></div>
<div class="tileFour tile"></div>
<div class="tileFive tile"></div>
<div class="tileSix tile"></div>
<div class="tileSeven tile"></div>
<div class="tileEight tile"></div>
<div class="tileNine tile"></div>
<div class="tileTen tile"></div>
<div class="tileEleven tile"></div>
<div class="tileTwelve tile"></div>
<img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
</div>
<section>
<div class="visitor-note">
<p class="read-this">Read!</p>
<img class="note" src="/img/notebook-paper.png" alt="a piece of paper representing a note that needs to be clicked on to read">
</div>
<div class="container">
<div class="tileOne tile"></div>
<div class="tileTwo tile"></div>
<div class="tileThree tile"></div>
<div class="tileFour tile"></div>
<div class="tileFive tile"></div>
<div class="tileSix tile"></div>
<div class="tileSeven tile"></div>
<div class="tileEight tile"></div>
<div class="tileNine tile"></div>
<div class="tileTen tile"></div>
<div class="tileEleven tile"></div>
<div class="tileTwelve tile"></div>
<img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
</div>
<div class="items">
<img class="baxter" src="/img/baxter.png" alt="a picture of my cat baxter that can be petted">
<img class="trans-pride-heart" src="/img/transgender-pride-flag.svg" alt="the trans pride flag">
</div>
</section>
<script src="./script/script.js" defer></script>
<footer>
<p>happy valentine's day!</p>

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

@ -1,16 +1,16 @@
const notesForEmma = {
tileOne: ```hello```,
tileTwo: ```emma```,
tileThree: ```how```,
tileFour: ```are```,
tileFive: ```you```,
tileSix: ```i```,
tileSeven: ```think```,
tileEight: ```you```,
tileNine: ```are```,
tileTen: ```a```,
tileEleven: ```great```,
tileTwelve: ```person```,
tileOne: "hello",
tileTwo: "emma",
tileThree: "how",
tileFour: "are",
tileFive: "you",
tileSix: "i",
tileSeven: "think",
tileEight: "you",
tileNine: "are",
tileTen: "a",
tileEleven: "great",
tileTwelve: "person",
};
const tiles = document.querySelectorAll(".tile");

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

@ -61,16 +61,27 @@ footer {
background: var(--header-footer-color)
}
.tile {
cursor: pointer;
section {
display: flex;
width: 100vw;
height: auto;
}
.note {
height: 25vh;
width: auto;
}
.header-text {
font-family: alwaysinmyheart;
font-size: 4rem;
font-size: 3.5rem;
color: var(--text-color-light-red);
}
.tile, .note, .baxter, .trans-pride-heart {
cursor: pointer;
}
.tileOne {
position: absolute;
left: 26.61%;
@ -177,4 +188,38 @@ footer {
width: 13.07%;
height: 17.11%;
z-index: 2;
}
.visitor-note {
margin: 1rem 2rem;
position: relative;
z-index: 1;
}
.read-this {
font-size: 3rem;
font-family: learning-curve-regular;
position: absolute;
left: 25%;
top: 12%;
z-index: 2;
}
.trans-pride-heart {
width: 200px;
aspect-ratio: 1;
object-fit: cover;
mask:
radial-gradient(at 70% 31%,#000 29%,#0000 30%),
radial-gradient(at 30% 31%,#000 29%,#0000 30%),
linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
clip-path: polygon(-41% 0,50% 91%, 141% 0);
position: relative;
left: 15%;
transform: rotate(-15deg);
}
.baxter {
width: 300px;
height: auto;
}