Compare commits
24
Commits
15b6bd3b32
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 omgitsalexl
|
ee92100171 | ||
|
omgitsalexl
|
bb058704bf | ||
|
omgitsalexl
|
376d7ba54b | ||
|
omgitsalexl
|
db2dd91e73 | ||
|
omgitsalexl
|
f2430f36fe | ||
|
omgitsalexl
|
b27704a636 | ||
|
omgitsalexl
|
4776512afc | ||
|
omgitsalexl
|
5681a38087 | ||
|
omgitsalexl
|
daf87c9671 | ||
|
omgitsalexl
|
bf434d253d | ||
|
omgitsalexl
|
1a94ae01ba | ||
|
omgitsalexl
|
2afa6664dc | ||
|
omgitsalexl
|
4bc91ad114 | ||
|
omgitsalexl
|
aa2ebcf882 | ||
|
omgitsalexl
|
37538c87ad | ||
|
omgitsalexl
|
52cb7a6e61 | ||
|
omgitsalexl
|
4787152192 | ||
|
omgitsalexl
|
8b8441ef5b | ||
|
omgitsalexl
|
bb71519eb2 | ||
|
omgitsalexl
|
a3e6014dc7 | ||
|
omgitsalexl
|
1dccd1c64a | ||
|
omgitsalexl
|
5fdc9ef3b6 | ||
|
omgitsalexl
|
0a6685327e | ||
|
omgitsalexl
|
a8d053df3f |
+52
-31
@@ -1,4 +1,29 @@
|
|||||||
# ---> macOS
|
# Created by https://www.toptal.com/developers/gitignore/api/macos,linux,windows,visualstudiocode,dotenv
|
||||||
|
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,linux,windows,visualstudiocode,dotenv
|
||||||
|
|
||||||
|
### Project ###
|
||||||
|
Site*
|
||||||
|
*.md
|
||||||
|
|
||||||
|
### dotenv ###
|
||||||
|
.env
|
||||||
|
|
||||||
|
### Linux ###
|
||||||
|
*~
|
||||||
|
|
||||||
|
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||||
|
.fuse_hidden*
|
||||||
|
|
||||||
|
# KDE directory preferences
|
||||||
|
.directory
|
||||||
|
|
||||||
|
# Linux trash folder which might appear on any partition or disk
|
||||||
|
.Trash-*
|
||||||
|
|
||||||
|
# .nfs files are created when an open file is removed but is still being accessed
|
||||||
|
.nfs*
|
||||||
|
|
||||||
|
### macOS ###
|
||||||
# General
|
# General
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.AppleDouble
|
.AppleDouble
|
||||||
@@ -7,6 +32,7 @@
|
|||||||
# Icon must end with two \r
|
# Icon must end with two \r
|
||||||
Icon
|
Icon
|
||||||
|
|
||||||
|
|
||||||
# Thumbnails
|
# Thumbnails
|
||||||
._*
|
._*
|
||||||
|
|
||||||
@@ -26,7 +52,30 @@ Network Trash Folder
|
|||||||
Temporary Items
|
Temporary Items
|
||||||
.apdisk
|
.apdisk
|
||||||
|
|
||||||
# ---> Windows
|
### macOS Patch ###
|
||||||
|
# iCloud generated files
|
||||||
|
*.icloud
|
||||||
|
|
||||||
|
### VisualStudioCode ###
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
!.vscode/*.code-snippets
|
||||||
|
|
||||||
|
# Local History for Visual Studio Code
|
||||||
|
.history/
|
||||||
|
|
||||||
|
# Built Visual Studio Code Extensions
|
||||||
|
*.vsix
|
||||||
|
|
||||||
|
### VisualStudioCode Patch ###
|
||||||
|
# Ignore all local history of files
|
||||||
|
.history
|
||||||
|
.ionide
|
||||||
|
|
||||||
|
### Windows ###
|
||||||
# Windows thumbnail cache files
|
# Windows thumbnail cache files
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
Thumbs.db:encryptable
|
Thumbs.db:encryptable
|
||||||
@@ -52,32 +101,4 @@ $RECYCLE.BIN/
|
|||||||
# Windows shortcuts
|
# Windows shortcuts
|
||||||
*.lnk
|
*.lnk
|
||||||
|
|
||||||
# ---> Linux
|
# End of https://www.toptal.com/developers/gitignore/api/macos,linux,windows,visualstudiocode,dotenv
|
||||||
*~
|
|
||||||
|
|
||||||
# temporary files which can be created if a process still has a handle open of a deleted file
|
|
||||||
.fuse_hidden*
|
|
||||||
|
|
||||||
# KDE directory preferences
|
|
||||||
.directory
|
|
||||||
|
|
||||||
# Linux trash folder which might appear on any partition or disk
|
|
||||||
.Trash-*
|
|
||||||
|
|
||||||
# .nfs files are created when an open file is removed but is still being accessed
|
|
||||||
.nfs*
|
|
||||||
|
|
||||||
# ---> VisualStudioCode
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/settings.json
|
|
||||||
!.vscode/tasks.json
|
|
||||||
!.vscode/launch.json
|
|
||||||
!.vscode/extensions.json
|
|
||||||
!.vscode/*.code-snippets
|
|
||||||
|
|
||||||
# Local History for Visual Studio Code
|
|
||||||
.history/
|
|
||||||
|
|
||||||
# Built Visual Studio Code Extensions
|
|
||||||
*.vsix
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
# noel-design-atelier
|
|
||||||
|
|
||||||
Code and media for the Noel Design Atelier website.
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 704 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 824 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 750 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 945 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1009 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
+594
@@ -0,0 +1,594 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" prefix="og: https://ogp.me/ns#">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="theme-color" content="#F4EDE3">
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Holiday installations for hotels, automotive showrooms, and flagship stores, shaped by the spirit of the season. Noel Design Atelier, Pacific Northwest."
|
||||||
|
>
|
||||||
|
<title>Noel Design Atelier — Composing the Season</title>
|
||||||
|
<link rel="canonical" href="https://www.noeldesignatelier.com/">
|
||||||
|
|
||||||
|
<meta property="og:title" content="Noel Design Atelier — Composing the Season">
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="Holiday installations for hotels, automotive showrooms, and flagship stores, shaped by the spirit of the season. Noel Design Atelier, Pacific Northwest."
|
||||||
|
>
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:site_name" content="Noel Design Atelier">
|
||||||
|
<meta property="og:locale" content="en_US">
|
||||||
|
<meta property="og:url" content="https://www.noeldesignatelier.com/">
|
||||||
|
<meta property="og:image" content="https://www.noeldesignatelier.com/images/og-image.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1200">
|
||||||
|
<meta property="og:image:height" content="630">
|
||||||
|
<meta
|
||||||
|
property="og:image:alt"
|
||||||
|
content="Noel Design Atelier logo on a warm cream background, with “Composing the season” and “Holiday installations / Pacific Northwest.”"
|
||||||
|
>
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="Noel Design Atelier — Composing the Season">
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content="Holiday installations for hotels, automotive showrooms, and flagship stores, shaped by the spirit of the season. Noel Design Atelier, Pacific Northwest."
|
||||||
|
>
|
||||||
|
<meta name="twitter:image" content="https://www.noeldesignatelier.com/images/og-image.png">
|
||||||
|
<meta
|
||||||
|
name="twitter:image:alt"
|
||||||
|
content="Noel Design Atelier logo on a warm cream background, with “Composing the season” and “Holiday installations / Pacific Northwest.”"
|
||||||
|
>
|
||||||
|
<meta name="twitter:creator" content="@omgitsalexl">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link
|
||||||
|
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=mobile-layout-repair">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="top">
|
||||||
|
<a class="skip-link label-uppercase" href="#main-content">Skip to main content</a>
|
||||||
|
|
||||||
|
<header class="border-bottom-subtle">
|
||||||
|
<div class="content-boundary grid-centered-content">
|
||||||
|
<a
|
||||||
|
class="image-link image-link-large-centered"
|
||||||
|
href="#top"
|
||||||
|
aria-label="Noel Design Atelier, back to top"
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source class="image-fluid" srcset="images/logo.webp" type="image/webp">
|
||||||
|
<img class="image-fluid" src="images/logo.png" alt="Noel Design Atelier Logo">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="grid-trailing-content" aria-label="Primary navigation">
|
||||||
|
<ul class="link-row">
|
||||||
|
<li><a class="underline-reveal-link label-uppercase" href="#philosophy">Philosophy</a></li>
|
||||||
|
<li><a class="underline-reveal-link label-uppercase" href="#approach">Approach</a></li>
|
||||||
|
<li><a class="underline-reveal-link label-uppercase" href="#work">Season</a></li>
|
||||||
|
<li><a class="underline-reveal-link label-uppercase" href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main-content">
|
||||||
|
<section
|
||||||
|
class="content-boundary grid-twelve-columns grid-overlapping-introduction isolate-blending surface-paper"
|
||||||
|
aria-labelledby="homepage-hero-title"
|
||||||
|
>
|
||||||
|
<p class="eyebrow-label label-uppercase">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
|
||||||
|
|
||||||
|
<h1
|
||||||
|
class="heading-editorial heading-display text-invert-over-image reveal-on-scroll"
|
||||||
|
id="homepage-hero-title"
|
||||||
|
>
|
||||||
|
<span>Composing</span>
|
||||||
|
<span>the season.</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="grid-lower-leading-copy">
|
||||||
|
<span class="decorative-mark" aria-hidden="true">✦</span>
|
||||||
|
<p>
|
||||||
|
We create holiday installations that welcome guests into the season, from hotels
|
||||||
|
to showrooms and flagship stores. From the first
|
||||||
|
glimpse of greenery to the glow beyond a doorway, each space offers a reason to
|
||||||
|
pause and stay a little longer.
|
||||||
|
</p>
|
||||||
|
<a class="arrow-link label-uppercase" href="#philosophy">
|
||||||
|
Step inside <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="grid-overlapping-trailing-image" data-parallax="25">
|
||||||
|
<div
|
||||||
|
class="image-frame aspect-ratio-four-to-five"
|
||||||
|
role="img"
|
||||||
|
aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source srcset="images/composing.webp" type="image/webp">
|
||||||
|
<img src="images/composing.jpg" alt="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="spaced-bordered-block" id="philosophy" aria-labelledby="philosophy-title">
|
||||||
|
<div class="content-boundary">
|
||||||
|
<header>
|
||||||
|
<p class="eyebrow-label label-uppercase">Our Philosophy</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="grid-twelve-columns grid-three-part-content">
|
||||||
|
<figure class="grid-leading-image" data-parallax="15">
|
||||||
|
<div
|
||||||
|
class="image-frame aspect-ratio-three-to-four"
|
||||||
|
role="img"
|
||||||
|
aria-label="Cedar garland and velvet ribbon following a curved staircase"
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source srcset="images/space.webp" type="image/webp">
|
||||||
|
<img src="images/space.jpg" alt="Cedar garland and velvet ribbon following a curved staircase">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<h2 class="heading-editorial heading-statement reveal-on-scroll" id="philosophy-title">
|
||||||
|
The season begins
|
||||||
|
<span>with the space.</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid-trailing-copy paragraph-stack">
|
||||||
|
<p class="text-emphasis label-uppercase">
|
||||||
|
We begin by noticing what makes a place itself.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
A sweeping lobby invites a different gesture from an intimate window display. We study
|
||||||
|
those proportions and compose installations to suit them, following an
|
||||||
|
architectural curve or giving a quiet corner a seasonal focal point.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
As greenery and light find their place, familiar surroundings take on the warmth
|
||||||
|
of the holidays. We design for that sense of recognition: a room that feels
|
||||||
|
quietly new yet deeply familiar, like returning to somewhere you love.
|
||||||
|
</p>
|
||||||
|
<a class="arrow-link label-uppercase" href="#approach">
|
||||||
|
A closer look <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="spaced-bordered-block clip-overflow isolate-blending surface-paper"
|
||||||
|
id="approach"
|
||||||
|
aria-labelledby="approach-title"
|
||||||
|
>
|
||||||
|
<div class="content-boundary">
|
||||||
|
<header>
|
||||||
|
<p class="eyebrow-label label-uppercase">Our Approach</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<h2
|
||||||
|
class="heading-editorial heading-oversized heading-offset-down text-invert-over-image reveal-on-scroll"
|
||||||
|
id="approach-title"
|
||||||
|
>
|
||||||
|
By hand.
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid-twelve-columns grid-narrow-copy-wide-image">
|
||||||
|
<div class="grid-leading-copy paragraph-stack">
|
||||||
|
<p class="text-emphasis label-uppercase">
|
||||||
|
We bring the season to life by hand.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
That sense of belonging guides our hands as well as our designs. We build each
|
||||||
|
arrangement around the lines of the space, shaping its outline to echo a curve
|
||||||
|
or frame an opening.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
As we work, we adjust the balance and spacing of the details, bringing them into
|
||||||
|
a composition that feels at home in the room.
|
||||||
|
</p>
|
||||||
|
<a class="arrow-link label-uppercase" href="#work">
|
||||||
|
Imagine the season <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="grid-wide-inset-image" data-parallax="25">
|
||||||
|
<div
|
||||||
|
class="image-frame aspect-ratio-sixteen-to-ten"
|
||||||
|
role="img"
|
||||||
|
aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source srcset="images/by-hand.webp" type="image/webp">
|
||||||
|
<img src="images/by-hand.webp" alt="Hands arranging ribbon, cedar, and brass ornaments on a worktable" decoding="async">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-grid card-grid-three-columns" aria-label="How we compose a space">
|
||||||
|
<article class="card card-spacious">
|
||||||
|
<span class="card-index" aria-hidden="true">I.</span>
|
||||||
|
<h3>Texture</h3>
|
||||||
|
<p>
|
||||||
|
We select cedar, velvet, brass, and glass for the way their textures meet. The
|
||||||
|
contrast between soft foliage and a smooth ornament gives an installation depth,
|
||||||
|
inviting a closer look.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card card-spacious">
|
||||||
|
<span class="card-index" aria-hidden="true">II.</span>
|
||||||
|
<h3>Gesture</h3>
|
||||||
|
<p>
|
||||||
|
We shape greenery and tie ribbon by hand, working with the natural movement of
|
||||||
|
each material. A branch’s curve or a ribbon’s fall helps us find an arrangement
|
||||||
|
that feels relaxed and full of life.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card card-spacious">
|
||||||
|
<span class="card-index" aria-hidden="true">III.</span>
|
||||||
|
<h3>Atmosphere</h3>
|
||||||
|
<p>
|
||||||
|
We compose the installation as part of the whole room, considering where the eye
|
||||||
|
is drawn and where it can rest. Light and detail work together to make the space
|
||||||
|
feel warm and welcoming.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="spaced-bordered-block surface-dark surface-dark-bordered" id="work" aria-labelledby="work-title">
|
||||||
|
<div class="content-boundary">
|
||||||
|
<header>
|
||||||
|
<p class="eyebrow-label label-uppercase">Seasonal Possibilities</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="grid-twelve-columns grid-heading-and-copy">
|
||||||
|
<h2 class="heading-editorial heading-oversized reveal-on-scroll" id="work-title">Gather.</h2>
|
||||||
|
<div class="grid-trailing-introduction paragraph-stack">
|
||||||
|
<p class="text-emphasis label-uppercase text-brass">
|
||||||
|
We create settings that bring people together.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
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. We compose our
|
||||||
|
installations with these moments in mind, from the first welcome to the
|
||||||
|
conversations that follow.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-twelve-columns grid-staggered-images" aria-label="Imagined holiday settings">
|
||||||
|
<figure class="grid-wide-leading-image">
|
||||||
|
<div
|
||||||
|
class="image-frame aspect-ratio-sixteen-to-nine"
|
||||||
|
role="img"
|
||||||
|
aria-label="Holiday tree and cedar garland in an automotive showroom, with a car beyond."
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source srcset="images/gather-1.webp" type="image/webp">
|
||||||
|
<img src="images/gather-1.jpg" alt="Holiday tree and cedar garland in an automotive showroom, with a car beyond." decoding="async">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<figcaption class="caption-grid">
|
||||||
|
<span class="caption-label label-uppercase">On arrival</span>
|
||||||
|
<span class="caption-description">
|
||||||
|
A tree glowing beyond the showroom glass offers a first glimpse of the season,
|
||||||
|
inviting visitors to slow their step as they enter.
|
||||||
|
</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="grid-tall-trailing-image">
|
||||||
|
<div
|
||||||
|
class="image-frame aspect-ratio-three-to-four"
|
||||||
|
role="img"
|
||||||
|
aria-label="Flagship-store window and entrance framed by cedar garland and velvet ribbon."
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source srcset="images/gather-2.webp" type="image/webp">
|
||||||
|
<img src="images/gather-2.jpg" alt="Flagship-store window and entrance framed by cedar garland and velvet ribbon." decoding="async">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<figcaption class="caption-grid">
|
||||||
|
<span class="caption-label label-uppercase">Beyond the window</span>
|
||||||
|
<span class="caption-description">
|
||||||
|
Greenery frames a glimpse of the world within, inviting a passing glance to
|
||||||
|
become a moment of discovery.
|
||||||
|
</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="grid-small-inset-image">
|
||||||
|
<div
|
||||||
|
class="image-frame aspect-ratio-square"
|
||||||
|
role="img"
|
||||||
|
aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source srcset="images/gather-3.webp" type="image/webp">
|
||||||
|
<img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<figcaption class="caption-grid">
|
||||||
|
<span class="caption-label label-uppercase">A closer look</span>
|
||||||
|
<span class="caption-description">
|
||||||
|
In a fold of velvet or the patina of brass, there is another small discovery.
|
||||||
|
Such details reward a second glance as the evening unfolds.
|
||||||
|
</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="spaced-bordered-block surface-red-borderless" id="places" aria-labelledby="client-fit-title">
|
||||||
|
<div class="content-boundary">
|
||||||
|
<div class="grid-twelve-columns grid-overlapping-halves">
|
||||||
|
<div class="grid-leading-layer">
|
||||||
|
<p class="eyebrow-label label-uppercase text-brass">Who we design for</p>
|
||||||
|
<h2 class="heading-editorial heading-large heading-large-raised reveal-on-scroll" id="client-fit-title">Your kind of welcome.</h2>
|
||||||
|
<p class="text-light-introduction">
|
||||||
|
Whether you are welcoming guests for a stay or opening your doors for the day,
|
||||||
|
your space holds its own rituals. We design our compositions around the way you
|
||||||
|
welcome people, giving the season a setting that feels like yours.
|
||||||
|
</p>
|
||||||
|
<a class="arrow-link label-uppercase text-paper" href="#contact">
|
||||||
|
Start a conversation <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="grid-trailing-layer" data-parallax="15">
|
||||||
|
<div
|
||||||
|
class="image-frame aspect-ratio-sixteen-to-ten"
|
||||||
|
role="img"
|
||||||
|
aria-label="An open doorway framed by cedar garland and warm lights"
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source srcset="images/welcome.webp" type="image/webp">
|
||||||
|
<img src="images/welcome.webp" alt="An open doorway framed by cedar garland and warm lights" decoding="async">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-grid card-grid-four-columns" aria-label="Places and people we design for">
|
||||||
|
<article class="card card-compact">
|
||||||
|
<h3>Luxury hospitality</h3>
|
||||||
|
<p>
|
||||||
|
We compose entrances and shared spaces in hotels and destination properties
|
||||||
|
around that first moment of arrival. Greenery and light offer a warm welcome,
|
||||||
|
inviting guests to settle into the season.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card card-compact">
|
||||||
|
<h3>Automotive and flagship retail</h3>
|
||||||
|
<p>
|
||||||
|
In showrooms and flagship stores, we choose materials and arrange seasonal
|
||||||
|
details to reflect the character of the space. The holiday welcome becomes a
|
||||||
|
natural extension of your world.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card card-compact">
|
||||||
|
<h3>Private estates</h3>
|
||||||
|
<p>
|
||||||
|
At home, the season gathers around familiar rituals. We design compositions for
|
||||||
|
the rooms where those traditions unfold, bringing holiday warmth to the places
|
||||||
|
your family knows by heart.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card card-compact">
|
||||||
|
<h3>Select events</h3>
|
||||||
|
<p>
|
||||||
|
We arrange greenery and light around the places people meet and gather, giving
|
||||||
|
each occasion its own seasonal atmosphere. From the first greeting, the setting
|
||||||
|
invites people to feel part of it.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="spaced-bordered-block surface-paper" id="contact" aria-labelledby="contact-title">
|
||||||
|
<div class="content-boundary grid-twelve-columns grid-wide-gap">
|
||||||
|
<div class="grid-leading-heading">
|
||||||
|
<p class="eyebrow-label label-uppercase">Let’s begin</p>
|
||||||
|
<h2 class="heading-editorial heading-large reveal-on-scroll" id="contact-title">Tell us your story.</h2>
|
||||||
|
<p class="text-dark-introduction">
|
||||||
|
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
|
||||||
|
explore what the season could become with you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="inquiry-form" class="grid-trailing-form" method="POST">
|
||||||
|
<input type="hidden" name="access_key" value="e13bd9eb-b409-4b3f-936c-a938a701ee2e">
|
||||||
|
<div class="field-grid">
|
||||||
|
<div class="field-group">
|
||||||
|
<label class="label-uppercase" for="name">Your name</label>
|
||||||
|
<input id="name" name="name" type="text" autocomplete="name" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-group">
|
||||||
|
<label class="label-uppercase" for="email">Email</label>
|
||||||
|
<input id="email" name="email" type="email" autocomplete="email" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
|
||||||
|
|
||||||
|
<div class="field-group">
|
||||||
|
<label class="label-uppercase" for="organization">Describe the space</label>
|
||||||
|
<input id="organization" name="organization" type="text" autocomplete="organization" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-group">
|
||||||
|
<label class="label-uppercase" for="project-brief">What do you have in mind?</label>
|
||||||
|
<textarea id="project-brief" name="project-brief" rows="5" required></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="button-filled label-uppercase" type="submit">
|
||||||
|
Submit your inquiry <span aria-hidden="true">→</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="grid-trailing-form vertical-centering hidden" id="contact-confirmation">
|
||||||
|
<p class="target-notice" id="confirmation-message">
|
||||||
|
Please wait...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="surface-dark surface-dark-padded">
|
||||||
|
<div class="content-boundary grid-weighted-columns">
|
||||||
|
<div class="span-full-width-on-tablet">
|
||||||
|
<a
|
||||||
|
class="image-link image-link-small"
|
||||||
|
href="#top"
|
||||||
|
aria-label="Noel Design Atelier, back to top"
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
<source class="image-fluid image-inverted" srcset="images/logo.webp" type="image/webp">
|
||||||
|
<img class="image-fluid image-inverted" src="images/logo.png" alt="Noel Design Atelier Logo">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="link-stack" aria-label="Footer navigation">
|
||||||
|
<p class="column-label label-uppercase">Explore</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#work">Season</a></li>
|
||||||
|
<li><a href="#philosophy">Philosophy</a></li>
|
||||||
|
<li><a href="#approach">Approach</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="space-above-on-mobile">
|
||||||
|
<p class="column-label label-uppercase">Proudly crafting in the Pacific Northwest</p>
|
||||||
|
<p class="text-muted-small">We’d love to hear what you have in mind.</p>
|
||||||
|
<a class="arrow-link label-uppercase text-paper" href="#contact">
|
||||||
|
Start a conversation <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-muted-divider">© 2026 Noel Design Atelier</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var success = false;
|
||||||
|
const inquiryForm = document.getElementById("inquiry-form");
|
||||||
|
const confirmation = document.getElementById("contact-confirmation");
|
||||||
|
const confirmationMessage = document.getElementById("confirmation-message");
|
||||||
|
|
||||||
|
inquiryForm.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
inquiryForm.classList.add("hidden");
|
||||||
|
confirmation.classList.remove("hidden");
|
||||||
|
const data = new FormData(inquiryForm);
|
||||||
|
const object = Object.fromEntries(data);
|
||||||
|
const json = JSON.stringify(object);
|
||||||
|
|
||||||
|
fetch('https://api.web3forms.com/submit', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: json
|
||||||
|
})
|
||||||
|
.then(async (response) => {
|
||||||
|
let json = await response.json();
|
||||||
|
if (response.status === 200) {
|
||||||
|
success = true;
|
||||||
|
confirmationMessage.innerHTML = "Thank you for your interest! Noel Design Atelier will review your inquiry and contact you soon.";
|
||||||
|
} else {
|
||||||
|
console.error('Error:', json);
|
||||||
|
confirmationMessage.innerHTML = json.message;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
confirmationMessage.innerHTML = "An error occurred. Please try again.";
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (success) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
inquiryForm.reset();
|
||||||
|
setTimeout(() => {
|
||||||
|
confirmation.classList.add("hidden");
|
||||||
|
inquiryForm.classList.remove("hidden");
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", (event) => {
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
|
||||||
|
gsap.utils.toArray(".reveal-on-scroll").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",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
gsap.utils.toArray("figure[data-parallax]").forEach((figure) => {
|
||||||
|
const motion = Number(figure.dataset.parallax);
|
||||||
|
if (!Number.isFinite(motion) || motion === 0) return;
|
||||||
|
|
||||||
|
const frame = figure.querySelector(".image-frame");
|
||||||
|
|
||||||
|
gsap.fromTo(figure, {
|
||||||
|
y: () => frame.offsetHeight * motion / 200,
|
||||||
|
}, {
|
||||||
|
y: () => -frame.offsetHeight * motion / 200,
|
||||||
|
ease: "none",
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: figure,
|
||||||
|
start: "clamp(top bottom)",
|
||||||
|
end: "clamp(bottom top)",
|
||||||
|
scrub: true,
|
||||||
|
invalidateOnRefresh: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
+1234
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user