Repository navigation
Expand file tree
/
Copy pathservices.html
More file actions
163 lines (146 loc) · 5.86 KB
/
Copy pathservices.html
File metadata and controls
163 lines (146 loc) · 5.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Services — Markmix Digital</title>
<meta name="description" content="Web development, social media management, and tech consulting from Markmix Digital — a small, senior team handling every stage of the build.">
<meta name="theme-color" content="#0E1116">
<link rel="icon" href="https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/favicon-144.png">
<!-- Open Graph -->
<meta property="og:title" content="Services — Markmix Digital">
<meta property="og:description" content="Web development, social media management, and tech consulting, handled by one dedicated team.">
<meta property="og:type" content="website">
<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=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="wrap">
<a href="index.html" class="logo">
<span class="mark" aria-hidden="true"></span>
Markmix Digital
</a>
<ul class="navlinks" id="navlinks">
<li><a href="index.html">Home</a></li>
<li><a href="services.html" aria-current="page">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html" class="cta-btn">Start a project</a></li>
</ul>
<button class="navtoggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="navlinks">
<span></span><span></span><span></span>
</button>
</nav>
</header>
<main id="top">
<!-- PAGE HERO -->
<section class="page-hero">
<div class="wrap">
<p class="eyebrow">WHAT WE BUILD</p>
<h1>Services built for growth, not just launch day.</h1>
<p class="lead">Every engagement runs through the same small, senior team — no handoffs to strangers, no templates dressed up as custom work.</p>
</div>
</section>
<div class="wrap"><div class="divider"></div></div>
<!-- SERVICES -->
<section class="pad" id="services">
<div class="wrap">
<div class="services-grid">
<div class="svc reveal">
<span class="ch">CH.01</span>
<h3>Web Development</h3>
<p>Marketing sites, web apps and platforms, designed and engineered in-house from the first sketch to the last deploy.</p>
<ul>
<li>Custom design & build, no page builders</li>
<li>Performance and SEO baked in from day one</li>
<li>Ongoing maintenance & support</li>
</ul>
</div>
<div class="svc reveal">
<span class="ch">CH.02</span>
<h3>Social Media Management</h3>
<p>Content, scheduling and community management built around a growth plan, not just a posting calendar.</p>
<ul>
<li>Content planning & creation</li>
<li>Community & engagement management</li>
<li>Growth & performance reporting</li>
</ul>
</div>
<div class="svc reveal">
<span class="ch">CH.03</span>
<h3>Tech Consulting</h3>
<p>Practical guidance for teams figuring out what to build, what to buy, and what to skip entirely.</p>
<ul>
<li>Digital strategy & audits</li>
<li>Tool & stack selection</li>
<li>Roadmapping for non-technical teams</li>
</ul>
</div>
</div>
</div>
</section>
<div class="wrap"><div class="divider"></div></div>
<!-- PROCESS -->
<section class="pad" id="process">
<div class="wrap">
<div class="sec-head reveal">
<p class="eyebrow">HOW WE WORK</p>
<h2>From first brief to launch day.</h2>
<p>A straightforward four-stage process, whether we're shipping a website or a social strategy.</p>
</div>
<div class="process">
<div class="p-step reveal">
<span class="p-dot">01</span>
<h3>Discover</h3>
<p>We start by understanding your goals, audience and constraints before a single pixel or line of code.</p>
</div>
<div class="p-step reveal">
<span class="p-dot">02</span>
<h3>Design & Build</h3>
<p>Design and build happen together in short, visible cycles — you see progress, not just a final reveal.</p>
</div>
<div class="p-step reveal">
<span class="p-dot">03</span>
<h3>Launch</h3>
<p>We launch carefully: tested, optimised, and ready for real traffic from day one.</p>
</div>
<div class="p-step reveal">
<span class="p-dot">04</span>
<h3>Grow</h3>
<p>Ongoing support, maintenance and growth work keeps things improving well after launch day.</p>
</div>
</div>
</div>
</section>
<div class="wrap"><div class="divider"></div></div>
<!-- CTA BAND -->
<section class="pad">
<div class="wrap">
<div class="cta-band reveal">
<p class="eyebrow">GET STARTED</p>
<h2>Have a project in mind?</h2>
<p>Tell us what you're working on and we'll get back to you with next steps.</p>
<div class="hero-actions">
<a href="contact.html" class="cta-btn">Start a project →</a>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap footer-row">
<p>© 2026 Markmix Digital. All rights reserved.</p>
<div class="footer-links">
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
</div>
</footer>
<script src="script.js" defer></script>
</body>
</html>