Added images to fill in placeholders

index.html

@@ -15,7 +15,11 @@
       href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
       rel="stylesheet"
     >
-    <link rel="stylesheet" href="styles.css?version=seasonal-story-copy">
+    <link rel="stylesheet" href="styles.css?version=image-placement">
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollSmoother.min.js"></script>
   </head>
 
   <body id="top">
@@ -57,7 +61,7 @@
         <p class="section-context-label">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
 
         <h1
-          class="homepage-hero-title image-overlap-heading-dynamic-inversion"
+          class="homepage-hero-title image-overlap-heading-dynamic-inversion animate-header"
           id="homepage-hero-title"
         >
           <span>Composing</span>
@@ -76,13 +80,13 @@
           </a>
         </div>
 
-        <figure class="homepage-hero-image-figure">
+        <figure class="homepage-hero-image-figure" data-speed="0.5">
           <div
             class="photography-placeholder photography-placeholder-tall"
             role="img"
-            aria-label="Image placeholder: hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
+            aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
           >
-            <span>Hotel entrance framed by garlands and lantern light</span>
+            <img src="images/composing.webp" alt="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns" decoding="async">
           </div>
         </figure>
       </section>
@@ -100,13 +104,13 @@
               <div
                 class="photography-placeholder photography-placeholder-portrait"
                 role="img"
-                aria-label="Image placeholder: cedar garland and velvet ribbon following a curved staircase"
+                aria-label="Cedar garland and velvet ribbon following a curved staircase"
               >
-                <span>Cedar and velvet following the curve of a staircase</span>
+                <img src="images/space.webp" alt="Cedar garland and velvet ribbon following a curved staircase" decoding="async">
               </div>
             </figure>
 
-            <h2 class="editorial-statement-title" id="philosophy-title">
+            <h2 class="editorial-statement-title animate-header" id="philosophy-title">
               The season begins
               <span>with the space.</span>
             </h2>
@@ -146,7 +150,7 @@
           </header>
 
           <h2
-            class="oversized-editorial-title approach-image-overlap-title image-overlap-heading-dynamic-inversion"
+            class="oversized-editorial-title approach-image-overlap-title image-overlap-heading-dynamic-inversion animate-header"
             id="approach-title"
           >
             By hand.
@@ -173,9 +177,9 @@
               <div
                 class="photography-placeholder photography-placeholder-landscape"
                 role="img"
-                aria-label="Image placeholder: hands arranging ribbon, cedar, and brass ornaments on a worktable"
+                aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
               >
-                <span>Ribbon, cedar, and brass coming together at the worktable</span>
+                <img src="images/by-hand.webp" alt="Hands arranging ribbon, cedar, and brass ornaments on a worktable" decoding="async">
               </div>
             </figure>
           </div>
@@ -220,7 +224,7 @@
           </header>
 
           <div class="work-heading-grid">
-            <h2 class="oversized-editorial-title" id="work-title">Gather.</h2>
+            <h2 class="oversized-editorial-title animate-header" id="work-title">Gather.</h2>
             <p class="work-introduction-copy">
               Imagine arriving out of the cold to a room lit for the holidays. There is something
               to catch your eye, somewhere to draw closer, and a reason to linger. These are a few
@@ -233,9 +237,9 @@
               <div
                 class="photography-placeholder photography-placeholder-wide"
                 role="img"
-                aria-label="Image placeholder: a tall evergreen tree lit with warm lights in a grand room"
+                aria-label="A tall evergreen tree lit with warm lights in a grand room"
               >
-                <span>A tall evergreen glowing in a welcoming room</span>
+                <img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async">
               </div>
               <figcaption>
                 <span class="work-project-category">On arrival</span>
@@ -250,9 +254,9 @@
               <div
                 class="photography-placeholder photography-placeholder-portrait"
                 role="img"
-                aria-label="Image placeholder: a holiday table set with greenery and candles for a small gathering"
+                aria-label="A holiday table set with greenery and candles for a small gathering"
               >
-                <span>Greenery and candlelight around a holiday table</span>
+                <img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async">
               </div>
               <figcaption>
                 <span class="work-project-category">Around the table</span>
@@ -267,9 +271,9 @@
               <div
                 class="photography-placeholder photography-placeholder-square"
                 role="img"
-                aria-label="Image placeholder: close view of velvet ribbon tied beside an antique brass ornament"
+                aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
               >
-                <span>The soft fold of velvet beside timeworn brass</span>
+                <img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
               </div>
               <figcaption>
                 <span class="work-project-category">A closer look</span>
@@ -288,7 +292,7 @@
           <div class="client-fit-content-grid">
             <div class="client-fit-heading-content">
               <p class="section-context-label section-context-label-brass">Who we design for</p>
-              <h2 class="client-fit-title" id="client-fit-title">Your kind of welcome.</h2>
+              <h2 class="client-fit-title animate-header" id="client-fit-title">Your kind of welcome.</h2>
               <p class="client-fit-positioning-copy">
                 Whether you are welcoming guests for a night or bringing family home for the
                 season, your space holds its own rituals. We shape our installations around that
@@ -303,9 +307,9 @@
               <div
                 class="photography-placeholder photography-placeholder-landscape"
                 role="img"
-                aria-label="Image placeholder: an open doorway framed by cedar garland and warm lights"
+                aria-label="An open doorway framed by cedar garland and warm lights"
               >
-                <span>An open doorway edged with cedar and light</span>
+                <img src="images/welcome.webp" alt="An open doorway framed by cedar garland and warm lights" decoding="async">
               </div>
             </figure>
           </div>
@@ -350,7 +354,7 @@
         <div class="site-width-boundary contact-content-grid">
           <div class="contact-heading-content">
             <p class="section-context-label">Let’s begin</p>
-            <h2 class="contact-title" id="contact-title">Tell us your story.</h2>
+            <h2 class="contact-title animate-header" id="contact-title">Tell us your story.</h2>
             <p>
               Perhaps you have a place in mind, a tradition you want to carry forward, or simply
               a feeling you would love to create. Tell us a little about it. We would be glad to
@@ -442,4 +446,24 @@
       </div>
     </footer>
   </body>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", (event) => {
+      gsap.registerPlugin(ScrollTrigger,ScrollSmoother)
+
+      gsap.utils.toArray(".animate-header").forEach((header) => {
+        gsap.from(header, {
+          scrollTrigger: {
+            trigger: header,
+            start: "top 80%",
+            toggleActions: "play none none none",
+          },
+          y: 50,
+          opacity: 0,
+          duration: 1,
+          ease: "power2.out",
+        });
+      });
+    });
+  </script>
 </html>

styles.css

@@ -325,6 +325,12 @@ ul {
   text-transform: uppercase;
 }
 
+.photography-placeholder img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .photography-placeholder-tall {
   aspect-ratio: 4 / 5;
 }