Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 omgitsalexl
|
bb058704bf | ||
|
omgitsalexl
|
376d7ba54b | ||
|
omgitsalexl
|
db2dd91e73 | ||
|
omgitsalexl
|
f2430f36fe | ||
|
omgitsalexl
|
b27704a636 |
+1
-2
@@ -3,8 +3,7 @@
|
||||
|
||||
### Project ###
|
||||
Site*
|
||||
website-copy.md
|
||||
style-guide.md
|
||||
*.md
|
||||
|
||||
### dotenv ###
|
||||
.env
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 704 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 824 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB 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: 62 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: 1009 KiB |
+108
-54
@@ -1,21 +1,54 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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 shaped by the character of your space and the people who gather there. Enter the world of Noel Design Atelier in the Pacific Northwest."
|
||||
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=reusable-classes">
|
||||
<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>
|
||||
@@ -31,14 +64,10 @@
|
||||
href="#top"
|
||||
aria-label="Noel Design Atelier, back to top"
|
||||
>
|
||||
<img
|
||||
class="image-fluid"
|
||||
src="images/logo.webp"
|
||||
width="4167"
|
||||
height="1063"
|
||||
alt=""
|
||||
decoding="async"
|
||||
>
|
||||
<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">
|
||||
@@ -70,7 +99,8 @@
|
||||
<div class="grid-lower-leading-copy">
|
||||
<span class="decorative-mark" aria-hidden="true">✦</span>
|
||||
<p>
|
||||
We create holiday installations that welcome you into the season. From the first
|
||||
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>
|
||||
@@ -85,7 +115,10 @@
|
||||
role="img"
|
||||
aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
|
||||
>
|
||||
<img src="images/composing.webp" alt="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns" decoding="async">
|
||||
<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>
|
||||
@@ -103,7 +136,10 @@
|
||||
role="img"
|
||||
aria-label="Cedar garland and velvet ribbon following a curved staircase"
|
||||
>
|
||||
<img src="images/space.webp" alt="Cedar garland and velvet ribbon following a curved staircase" decoding="async">
|
||||
<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>
|
||||
|
||||
@@ -117,7 +153,7 @@
|
||||
We begin by noticing what makes a place itself.
|
||||
</p>
|
||||
<p>
|
||||
A sweeping staircase invites a different gesture from an intimate room. We study
|
||||
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>
|
||||
@@ -176,7 +212,10 @@
|
||||
role="img"
|
||||
aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
|
||||
>
|
||||
<img src="images/by-hand.webp" alt="Hands arranging ribbon, cedar, and brass ornaments on a worktable" decoding="async">
|
||||
<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>
|
||||
@@ -241,15 +280,18 @@
|
||||
<div
|
||||
class="image-frame aspect-ratio-sixteen-to-nine"
|
||||
role="img"
|
||||
aria-label="A tall evergreen tree lit with warm lights in a grand room"
|
||||
aria-label="Holiday tree and cedar garland in an automotive showroom, with a car beyond."
|
||||
>
|
||||
<img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async">
|
||||
<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 at the end of a room offers a first glimpse of the celebration
|
||||
within, inviting a guest to slow their step as they enter.
|
||||
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>
|
||||
@@ -258,15 +300,18 @@
|
||||
<div
|
||||
class="image-frame aspect-ratio-three-to-four"
|
||||
role="img"
|
||||
aria-label="A holiday table set with greenery and candles for a small gathering"
|
||||
aria-label="Flagship-store window and entrance framed by cedar garland and velvet ribbon."
|
||||
>
|
||||
<img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async">
|
||||
<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">Around the table</span>
|
||||
<span class="caption-label label-uppercase">Beyond the window</span>
|
||||
<span class="caption-description">
|
||||
A table framed by greenery leaves room for familiar faces and a conversation
|
||||
that carries on long after the last plate is cleared.
|
||||
Greenery frames a glimpse of the world within, inviting a passing glance to
|
||||
become a moment of discovery.
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
@@ -277,7 +322,10 @@
|
||||
role="img"
|
||||
aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
|
||||
>
|
||||
<img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
|
||||
<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>
|
||||
@@ -298,9 +346,9 @@
|
||||
<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 night or bringing family home for the
|
||||
season, your space holds its own rituals. We design our compositions around the
|
||||
way you welcome people, giving your gatherings a setting that feels like yours.
|
||||
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>
|
||||
@@ -313,7 +361,10 @@
|
||||
role="img"
|
||||
aria-label="An open doorway framed by cedar garland and warm lights"
|
||||
>
|
||||
<img src="images/welcome.webp" alt="An open doorway framed by cedar garland and warm lights" decoding="async">
|
||||
<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>
|
||||
@@ -374,26 +425,26 @@
|
||||
<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="inquiry-name">Your name</label>
|
||||
<input id="inquiry-name" type="text" autocomplete="name" required>
|
||||
<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="inquiry-email">Email</label>
|
||||
<input id="inquiry-email" type="email" autocomplete="email" required>
|
||||
<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="inquiry-organization">Describe the space</label>
|
||||
<input id="inquiry-organization" type="text" autocomplete="organization" required>
|
||||
<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="inquiry-project-brief">What do you have in mind?</label>
|
||||
<textarea id="inquiry-project-brief" rows="5" required></textarea>
|
||||
<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">
|
||||
@@ -401,9 +452,11 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="target-notice" id="contact-confirmation" class="hidden">
|
||||
Please wait...
|
||||
</p>
|
||||
<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>
|
||||
@@ -416,17 +469,11 @@
|
||||
href="#top"
|
||||
aria-label="Noel Design Atelier, back to top"
|
||||
>
|
||||
<img
|
||||
class="image-fluid image-inverted"
|
||||
src="images/logo.webp"
|
||||
width="4167"
|
||||
height="1063"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
<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>
|
||||
<!--<p class="text-muted-small">For the welcome you offer and the memories you make.</p>-->
|
||||
</div>
|
||||
|
||||
<nav class="link-stack" aria-label="Footer navigation">
|
||||
@@ -453,8 +500,10 @@
|
||||
</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();
|
||||
@@ -476,16 +525,21 @@
|
||||
.then(async (response) => {
|
||||
let json = await response.json();
|
||||
if (response.status === 200) {
|
||||
confirmation.innerHTML = "Thank you for your interest! Noel Design Atelier will review your inquiry and contact you soon.";
|
||||
success = true;
|
||||
confirmationMessage.innerHTML = "Thank you for your interest! Noel Design Atelier will review your inquiry and contact you soon.";
|
||||
} else {
|
||||
confirmation.innerHTML = json.message;
|
||||
console.error('Error:', json);
|
||||
confirmationMessage.innerHTML = json.message;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
confirmation.innerHTML = "An error occurred. Please try again.";
|
||||
confirmationMessage.innerHTML = "An error occurred. Please try again.";
|
||||
})
|
||||
.then((response) => {
|
||||
if (success) {
|
||||
return;
|
||||
}
|
||||
inquiryForm.reset();
|
||||
setTimeout(() => {
|
||||
confirmation.classList.add("hidden");
|
||||
|
||||
+38
-5
@@ -27,7 +27,7 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 20rem;
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
background: var(--color-weathered-paper);
|
||||
color: var(--color-noel-black);
|
||||
@@ -83,6 +83,10 @@ ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical-centering {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Compose layout, typography, surfaces, and components independently.
|
||||
Responsive placement belongs to descriptive layout variants; IDs are anchors only. */
|
||||
.grid-twelve-columns {
|
||||
@@ -743,7 +747,6 @@ ul {
|
||||
}
|
||||
|
||||
.target-notice {
|
||||
display: none;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
border-left: 0.25rem solid var(--color-noel-red);
|
||||
@@ -966,7 +969,8 @@ ul {
|
||||
|
||||
.heading-display {
|
||||
margin-top: 3.25rem;
|
||||
font-size: clamp(3.7rem, 16vw, 7.1rem);
|
||||
/* Size complete lines against the space inside the page gutters. */
|
||||
font-size: min(7.1rem, calc((100vw - 2 * var(--site-horizontal-padding)) * 0.145));
|
||||
line-height: 0.92;
|
||||
}
|
||||
|
||||
@@ -1130,10 +1134,12 @@ ul {
|
||||
|
||||
.underline-reveal-link {
|
||||
font-size: 0.7rem;
|
||||
min-height: 2.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heading-display {
|
||||
font-size: clamp(3.05rem, 15.25vw, 4.8rem);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@@ -1141,6 +1147,33 @@ ul {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
.grid-overlapping-trailing-image,
|
||||
.grid-leading-image,
|
||||
.grid-wide-inset-image,
|
||||
.grid-tall-trailing-image,
|
||||
.grid-small-inset-image {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.grid-leading-image {
|
||||
/* Leave room above the frame throughout its parallax travel. */
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.arrow-link,
|
||||
.link-stack a {
|
||||
min-height: 2.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.link-stack a {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.target-notice {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.heading-statement {
|
||||
font-size: clamp(2.15rem, 10.5vw, 3.3rem);
|
||||
letter-spacing: 0.025em;
|
||||
@@ -1163,7 +1196,7 @@ ul {
|
||||
}
|
||||
|
||||
.heading-large {
|
||||
font-size: clamp(2.75rem, 13vw, 4.1rem);
|
||||
font-size: min(4.1rem, 13vw);
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user