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

code refactoring 

change note to image for zooming
styling changes to divs
selectors removed that were no longer needed
This commit is contained in:
emma 2025-02-01 21:24:51 -05:00
parent 9ae6900ea4
commit be86abc72f
3 changed files with 13 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
cafe-events/valentines-day-25/img/read.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

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

@ -9,11 +9,10 @@
<body> <body>
<header><p class="header-text">For you, Emma</p></header> <header><p class="header-text">For you, Emma</p></header>
<section> <section>
<div class="visitor-note"> <div class="visitor-note">
<p class="read-this">Read!</p> <img class="read-this" src="/img/read.jpg" alt="a piece of note paper that must be clicked on to read" height="300" width="300">
<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>
<div class="container"> <div class="container">

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

@ -181,38 +181,29 @@ section {
z-index: 2; z-index: 2;
} }
.note, .read-this {
cursor: pointer;
}
.visitor-note { .visitor-note {
margin-right: 5rem margin: 0 3rem;
} margin-top: 3rem;
.note {
height: 30vh;
width: auto;
position: relative;
top: 10%;
left: 18%;
z-index: 1;
} }
.read-this { .read-this {
font-size: 3rem; cursor: pointer;
font-family: learning-curve-regular; height: 250px;
position: absolute; width: auto;
left: 5%;
top: 30%;
z-index: 2;
} }
.items { .items {
margin-top: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4rem; gap: 4rem;
} }
.baxter {
width: 300px;
height: auto;
}
.trans-pride-heart { .trans-pride-heart {
width: 200px; width: 200px;
aspect-ratio: 1; aspect-ratio: 1;
@ -225,9 +216,4 @@ section {
position: relative; position: relative;
left: 15%; left: 15%;
transform: rotate(-15deg); transform: rotate(-15deg);
}
.baxter {
width: 300px;
height: auto;
} }