code refactoring

change note to image for zooming
styling changes to divs
selectors removed that were no longer needed

cafe-events/valentines-day-25/index.html

@@ -12,8 +12,7 @@
 
         <section>
             <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 class="container">

cafe-events/valentines-day-25/style/style.css

@@ -181,38 +181,29 @@ section {
     z-index: 2;
 }
 
-.note, .read-this {
-    cursor: pointer;
-}
-
 .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 {
-    font-size: 3rem;
+    cursor: pointer;
-    font-family: learning-curve-regular;
+    height: 250px;
-    position: absolute;
+    width: auto;
-    left: 5%;
-    top: 30%;
-    z-index: 2;
 }
 
 .items {
+    margin-top: 3rem;
     display: flex;
     flex-direction: column;
     gap: 4rem;
 }
 
+.baxter {
+    width: 300px;
+    height: auto;
+}
+
 .trans-pride-heart {
     width: 200px;
     aspect-ratio: 1;
@@ -226,8 +217,3 @@ section {
     left: 15%;
     transform: rotate(-15deg);
 }
-
-.baxter {
-    width: 300px;
-    height: auto;
-}