add v-day 2025 event to public
adding to public since i don't want it to be optimized or changed by the astro build process
This commit is contained in:
parent
53a355667f
commit
444bc36fce
BIN
public/events/32bit-cafe/v-day-25/img/background.webp
Normal file
BIN
public/events/32bit-cafe/v-day-25/img/background.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
public/events/32bit-cafe/v-day-25/img/baxter.webp
Normal file
BIN
public/events/32bit-cafe/v-day-25/img/baxter.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/events/32bit-cafe/v-day-25/img/notebook-paper.webp
Normal file
BIN
public/events/32bit-cafe/v-day-25/img/notebook-paper.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
public/events/32bit-cafe/v-day-25/img/pink-paper.webp
Normal file
BIN
public/events/32bit-cafe/v-day-25/img/pink-paper.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
public/events/32bit-cafe/v-day-25/img/read.webp
Normal file
BIN
public/events/32bit-cafe/v-day-25/img/read.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/events/32bit-cafe/v-day-25/img/sweets.webp
Normal file
BIN
public/events/32bit-cafe/v-day-25/img/sweets.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
@ -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>
|
||||
|
After Width: | Height: | Size: 273 B |
81
public/events/32bit-cafe/v-day-25/index.html
Normal file
81
public/events/32bit-cafe/v-day-25/index.html
Normal file
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<title>For you, Emma</title>
|
||||
<link rel="stylesheet" href="./style/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<p class="header-text">For you, Emma</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<div class="visitor-note">
|
||||
<img class="read-this" src="./img/read.webp"
|
||||
alt="a piece of note paper that must be clicked on to read"
|
||||
height="300" width="300"
|
||||
>
|
||||
</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.webp" alt="a box of chocolate cupcakes"
|
||||
height="1000" width="1000"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="love-note"></div>
|
||||
|
||||
<div class="items">
|
||||
<img class="baxter-thought"
|
||||
width="100" height="100"
|
||||
>
|
||||
|
||||
<div class="headpats"></div>
|
||||
<img class="baxter" src="./img/baxter.webp"
|
||||
height="300" width="300"
|
||||
>
|
||||
|
||||
<img class="trans-pride-heart"
|
||||
src="./img/transgender-pride-flag.svg"
|
||||
alt="the trans pride flag"
|
||||
height="250" width="250"
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://kit.fontawesome.com/821c138f8d.js"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="./js/script.js" defer></script>
|
||||
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<p class="cafe">part of the 32-Bit Cafe
|
||||
<a href="https://32bit.cafe/vday25/" target="_blank">
|
||||
valentine's day '25</a> event
|
||||
</p>
|
||||
<p class="message">Happy Valentine's day!
|
||||
<i class="fa-solid fa-heart"></i>
|
||||
</p>
|
||||
<a href="#" class="credits">credits</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
194
public/events/32bit-cafe/v-day-25/js/script.js
Normal file
194
public/events/32bit-cafe/v-day-25/js/script.js
Normal file
@ -0,0 +1,194 @@
|
||||
const notesForEmma = {
|
||||
tileOne: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">Love the woman you are. All of her, genuinely.
|
||||
Don't be afraid of yourself. Don't be afraid to seek help.
|
||||
Don't be afraid to share yourself with others</p>`,
|
||||
tileTwo: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">How happy you are to be surrounded by people who understand you.
|
||||
Who support you. Who love seeing you at your best</p>`,
|
||||
tileThree: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">You are getting better.
|
||||
The best part is you can tell you are getting better.
|
||||
Keep working hard. This story has a happy ending. I promise</p>`,
|
||||
tileFour: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">Embrace the part of you that is quite simply a goofball.
|
||||
You don't have to do it just to fit in any more.
|
||||
You can be silly because quite simply you are sometimes,
|
||||
and that's a lovely thing about you</p>`,
|
||||
tileFive: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">You've been taking care of yourself and you are noticing.
|
||||
How pretty did you think you looked in the mirror with those lashes?
|
||||
The answer is very. With time all the work you are putting into yourself
|
||||
will show. You're doing a good job, keep it up</p>`,
|
||||
tileSix: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">When depression tried to isolate you even further,
|
||||
you stood up for yourself. You took action. You made friends at one
|
||||
of your loneliest points. How brave you are to take that risk.
|
||||
How happy you are to know friendship again</p>`,
|
||||
tileSeven: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">There's a song i want you to listen to.
|
||||
You haven't listened to it in a long time.
|
||||
I want you to remember the times you used to dream of dancing
|
||||
and twirling in your apartment with the stereo on.
|
||||
The only two important things in that moment was the music
|
||||
and what you felt in your heart</p>
|
||||
|
||||
<iframe width="500" height="280"
|
||||
src="https://www.youtube-nocookie.com/embed/hlco1UrtJSc?si=P3YNM8EM27kAn2vA"
|
||||
title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
|
||||
</iframe>`,
|
||||
tileEight: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">When you're ready, you'll know love again.
|
||||
True love this time. What you are working on now is true love of
|
||||
yourself. Romance can wait for you this time</p>`,
|
||||
tileNine: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">Current times are all but certain.
|
||||
It is important you don't let your anxiety get the best of you.
|
||||
Do not doubt yourself, you are capable of so much.
|
||||
You have been through so much and made it out okay. You can do this</p>`,
|
||||
tileTen: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">You need to stop drinking coffee.
|
||||
I know you love it, but you have medication that interacts poorly with
|
||||
it. Right now you can't handle the potential anxiety that caffeine
|
||||
introduces. You can't afford to be drinking a pot of coffee at 11 PM.
|
||||
Please do this for yourself, it will help</p>`,
|
||||
tileEleven: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">Even though sometimes it feels like they aren't helping.
|
||||
The things you have started doing to take care of yourself are
|
||||
objectively good things. They are important for your physical
|
||||
and mental health. This will take time, but i am so proud of
|
||||
you for continuing to do these very important things even when
|
||||
they don't bring you happiness. Because you know they are
|
||||
important to do regardless</p>`,
|
||||
tileTwelve: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">Don't run away any more Emma. Don't let depression have that over you.
|
||||
You have people that care about you. Every day you work so hard on
|
||||
caring for yourself and doing the things you need to, even if you
|
||||
still feel like shit at the end of the day. You're in the thick of
|
||||
it now, you've got depression on the run and it wants to make
|
||||
one more push to try and take you in the hole with it.
|
||||
Don't let it. Don't run away</p>`,
|
||||
};
|
||||
|
||||
const readThisMessage = `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<p class="note">You were out late last night, again. A craving for chocolate
|
||||
had sent you on a quest late at night. You needed something special. This was
|
||||
no time for a Hershey's bar. You took the bus into the city, and found a specialty
|
||||
shop. Quite odd, when did this show up? You entered and a woman behind the counter
|
||||
said "You need these, i can tell."</p>
|
||||
|
||||
<p class="note">"Honey, quite simply, you look like you've seen some shit" she said in
|
||||
a playful, yet caring tone. "This box here, each item comes with a note, the notes all
|
||||
have something you've desperately needed to hear. Take them, no charge." Free candy?
|
||||
Who could resist? Certainly not me.</p>
|
||||
|
||||
<p class="note">Any ways you wrote this down in your journal so you'd believe yourself.
|
||||
Maybe don't stay up so late anymore, hm?</p>
|
||||
|
||||
<p>(a note to the visitor - other items on the page are clickable! Baxter however may
|
||||
have a bit of a preference on where he wants pets).</p>
|
||||
|
||||
`;
|
||||
|
||||
const creditNote = `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
|
||||
<h1>credits for resources used to make this event entry</h1>
|
||||
<ul>
|
||||
<li><a href="https://www.pexels.com/photo/sweets-on-brown-box-6441133/" target="_blank">sweets in brown box</a> - Gustavo Peres</li>
|
||||
<li><a href="https://pixabay.com/photos/paper-stationery-old-grunge-7834713/" target="_blank">paper stationary old</a> - flutie8211</li>
|
||||
<li><a href="https://pixabay.com/illustrations/paper-lines-background-template-878964/" target="_blank">paper lines background</a> - geralt</li>
|
||||
<li><a href="https://zaneray.com/responsive-image-map/" target="_blank">responsive image map maker</a> - The ZoneRay Group</li>
|
||||
<li><a href="https://commons.wikimedia.org/wiki/File:Transgender_Pride_flag.svg" target="_blank">transgender pride flag</a> - wikimedia commons</li>
|
||||
<li><a href="https://css-tip.com/image-heart-shape/" target="_blank">turn an image into a heart</a> - CSS Tip</li>
|
||||
<li><a href="https://www.remove.bg/" target="_blank">Remove Background from Image</a> - remove.bg</li>
|
||||
<li><a href="https://www.colourlovers.com/pattern/1748168/Love_Me" target="_blank">Love me - Pattern</a> - Zinebski</li>
|
||||
<li><a href="https://www.colourlovers.com/palette/2285499/Nestled" target="_blank">Nestled - palette</a> - museshand</li>
|
||||
<li><a href="https://www.colourlovers.com/palette/867235/LoversInJapan" target=_blank">Lovers in Japan - palette</a> - lovelyrita</li>
|
||||
<li><a href="https://bvfonts.com/fonts/details.php?id=76" target="_blank">Learning Curve Pro - font</a></li>
|
||||
<li><a href="https://www.fontspace.com/always-in-my-heart-font-f16367" target="_blank">Always In My Heart - font</a> - ByTheButterfly</li>
|
||||
<li><a href="https://fontawesome.com/" target="_blank">fontawesome - heart icon</a></li>
|
||||
<li><a href="https://tirifto.xwx.moe/en/emoji/blobcats.html" target="_blank">blobcats</a> - Tirifto</li>
|
||||
<li><a href="https://pixabay.com/illustrations/thought-bubble-thoughts-think-7791595/" target="_blank">Thought bubble</a> - einsichtsweise</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
const baxterThoughtImgSrc = [
|
||||
"./img/baxter-thoughts/baxter-thought-one.webp",
|
||||
"./img/baxter-thoughts/baxter-thought-two.webp",
|
||||
"./img/baxter-thoughts/baxter-thought-three.webp",
|
||||
"./img/baxter-thoughts/baxter-thought-four.webp",
|
||||
"./img/baxter-thoughts/baxter-thought-five.webp",
|
||||
"./img/baxter-thoughts/baxter-thought-six.webp",
|
||||
"./img/baxter-thoughts/baxter-thought-seven.webp"
|
||||
];
|
||||
|
||||
const displayReadThisNote = () => {
|
||||
const readNote = document.querySelector(".love-note");
|
||||
readNote.style.display = "block";
|
||||
readNote.innerHTML = readThisMessage;
|
||||
};
|
||||
|
||||
const displayNote = (noteName) => {
|
||||
const loveNote = document.querySelector(".love-note");
|
||||
loveNote.style.display = "block";
|
||||
loveNote.innerHTML = notesForEmma[noteName.className.split(' ')[0]];
|
||||
};
|
||||
|
||||
const displayCredits = () => {
|
||||
const credits = document.querySelector(".love-note");
|
||||
credits.style.display = "block";
|
||||
credits.innerHTML = creditNote;
|
||||
};
|
||||
|
||||
const extraLove = () => {
|
||||
const header = document.querySelector(".header-text");
|
||||
header.innerHTML += '. Always <i class="fa-solid fa-heart"></i>';
|
||||
|
||||
const transHeart = document.querySelector(".trans-pride-heart");
|
||||
transHeart.style.cursor = "default";
|
||||
transHeart.removeEventListener("click", extraLove);
|
||||
}
|
||||
|
||||
const baxterHeadPat = () => {
|
||||
const imgSrcArrayNo = Math.floor(Math.random() * 7);
|
||||
const thoughtBubble = document.querySelector(".baxter-thought");
|
||||
|
||||
thoughtBubble.src = baxterThoughtImgSrc[imgSrcArrayNo];
|
||||
};
|
||||
|
||||
const closeLoveLetter = () => {
|
||||
const loveNote = document.querySelector(".love-note");
|
||||
loveNote.style.display = "none";
|
||||
};
|
||||
|
||||
const main = () => {
|
||||
displayReadThisNote();
|
||||
|
||||
const tiles = document.querySelectorAll(".tile");
|
||||
|
||||
tiles.forEach((tile) => {
|
||||
tile.style.cursor = "pointer";
|
||||
tile.addEventListener("click", () => {
|
||||
displayNote(tile);
|
||||
});
|
||||
});
|
||||
|
||||
const headPats = document.querySelector(".headpats");
|
||||
headPats.style.cursor = "pointer";
|
||||
headPats.addEventListener("click", baxterHeadPat);
|
||||
|
||||
const transHeart = document.querySelector(".trans-pride-heart");
|
||||
transHeart.style.cursor = "pointer";
|
||||
transHeart.addEventListener("click", extraLove);
|
||||
|
||||
const readThis = document.querySelector(".read-this");
|
||||
readThis.style.cursor = "default";
|
||||
readThis.removeEventListener("click", main);
|
||||
};
|
||||
|
||||
const credits = document.querySelector(".credits");
|
||||
credits.addEventListener("click", displayCredits);
|
||||
|
||||
const readThis = document.querySelector(".read-this");
|
||||
readThis.addEventListener("click", main);
|
||||
27
public/events/32bit-cafe/v-day-25/notes.md
Normal file
27
public/events/32bit-cafe/v-day-25/notes.md
Normal file
@ -0,0 +1,27 @@
|
||||
# notes for cupcakes
|
||||
|
||||
love the woman you are. all of her, genuinely. don't be afraid of yourself. don't be afraid to seek help. don't be afraid to share yourself with others
|
||||
|
||||
how happy you are to be surrounded by people who understand you. who support you. who love seeing you at your best
|
||||
|
||||
you are getting better. the best part is you can tell you are getting better. keep working hard. this story has a happy ending. i promise
|
||||
|
||||
embrace the part of you that is quite simply a goofball. you don't have to do it just to fit in any more. you can be silly because quite simply you are sometimes, and that's a lovely thing about you
|
||||
|
||||
you've been taking care of yourself and you are noticing. how pretty did you think you looked in the mirror with those lashes? the answer is very. with time all the work you are putting into yourself will show. you're doing a good job, keep it up
|
||||
|
||||
when depression tried to isolate you even further, you stood up for yourself. you took action. you made friends at one of your loneliest points. how brave you are to take that risk. how happy you are to know friendship again
|
||||
|
||||
there's a song i want you to listen to. you haven't listened to it in a long time. i want you to remember the times you used to dream of dancing and twirling in your apartment with the stereo on. the only two important things in that moment was the music and what you felt in your heart
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/hlco1UrtJSc?si=P3YNM8EM27kAn2vA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
when you're ready, you'll know love again. true love this time. what you are working on now is true love of yourself. romance can wait for you this time
|
||||
|
||||
current times are all but certain. it is important you don't let your anxiety get the best of you. do not doubt yourself, you are capable of so much. you have been through so much and made it out okay. you can do this
|
||||
|
||||
you need to stop drinking coffee. i know you love it, but you have medication that interacts poorly with it. right now you can't handle the potential anxiety that caffeine introduces. you can't afford to be drinking a pot of coffee at 11 PM. please do this for yourself, it will help
|
||||
|
||||
even though sometimes it feels like they aren't helping. the things you have started doing to take care of yourself are objectively good things. they are important for your physical and mental health. this will take time, but i am so proud of you for continuing to do these very important things even when they don't bring you happiness. because you know they are important to do regardless
|
||||
|
||||
don't run away any more emma. don't let depression have that over you. you have people that care about you. every day you work so hard on caring for yourself and doing the things you need to, even if you still feel like shit at the end of the day. you're in the thick of it now, you've got depression on the run and it wants to make one more push to try and take you in the hole with it. don't let it. don't run away
|
||||
Binary file not shown.
Binary file not shown.
320
public/events/32bit-cafe/v-day-25/style/style.css
Normal file
320
public/events/32bit-cafe/v-day-25/style/style.css
Normal file
@ -0,0 +1,320 @@
|
||||
:root {
|
||||
--header-footer-color: #BFD9C6CC;
|
||||
--text-color-light-red: #E94E77;
|
||||
--link-color: #E94E77;
|
||||
--link-hover-color: #664625;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: alwaysinmyheart;
|
||||
src: url("../site/resources/fonts/alwaysinmyheart.woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: learning-curve-regular;
|
||||
src: url("../site/resources/fonts/learning-curve-regular.woff2");
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
background-image: url("../img/background.webp");
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 80vh;
|
||||
width: auto;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100vw;
|
||||
height: 8vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--header-footer-color);
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100vw;
|
||||
height: 8vh;
|
||||
background: var(--header-footer-color);
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cafe {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-left: -15vw;
|
||||
font-size: 3rem;
|
||||
font-family: alwaysinmyheart;
|
||||
color: var(--text-color-light-red);
|
||||
}
|
||||
|
||||
.credits {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
font-family: alwaysinmyheart;
|
||||
font-size: 3.25rem;
|
||||
color: var(--text-color-light-red);
|
||||
}
|
||||
|
||||
.fa-solid.fa-heart {
|
||||
color: var(--text-color-light-red);
|
||||
}
|
||||
|
||||
.tileOne {
|
||||
position: absolute;
|
||||
left: 26.61%;
|
||||
top: 25.78%;
|
||||
width: 10.05%;
|
||||
height: 16.25%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileTwo {
|
||||
position: absolute;
|
||||
left: 38.39%;
|
||||
top: 25.94%;
|
||||
width: 11.2%;
|
||||
height: 16.64%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileThree {
|
||||
position: absolute;
|
||||
left: 50.52%;
|
||||
top: 25.78%;
|
||||
width: 11.88%;
|
||||
height: 17.34%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileFour {
|
||||
position: absolute;
|
||||
left: 63.44%;
|
||||
top: 25.94%;
|
||||
width: 10.89%;
|
||||
height: 17.27%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileFive {
|
||||
position: absolute;
|
||||
left: 25.68%;
|
||||
top: 43.05%;
|
||||
width: 10.94%;
|
||||
height: 17.27%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileSix {
|
||||
position: absolute;
|
||||
left: 37.81%;
|
||||
top: 43.59%;
|
||||
width: 11.41%;
|
||||
height: 17.03%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileSeven {
|
||||
position: absolute;
|
||||
left: 49.74%;
|
||||
top: 43.44%;
|
||||
width: 12.5%;
|
||||
height: 17.73%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileEight {
|
||||
position: absolute;
|
||||
left: 62.76%;
|
||||
top: 43.52%;
|
||||
width: 12.4%;
|
||||
height: 17.73%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileNine {
|
||||
position: absolute;
|
||||
left: 24.74%;
|
||||
top: 60.94%;
|
||||
width: 10.57%;
|
||||
height: 16.48%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileTen {
|
||||
position: absolute;
|
||||
left: 37.03%;
|
||||
top: 61.33%;
|
||||
width: 11.77%;
|
||||
height: 16.56%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileEleven {
|
||||
position: absolute;
|
||||
left: 49.64%;
|
||||
top: 61.64%;
|
||||
width: 12.03%;
|
||||
height: 17.19%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tileTwelve {
|
||||
position: absolute;
|
||||
left: 62.55%;
|
||||
top: 61.8%;
|
||||
width: 13.07%;
|
||||
height: 17.11%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.visitor-note {
|
||||
margin: 0 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.read-this {
|
||||
cursor: pointer;
|
||||
height: 250px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.love-note {
|
||||
height: 80vh;
|
||||
width: 40vw;
|
||||
background-image: url(../img/pink-paper.webp);
|
||||
padding: 3rem;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-family: learning-curve-regular;
|
||||
}
|
||||
|
||||
.close-note {
|
||||
height: 2vh;
|
||||
width: 2vw;
|
||||
background-color: #00000000;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close-note::after {
|
||||
display: inline-block;
|
||||
content: "\00d7";
|
||||
}
|
||||
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.baxter {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.headpats {
|
||||
position: absolute;
|
||||
left: 86.12%;
|
||||
top: 23.2%;
|
||||
width: 3%;
|
||||
height: 3.03%;
|
||||
transform: rotate(17deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.baxter-thought {
|
||||
position: relative;
|
||||
top: -2%;
|
||||
left: 85%;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
width: 150px;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.trans-pride-heart {
|
||||
width: 200px;
|
||||
margin-left: 3rem;
|
||||
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;
|
||||
top: 40%;
|
||||
left: 15%;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user