<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arona Road Greenhouse | Garden Center & Plant Nursery</title>
<meta name="description"
content="Arona Road Greenhouse is a family-owned garden center and greenhouse in New Stanton, Pennsylvania, offering annuals, perennials, vegetables, herbs, hanging baskets and decorative planters.">
<!-- Google Fonts -->
<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=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&display=swap"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<!-- Leaflet -->
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<!-- Your CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ================= HEADER ================= -->
<header>
<div class="navbar">
<a href="#home"
class="home-button"
aria-label="Home">
<i class="fa-solid fa-house"></i>
</a>
<!-- EXACT LOGO URL -->
<div class="logo-wrapper">
<img
src="https://static.wixstatic.com/media/1954ba_18e88081e36b414eb601206eaf5ad5e0~mv2.png/v1/crop/x_155,y_595,w_1213,h_338/fill/w_249,h_70,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ARG_Logo_onelinecolor.png"
class="logo"
alt="Arona Road Greenhouse Logo">
</div>
<nav class="nav-links">
<a href="#about">About</a>
<a href="#plants">Plants</a>
<a href="#location">Location</a>
<a href="#social">Connect</a>
</nav>
</div>
</header>
<!-- ================= HERO ================= -->
<section class="hero" id="home">
<!-- Forest video background -->
<video
class="hero-video"
autoplay
muted
loop
playsinline
poster="https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2200&q=90">
<source
src="https://cdn.coverr.co/videos/coverr-a-walk-in-the-forest-1573/1080p.mp4"
type="video/mp4">
</video>
<div class="video-overlay"></div>
<div class="forest-glow"></div>
<!-- Social icons falling like rain -->
<div
class="social-rain"
id="socialRain">
</div>
<div class="hero-content">
<div class="eyebrow">
Family Owned • Since 1984
</div>
<h1>
Grow Something<br>
<span>Beautiful.</span>
</h1>
<p class="hero-description">
Arona Road Greenhouse is a second-generation,
family-owned garden center and greenhouse in
New Stanton, Pennsylvania, growing healthy,
vibrant plants with daily care and intention.
</p>
<div class="hero-buttons">
<a
href="https://www.aronaroadgreenhouse.com/"
target="_blank"
rel="noopener"
class="btn btn-primary">
<i class="fa-solid fa-globe"></i>
Visit Website
</a>
<a
href="tel:+17248248230"
class="btn btn-outline">
<i class="fa-solid fa-phone"></i>
Call Greenhouse
</a>
</div>
</div>
<div class="scroll-indicator">
EXPLORE
<div class="scroll-line"></div>
</div>
</section>
<!-- ================= ABOUT ================= -->
<section
class="profile"
id="about">
<div class="container">
<div class="profile-grid">
<div>
<div class="section-label">
Our Story
</div>
<h2 class="section-title">
Rooted in Family.<br>
Growing for You.
</h2>
<div class="profile-text">
<p>
Arona Road Greenhouse is a
<span class="highlight">
family-owned,
second-generation
garden center and greenhouse
</span>
located in New Stanton,
Pennsylvania.
</p>
<p>
Founded in 1984 and proudly
operated today by Matt and Sarah,
the greenhouse grows most of its
plants on-site with daily attention
from the family and team.
</p>
<p>
Open seasonally from late March
through the last Sunday of June,
Arona Road Greenhouse offers a
welcoming spring gardening
experience for gardeners of every
experience level.
</p>
<p>
The greenhouse has earned recognition
as the number one Best of the Best
Garden Center in Westmoreland County.
</p>
</div>
</div>
<div class="profile-card">
<i class="fa-solid fa-seedling"></i>
<h3>
More Than a Greenhouse
</h3>
<p>
The greenhouse is designed as a
destination where customers can slow
down, explore beautiful plants and
receive knowledgeable gardening guidance
from a welcoming team.
</p>
<br>
<p>
Seasonal events and workshops bring
the local gardening community together,
while gift cards provide another way to
share the greenhouse experience.
</p>
</div>
</div>
</div>
</section>
<!-- ================= INFORMATION ================= -->
<section class="info-section">
<div class="container">
<div class="cards">
<div class="info-card">
<i class="fa-solid fa-calendar-days"></i>
<h3>
Seasonal
</h3>
<p>
Open from late March through
the last Sunday of June.
</p>
</div>
<div class="info-card">
<i class="fa-solid fa-leaf"></i>
<h3>
Grown On-Site
</h3>
<p>
Most plants are grown at the
greenhouse with daily attention.
</p>
</div>
<div class="info-card">
<i class="fa-solid fa-award"></i>
<h3>
Best of the Best
</h3>
<p>
Recognized as the number one
Best of the Best Garden Center
in Westmoreland County.
</p>
</div>
<div class="info-card">
<i class="fa-solid fa-paw"></i>
<h3>
Pet Friendly
</h3>
<p>
Well-behaved, leashed pets
are welcome at the greenhouse.
</p>
</div>
</div>
</div>
</section>
<!-- ================= PLANTS ================= -->
<section
class="plants"
id="plants">
<div class="container">
<div class="section-label">
What We Grow
</div>
<h2 class="section-title">
Plants for Every Garden
</h2>
<div class="plant-grid">
<div class="plant">
<h3>
Annuals
</h3>
<p>
Bright, colorful seasonal plants
designed to bring immediate life
and color to your garden.
</p>
</div>
<div class="plant">
<h3>
Perennials
</h3>
<p>
Reliable plants that return year
after year and help create lasting
garden landscapes.
</p>
</div>
<div class="plant">
<h3>
Vegetables
</h3>
<p>
Healthy vegetable plants ready
to help Pennsylvania gardeners
grow their own food.
</p>
</div>
<div class="plant">
<h3>
Herbs
</h3>
<p>
Fresh herbs for kitchen gardens,
containers and outdoor growing spaces.
</p>
</div>
<div class="plant">
<h3>
Hanging Baskets
</h3>
<p>
Beautiful hanging baskets that add
color and texture to porches,
patios and entryways.
</p>
</div>
<div class="plant">
<h3>
Decorative Planters
</h3>
<p>
Ready-to-display combinations and
decorative planters designed to
make gardening easier.
</p>
</div>
</div>
</div>
</section>
<!-- ================= LOCATION ================= -->
<section
class="location"
id="location">
<div class="container">
<div class="section-label">
Find Us
</div>
<h2 class="section-title">
Visit Our Greenhouse
</h2>
<div class="map-layout">
<div class="location-info">
<h3>
Arona Road Greenhouse
</h3>
<div class="address-item">
<i class="fa-solid fa-location-dot"></i>
<div>
<strong>
Address
</strong>
<br>
752 Arona Rd<br>
New Stanton, PA 15672<br>
United States
</div>
</div>
<div class="address-item">
<i class="fa-solid fa-phone"></i>
<div>
<strong>
Phone
</strong>
<br>
<a href="tel:+17248248230">
+1 724-824-8230
</a>
</div>
</div>
<div class="address-item">
<i class="fa-solid fa-globe"></i>
<div>
<strong>
Website
</strong>
<br>
<a
href="https://www.aronaroadgreenhouse.com/"
target="_blank"
rel="noopener">
aronaroadgreenhouse.com
</a>
</div>
</div>
<a
href="https://share.google/7jabRA1vfTq9aSs6c"
target="_blank"
rel="noopener"
class="btn btn-primary">
<i class="fa-solid fa-map"></i>
Open Google Maps
</a>
</div>
<!-- Interactive USA map -->
<div id="map"></div>
</div>
</div>
</section>
<!-- ================= SOCIAL ================= -->
<section
class="social-section"
id="social">
<div class="container">
<div class="section-label">
Follow Along
</div>
<h2>
Grow With Arona
</h2>
<p>
Follow Arona Road Greenhouse for plants,
gardening inspiration, seasonal updates,
events and greenhouse life.
</p>
<div class="social-links">
<a
href="https://www.tiktok.com/@growwitharona"
target="_blank"
rel="noopener"
class="social-link"
aria-label="TikTok">
<i class="fa-brands fa-tiktok"></i>
</a>
<a
href="https://www.youtube.com/channel/UC7_gm9wE63Yr2TyQHlvejCg"
target="_blank"
rel="noopener"
class="social-link"
aria-label="YouTube">
<i class="fa-brands fa-youtube"></i>
</a>
<a
href="https://www.facebook.com/aronaroadgreenhouse"
target="_blank"
rel="noopener"
class="social-link"
aria-label="Facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a
href="https://www.instagram.com/aronaroadgreenhouse/"
target="_blank"
rel="noopener"
class="social-link"
aria-label="Instagram">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</section>
<!-- ================= FOOTER ================= -->
<footer>
<img
src="https://static.wixstatic.com/media/1954ba_18e88081e36b414eb601206eaf5ad5e0~mv2.png/v1/crop/x_155,y_595,w_1213,h_338/fill/w_249,h_70,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ARG_Logo_onelinecolor.png"
class="footer-logo"
alt="Arona Road Greenhouse">
<p>
© 2026 Arona Road Greenhouse.
Family owned and growing since 1984.
</p>
</footer>
<!-- Leaflet -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Your JavaScript -->
<script src="script.js"></script>
</body>
</html>
/* =========================================
GLOBAL
========================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "DM Sans", sans-serif;
background: #07150d;
color: #fff;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
section {
position: relative;
overflow: hidden;
}
/* =========================================
HERO VIDEO
========================================= */
.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -5;
filter:
brightness(.45)
saturate(1.15);
}
.video-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(1,25,13,.85),
rgba(8,53,27,.45),
rgba(0,0,0,.75)
);
z-index: -4;
}
/* =========================================
FOREST GLOW
========================================= */
.forest-glow {
position: absolute;
width: 700px;
height: 700px;
border-radius: 50%;
background:
rgba(56,160,76,.12);
filter: blur(80px);
top: -250px;
left: -200px;
animation:
glowMove 8s
ease-in-out
infinite
alternate;
}
@keyframes glowMove {
from {
transform:
translate(0,0)
scale(1);
}
to {
transform:
translate(300px,200px)
scale(1.25);
}
}
/* =========================================
HEADER
ONLY HEADER COLOR CHANGED TO WHITE
========================================= */
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
padding: 12px 4%;
background: #ffffff;
border-bottom:
1px solid #e5e5e5;
box-shadow:
0 3px 15px
rgba(0,0,0,.08);
}
.navbar {
max-width: 1400px;
margin: auto;
display: flex;
align-items: center;
justify-content:
space-between;
}
/* =========================================
HOME ICON
========================================= */
.home-button {
width: 46px;
height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f1f7ef;
border:
1px solid #d8e7d2;
color: #174d29;
font-size: 19px;
transition: .3s;
}
.home-button:hover {
background: #174d29;
color: #ffffff;
transform:
scale(1.08);
}
/* =========================================
MOVING LOGO
========================================= */
.logo-wrapper {
position: absolute;
left: 50%;
transform:
translateX(-50%);
}
.logo {
width: 190px;
max-width: 35vw;
animation:
logoMove 4s
ease-in-out
infinite;
filter:
drop-shadow(
0 3px 8px
rgba(0,0,0,.15)
);
}
@keyframes logoMove {
0%,
100% {
transform:
translateX(-35px);
}
50% {
transform:
translateX(35px);
}
}
/* =========================================
NAVIGATION
========================================= */
.nav-links {
display: flex;
gap: 28px;
align-items: center;
}
.nav-links a {
position: relative;
font-size: 14px;
font-weight: 700;
color: #174d29;
opacity: 1;
transition: .3s;
}
.nav-links a:hover {
color: #65a84d;
}
/* =========================================
NAVIGATION UNDERLINE
========================================= */
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: 0;
height: 2px;
background: #65a84d;
transition:
width .3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* =========================================
SOCIAL RAIN
========================================= */
.social-rain {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 2;
}
.social-drop {
position: absolute;
top: -80px;
font-size: 25px;
opacity: .55;
animation:
socialRain
linear
infinite;
filter:
drop-shadow(
0 0 8px
rgba(255,255,255,.35)
);
}
@keyframes socialRain {
0% {
transform:
translateY(-100px)
rotate(0deg);
opacity: 0;
}
10% {
opacity: .7;
}
90% {
opacity: .7;
}
100% {
transform:
translateY(110vh)
rotate(360deg);
opacity: 0;
}
}
/* =========================================
HERO CONTENT
========================================= */
.hero-content {
max-width: 1050px;
text-align: center;
padding:
120px 25px 60px;
position: relative;
z-index: 5;
}
.eyebrow {
display: inline-block;
padding:
9px 18px;
border:
1px solid
rgba(255,255,255,.3);
background:
rgba(255,255,255,.08);
border-radius: 100px;
margin-bottom: 22px;
font-size: 13px;
letter-spacing: 2px;
text-transform:
uppercase;
}
.hero h1 {
font-family:
"Playfair Display",
serif;
font-size:
clamp(48px,8vw,100px);
line-height: .95;
margin-bottom: 25px;
text-shadow:
0 10px 30px
rgba(0,0,0,.6);
}
.hero h1 span {
color: #b9f49c;
}
.hero-description {
max-width: 760px;
margin: auto;
font-size: 18px;
line-height: 1.8;
color:
rgba(255,255,255,.9);
}
.hero-buttons {
margin-top: 35px;
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.btn {
padding:
15px 25px;
border-radius: 50px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 9px;
transition: .3s;
}
.btn-primary {
background: #b6ef99;
color: #092414;
}
.btn-primary:hover {
transform:
translateY(-5px);
box-shadow:
0 15px 30px
rgba(0,0,0,.3);
}
.btn-outline {
border:
1px solid
rgba(255,255,255,.4);
background:
rgba(255,255,255,.08);
}
.btn-outline:hover {
background: #fff;
color: #174d29;
}
/* =========================================
SCROLL INDICATOR
========================================= */
.scroll-indicator {
position: absolute;
bottom: 25px;
left: 50%;
transform:
translateX(-50%);
font-size: 12px;
letter-spacing: 2px;
opacity: .7;
z-index: 5;
}
.scroll-line {
width: 1px;
height: 45px;
margin:
10px auto 0;
background: #fff;
animation:
scrollLine
1.7s
infinite;
}
@keyframes scrollLine {
0% {
transform:
scaleY(0);
transform-origin:
top;
}
50% {
transform:
scaleY(1);
transform-origin:
top;
}
51% {
transform-origin:
bottom;
}
100% {
transform:
scaleY(0);
transform-origin:
bottom;
}
}
/* =========================================
COMMON
========================================= */
.container {
max-width: 1300px;
margin: auto;
}
.section-label {
color: #a8eb91;
text-transform:
uppercase;
letter-spacing: 3px;
font-size: 13px;
font-weight: 700;
margin-bottom: 15px;
}
.section-title {
font-family:
"Playfair Display",
serif;
font-size:
clamp(40px,5vw,65px);
margin-bottom: 25px;
}
/* =========================================
PROFILE
========================================= */
.profile {
padding: 120px 6%;
background:
linear-gradient(
rgba(5,28,15,.94),
rgba(3,18,10,.98)
);
}
.profile-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 70px;
align-items: center;
}
.profile-text {
color: #c8d7cc;
line-height: 1.9;
font-size: 16px;
}
.profile-text p {
margin-bottom: 20px;
}
.highlight {
color: #b7f09e;
font-weight: 700;
}
.profile-card {
padding: 40px;
border-radius: 30px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.1),
rgba(255,255,255,.025)
);
border:
1px solid
rgba(255,255,255,.12);
box-shadow:
0 30px 70px
rgba(0,0,0,.3);
}
.profile-card i {
font-size: 45px;
color: #a8eb91;
margin-bottom: 20px;
}
.profile-card h3 {
font-family:
"Playfair Display",
serif;
font-size: 28px;
margin-bottom: 15px;
}
.profile-card p {
color: #b9c9be;
line-height: 1.8;
}
/* =========================================
INFORMATION CARDS
========================================= */
.info-section {
padding:
80px 6% 120px;
background: #06160c;
}
.cards {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 20px;
}
.info-card {
padding:
30px 25px;
min-height: 220px;
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(37,101,55,.35),
rgba(255,255,255,.035)
);
border:
1px solid
rgba(255,255,255,.1);
transition: .4s;
}
.info-card:hover {
transform:
translateY(-10px);
border-color:
#a8eb91;
}
.info-card i {
font-size: 35px;
color: #b5f09e;
margin-bottom: 20px;
}
.info-card h3 {
font-size: 20px;
margin-bottom: 12px;
}
.info-card p {
color: #b8c8bd;
line-height: 1.6;
}
/* =========================================
PLANTS
========================================= */
.plants {
padding: 120px 6%;
background:
radial-gradient(
circle at top right,
rgba(72,140,77,.2),
transparent 35%
),
#0b2413;
}
.plant-grid {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 25px;
}
.plant {
position: relative;
min-height: 270px;
padding: 30px;
border-radius: 30px;
overflow: hidden;
background:
linear-gradient(
145deg,
rgba(70,135,74,.5),
rgba(0,0,0,.6)
);
border:
1px solid
rgba(255,255,255,.12);
transition: .4s;
}
.plant:hover {
transform:
scale(1.03);
}
.plant::before {
content: "
/* =========================================
USA MAP LOCATION POINTS
========================================= */
.usa-location-marker {
background: transparent;
border: none;
}
.usa-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffffff;
border: 3px solid #174d29;
box-shadow:
0 0 10px
rgba(174, 238, 147, .8);
}
/* =========================================
ACTIVE LOCATION
========================================= */
.usa-active-marker {
background: transparent;
border: none;
}
.usa-active-dot {
width: 26px;
height: 26px;
border-radius: 50%;
background: #a9ef91;
border: 4px solid #ffffff;
box-shadow:
0 0 0 8px
rgba(169,239,145,.25),
0 0 30px
rgba(169,239,145,.9);
animation:
usaMarkerPulse
.8s
infinite;
}
@keyframes usaMarkerPulse {
0% {
transform: scale(.75);
box-shadow:
0 0 0 0
rgba(169,239,145,.8);
}
50% {
transform: scale(1);
box-shadow:
0 0 0 12px
rgba(169,239,145,.25);
}
100% {
transform: scale(.75);
box-shadow:
0 0 0 20px
rgba(169,239,145,0);
}
}
