-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
242 lines (242 loc) · 22.9 KB
/
index.html
File metadata and controls
242 lines (242 loc) · 22.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
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
<!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">
<!-- Primary Meta Tags -->
<title>Exploring The Art Of Heavy Metal-Design It. Discuss It. Wear It.</title>
<meta name="title" content="Exploring The Art Of Heavy Metal-Design It. Discuss It. Wear It."/>
<meta name="description" content="Metalmorphosis Digital unleashing digital services for heavy metal. Web design (metalmorphosis.design) + Blog celebrating heavy metal art (metalmorphosis.art)."/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://metalmorphosis.digital"/>
<meta property="og:title" content="Exploring The Art Of Heavy Metal-Design It. Discuss It. Wear It."/>
<meta property="og:description" content="Metalmorphosis Digital unleashing digital services for heavy metal. Web design (metalmorphosis.design) + Blog celebrating heavy metal art (metalmorphosis.art)."/>
<meta property="og:image" content="https://metalmorphosis.digital/assets/met-dig-social.png"/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://metalmorphosis.digital"/>
<meta property="twitter:title" content="Exploring The Art Of Heavy Metal-Design It. Discuss It. Wear It."/>
<meta property="twitter:description" content="Metalmorphosis Digital unleashing digital services for heavy metal. Web design (metalmorphosis.design) + Blog celebrating heavy metal art (metalmorphosis.art)."/>
<meta property="twitter:image" content="https://metalmorphosis.digital/assets/met-dig-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 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">
<div class="container"> <a class="fw-bold navbar-brand text-uppercase text-secondary" href="#" style="font-family: 'Archivo Black', sans-serif;">METALMORPHOSIS</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown-6" aria-controls="navbarNavDropdown-6" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNavDropdown-6">
<ul class="mb-2 mb-lg-0 me-auto ms-auto navbar-nav">
<li class="nav-item"> <a class="active nav-link px-lg-3 py-lg-4" aria-current="page" href="#home" style="font-family: 'Archivo Black', sans-serif; color: white;">HOME</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: white;">ABOUT</a>
</li>
<li class="nav-item"> <a class="nav-link px-lg-3 py-lg-4" href="#design" style="font-family: 'Archivo Black', sans-serif; color: white;">DESIGN</a>
</li>
<li class="nav-item"> <a class="nav-link px-lg-3 py-lg-4" href="#news" style="font-family: 'Archivo Black', sans-serif; color: white;">NEWS</a>
</li>
<li class="nav-item"> <a class="nav-link px-lg-3 py-lg-4" href="#deathwings" style="font-family: 'Archivo Black', sans-serif; color: white;">DEATHWINGS</a>
</li>
</ul>
<div class="ms-lg-3"><a class="btn btn-outline-secondary btn-secondary-outline pb-2 pe-4 ps-4 pt-2 rounded-0" href="mailto:michael@metalmorphosis.digital" style="font-family: 'Archivo Black', sans-serif; color: white;" target="_blank">CONTACT</a>
</div>
</div>
</div>
</nav>
<section id="home" class="background-cover bg-dark pb-5 pt-5 text-center text-white" style="background-image:url('assets/hades.webp');">
<div class="container pb-5 pt-5">
<div class="pb-5 pt-5 row">
<div class="col-lg-11 ms-auto me-auto">
<img src="assets/metalmorphosis-%20digital.png" class="img-fluid pb-3 pt-4" alt="Metalmorphosis Digital Logo">
<h1 class="fw-bolder mb-4 text-capitalize">Exploring the art Of heavy metal<br>Design It. Discuss It. Wear It.</h1>
<a href="mailto:michael@metalmorphosis.digital" class="btn btn-secondary pb-3 pe-4 ps-4 pt-3 rounded-0" target="_blank"><strong style="font-family: 'Archivo Black', sans-serif;">Get In Touch</strong></a>
</div>
</div>
</div>
</section>
<section id="about" class="bg-dark pb-5 pt-5">
<div class="container pb-4 pt-4">
<div class="align-items-center row">
<div class="col-lg-10 ms-auto me-auto">
<h2 class="text-center mb-3 text-capitalize text-white">Celebrating Heavy Metal's Art and Culture</h2>
<p class="fw-light lead mb-4 text-white">My passion for heavy metal began through my love of the distinctive artwork on album covers. As a lifelong fan, I've witnessed the genre's evolution – from its raw, energetic beginnings to the diverse subgenres that have emerged over the decades. This passion fuels Metalmorphosis Digital, a multi-faceted platform celebrating the art and culture of heavy metal.</p>
<p class="fw-light mb-4 text-white">Metalmorphosis Digital goes beyond offering custom web design services to help bands and businesses within the scene effectively showcase their unique identities. I also delve deeper into the world of heavy metal through:</p>
<ul class="list-unstyled">
<li class="mb-4 text-white"><strong>A curated newsletter:</strong> Exploring the rich tapestry of heavy metal art, from iconic album covers to the stories and people behind the visuals that have shaped the genre.
</li>
<li class="mb-4 text-white"><strong>A bold clothing line:</strong> Embodying the spirit of heavy metal with designs that let you wear your passion on your sleeve, well chest!
</li>
</ul>
<p class="fw-light mb-4 text-white">Metalmorphosis Digital is your one-stop shop for all things heavy metal. Join me as I champion the art and tradition of this incredible genre, helping fans and businesses alike showcase their unique style and stories in the digital realm.</p>
<p class="text-center mb-4 text-white"><strong>Design It. Discuss It. Wear It.</strong></p>
</div>
</div>
</div>
</section>
<section class="background-center-top background-cover bg-dark pb-5 pt-5 text-center text-white" style="background-image:url('assets/metalmorphosis-bg.webp');">
<div class="container pb-5 pt-5">
<div class="pb-5 pt-5 row">
<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
<h3 class="fw-bold mb-3 text-secondary">Metalmorphosis Design</h3>
</div>
</div>
</div>
</section>
<section id="design" class="bg-dark pb-5 pt-5">
<div class="container pb-4 pt-4">
<div class="align-items-center row pb-4">
<div class="col-lg-10 ms-auto me-auto">
<h2 class="mb-3 text-center text-capitalize text-white">Transforming Visions: Creating Your Unique Digital Experience</h2>
<p class="fw-light lead mb-4 text-white">At Metalmorphosis Design, I specialise in bringing visions to life by crafting custom websites that not only reflect your heavy metal brand but also communicate your message effectively. Whether you’re involved in the heavy metal scene as a band, artist, or business, I deliver visually appealing and strategically designed digital solutions that cater specifically to your needs.</p>
<h3 class="h4 mb-3 text-capitalize text-center text-white">My Expertise Includes:</h3>
<ul class="list-unstyled mb-3 text-white">
<li class="mb-4"><strong>Custom Design & Development:</strong> I build websites that are not only visually stunning but also fully functional, utilising popular CMS and advanced coding techniques.
</li>
<li class="mb-4">
<strong>E-Commerce Solutions:</strong> Ready to sell your merchandise? I craft user-friendly e-commerce platforms fully optimised for driving sales and providing a seamless shopping experience.
</li>
<li class="mb-4">
<strong>SEO [&] Content Marketing:</strong> Enhance your online visibility with our SEO services, and engage your audience with compelling content that effectively promotes your brand.
</li>
</ul>
<p class="fw-light mb-4 text-white">With Metalmorphosis Design's transformative approach, your vision will come to life in a way that truly resonates with your target audience and sets you apart in the digital landscape.</p>
</div>
</div>
<div class="row mt-4">
<div class="col-sm-6 col-lg-4 mb-3 mt-2">
<img src="assets/genetic-abberation-home-page.webp" class="img-fluid" alt="Hunter Motors homepage">
</div>
<div class="col-sm-6 col-lg-4 mb-3 mt-2">
<img src="assets/warcry-guitars-home.webp" class="img-fluid" alt="Hunter Motors homepage">
</div>
<div class="col-sm-6 col-lg-4 mb-3 mt-2">
<img src="assets/mutiny-home.webp" class="img-fluid" alt="Hunter motors homepage">
</div>
<div class="col-sm-6 col-lg-4 mb-3 mt-2">
<img src="assets/bard-hero.webp" class="img-fluid" alt="Hunter Motors homepage">
</div>
<div class="col-sm-6 col-lg-4 mb-3 mt-2">
<img src="assets/monsters-of-the-deep-home.webp" class="img-fluid" alt="Hunter Motors homepage">
</div>
<div class="col-sm-6 col-lg-4 mb-3 mt-2">
<img src="assets/mpm-home.webp" class="img-fluid" alt="Hunter motors homepage">
</div>
<p class="text-center mb-2 mt-4"> <a href="https://metalmorphosis.design" class="btn btn-secondary pb-3 pe-4 ps-4 pt-3 rounded-0" style="font-family: 'Archivo Black', sans-serif;" target="_blank">Visit Metalmorphosis Design</a></p>
</div>
</div>
</section>
<section class="background-cover bg-dark pb-5 pt-5 text-center text-white" style="background-image:url('assets/metalmorphosis-art-bg.webp');">
<div class="container pb-5 pt-5">
<div class="pb-5 pt-5 row">
<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
<h3 class="fw-bold mb-3 text-secondary text-capitalize">Metalmorphosis Art</h3>
</div>
</div>
</div>
</section>
<section id="news" class="bg-dark pb-3 pt-5">
<div class="container pb-4 pt-4">
<div class="align-items-center row">
<div class="col-lg-10 ms-auto me-auto">
<h2 class="mb-3 text-center text-capitalize text-white">Discovering the Visual Legacy Of Heavy Metal</h2>
<p class="fw-light lead mb-4 text-white">Metalmorphosis Arts is your exclusive portal to the visionary minds behind heavy metal's most iconic artwork. Through in-depth features, unprecedented interviews with the artists shaping the genre's visual landscape, you'll gain a deeper understanding of:</p>
<ul class="list-unstyled mb-4 text-white">
<li class="mb-2">The creation and inspiration behind legendary album cover art.</li>
<li class="mb-2">The evolution of art in heavy metal's many distinctive sub-genres.</li>
<li class="mb-2">The creative processes of artists pushing the boundaries of design.</li>
<li class="mb-2">How bands use visual imagery to amplify their music and persona.
</li>
</ul>
<p class="fw-light mb-4 text-white">Whether you're a die-hard metalhead or an aspiring artist, Metalmorphosis Arts delivers a dose of inspiration and insight three times a week. Sign up today and embark on a journey through the diverse artistic realms that enrich the powerful legacy of heavy metal.</p>
</div>
<p class="text-center mb-2 mt-4"> <a href="https://metalmorphosisart.com" class="btn btn-secondary pb-3 pe-4 ps-4 pt-3 rounded-0" style="font-family: 'Archivo Black', sans-serif;" target="_blank">Visit Metalmorphosis Art</a></p>
</div>
</div>
</section>
<section class="background-cover bg-dark pb-5 pt-5 text-center text-white" style="background-image:url('assets/deathwings-bg.webp');">
<div class="container pb-5 pt-5">
<div class="pb-5 pt-5 row">
<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
<h3 class="fw-bold mb-3 text-secondary">Deathwings Apparel</h3>
</div>
</div>
</div>
</section>
<section id="deathwings" class="bg-dark pb-4 pt-5">
<div class="container pb-2 pt-4">
<div class="align-items-center row">
<div class="col-lg-10 ms-auto me-auto">
<h2 class="text-center mb-3 text-white">Unfurling The Darkness: Deathwings Apparel</h2>
<p class="fw-light lead mb-4 text-white">Metalmorphosis Digital is proud to unveil Deathwings, a new clothing line dedicated to celebrating the enduring legacy of heavy metal art. Our designs will draw inspiration from the iconic artwork that has graced countless albums, capturing the raw energy, darkness, and visual power that defines the genre. Deathwings isn't just about clothing; it's a celebration of darkness, fantasy, and the power of visual storytelling, honouring the tradition of heavy metal art and design.</p>
</div>
<p class="text-center mb-2 mt-4"> <a href="https:/deathwingsapparel.com" class="btn btn-secondary pb-3 pe-4 ps-4 pt-3 rounded-0" style="font-family: 'Archivo Black', sans-serif;" target="_blank">Visit Deathwings Apparel</a></p>
</div>
</div>
</section>
<section class="background-cover bg-dark pb-5 pt-5 text-center text-white" style="background-image:url('assets/black-metal.webp');">
<div class="container pb-5 pt-5">
<div class="pb-5 pt-5 row">
<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
<h3 class="fw-bold mb-3 text-secondary">The Raven Symbolism</h3>
</div>
</div>
</div>
</section>
<section class="bg-dark pb-2 pt-5">
<div class="container pb-2 pt-4">
<div class="align-items-center row">
<div class="col-lg-10 ms-auto me-auto">
<h2 class="text-center mb-3 text-white">Why The Raven?</h2>
<p class="fw-light lead mb-4 text-white">At Metalmorphosis Digital, the raven is more than just a logo to me; it's the embodiment of my core principle – transformation. Just as the raven sheds its feathers and adapts to its environment, I am a champion of evolution throughout all aspects of heavy metal culture.</p>
<p class="fw-light mb-4 text-white">From transforming your vision into a reality with your website, exploring the intricate details of album art discussed in my newsletter, Metalmorphosis Arts, to the bold designs of my clothing line, the raven's spirit takes flight. It represents my dedication to pushing boundaries, exploring new creative territories, as well as helping you transform your passion for heavy metal into something truly unique.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="bg-dark pb-3 pt-2">
<div class="container text-center">
<img src="assets/metalmorphosis-design-logo.png" class="img-fluid" width="300">
<h3 class="mb-3 text-white">Follow Me</h3>
<div class="d-inline-flex flex-wrap"> <a href="https://www.facebook.com/metalmorphosisdigital" aria-label="facebook" class="btn btn-outline-light btn-sm lh-1 mx-1 p-2 rounded-circle" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
</svg> </a> <a href="https://twitter.com/metalmorphdgtl" aria-label="twitter" class="btn btn-outline-light btn-sm lh-1 mx-1 p-2 rounded-circle" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
</svg> </a> <a href="https://www.instagram.com/metalmorphosisdigital/" aria-label="instagram" class="btn btn-outline-light btn-sm lh-1 mx-1 p-2 rounded-circle" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
</svg></a><a href="mailto:michael@metalmorphosis.digital" aria-label="envelope" class="btn btn-outline-light btn-sm lh-1 mx-1 p-2 rounded-circle" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg></a>
</div>
</div>
</section>
<footer class="bg-dark pb-3 pt-3">
<div class="container">
<div class="align-items-center row">
<div class="col-md pb-2 pt-2 text-center text-md-start">
<p class="mb-0 text-secondary small">© 2023. All Rights Reserved - Metalmorphosis Digital</p>
</div>
<div class="col-md-auto pb-2 pt-2 text-center text-md-start small"><a href="privacy.html" class="text-secondary" target="_blank">Privacy Policy</a> | <a href="terms.html" class="text-secondary" target="_blank">Terms of Use</a>
</div>
</div>
</div>
</footer>
<!-- 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>
</html>