omgitsalexl/noel-design-atelier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added images to fill in placeholders

Browse Source
This commit is contained in:
omgitsalexl
2026-09-18 10:58:18 -07:00
parent 52cb7a6e61
commit 37538c87ad
9 changed files with 52 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+46 -22
View File
@@ -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>