-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex_stable.html
More file actions
209 lines (193 loc) · 10.9 KB
/
index_stable.html
File metadata and controls
209 lines (193 loc) · 10.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wardo Studio</title>
<meta name="description"
content="Wardo Studio - A creative universe spanning Art, Culture, Gastronomy, Music, and Technology.">
<meta name="keywords" content="Wardo Studio, Portfolio, Art, Music, Technology, Gastronomy, Culture">
<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=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
<header class="site-header">
<div class="logo">
<img src="/images/WS-2D.svg" alt="Wardo Studio Icon" class="header-icon">
<img src="/images/WS-Lettering.svg" alt="Wardo Studio Lettering" class="header-logo-text-img">
</div>
<nav>
<a href="#explore">Explore Wardo Studio</a>
<a href="#universe">Our Universe</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-content">
<h1>WARDO STUDIO — CREATIVE UNIVERSE</h1>
<div class="hero-subtext">
<p>Amplifying the Human Experience through Tech, Art & Hospitality.</p>
<p>We don't create products. We design cultural ecosystems.</p>
</div>
</div>
<div class="marquee-container">
<!-- Line 1: Clockwise (Right) -->
<div class="marquee marquee-right">
<div class="marquee-content">
<span>Art</span><span>Culture</span><span>Gastronomy</span><span>Music</span><span>Technology</span><span>Hospitality</span><span>Software</span>
<span>Art</span><span>Culture</span><span>Gastronomy</span><span>Music</span><span>Technology</span><span>Hospitality</span><span>Software</span>
</div>
<div class="marquee-content" aria-hidden="true">
<span>Art</span><span>Culture</span><span>Gastronomy</span><span>Music</span><span>Technology</span><span>Hospitality</span><span>Software</span>
<span>Art</span><span>Culture</span><span>Gastronomy</span><span>Music</span><span>Technology</span><span>Hospitality</span><span>Software</span>
</div>
</div>
<!-- Line 2: Opposite (Left) -->
<div class="marquee marquee-left">
<div class="marquee-content">
<span>Innovation</span><span>Design</span><span>Experience</span><span>Taste</span><span>Sound</span><span>Feeling</span><span>Love</span><span>Elegance</span>
<span>Innovation</span><span>Design</span><span>Experience</span><span>Taste</span><span>Sound</span><span>Feeling</span><span>Love</span><span>Elegance</span>
</div>
<div class="marquee-content" aria-hidden="true">
<span>Innovation</span><span>Design</span><span>Experience</span><span>Taste</span><span>Sound</span><span>Feeling</span><span>Love</span><span>Elegance</span>
<span>Innovation</span><span>Design</span><span>Experience</span><span>Taste</span><span>Sound</span><span>Feeling</span><span>Love</span><span>Elegance</span>
</div>
</div>
</div>
</section>
<section id="explore" class="explore-section">
<div class="explore-content">
<div class="vision-mission">
<div class="vm-block">
<h2>Vision</h2>
<p>To redefine the boundaries of sensory experience, creating a world where art, technology,
and hospitality converge to elevate the human spirit.</p>
</div>
<div class="vm-block">
<h2>Mission</h2>
<p>We design cultural ecosystems that inspire connection and wonder. Through meticulous
craftsmanship and innovative thinking, we build spaces and moments that resonate on a
deeper frequency.</p>
</div>
</div>
<div class="founder-bio">
<h2>The Founder</h2>
<div class="bio-content">
<div class="bio-text">
<h3>Wardo</h3>
<p>A visionary creator bridging the gap between the digital and physical worlds. With
over 15 years of experience in music, technology, and hospitality, Wardo curates
experiences that are as intellectual as they are visceral.</p>
</div>
</div>
</div>
<div class="philosophy-block">
<div class="philosophy-header">
<h2>OUR PHILOSOPHY</h2>
<p class="subtitle">Seven principles that guide us</p>
<p class="description">The foundation of every decision, project, and partnership</p>
</div>
<div class="principles-grid">
<div class="principle-item">
<h3>Visionary</h3>
<p>We see beyond the present, building for tomorrow.</p>
</div>
<div class="principle-item">
<h3>Creative</h3>
<p>Innovation is our language, disruption our method.</p>
</div>
<div class="principle-item">
<h3>Tech + Art</h3>
<p>Where technology amplifies artistic expression.</p>
</div>
<div class="principle-item">
<h3>Elegant</h3>
<p>Sophistication in execution, refinement in every detail.</p>
</div>
<div class="principle-item">
<h3>Minimalist</h3>
<p>Clarity over complexity. Every element serves a purpose.</p>
</div>
<div class="principle-item">
<h3>Precise</h3>
<p>Execution matters. Strategy meets flawless delivery.</p>
</div>
<div class="principle-item">
<h3>Global</h3>
<p>From Costa Rica to the world, culture knows no borders.</p>
</div>
</div>
</div>
</div>
</section>
<section id="universe" class="projects-section">
<div class="section-header">
<h2>Our Universe</h2>
<p>(2024 — 2025)</p>
</div>
<div class="project-grid">
<!-- Tech (Green) -->
<article class="project-card card-tech">
<div class="card-image placeholder"></div>
<div class="card-info">
<h3>Tech</h3>
<p>Software, apps, and smart systems that power creativity and operations.</p>
<a href="#" class="project-btn">Enter Tech</a>
</div>
</article>
<!-- Media (Saffron) -->
<article class="project-card card-media">
<div class="card-image placeholder"></div>
<div class="card-info">
<h3>Media</h3>
<p>Branding, storytelling, and audiovisual marketing applied to experiences.</p>
<a href="#" class="project-btn">Enter Media</a>
</div>
</article>
<!-- Music / Art (Indigo) -->
<article class="project-card card-music">
<div class="card-image placeholder"></div>
<div class="card-info">
<h3>Music / Art</h3>
<p>DJ residencies, production, and TamaBeats academy. Sound as a physical force.</p>
<a href="#" class="project-btn">Enter Music</a>
</div>
</article>
<!-- Hospitality (Burgundy) -->
<article class="project-card card-hospitality">
<div class="card-image placeholder"></div>
<div class="card-info">
<h3>Hospitality</h3>
<p>El Garito Playground, events, and gastronomic concepts. Culture you can taste.</p>
<a href="#" class="project-btn">Enter Hospitality</a>
</div>
</article>
</div>
</section>
</main>
<footer class="creative-footer">
<div class="footer-content">
<h2>WARDO STUDIO</h2>
<p class="footer-tagline">The Creative Operating System</p>
<div class="footer-links" style="margin-bottom: 4rem;">
<a href="mailto:business@wardostudio.com" class="cta-button">Business Inquiries</a>
</div>
<div class="footer-bottom">
<div class="social-links">
<a href="https://instagram.com/wardo.cr" target="_blank">@wardo.cr</a>
<a href="https://instagram.com/chilijunglecr" target="_blank">@chilijunglecr</a>
<a href="https://instagram.com/garitoplayground" target="_blank">@garitoplayground</a>
</div>
<p class="copyright">© 2025 Wardo Studio. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>