feat: Redesign About Us page with new content and video integration
Refactored about.njk to a new two-column layout.
- Added a video component to the top of the story section to provide a more engaging narrative.
- Updated CSS (about.css) to reflect the new layout and styling.
- Integrated the contact and hours information into the feedback form section at the bottom of the page.
This commit is contained in:
130
src/about.njk
130
src/about.njk
@@ -4,73 +4,63 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
|
|||||||
seoIndexing: false
|
seoIndexing: false
|
||||||
title: "About - Bloom Valley Nursery Demo"
|
title: "About - Bloom Valley Nursery Demo"
|
||||||
stylesheet:
|
stylesheet:
|
||||||
- "/styles/variables.css"
|
|
||||||
- "/styles/base.css"
|
|
||||||
- "/styles/header.css"
|
|
||||||
- "/styles/about.css"
|
- "/styles/about.css"
|
||||||
- "/styles/footer.css"
|
|
||||||
- "/styles/modals.css"
|
|
||||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||||
currentPage: "about"
|
currentPage: "about"
|
||||||
pageScripts:
|
pageScripts:
|
||||||
- "/scripts/feedback.js"
|
- "/scripts/feedback.js"
|
||||||
- "/scripts/cart.js"
|
|
||||||
- "/scripts/newsletter.js"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="about">
|
<div id="top" aria-labelledby="bvn-story">
|
||||||
<div id="main-top">
|
|
||||||
<section
|
|
||||||
id="business-info"
|
|
||||||
aria-label="Hours of operation and contact info"
|
|
||||||
>
|
|
||||||
<h3>Contact Us</h3>
|
|
||||||
<div id="phone">
|
|
||||||
<h4><strong>Phone:</strong></h4>
|
|
||||||
<p>(555) 123-4567</p>
|
|
||||||
</div>
|
|
||||||
<h3>Hours of Operation</h3>
|
|
||||||
<div id="hours">
|
|
||||||
<h4><strong>Monday - Friday:</strong></h4>
|
|
||||||
<p>9:00 AM - 6:00 PM</p>
|
|
||||||
<h4><strong>Saturday & Sunday:</strong></h4>
|
|
||||||
<p>10:00 AM - 5:00 PM</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="story-section">
|
<section class="story-section">
|
||||||
<div id="story" aria-label="History of Bloom Valley Nursery">
|
<h2 id="bvn-story">The Story of Bloom Valley</h2>
|
||||||
<h2>The Story of Bloom Valley</h2>
|
<div class="video-border">
|
||||||
<p>
|
<div class="bvn-video" style="left: 0px; width: 600px; height: 338px; position: relative; border-radius: 15px">
|
||||||
Legend has it that in 1822, Benjamin Bloom, his wife Violet, and
|
<iframe src="https://video.pictory.ai/embed/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP" class="iframe"
|
||||||
their young daughter Nora stumbled upon a breathtaking valley
|
title="The Story of Bloom Valley" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0; border-radus: 15px;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
|
||||||
brimming with vibrant, rare flowers during their journey westward.
|
</iframe>
|
||||||
Enchanted by its beauty, they decided to settle there, abandoning
|
</div>
|
||||||
their plans to reach California. This picturesque haven became known
|
</div>
|
||||||
as Bloom Valley.
|
<div class="story">
|
||||||
</p>
|
<p> Legend has it that in 1822, Benjamin Bloom, his wife Violet, and their young daughter Nora embarked on a journey westward, driven by dreams of new opportunities in California. Along the way, they wandered through rolling hills, dense forests, and sparkling streams, until one fateful day, they stumbled upon a hidden valley unlike anything they had ever seen.
|
||||||
<p>
|
</p>
|
||||||
Today, on the very land where the Bloom family found their paradise,
|
<p>
|
||||||
stands Bloom Valley Nursery. Still family-owned and operated,
|
The valley was a riot of color, alive with flowers of every hue imaginable—delicate bluebells swaying in the breeze, golden sunflowers turning toward the sun, and rare, exotic blooms that seemed to glow with an otherworldly light. Birds of vibrant plumage sang from the trees, and a gentle stream wove through the meadow, reflecting the kaleidoscope of colors around it.
|
||||||
siblings Bethany, Vincent, and Nathaniel Bloom carry forward a
|
</p>
|
||||||
legacy of preserving and sharing the natural beauty that captivated
|
<p>
|
||||||
the hearts of their ancestors over two centuries ago.
|
Benjamin, Violet, and little Nora were spellbound. They knew instantly that this magical place was meant to be their home. Abandoning their original plans, they settled in the valley, tending the land and nurturing its natural beauty. Over time, the area became known as Bloom Valley, a name that honored both the family who called it home and the flowers that had captured their hearts.
|
||||||
</p>
|
</p>
|
||||||
<p>Though many things have changed through the years, our commitment to serving our community has remained the same. Let us help you cultivate joy, one bloom at a time!</p>
|
<p>
|
||||||
</div>
|
Generations later, the Bloom family's reverence for the valley's splendor continues to flourish. Today, on the very land where Benjamin and Violet first marveled at the blooms, stands Bloom Valley Nursery. Still family-owned and operated, siblings Bethany, Vincent, and Nathaniel Bloom carry forward a tradition of cultivating and sharing the natural beauty that enchanted their ancestors more than two centuries ago.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Each plant in the nursery is chosen with care, echoing the Bloom family's historic love for vibrant, rare, and enduring flora. Though the world around them has changed, the heart of Bloom Valley Nursery remains the same: a place where beauty, nature, and community grow hand in hand. From the first seed to the full bloom, the nursery is a celebration of life's simple joys. Let us help you cultivate joy, one bloom at a time.</p>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div id="main-bottom">
|
<div id="bottom">
|
||||||
<div id="feedback" aria-label="Feedback form">
|
<section
|
||||||
<div id="feedback-intro">
|
id="business-info"
|
||||||
<h2>We Want to Hear From You!</h2>
|
aria-label="Contact and Hours of Operation">
|
||||||
<h3>Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</h3>
|
<h3>Contact & Hours</h3>
|
||||||
<p>Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!</p>
|
<p><strong>Phone:</strong><br> (555) 123-4567</p>
|
||||||
</div>
|
<p><strong>Monday - Friday:</strong><br> 9:00 AM - 6:00 PM</p>
|
||||||
<div id="feedback-form">
|
<p><strong>Saturday & Sunday:</strong><br> 10:00 AM - 5:00 PM</p>
|
||||||
<form action="#" method="POST">
|
</section>
|
||||||
|
|
||||||
|
<section id="feedback" aria-label="Feedback form">
|
||||||
|
<div id="feedback-intro">
|
||||||
|
<h2>We Want to Hear From You!</h2>
|
||||||
|
<p class="special">Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</p>
|
||||||
|
<p>Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!</p>
|
||||||
|
</div>
|
||||||
|
<div id="feedback-form">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="inputs">
|
||||||
<div id="customer-info">
|
<div id="customer-info">
|
||||||
<div id="name-field">
|
<div id="name-field">
|
||||||
<label for="name">Name:</label>
|
<label for="name">Name: </label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="name"
|
id="name"
|
||||||
@@ -79,7 +69,7 @@ pageScripts:
|
|||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
<div id="phone-field">
|
<div id="phone-field">
|
||||||
<label for="tel">Phone Number:</label>
|
<label for="tel">Phone: </label>
|
||||||
<input
|
<input
|
||||||
type="tel"
|
type="tel"
|
||||||
id="tel"
|
id="tel"
|
||||||
@@ -88,7 +78,7 @@ pageScripts:
|
|||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
<div id="email-field">
|
<div id="email-field">
|
||||||
<label for="email">Email:</label>
|
<label for="email">Email: </label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email"
|
id="email"
|
||||||
@@ -97,18 +87,19 @@ pageScripts:
|
|||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="customer-message">
|
<div class="message-box">
|
||||||
<div id="message-field">
|
<div id="customer-message">
|
||||||
<label for="message">Message:</label>
|
<div id="message-field">
|
||||||
<textarea
|
<label for="message">Message:</label>
|
||||||
id="message"
|
<textarea
|
||||||
name="message"
|
id="message"
|
||||||
rows="5"
|
name="message"
|
||||||
aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
|
rows="5"
|
||||||
required>
|
aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
|
||||||
</textarea>
|
required>
|
||||||
|
</textarea>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="form-submit-btn">
|
|
||||||
<button
|
<button
|
||||||
id="form-submit"
|
id="form-submit"
|
||||||
type="submit"
|
type="submit"
|
||||||
@@ -119,5 +110,6 @@ pageScripts:
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,212 +1,259 @@
|
|||||||
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
||||||
.about {
|
#top {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--color-soft-golden);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-top {
|
.story-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
gap: 30px;
|
align-items: center;
|
||||||
width: 90vw;
|
justify-content: center;
|
||||||
|
width: 95%;
|
||||||
|
margin: 20px 0;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
background-color: var(--color-pale-green);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#business-info {
|
.video-border {
|
||||||
|
border-bottom: solid 3px var(--color-destin-sand);
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bvn-video {
|
||||||
display: block;
|
display: block;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 25vw;
|
border: solid 3px var(--color-destin-sand);
|
||||||
background-color: var(--color-soft-golden);
|
border-radius: 15px;
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: var(--shadow-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
#phone,
|
|
||||||
#hours {
|
|
||||||
background-color: var(--color-destin-sand);
|
|
||||||
border: solid var(--color-light-teal);
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 5px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#business-info h3,
|
|
||||||
#feedback-intro h2 {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
|
|
||||||
-0.5px -0.5px 2px var(--color-dark-green),
|
|
||||||
-0.5px 0.5px 2px var(--color-dark-green),
|
|
||||||
0.5px -0.5px 2px var(--color-dark-green);
|
|
||||||
color: var(--color-destin-sand);
|
|
||||||
background-color: var(--color-mid-green);
|
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
max-width: 75vw;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding-left: 10px;
|
|
||||||
transform: translateX(0px);
|
|
||||||
box-shadow: var(--shadow-medium);
|
box-shadow: var(--shadow-medium);
|
||||||
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#business-info p {
|
.iframe {
|
||||||
text-align: center;
|
border-radius: 15px;
|
||||||
font-size: 14pt;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#business-info h4 {
|
h2#bvn-story {
|
||||||
text-align: center;
|
font-size: 2.25rem;
|
||||||
background-color: var(--color-light-teal);
|
background-color: var(--color-mid-green);
|
||||||
|
color: var(--color-destin-sand);
|
||||||
border: solid var(--color-destin-sand);
|
border: solid var(--color-destin-sand);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 0 10px;
|
padding: 0 100px;
|
||||||
width: 50%;
|
margin-top: 20px;
|
||||||
margin-left: 22.5%;
|
margin-bottom: 20px;
|
||||||
box-shadow: var(--shadow-subtle);
|
width: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: var(--text-outline-heading);
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#story {
|
.story {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 95%;
|
||||||
|
padding: 20px 10px;
|
||||||
|
margin: 20px 0px;
|
||||||
|
text-align: left;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
background-color: var(--color-destin-sand);
|
||||||
width: 70vw;
|
border: solid 2px var(--color-mid-green);
|
||||||
margin-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#story h2 {
|
|
||||||
background-color: var(--color-mid-green);
|
|
||||||
color: var(--color-destin-sand);
|
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
|
|
||||||
-0.5px -0.5px 2px var(--color-dark-green),
|
|
||||||
-0.5px 0.5px 2px var(--color-dark-green),
|
|
||||||
0.5px -0.5px 2px var(--color-dark-green);
|
|
||||||
width: 50%;
|
|
||||||
padding: 5px 10px;
|
|
||||||
text-align: center;
|
|
||||||
margin-right: 12.5%;
|
|
||||||
box-shadow: var(--shadow-medium);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#story p {
|
.story p {
|
||||||
color: var(--color-dark-green);
|
color: var(--color-dark-green);
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-indent: 1.75rem;
|
||||||
|
margin: 5px auto;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
background-color: var(--color-pale-green);
|
||||||
|
border: solid 3px var(--color-destin-sand);
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 95%;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 30px auto;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#business-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: fit-content;
|
||||||
|
background-color: var(--color-destin-sand);
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
border: solid 2px var(--color-pale-green);
|
||||||
|
padding: 0 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
#business-info h3 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-decoration: underline;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#business-info p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback {
|
#feedback {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
width:fit-content;
|
||||||
background-color: var(--color-mid-green);
|
margin: auto;
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
border-radius: 15px;
|
|
||||||
width: 90vw;
|
|
||||||
margin-top: 30px;
|
|
||||||
box-shadow: var(--shadow-medium);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback h2 {
|
#feedback h2 {
|
||||||
background-color: var(--color-light-teal);
|
margin: auto;
|
||||||
border: solid var(--color-destin-sand);
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 50vw;
|
|
||||||
padding: 5px 10px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-left: 25vw;
|
background-color: var(--color-mid-green);
|
||||||
margin-right: 25vw;
|
border: solid 2px var(--color-destin-sand);
|
||||||
text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
|
text-shadow: var(--text-outline-heading);
|
||||||
-0.5px -0.5px 2px var(--color-dark-green),
|
border-radius: 15px;
|
||||||
-0.5px 0.5px 2px var(--color-dark-green),
|
font-size: 1.6rem;
|
||||||
0.5px -0.5px 2px var(--color-dark-green);
|
color: var(--color-destin-sand);
|
||||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
width: fit-content;
|
||||||
|
padding: 0 50px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback h3 {
|
.special {
|
||||||
color: #00231c;
|
font-size: 1.3rem;
|
||||||
font-weight: bold;
|
font-weight: 500px;
|
||||||
width: 85vw;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 7.5vw;
|
|
||||||
margin-right: 7.5vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback p {
|
#feedback p {
|
||||||
color: #00231c;
|
font-size: 1.2rem;
|
||||||
width: 85vw;
|
color: var(--color-dark-green);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-left: 7.5vw;
|
margin: 0 20px;
|
||||||
margin-right: 7.5vw;
|
padding: 0 20px;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#feedback-form form {
|
.inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 20px;
|
justify-content: space-between;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
width: 95%;
|
|
||||||
margin-top: 20px; /* Adds some spacing above the form */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#customer-info {
|
#customer-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content: center;
|
align-items: center;
|
||||||
width: 95%; /* Adjusted width */
|
gap: 10px;
|
||||||
gap: 25px; /* Adds spacing between input fields */
|
width: 500px; /* Adjusted width */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customer-info input {
|
#name-field,
|
||||||
background-color: var(--color-destin-sand);
|
#phone-field,
|
||||||
border: solid var(--color-dark-green);
|
#email-field {
|
||||||
border-radius: 15px;
|
|
||||||
width: 90%; /* Ensures the input fields fill the section width */
|
|
||||||
height: 30px; /* Adjusts height to match the textarea */
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#customer-message {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 90%; /* Adjusted width */
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customer-message #message-field textarea {
|
#name-field input,
|
||||||
width: 50vw; /* Takes full width of the section */
|
#phone-field input,
|
||||||
height: 30vh; /* Adjust height as needed */
|
#email-field input {
|
||||||
background-color: var(--color-destin-sand);
|
width: 300px;
|
||||||
border: solid var(--color-dark-green);
|
height: 30px;
|
||||||
border-radius: 15px;
|
border: solid 2px var(--color-dark-green);
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
border-radius: 10px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#form-submit-btn {
|
.message-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 10px;
|
align-items: center;
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 500px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-dark-green);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message {
|
||||||
|
border: solid 2px var(--color-dark-green);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#form-submit {
|
#form-submit {
|
||||||
padding: 10px 20px;
|
font-size: 1.4rem;
|
||||||
background-color: var(--color-light-teal);
|
background-color: var(--color-destin-sand);
|
||||||
border: solid var(--color-destin-sand);
|
border: var(--color-dark-green);
|
||||||
border-radius: 10px;
|
|
||||||
color: var(--color-dark-green);
|
color: var(--color-dark-green);
|
||||||
font-size: 1rem;
|
margin-top: 10px;
|
||||||
cursor: pointer;
|
border-radius: 10px;
|
||||||
margin-bottom: 10px;
|
padding: 5px 10px;
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: var(--shadow-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#form-submit:hover {
|
|
||||||
background-color: var(--color-destin-sand);
|
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user