-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
266 lines (266 loc) · 22.7 KB
/
index.html
File metadata and controls
266 lines (266 loc) · 22.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Primary Meta Tags -->
<title>Web Design for Heavy Metal Bands, Artists, and the Industry.</title>
<meta name="title" content="Web Design for Heavy Metal Bands, Businesses, and Beyond."/>
<meta name="description" content="Web design services tailored to the unique needs of heavy metal bands, promoters, venues, and industry professionals. Get a website that is as metal as you are."/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://metalmorphosis.design/"/>
<meta property="og:title" content="Web Design for Heavy Metal Bands, Businesses, and Beyond."/>
<meta property="og:description" content="Web design services tailored to the unique needs of heavy metal bands, promoters, venues, and industry professionals. Get a website that is as metal as you are."/>
<meta property="og:image" content="https://metalmorphosis.design/assets/metalmorphosis-social.png"/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://metalmorphosis.design/"/>
<meta property="twitter:title" content="Web Design for Heavy Metal Bands, Businesses, and Beyond."/>
<meta property="twitter:description" content="Web design services tailored to the unique needs of heavy metal bands, promoters, venues, and industry professionals. Get a website that is as metal as you are."/>
<meta property="twitter:image" content="https://metalmorphosis.design/metalmorphosis-social.png"/>
<!-- Meta Tags Generated with https://metatags.io -->
<!-- Bootstrap core CSS -->
<link href="bootstrap_theme/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="blocks.css">
<link href="style.css" rel="stylesheet">
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<nav class="bg-dark navbar navbar-expand-lg navbar-light py-lg-1 text-uppercase">
<div class="container"> <a class="fw-bold navbar-brand text-white" href="#" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">Metalmorphosis Design</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown-3" aria-controls="navbarNavDropdown-3" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNavDropdown-3">
<ul class="mb-2 mb-lg-0 ms-auto navbar-nav">
<li class="nav-item"> <a class="active nav-link px-lg-3 py-lg-4" aria-current="page" href="#" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">Home</a>
</li>
<li class="nav-item"> <a class="nav-link px-lg-3 py-lg-4" href="#services" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">Services</a>
</li>
<li class="nav-item"> <a class="nav-link px-lg-3 py-lg-4" href="#about" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">About</a>
</li>
<li class="nav-item"> <a class="nav-link px-lg-3 py-lg-4" href="#contact" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">Contact</a>
</li>
</ul>
<div class="ms-lg-3"><a class="btn btn-outline-light pb-3 pb-lg-2 pb-xl-3 pe-4 pe-lg-3 pe-xl-4 ps-4 ps-lg-3 ps-xl-4 pt-3 pt-lg-2 pt-xl-3 rounded-0" href="mailto:michael@metalmorphosis.design" style="font-family: 'Archivo Black', sans-serif;" target="_blank">Message Me</a>
</div>
</div>
</div>
</nav>
<section id="home" class="pb-3 pt-3 text-center">
<div class="container pb-3 pt-5">
<div class="pb-3 pt-5 row">
<img src="assets/metalmorphosis%20logo.png" class="img-fluid" alt="Metalmorphosis logo">
<div class="col-lg-11 col-xl-10 ms-auto me-auto pb-5 pt-3">
<h1 class="mb-3 text-dark">Unleash Your Metal Spirit: Website Design for Bands, Businesses, and Beyond.</h1>
<p class="lead mb-4 pt-4 pb-2">Welcome to Metalmorphosis Design, where the spirit of heavy metal and digital design innovation converge to create unparalleled web experiences for you.</p>
<a href="mailto:michael@metalmorphosis.design" class="btn btn-dark pb-3 pe-4 ps-4 pt-3 rounded-0 text-uppercase" style="font-family: 'Archivo Black', sans-serif;" target="_blank">Email Me Today!</a>
</div>
<img src="assets/metalmorphosis-header.webp" class="img-fluid pt-3" alt="Live crowd at a heavy metal concert">
</div>
</div>
</section>
<section class="pb-2 pt-3 text-center text-lg-start">
<div class="container pb-2 pt-4">
<div class="row">
<div class="col-12 col-lg-11 col-xl-10 pb-3 mx-auto">
<h2 class="text-center">Metalmorphosis Design: Why Choose Me For Your Web Design Needs?</h2>
</div>
</div>
<div class="align-items-center row">
<div class="col-lg-6 pb-3 pt-3">
<img src="assets/warcry-guitars-home.webp" class="img-fluid" alt="Warcry Guitar Store website landing page">
</div>
<div class="col-lg-6 text-start pb-3 pt-3">
<div class="pb-3 pt-3">
<p>At Metalmorphosis Design, I am driven by a deep love for the heavy metal culture – its powerful music, rich symbolism, and tight-knit community. "Metalmorphosis" represents my commitment to transforming your vision into a digital presence that authentically captures the endearing spirit and energy of heavy metal.</p>
<p>I specialise in crafting custom website designs that cater precisely to the needs of heavy metal bands, promoters, venues, and industry professionals. Through close collaboration, I will develop a website that looks spectacular while providing the essential features to support your goals and consistently engage your audience. Blending heavy metal passion with technical expertise, I ensure your online presence makes a powerful impact and drives results</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6 pb-2 pt-2">
<img src="assets/genetic-abberation-home-page.webp" class="img-fluid" alt="Geneteic Abberation website landing page">
</div>
<div class="col-md-6 pb-2 pt-2">
<img src="assets/bard.webp" class="img-fluid" alt="Bard website subscription form">
</div>
<div class="col-md-6 pb-2 pt-2">
<img src="assets/monsters-of-the-deep-home.webp" class="img-fluid" alt="Monsters of the Deep website landing page">
</div>
<div class="col-md-6 pb-2 pt-2">
<img src="assets/mpm-home.webp" class="img-fluid" alt="Mosh Pit Media website homepage">
</div>
</div>
<div class="row">
</div>
</div>
</section>
<section id="services" class="pb-5 pt-2 text-center">
<div class="container pb-4 pt-4">
<div class="row">
<div class="col-12 col-lg-11 col-xl-10 pb-3 mx-auto">
<h2 class="text-center">Services</h2>
<p class="lead text-start">As an experienced web designer, I specialise in creating custom websites, implementing SEO strategies, and developing compelling content marketing. My services are personally tailored to amplify your brand's online presence and drive measurable business results. Through a collaborative process, I craft digital experiences that resonate with your target audience while aligning with your unique vision and goals.</p>
</div>
</div>
<div class="align-items-center row">
<div class="col-md-6 pb-3 pt-3">
<img src="assets/astral-wiitches-home.webp" class="img-fluid" alt="Astral Wiitches link style website">
</div>
<div class="col-md-6 pb-3 pt-3">
<div class="pb-3 pt-3">
<h3 class="fw-bold h5">Custom Website Design:</h3>
<p class="text-start mb-0">At Metalmorphosis Design, I specialise in crafting custom web experiences that reflect the raw energy and unique aesthetic of heavy metal. I'll work closely with you to create a one-of-a-kind website that resonates with your brand and reflects the unique sound, style, and ethos of your music, events, or business. Whether you need a stunning band website, an electrifying venue platform, or a promoter's dream site, I'll create a mobile-friendly website that looks and functions perfectly on all devices, from desktops to smartphones to tablets. I can do either single landing pages or full page websites; whatever you need to achieve your marketing goals.</p>
</div>
</div>
</div>
<div class="align-items-center row">
<div class="col-md-6 order-md-2 pb-3 pt-3">
<img src="assets/resurrected-store.webp" class="img-fluid" alt="...The Resurrected t-shirt product page">
</div>
<div class="col-md-6 order-lg-1 pb-3 pt-3">
<div class="pb-3 pt-3">
<h3 class="fw-bold h5">Search Engine Optimization:</h3>
<p class="fw-light text-start mb-0">At Metalmorphosis Design, I understand that ranking well in search engine results is essential for reaching your target audience and achieving your band and business goals. That's why I offer SEO services tailored to the unique needs of the heavy metal community. I will work with you to develop a custom SEO strategy that will help you improve your website's visibility and attract more fans, attendees, and clients to your metal endeavours to ensure that it ranks well for the keywords that your target audience is searching for. This includes any keyword research, on-page optimisation, link building, and technical SEO.</p>
</div>
</div>
</div>
<div class="align-items-center row">
<div class="col-md-6 pb-3 pt-3">
<img src="assets/blog-post.webp" class="img-fluid" alt="Blog post example">
</div>
<div class="col-md-6 pb-3 pt-3">
<div class="pb-3 pt-3">
<h3 class="fw-bold h5">Content Marketing:</h3>
<p class="fw-light text-start mb-0">Content is the amplifier of your brand. That's why I offer comprehensive content marketing services tailored to the unique needs of the heavy metal community. I will work with you to develop a custom content marketing strategy that will help you achieve your business goals. I'll create and distribute high-quality content that speaks to your target audience and engages them with your brand. Whether it's epic band stories, electrifying event promotions, or informative blog posts, I will create content that is relevant, valuable, and entertaining. This could include everything from blog posts, social media posts, e-books, and email newsletters.</p>
</div>
</div>
<div class="text-center mt-4">
<p class-"pt-5"> <a href="mailto:michael@metalmorphosis.design" class="btn btn-dark pb-3 pe-4 ps-4 pt-3 rounded-0 text-uppercase" style="font-family: 'Archivo Black', sans-serif;" target="_blank">Email Me Today!</a> </p>
</div>
</div>
</div>
</section>
<section class="mb-5 mt-5 newsletter-subscription pb-5">
<div class="container">
<div class="background-center-center justify-content-center row" style="background-image:url('assets/metalmorphosis-subscribe.webp');">
<div class="col-sm-11 col-md-8 col-lg-6 mb-5 mt-5 text-center text-dark" style="background-color: rgba(255, 255, 255, 0.7);">
<h2 class="mb-3 mt-2 text-dark">Stay Metal With My Exclusive Monthly Newsletter!</h2>
<p class="text-h3">Join the Metalmorphosis Design Insider Circle: Subscribe to my newsletter for exclusive access to cutting-edge web design insights, the latest in heavy metal trends, and unique content reserved especially for my subscribers.</p>
<form action="https://design.us21.list-manage.com/subscribe/post?u=48228ea723c38493dd8495f0f&id=7e3f6ac66a&f_id=008ee9e6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate="">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" name="EMAIL" class="required email rounded-0 mb-2" id="mce-EMAIL" required="" value="" placeholder="Enter your email address">
</div>
<div class="optionalParent">
<input type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-dark rounded-0" value="Sign Up">
</div>
</div>
</form>
<p class="small text-muted">Your email address is safe with me. <br> I will never share your email address. </p>
</div>
</div>
</div>
</section>
<section id="about" class="pb-4 pt-2 text-center">
<div class="container pb-4 pt-4">
<div class="row">
<div class="col-12 col-lg-11 col-xl-10 pb-3 mx-auto">
<h2 class="text-center">About Me</h2>
<p class="lead text-start">With over 35 years immersed in the heavy metal lifestyle, my passion extends beyond the music to its powerful soundscapes, distinctive visuals, and the unwavering dedication of its community. These elements fuel my creativity as a web designer, enabling me to now craft websites that authentically resonate with the genre’s spirit and energy.</p>
</div>
</div>
<div class="align-items-center row">
<div class="col-md-6 pb-3 pt-3">
<img src="assets/mutiny-home.webp" class="img-fluid" alt="Mutiny website homepage">
</div>
<div class="col-md-6 pb-3 pt-3">
<div class="pb-3 pt-3">
<p class="fw-light text-start mb-0">With an extensive career designing websites across various industries, I found my true calling when I combined my technical expertise with my genuine appreciation for heavy metal culture. Now, I'm committed to helping bands, promoters, labels, and businesses create impactful online presences that resonate with fellow fans and enthusiasts.</p>
</div>
</div>
</div>
<div class="align-items-center row">
<div class="col-md-6 order-md-2 pb-3 pt-3">
<img src="assets/bard-hero.webp" class="img-fluid" alt="Bard website homepage">
</div>
<div class="col-md-6 order-lg-1 pb-3 pt-3">
<div class="pb-3 pt-3">
<p class="fw-light text-start mb-0">Whether you're a band looking to showcase your music and merchandise, or a business seeking to strengthen your online brand presence, my web design services are crafted to meet your specific needs. Leveraging my deep understanding of the heavy metal genre, I build websites that effectively communicate your unique identity and connect with your audience. Together, we'll create an online presence that truly represents your passion for heavy metal.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="mb-5 mt-5 pt-1 pb-5">
<div class="container">
<div class="background-center-center justify-content-center row" style="background-image:url('assets/contact.webp');">
<div class="col-sm-11 col-md-8 col-lg-6 pb-5 pt-5 mb-5 mt-5 text-center text-dark" style="background-color: rgba(255, 255, 255, 0.7);">
<h2 class="mb-3 text-dark">Let's Talk Metal!</h2>
<p class="lead">Curious as to how how Metalmorphosis Design can rock your web presence?</p>
<p class="mb-3">I create killer websites for metal bands & businesses, but consultations aren't your thing? No sweat! Shoot me an email and tell me about your project. I'll send you some info on my packages and answer any questions you have. No pressure, no commitment, just awesome design info!</p>
<div class="text-center mt-4">
<p class-"pt-5"> <a href="mailto:michael@metalmorphosis.design" class="btn btn-dark pb-3 pe-4 ps-4 pt-3 rounded-0 text-uppercase" style="font-family: 'Archivo Black', sans-serif;" target="_blank">Email Me Today!</a> </p>
</div>
</div>
</div>
</div>
</section>
<section class="bg-dark">
<footer class="pt-4 pb-4 ">
<div class="container">
<div class="row text-center align-items-center">
<div class="col-12 col-lg-2 text-lg-start">
<a class="fw-bold navbar-brand text-white" href="#" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">Metalmorphosis Design</a>
</div>
<div class="col mt-4 mt-lg-0 text-center">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="privacy.html" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;" target="_blank">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="terms.html" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;" target="_blank">Terms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:michael@metalmorphosis.design" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;" target="_blank">Contact</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-2 mt-4 mt-lg-0 text-lg-right">
<a href="https://www.facebook.com/metalmorphosisdigital" class="text-decoration-none" target="_blank"> <i class="lni lni-facebook-fill text-white me-4"></i></a>
<a href="https://twitter.com/metalmorphdgtl" class="text-decoration-none" target="_blank"> <i class="lni lni-twitter-original me-4 text-decoration-none text-white"></i> </a>
<a href="https://www.instagram.com/metalmorphosisdigital/" target="_blank"> <i class="lni lni-instagram-original text-white me-4"></i> </a>
</div>
</div>
<div class="row mt-4">
<div class="small col text-center" style="font-family: 'Archivo Black', sans-serif; color: #ffffff;">
© 2023 Metalmorphosis Design. All Rights Reserved
</div>
</div>
</div>
</footer>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>