add v-day event to events folder
This commit is contained in:
parent
961679d419
commit
5ea0dd3e59
BIN
events/32bit-cafe/v-day-25/img/background.webp
Normal file
BIN
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
events/32bit-cafe/v-day-25/img/baxter.webp
Normal file
BIN
events/32bit-cafe/v-day-25/img/baxter.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
events/32bit-cafe/v-day-25/img/notebook-paper.webp
Normal file
BIN
events/32bit-cafe/v-day-25/img/notebook-paper.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
events/32bit-cafe/v-day-25/img/pink-paper.webp
Normal file
BIN
events/32bit-cafe/v-day-25/img/pink-paper.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
events/32bit-cafe/v-day-25/img/read.webp
Normal file
BIN
events/32bit-cafe/v-day-25/img/read.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
events/32bit-cafe/v-day-25/img/sweets.webp
Normal file
BIN
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
events/32bit-cafe/v-day-25/index.html
Normal file
81
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
events/32bit-cafe/v-day-25/js/script.js
Normal file
194
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);
|
||||
Binary file not shown.
Binary file not shown.
320
events/32bit-cafe/v-day-25/style/style.css
Normal file
320
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