-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathweb-design.html
More file actions
429 lines (405 loc) · 22.4 KB
/
Copy pathweb-design.html
File metadata and controls
429 lines (405 loc) · 22.4 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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Design Services — Closing Concierge Co.</title>
<meta name="description" content="Custom websites for small businesses and bespoke property landing pages for real estate listings. Designed, built, and published in 10 days." />
<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:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<style>
.wd-founder-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(212,175,90,0.12);
border: 1px solid rgba(212,175,90,0.35);
padding: 8px 18px;
margin-bottom: 32px;
}
.wd-founder-badge span {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gold);
}
.wd-how { padding: 100px 48px; background: var(--offwhite); border-top: 1px solid var(--border); }
.wd-how-inner { max-width: 1000px; margin: 0 auto; }
.wd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 48px; }
.wd-step { background: var(--cream-box); border: 1px solid var(--border); padding: 36px 28px; transition: border-color 0.2s; }
.wd-step:hover { border-color: var(--gold); }
.wd-step-num { font-family: var(--font-display); font-size: 3rem; color: var(--gold); opacity: 0.3; line-height: 1; margin-bottom: 16px; }
.wd-step h4 { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); margin-bottom: 10px; }
.wd-step p { font-size: 0.82rem; color: var(--taupe); line-height: 1.65; }
/* ── PROPERTY LANDING PAGES ── */
.wd-property {
padding: 100px 48px;
background: var(--ink);
border-top: 1px solid rgba(191,167,106,0.2);
position: relative;
overflow: hidden;
}
.wd-property::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), var(--sage), transparent);
}
.wd-property-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.wd-property-left .section-eyebrow { color: var(--gold) !important; }
.wd-property-left .section-title { color: var(--offwhite); }
.wd-property-left p { font-size: 0.9rem; color: rgba(253,251,247,0.55); line-height: 1.85; margin-bottom: 16px; }
.wd-property-url {
display: inline-block;
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
color: var(--gold);
margin: 8px 0 24px;
letter-spacing: 0.02em;
}
.wd-property-right { display: flex; flex-direction: column; gap: 2px; }
.wd-prop-feature {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(191,167,106,0.15);
padding: 28px 32px;
transition: border-color 0.2s, background 0.2s;
}
.wd-prop-feature:hover { border-color: rgba(191,167,106,0.4); background: rgba(191,167,106,0.04); }
.wd-prop-feature-icon { color: var(--gold); font-size: 0.7rem; margin-bottom: 10px; }
.wd-prop-feature h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--offwhite); margin-bottom: 8px; }
.wd-prop-feature p { font-size: 0.82rem; color: rgba(253,251,247,0.45); line-height: 1.65; margin: 0; }
.wd-property-tiers {
max-width: 1100px;
margin: 60px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.wd-prop-tier { padding: 36px 40px; border: 1px solid rgba(191,167,106,0.18); }
.wd-prop-tier-label { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.wd-prop-tier h4 { font-family: var(--font-display); font-size: 1.4rem; color: var(--offwhite); margin-bottom: 12px; }
.wd-prop-tier p { font-size: 0.84rem; color: rgba(253,251,247,0.45); line-height: 1.75; margin-bottom: 20px; }
.wd-prop-tier-luxe { background: rgba(212,175,90,0.06); border-color: rgba(212,175,90,0.3); }
.wd-packages { padding: 100px 48px; background: var(--linen); border-top: 1px solid var(--border); }
.wd-packages-inner { max-width: 1100px; margin: 0 auto; }
.wd-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.wd-pkg { background: var(--offwhite); border: 1px solid var(--border); padding: 40px 32px; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.wd-pkg:hover { border-color: var(--gold); transform: translateY(-4px); }
.wd-pkg-featured { background: var(--ink); border-color: var(--gold); }
.wd-pkg-badge { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; }
.wd-pkg h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-bottom: 8px; }
.wd-pkg-featured h3 { color: var(--offwhite); }
.wd-pkg-sub { font-size: 0.75rem; color: var(--greige); margin-bottom: 28px; }
.wd-pkg-featured .wd-pkg-sub { color: rgba(253,251,247,0.4); }
.wd-pkg-list { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 32px; }
.wd-pkg-list li { font-size: 0.84rem; color: var(--taupe); padding-left: 16px; position: relative; line-height: 1.5; }
.wd-pkg-list li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: 0.55rem; top: 4px; }
.wd-pkg-featured .wd-pkg-list li { color: rgba(253,251,247,0.65); }
.wd-founder { margin-top: 60px; background: var(--ink); border: 1px solid rgba(191,167,106,0.3); padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.wd-founder-eyebrow { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; }
.wd-founder h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--offwhite); margin-bottom: 14px; }
.wd-founder p { font-size: 0.88rem; color: rgba(253,251,247,0.55); line-height: 1.75; max-width: 540px; }
.wd-founder-spots { display: flex; gap: 6px; margin-top: 20px; }
.wd-spot { width: 28px; height: 6px; background: var(--gold); }
.wd-spot.open { opacity: 0.25; }
.wd-founder-right { text-align: center; flex-shrink: 0; }
.wd-discount-num { font-family: var(--font-display); font-size: 5rem; color: var(--gold); line-height: 1; }
.wd-discount-label { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,251,247,0.4); margin-top: 6px; display: block; }
.wd-included { padding: 100px 48px; background: var(--cream-box); border-top: 1px solid var(--border); }
.wd-included-inner { max-width: 1000px; margin: 0 auto; }
.wd-included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.wd-inc-item { border-left: 2px solid var(--gold); padding-left: 20px; }
.wd-inc-item h4 { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); margin-bottom: 8px; }
.wd-inc-item p { font-size: 0.83rem; color: var(--taupe); line-height: 1.65; }
.wd-branding { background: var(--sand); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 48px; text-align: center; }
.wd-branding p { font-size: 0.85rem; color: var(--taupe); max-width: 680px; margin: 0 auto; line-height: 1.75; }
.wd-branding strong { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
.wd-how { padding: 60px 24px; }
.wd-steps { grid-template-columns: 1fr 1fr; }
.wd-property { padding: 60px 24px; }
.wd-property-inner { grid-template-columns: 1fr; gap: 48px; }
.wd-property-tiers { grid-template-columns: 1fr; }
.wd-packages { padding: 60px 24px; }
.wd-pkg-grid { grid-template-columns: 1fr; }
.wd-founder { grid-template-columns: 1fr; padding: 32px 24px; }
.wd-founder-right { text-align: left; }
.wd-included { padding: 60px 24px; }
.wd-included-grid { grid-template-columns: 1fr; }
.wd-branding { padding: 32px 24px; }
}
</style>
</head>
<body>
<nav class="nav" id="nav">
<a href="index.html" class="nav-logo">
<span class="logo-cc">CC</span>
<span class="logo-text">Closing Concierge Co.</span>
</a>
<button class="nav-toggle" id="navToggle" aria-label="Menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="navLinks">
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="luxe.html">Luxe Collection</a></li>
<li><a href="for-clients.html">For Clients</a></li>
<li><a href="web-design.html" class="active">Web Design</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html" class="nav-cta">Work With Us</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="page-hero">
<div class="page-hero-inner">
<div class="wd-founder-badge">
<span>✦ Now Accepting Clients</span>
</div>
<p class="hero-eyebrow">Web Design for Real Estate & Small Business</p>
<h1 class="page-hero-title">Your website.<br/><em>Live in 10 days.</em></h1>
<p class="page-hero-sub">Fully custom websites and bespoke property landing pages — designed, built, and published for your business or your listing. Domain secured. Copy written. Ready to work for you from day one.</p>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="wd-how">
<div class="wd-how-inner">
<p class="section-eyebrow">The Process</p>
<h2 class="section-title">Simple. Fast. Done right.</h2>
<div class="wd-steps">
<div class="wd-step">
<div class="wd-step-num">01</div>
<h4>You Share the Vision</h4>
<p>Tell us about your business or listing, your goals, and who you're trying to reach. Send over any logos, photos, or brand materials you have. No materials? We'll sort that too.</p>
</div>
<div class="wd-step">
<div class="wd-step-num">02</div>
<h4>We Handle Everything</h4>
<p>We secure your domain, design your site, write your copy, and build every page. You review. We refine. No technical knowledge required on your end.</p>
</div>
<div class="wd-step">
<div class="wd-step-num">03</div>
<h4>You Approve & We Launch</h4>
<p>Once you're happy, we publish. Your site goes live — mobile-optimized, fast, and ready to represent your business or your listing professionally from day one.</p>
</div>
<div class="wd-step">
<div class="wd-step-num">04</div>
<h4>You're Live</h4>
<p>Your new site is live within 10 days of your brief. Most agencies take 3–4 weeks minimum. We move faster because your business — and your listing — can't wait.</p>
</div>
</div>
</div>
</section>
<!-- PROPERTY LANDING PAGES -->
<section class="wd-property">
<div class="wd-property-inner">
<div class="wd-property-left">
<p class="section-eyebrow">For Real Estate Listings</p>
<h2 class="section-title">Bespoke Property Landing Pages</h2>
<p>Some listings deserve more than a line on MLS. For urgent showings, premium properties, and Luxe Collection listings, we build a dedicated property website — a private, immersive digital experience built exclusively for one home.</p>
<p>Your buyers receive a link. They land on something unforgettable.</p>
<span class="wd-property-url">e.g. www.26pinehurstdrive.com</span>
<p>A fully custom domain. A beautifully designed, mobile-optimized site. Sections that guide buyers through the property the way a great showing would — arrival, interior, outdoor living, lifestyle, neighbourhood. Editorial copy written to connect emotionally before the buyer ever walks through the door.</p>
<p>No competing listings. No distracting MLS interface. Just the property, presented at its absolute best.</p>
<a href="contact.html" class="btn-primary" style="margin-top: 8px; display: inline-block;">Inquire About a Property Page</a>
</div>
<div class="wd-property-right">
<div class="wd-prop-feature">
<div class="wd-prop-feature-icon">✦</div>
<h4>Custom Domain</h4>
<p>We register and set up a dedicated URL for your listing. Shareable, bookmarkable, and built to impress from the first click.</p>
</div>
<div class="wd-prop-feature">
<div class="wd-prop-feature-icon">✦</div>
<h4>Immersive Sections</h4>
<p>The Home. Curb Appeal. Interior Features. Outdoor Lifestyle. Location — each section structured to tell the complete story of the property with intention.</p>
</div>
<div class="wd-prop-feature">
<div class="wd-prop-feature-icon">✦</div>
<h4>Editorial Copywriting</h4>
<p>Every word written to move buyers emotionally — lifestyle-forward, specific to the property, and crafted to earn the showing.</p>
</div>
<div class="wd-prop-feature">
<div class="wd-prop-feature-icon">✦</div>
<h4>Mobile-Optimized</h4>
<p>Buyers scroll on their phones. Your listing page looks flawless on every screen — phone, tablet, and desktop.</p>
</div>
<div class="wd-prop-feature">
<div class="wd-prop-feature-icon">✦</div>
<h4>Hosted for Your Listing Period</h4>
<p>Live for the duration of your listing. Shareable in every showing, ad, and social post from the day it launches.</p>
</div>
</div>
</div>
<div class="wd-property-tiers">
<div class="wd-prop-tier">
<span class="wd-prop-tier-label">Standard Listing</span>
<h4>Property Landing Page</h4>
<p>Ideal for any listing where you want to go beyond MLS — lifestyle-forward copy, custom domain, immersive design, and a dedicated inquiry form. Perfect for properties approaching the premium tier, unique homes, or any listing with a story worth telling properly.</p>
<a href="contact.html" class="btn-primary" style="display: inline-block;">Request a Quote</a>
</div>
<div class="wd-prop-tier wd-prop-tier-luxe">
<span class="wd-prop-tier-label">✦ Luxe Collection</span>
<h4>Bespoke Property Showcase</h4>
<p>For properties $1M and above, the dedicated property website is included as a core part of the Luxe Collection engagement. White-glove design, editorial copy, and a bespoke digital showcase that matches the calibre of the listing — and the expectations of the buyer.</p>
<a href="luxe.html" class="btn-luxe-sm" style="display: inline-block; margin-top: 4px;">Learn About The Luxe Collection →</a>
</div>
</div>
</section>
<!-- SMALL BUSINESS PACKAGES -->
<section class="wd-packages">
<div class="wd-packages-inner">
<p class="section-eyebrow">Small Business Websites</p>
<h2 class="section-title">For every business that deserves a better online presence.</h2>
<div class="wd-pkg-grid">
<div class="wd-pkg">
<span class="wd-pkg-badge">Starter</span>
<h3>Essential</h3>
<p class="wd-pkg-sub">Perfect for service businesses, sole proprietors, and brand-new launches.</p>
<ul class="wd-pkg-list">
<li>Up to 5 pages</li>
<li>Custom domain secured & set up</li>
<li>Mobile-optimized design</li>
<li>Contact form integration</li>
<li>Strategic copy written for you</li>
<li>1 round of revisions</li>
<li>Live in 10 business days</li>
</ul>
<a href="contact.html" class="btn-primary">Request a Quote</a>
</div>
<div class="wd-pkg wd-pkg-featured">
<span class="wd-pkg-badge">Most Popular</span>
<h3>Signature</h3>
<p class="wd-pkg-sub">For established businesses ready to make a real impression online.</p>
<ul class="wd-pkg-list">
<li>Up to 10 pages</li>
<li>Custom domain secured & set up</li>
<li>Fully custom design — no templates</li>
<li>Mobile-optimized throughout</li>
<li>Strategic copy + brand voice</li>
<li>Logo & basic branding if needed</li>
<li>Contact form + social integration</li>
<li>2 rounds of revisions</li>
<li>Live in 10 business days</li>
</ul>
<a href="contact.html" class="btn-luxe-hero" style="text-align:center;">Request a Quote</a>
</div>
<div class="wd-pkg">
<span class="wd-pkg-badge">Premium</span>
<h3>Prestige</h3>
<p class="wd-pkg-sub">For businesses that want a complete brand and digital presence in one build.</p>
<ul class="wd-pkg-list">
<li>Up to 15 pages</li>
<li>Custom domain secured & set up</li>
<li>Full custom design & brand identity</li>
<li>Logo design included</li>
<li>Complete copywriting suite</li>
<li>Blog or portfolio setup</li>
<li>Mobile-optimized throughout</li>
<li>Contact form + all integrations</li>
<li>3 rounds of revisions</li>
<li>Priority build — live in 10 days</li>
</ul>
<a href="contact.html" class="btn-primary">Request a Quote</a>
</div>
</div>
<div class="wd-founder">
<div class="wd-founder-left">
<span class="wd-founder-eyebrow">✦ Founding Client Offer — First 5 Sites Only</span>
<h3>Get 20% off. Leave your mark on ours.</h3>
<p>We're launching this service and we want to build something we're proud of. The first five clients receive 20% off any package — in exchange, your site carries a small "Designed by Closing Concierge Co." credit in the footer for the life of the site. That's it. A great deal for you, a growing portfolio for us. Everyone wins.</p>
<div class="wd-founder-spots">
<div class="wd-spot open"></div>
<div class="wd-spot open"></div>
<div class="wd-spot open"></div>
<div class="wd-spot open"></div>
<div class="wd-spot open"></div>
</div>
<p style="font-size:0.75rem; color: rgba(253,251,247,0.3); margin-top:10px; letter-spacing:0.05em;">5 founding spots available · First come, first served</p>
</div>
<div class="wd-founder-right">
<div class="wd-discount-num">20%</div>
<span class="wd-discount-label">Off Any Package</span>
</div>
</div>
</div>
</section>
<!-- WHAT'S INCLUDED -->
<section class="wd-included">
<div class="wd-included-inner">
<p class="section-eyebrow">Every Build Includes</p>
<h2 class="section-title">You provide the vision. We handle the rest.</h2>
<div class="wd-included-grid">
<div class="wd-inc-item">
<h4>Domain Registration</h4>
<p>We research, secure, and set up your custom domain. Your business address on the web — sorted from day one.</p>
</div>
<div class="wd-inc-item">
<h4>Custom Design</h4>
<p>No templates. Every site is designed to reflect your brand, your audience, and what makes your business worth choosing.</p>
</div>
<div class="wd-inc-item">
<h4>Strategic Copywriting</h4>
<p>Every word is written to connect with your ideal customer and move them to action. Clear, confident, and on-brand.</p>
</div>
<div class="wd-inc-item">
<h4>Mobile Optimization</h4>
<p>Your site looks and performs beautifully on every device — phone, tablet, and desktop.</p>
</div>
<div class="wd-inc-item">
<h4>Logo & Branding</h4>
<p>Need a logo? We'll create one that fits. Have one already? We'll build around it. Either way, your site feels intentional.</p>
</div>
<div class="wd-inc-item">
<h4>Published & Live</h4>
<p>We handle hosting setup and launch. You don't touch a single line of code. You just show up to your own website going live.</p>
</div>
</div>
</div>
</section>
<!-- BRANDING NOTE -->
<div class="wd-branding">
<p><strong>A note on the founding client credit:</strong> Founding client sites carry a small "Designed by Closing Concierge Co." link in the site footer for the lifetime of the site. This is our only ask in exchange for the 20% discount. It's unobtrusive, professional, and helps us grow — just like your new website helps you.</p>
</div>
<!-- CTA -->
<section class="cta-section">
<div class="cta-inner">
<p class="cta-eyebrow">Every project is personal. Every quote is too.</p>
<h2 class="cta-title">Let's build something great.</h2>
<a href="contact.html" class="btn-primary">Get in Touch</a>
<p class="cta-email">Or email us directly: <a href="mailto:hello@closingconcierge.online">hello@closingconcierge.online</a></p>
</div>
</section>
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<span class="footer-logo-cc">CC</span>
<span class="footer-logo-text">Closing Concierge Co.</span>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="luxe.html">Luxe Collection</a>
<a href="for-clients.html">For Clients</a>
<a href="web-design.html">Web Design</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
</nav>
<p class="footer-contact"><a href="mailto:hello@closingconcierge.online">hello@closingconcierge.online</a></p>
<p class="footer-copy">© 2025 Closing Concierge Co. · In affiliation with MD Cleaning · All rights reserved.</p>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>