KH Creative – Digital Marketing & Creative Studio | Columbia, MD
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
–primary: #00ffaa;
–teal: #00e5ff;
–neon-blue: #00a8ff;
–neon-pink: #ff00ff;
–neon-purple: #b366ff;
–dark: #0a0a0a;
–dark-gray: #141414;
–light: #ffffff;
–gray: #999999;
–section-padding: 120px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, sans-serif;
line-height: 1.6;
color: var(–light);
background: var(–dark);
overflow-x: hidden;
cursor: none;
}
/* Custom Cursor */
.cursor {
width: 20px;
height: 20px;
border: 2px solid var(–primary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: all 0.1s ease;
mix-blend-mode: difference;
}
.cursor-follower {
width: 40px;
height: 40px;
background: rgba(0, 255, 170, 0.1);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9998;
transition: all 0.3s ease;
}
.cursor.hover {
transform: scale(2);
background: var(–teal);
opacity: 0.5;
}
/* Navigation */
nav {
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
padding: 30px 0;
transition: all 0.3s ease;
}
nav.scrolled {
padding: 15px 0;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(20px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: 900;
color: var(–light);
text-decoration: none;
letter-spacing: -0.5px;
transition: all 0.3s ease;
}
.logo:hover {
color: var(–primary);
transform: scale(1.05);
}
.nav-links {
display: flex;
gap: 40px;
list-style: none;
}
.nav-links a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-weight: 500;
font-size: 15px;
transition: all 0.3s ease;
position: relative;
}
.nav-links a::after {
content: ”;
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(–primary);
transition: width 0.3s ease;
}
.nav-links a:hover {
color: var(–primary);
}
.nav-links a:hover::after {
width: 100%;
}
.menu-toggle {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
.menu-toggle span {
width: 25px;
height: 2px;
background: var(–light);
transition: all 0.3s ease;
}
/* Hero Section with AI-style Video Background */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: var(–dark);
overflow: hidden;
}
/* Animated Background – Assembly Global Style */
.video-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
opacity: 0.6;
}
/* Simulated AI Video Background with CSS */
.ai-video-bg {
position: absolute;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
background:
radial-gradient(circle at 20% 50%, rgba(0, 255, 170, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(0, 229, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 70%, rgba(179, 102, 255, 0.1) 0%, transparent 50%);
animation: morphing 20s ease-in-out infinite;
}
@keyframes morphing {
0%, 100% {
filter: blur(40px) brightness(1);
transform: scale(1) rotate(0deg);
}
33% {
filter: blur(50px) brightness(1.1);
transform: scale(1.1) rotate(120deg);
}
66% {
filter: blur(45px) brightness(0.9);
transform: scale(0.95) rotate(240deg);
}
}
/* Floating Light Particles */
.particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(–primary);
border-radius: 50%;
opacity: 0;
animation: float-particle 15s infinite linear;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; background: var(–teal); }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; background: var(–primary); }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; background: var(–neon-blue); }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; background: var(–neon-pink); }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; background: var(–neon-purple); }
.particle:nth-child(6) { left: 60%; animation-delay: 10s; background: var(–primary); }
.particle:nth-child(7) { left: 70%; animation-delay: 12s; background: var(–teal); }
.particle:nth-child(8) { left: 80%; animation-delay: 14s; background: var(–neon-blue); }
.particle:nth-child(9) { left: 90%; animation-delay: 16s; background: var(–neon-pink); }
@keyframes float-particle {
0% {
transform: translateY(100vh) scale(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) scale(1);
opacity: 0;
}
}
/* Grid overlay like Assembly */
.grid-overlay {
position: absolute;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
background-size: 100px 100px;
z-index: 1;
opacity: 0.5;
}
.hero-content {
text-align: center;
z-index: 2;
position: relative;
padding: 0 20px;
max-width: 1200px;
}
.hero h1 {
font-size: clamp(3.5rem, 11vw, 8rem);
font-weight: 900;
line-height: 0.85;
margin-bottom: 30px;
letter-spacing: -4px;
opacity: 0;
animation: fadeInUp 1s ease forwards;
color: var(–light);
text-transform: uppercase;
}
.hero h1 .gradient-text {
background: linear-gradient(135deg, var(–primary) 0%, var(–teal) 25%, var(–neon-blue) 50%, var(–neon-purple) 75%, var(–neon-pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.hero .tagline {
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
color: rgba(255, 255, 255, 0.8);
margin-bottom: 50px;
opacity: 0;
animation: fadeInUp 1s ease 0.2s forwards;
font-weight: 400;
letter-spacing: 0.5px;
}
.hero-buttons {
display: flex;
gap: 25px;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
animation: fadeInUp 1s ease 0.4s forwards;
}
.btn {
padding: 18px 45px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: linear-gradient(135deg, var(–primary), var(–teal));
color: var(–dark);
}
.btn-primary::before {
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 20px 40px rgba(0, 255, 170, 0.3);
}
.btn-outline {
background: transparent;
color: var(–light);
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(–primary);
transform: translateY(-3px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
from {
opacity: 0;
transform: translateY(30px);
}
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
opacity: 0;
animation: fadeInUp 1s ease 0.6s forwards;
}
.scroll-indicator span {
display: block;
width: 30px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
position: relative;
}
.scroll-indicator span::before {
content: ”;
position: absolute;
top: 10px;
left: 50%;
width: 4px;
height: 10px;
background: var(–primary);
border-radius: 2px;
transform: translateX(-50%);
animation: scroll 2s infinite;
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
}
/* Digital Marketing Services Section – Priority Placement */
.digital-services {
padding: var(–section-padding) 40px;
background: linear-gradient(180deg, var(–dark) 0%, var(–dark-gray) 100%);
position: relative;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 80px;
}
.section-header h2 {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-bottom: 20px;
font-weight: 900;
color: var(–light);
text-transform: uppercase;
letter-spacing: -2px;
}
.section-header .highlight {
background: linear-gradient(135deg, var(–primary), var(–teal));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-header p {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.7);
max-width: 700px;
margin: 0 auto;
}
/* Bento Grid for Digital Services */
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 280px;
gap: 20px;
margin-top: 60px;
}
.bento-item {
background: linear-gradient(135deg, rgba(0, 255, 170, 0.05), rgba(0, 229, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 30px;
padding: 40px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
}
.bento-item::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at var(–mouse-x, 50%) var(–mouse-y, 50%), rgba(0, 255, 170, 0.1), transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.bento-item:hover::before {
opacity: 1;
}
.bento-item:hover {
transform: translateY(-5px);
border-color: var(–primary);
box-shadow: 0 20px 40px rgba(0, 255, 170, 0.15);
background: linear-gradient(135deg, rgba(0, 255, 170, 0.08), rgba(0, 229, 255, 0.04));
}
.bento-item.large {
grid-column: span 2;
grid-row: span 2;
}
.bento-item.wide {
grid-column: span 2;
}
.bento-item.tall {
grid-row: span 2;
}
.bento-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.bento-item h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: var(–light);
}
.bento-item p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
.bento-stats {
display: flex;
gap: 40px;
margin-top: 30px;
}
.stat {
text-align: left;
}
.stat-number {
font-size: 2.5rem;
font-weight: 900;
background: linear-gradient(135deg, var(–primary), var(–teal));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Creative Services Section – Secondary Placement */
.creative-services {
padding: var(–section-padding) 40px;
background: var(–dark);
position: relative;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 60px;
}
.service-card {
background: linear-gradient(135deg, rgba(179, 102, 255, 0.05), rgba(255, 0, 255, 0.03));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 30px;
padding: 40px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
}
.service-card:hover {
transform: translateY(-10px);
border-color: var(–neon-purple);
box-shadow: 0 20px 40px rgba(179, 102, 255, 0.2);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(–neon-purple), var(–neon-pink));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 24px;
color: var(–light);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(–light);
}
.service-card p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
margin-bottom: 20px;
}
.service-features {
list-style: none;
color: rgba(255, 255, 255, 0.7);
}
.service-features li {
padding: 8px 0;
padding-left: 25px;
position: relative;
}
.service-features li::before {
content: ‘→’;
position: absolute;
left: 0;
color: var(–primary);
font-weight: bold;
}
/* Portfolio Section */
.portfolio {
padding: var(–section-padding) 40px;
background: var(–dark-gray);
position: relative;
overflow: hidden;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
margin-top: 60px;
}
.portfolio-item {
position: relative;
border-radius: 20px;
overflow: hidden;
height: 400px;
cursor: pointer;
background: #1a1a1a;
transition: all 0.5s ease;
}
.portfolio-item::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 255, 170, 0.8), rgba(0, 229, 255, 0.8));
opacity: 0;
transition: opacity 0.5s ease;
z-index: 1;
}
.portfolio-item:hover::before {
opacity: 0.9;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.portfolio-item:hover img {
transform: scale(1.2);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 2;
opacity: 0;
transition: opacity 0.5s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-info h3 {
color: var(–dark);
font-size: 2rem;
font-weight: 900;
margin-bottom: 10px;
transform: translateY(20px);
transition: transform 0.5s ease;
}
.portfolio-item:hover .portfolio-info h3 {
transform: translateY(0);
}
.portfolio-info p {
color: rgba(10, 10, 10, 0.8);
font-weight: 600;
transform: translateY(20px);
transition: transform 0.5s ease 0.1s;
}
.portfolio-item:hover .portfolio-info p {
transform: translateY(0);
}
.portfolio-metrics {
display: flex;
gap: 20px;
margin-top: 20px;
transform: translateY(20px);
transition: transform 0.5s ease 0.2s;
}
.portfolio-item:hover .portfolio-metrics {
transform: translateY(0);
}
.metric {
display: flex;
align-items: center;
gap: 8px;
color: var(–dark);
font-weight: 700;
background: rgba(255, 255, 255, 0.9);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
}
/* Stats Section */
.stats {
padding: 80px 40px;
background: linear-gradient(135deg, var(–dark) 0%, var(–dark-gray) 100%);
color: var(–light);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
text-align: center;
max-width: 1200px;
margin: 0 auto;
}
.stat-item h3 {
font-size: 3rem;
font-weight: 900;
background: linear-gradient(135deg, var(–primary), var(–teal));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.stat-item p {
font-size: 1.1rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
/* About Section */
.about {
padding: var(–section-padding) 40px;
background: var(–dark);
position: relative;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-text h2 {
font-size: 3rem;
margin-bottom: 30px;
background: linear-gradient(135deg, var(–light), var(–primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-text p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
margin-bottom: 20px;
font-size: 1.1rem;
}
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 30px;
padding: 40px;
margin-top: 40px;
}
.glass-card h3 {
color: var(–primary);
margin-bottom: 20px;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.skill-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.8);
}
.skill-item::before {
content: ‘⚡’;
color: var(–teal);
font-size: 1.2rem;
}
/* CTA Section */
.cta {
padding: 120px 40px;
background: linear-gradient(135deg, var(–dark-gray), var(–dark));
text-align: center;
position: relative;
overflow: hidden;
}
.cta::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 50%, rgba(0, 255, 170, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 50%, rgba(179, 102, 255, 0.1) 0%, transparent 50%);
animation: pulse-bg 4s ease-in-out infinite;
}
@keyframes pulse-bg {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.cta-content {
position: relative;
z-index: 1;
}
.cta h2 {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-bottom: 20px;
font-weight: 900;
color: var(–light);
}
.cta p {
font-size: 1.4rem;
margin-bottom: 40px;
opacity: 0.9;
color: rgba(255, 255, 255, 0.8);
}
/* Footer */
footer {
padding: 80px 40px 40px;
background: #050505;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}
.footer-brand h3 {
font-size: 2rem;
color: var(–primary);
margin-bottom: 20px;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
}
.footer-links h4 {
margin-bottom: 25px;
color: var(–light);
font-size: 1.1rem;
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 15px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.footer-links a:hover {
color: var(–primary);
padding-left: 10px;
}
.footer-bottom {
max-width: 1400px;
margin: 0 auto;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.social-links {
display: flex;
gap: 20px;
}
.social-links a {
width: 45px;
height: 45px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(–light);
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(–primary);
border-color: var(–primary);
color: var(–dark);
transform: translateY(-5px) rotate(360deg);
}
/* Mobile Responsive */
@media (max-width: 768px) {
body {
cursor: auto;
}
.cursor, .cursor-follower {
display: none;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(10, 10, 10, 0.98);
flex-direction: column;
padding: 30px;
gap: 20px;
}
.nav-links.active {
display: flex;
}
.menu-toggle {
display: flex;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.bento-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.bento-item.large,
.bento-item.wide,
.bento-item.tall {
grid-column: span 1;
grid-row: span 1;
}
.about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.footer-bottom {
flex-direction: column;
gap: 30px;
text-align: center;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: clamp(2.5rem, 8vw, 4rem);
}
}
/* Loading Animation */
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(–dark);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}
.loader.hidden {
opacity: 0;
pointer-events: none;
}
.loader-text {
font-size: 4rem;
font-weight: 900;
background: linear-gradient(135deg, var(–primary), var(–teal));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
Visual Storytelling
That Converts
Digital Marketing, Photography, Video & Creative Production for Brands That Move Fast
Digital Marketing Services
Data-driven strategies that accelerate growth and maximize ROI
Marketplace Marketing
Dominate Amazon, Walmart, and emerging marketplaces with optimized listings, PPC campaigns, and conversion strategies that drive sales.
Performance Marketing
Multi-channel paid media campaigns across Google, Meta, TikTok, and programmatic platforms. Real-time optimization for maximum impact.
AI & Automation
Custom marketing automation, predictive analytics, and AI-powered optimization. Scale faster with intelligent systems.
SEO & Content
Technical SEO, content strategy, and link building that drives organic growth.
Social Commerce
Shoppable experiences across TikTok Shop, Instagram, and Meta commerce.
Conversion Optimization
Landing pages, A/B testing, and UX improvements that turn traffic into revenue.
Creative Production
Stunning visuals that tell your story and drive engagement
Commercial Photography
Product photography, lifestyle shoots, and brand imagery that converts browsers into buyers.
- E-commerce Photography
- Lifestyle & Brand Shoots
- 360° Product Views
- Amazon & Marketplace Assets
Video Production
From social-first content to brand films, we create videos that capture attention and communicate value.
- Product Demos & Tutorials
- Social Media Content
- Brand Stories
- Motion Graphics
Content Creation
Consistent, on-brand content that keeps your channels fresh and your audience engaged.
- Social Media Assets
- Email Campaigns
- Display Advertising
- Influencer Content
Work That Works
Real results for ambitious brands
$10M+
Revenue Generated
150+
Brands Launched
10+
Years Experience
5x
Average ROAS
Where Data Meets Design
Based in Columbia, Maryland, KH Creative bridges the gap between analytical marketing and creative storytelling. We started as photographers who loved data, evolved into marketers who never forgot the power of a compelling visual.
Our unique position allows us to see opportunities others miss—whether that’s crafting campaigns that resonate emotionally while converting technically, or building marketplace strategies backed by stunning creative assets.
We specialize in marketplace marketing, helping brands dominate on Amazon, Walmart, and emerging platforms through data-driven strategies and scroll-stopping creative.
Our Expertise
// Loading Screen
window.addEventListener(‘load’, () => {
setTimeout(() => {
document.getElementById(‘loader’).classList.add(‘hidden’);
}, 1000);
});
// Custom Cursor
const cursor = document.getElementById(‘cursor’);
const cursorFollower = document.getElementById(‘cursorFollower’);
document.addEventListener(‘mousemove’, (e) => {
cursor.style.left = e.clientX + ‘px’;
cursor.style.top = e.clientY + ‘px’;
setTimeout(() => {
cursorFollower.style.left = e.clientX – 10 + ‘px’;
cursorFollower.style.top = e.clientY – 10 + ‘px’;
}, 100);
});
// Add hover effect to interactive elements
const interactiveElements = document.querySelectorAll(‘a, button, .bento-item, .portfolio-item, .service-card’);
interactiveElements.forEach(el => {
el.addEventListener(‘mouseenter’, () => cursor.classList.add(‘hover’));
el.addEventListener(‘mouseleave’, () => cursor.classList.remove(‘hover’));
});
// Navigation scroll effect
window.addEventListener(‘scroll’, function() {
const navbar = document.getElementById(‘navbar’);
if (window.scrollY > 50) {
navbar.classList.add(‘scrolled’);
} else {
navbar.classList.remove(‘scrolled’);
}
});
// Mobile menu toggle
const menuToggle = document.getElementById(‘menuToggle’);
const navLinks = document.getElementById(‘navLinks’);
menuToggle.addEventListener(‘click’, function() {
menuToggle.classList.toggle(‘active’);
navLinks.classList.toggle(‘active’);
});
// Smooth scrolling
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute(‘href’));
if (target) {
target.scrollIntoView({
behavior: ‘smooth’,
block: ‘start’
});
menuToggle.classList.remove(‘active’);
navLinks.classList.remove(‘active’);
}
});
});
// Bento grid mouse tracking
const bentoItems = document.querySelectorAll(‘.bento-item’);
bentoItems.forEach(item => {
item.addEventListener(‘mousemove’, (e) => {
const rect = item.getBoundingClientRect();
const x = ((e.clientX – rect.left) / rect.width) * 100;
const y = ((e.clientY – rect.top) / rect.height) * 100;
item.style.setProperty(‘–mouse-x’, x + ‘%’);
item.style.setProperty(‘–mouse-y’, y + ‘%’);
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: ‘0px 0px -50px 0px’
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = ‘1’;
entry.target.style.transform = ‘translateY(0)’;
}
});
}, observerOptions);
// Observe elements
document.querySelectorAll(‘.bento-item, .portfolio-item, .service-card’).forEach(el => {
el.style.opacity = ‘0’;
el.style.transform = ‘translateY(30px)’;
el.style.transition = ‘all 0.8s cubic-bezier(0.4, 0, 0.2, 1)’;
observer.observe(el);
});
// Parallax effect on scroll for background
window.addEventListener(‘scroll’, () => {
const scrolled = window.pageYOffset;
const aiVideoBg = document.querySelector(‘.ai-video-bg’);
if (aiVideoBg && scrolled {
particles.forEach((particle, index) => {
const colors = [‘var(–primary)’, ‘var(–teal)’, ‘var(–neon-blue)’, ‘var(–neon-pink)’, ‘var(–neon-purple)’];
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
});
}, 3000);
KH Photography 