-
Notifications
You must be signed in to change notification settings - Fork 0
/
StatusR.html
491 lines (415 loc) · 16.6 KB
/
StatusR.html
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
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="en">
<head>
<script>
(function () {
var webSdkScript = document.createElement("script");
webSdkScript.src =
"https://unpkg.com/@grafana/faro-web-sdk@^1.0.0/dist/bundle/faro-web-sdk.iife.js";
webSdkScript.onload = () => {
window.GrafanaFaroWebSdk.initializeFaro({
url: "https://faro-collector-prod-gb-south-0.grafana.net/collect/45fe61400c661df8ff6032424d9e8eb8",
app: {
name: "Mars M",
version: "1.0.0",
environment: "production",
},
});
// Load instrumentations at the onLoad event of the web-SDK and after the above configuration.
// This is important because we need to ensure that the Web-SDK has been loaded and initialized before we add further instruments!
var webTracingScript = document.createElement("script");
webTracingScript.src =
"https://unpkg.com/@grafana/faro-web-tracing@^1.0.0/dist/bundle/faro-web-tracing.iife.js";
// Initialize, configure (if necessary) and add the the new instrumentation to the already loaded and configured Web-SDK.
webTracingScript.onload = () => {
window.GrafanaFaroWebSdk.faro.instrumentations.add(
new window.GrafanaFaroWebTracing.TracingInstrumentation()
);
};
// Append the Web Tracing script script tag to the HTML page
document.head.appendChild(webTracingScript);
};
// Append the Web-SDK script script tag to the HTML page
document.head.appendChild(webSdkScript);
})();
</script>
<link rel="icon" href="Images/smol-logo.png">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status</title>
<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=Oswald:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a165257d25.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="Images/smol-logo.png"></a>
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-arrow-right-to-bracket" onclick="hideMenu()" style="color:white"></i>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Mission.html">Mission</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
<i class="fa-solid fa-rocket" onclick="showMenu()" style="color:rgb(110, 36, 36)"></i>
</nav>
<section class="container">
<div class="card">
<div class="card-image sample-7"></div>
<h2>December 2019</h2>
<p>It was around this time that I started to get the initial random ideas popping into my head. I just started to get thoughts pass by one after the other - spheres, UFO's, black holes, the end of our Sun. So I thought to myself that I should start writing all of these thoughts down and maybe even compiling some sort of a story. <br>
I had seen a UFO when I was younger, and so did my dad during his younger days. That, I think coupled with being a massive science fiction geek anyway, growing up with all of the amazing 80's films that we had, was likely the inspiration that lit the fire. The ideas just seemed to surge forward easily, coming thick and fast once I decided to start writing.
I started to draft out the major plot points and officially draft one was under way.
</p>
</div>
<div class="card">
<div class="card-image sample-6"></div>
<h2>December 2020</h2>
<p>One year later - December 2020, after having more time than expected to sit and write, thanks to Covid-19! I now had a completed draft one. Looking back - it was bloody awful. I had never written down a story before, and it showed.
I searched for beta readers that I could send it to, as well as using family and friends to read it for me. I received some blunt, but very constructive advice.
It was clear that my work was nowhere near finished. Before cracking on with it again, I started to watch Youtube videos about writing, and I now read books every single day, to try to improve my writing. I realised that I had so much to learn, there were so many things that I hadn’t even considered the first time around. Things like how there are certain ways to use people's viewpoints in writing, narrative structures, certain faux pa's when starting or ending chapters. That I needed detail, but not too much so as to bore the reader - "info dumping".
I know now that really I should have looked into creative writing courses. I felt bad for not doing so, but I was already so deep into it.
It was back to the drawing board - or keyboard.
</p>
</div>
<div class="card">
<div class="card-image sample-5"></div>
<h2>January 2022</h2>
<p>A little over a year later - fast forward to January 2022. I had now completely re-written the story. It was needed, it was hard work, but I was honest enough with myself to admit that it wasn't anywhere near the standard that it should be.
A lot of polishing, expanding, and generally better writing - hopefully, made it jump from 50k words to 100k words. I now felt like I had a book on my hands, although there was still a way to go.
</div>
<div class="card">
<div class="card-image sample-3"></div>
<h2>April 2022</h2>
<p>I spent from January to April this year, polishing it, checking the times, and subplots, making sure it all made sense. It was then that I started to shop around on Fiverr - the marketplace of people offering their services - for an editor. Again, there are so many options, developmental editing, line editing, copy editing. I went for the option that I knew I could afford, the one which seemed like a good fit for me, and Cleo Miele of Miele Proofreading – the editor that I chose, from Texas USA - was also like me, a self-confessed “Science fiction nerd.” Happy days!
I now started to shop around for a cover designer, at first I was saving people under my Fiverr profile, one or two stood out as good artists. Between the editor and cover designer, this is where the major investment comes in, this can cost a fortune. For your first book you have to be very selective, choosing services that offer a good mixture of being financially viable for you, and being a good fit – creatively for your project.
</p>
</div>
<div class="card">
<div class="card-image sample-4"></div>
<h2>June 2022</h2>
<p>Things are starting to ramp up now, feelings of anxiety start to creep in, and the pressure really starts to build on you. Just as you think you are almost done with the hard work - the book lands back in your inbox from the editor. So now I have to go through her thoughts, suggestions and requested explanations. Step by step I have to accept or decline changes, I decide to accept all changes and read through it from scratch – checking that it all still made sense. She had done a great job and I was really happy with it. Although there were a few parts that she had pointed out, which required changes or further explanation, so this added to the word count.
At this time I had now chosen my cover artist, Shaun Stevens from Flintlock covers. I sent him a very rough hand drawn sketch, along with a few examples of existing covers. “Vintage Sci-Fi” I told him. He got it. I placed my order.
</p>
</div>
<div class="card">
<div class="card-image sample-2"></div>
<h2>July 2022</h2>
<p>With all of the up to date changes made to my writing, the cost for Cleo luckily included one more revision by her. She checked through it and I again needed to go through accepting the second pass of revisions. The writing part is now officially complete! Thank goodness!
I have started to get early drafts of the cover – it was exactly as I imagined, with not much more work left to do on that front now – aside from getting the text right, and minor changes we are almost there on that front.
Now that we are almost there, there were a couple more things that I needed to place orders for. Firstly – Formatting, or Typesetting. Luckily my cover artist also does typesetting, so I agreed a price with Shaun and placed that order.
Next, I needed to decide where to buy my ISBN numbers. The long number at the back of any book. I need two, one for the paperback, and one for the ebook. If I was releasing other formats – such as hardback copies, or audiobooks, then I would need more.
I could have ordered these direct from Neilson’s, the book agency who handle the purchasing and cataloguing of ISBN’s for the UK, but I chose instead - after some investigation work - to order mine through Compass-Publishing UK.
</p>
</div>
<div class="card">
<div class="card-image sample-1"></div>
<h2>August 2022</h2>
<p>So close now I can smell it. I just need to wait for the 27th of this month and I will have my ISBN numbers, the book has now been typeset ready to go, the last piece in the jigsaw is these numbers. I have started to plan release dates now, if all goes to plan, I am aiming for 20th September. On the first of September I will officially unveil the cover.
The Thing I am starting to think of now – more expenses – is promoting the book. As a new author nobody knows who you are. I need to think carefully about this. It could offer the chance to pay for itself, and even claw back some of the other costs if I use the right PR.
an order, and start to think which style would suit my project.</p>
</div>
<div class="card">
<div class="card-image sample-0"></div>
<h2>September 2022</h2>
<p>September 1st 2022 - Book cover release day! <br>
<br> I have great pleasure in revealing my amazingly designed cover for The Mars Migration.
I have Shaun Stevens at Flintlock covers to thank for working on it for me, he has been very patient.
I had rough designs and styles in mind, but Shaun managed to put them together beautifully for me.
The next major announcement will be book release day on the 20th September 2022.</p>
</div>
<div class="card">
<div class="card-image sample-01"></div>
<h2>Late September 2022</h2>
<p>September 25th 2022 - Book release day! <br>
<br>
My book is officially out, after a long three years, from what started as only a hobby has progressed to me being an official
author with a released paperback sci-fi novel! <br> Head over to the home page to purchase.</p>
</div>
</section>
<div class="met">
<img src="Meteor.png.png">
<img src="Meteor.png.png">
<img src="Meteor.png.png">
<img src="Meteor.png.png">
<img src="Meteor.png.png">
<img src="Meteor.png.png">
<img src="Meteor.png.png">
</div>
<!--------JavaScript for toggle-------->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
<style>
*{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
box-sizing: border-box;
}
.header{
overflow: hidden;
}
.container{
display: flex; /*this makes them side by side*/
justify-content: center;
flex-wrap: wrap;
}
.card{
background: rgb(100, 91, 91);
width: 350px;
margin: 10px;
border-radius: 15px;
/* From https://css.glass */
background: rgba(157, 138, 138, 0.55);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(9.6px);
-webkit-backdrop-filter: blur(9.6px);
border: 1px solid rgba(157, 138, 138, 0.59);
transition: 1s;
}
.card:hover{
background: rgba(108, 49, 49, 0.55);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(9.6px);
-webkit-backdrop-filter: blur(9.6px);
border: 1px solid rgba(157, 138, 138, 0.59);
cursor: pointer;
color: white;
}
.card-image{
height: 170px;
margin-bottom: 15px;
background-size: 350px;
border-radius: 15px 15px 0 0;
}
.Btn{
text-align: center;
text-decoration: none;
color: rgb(182, 152, 152);
padding: 20px 20px;
display: block;
background-color: black;
text-align: center;
border-radius: 15px;
margin: 20px 50px;
}
.Btn:hover{
border: 1px solid rgb(255, 1, 1);
background-color: #792620;
size-adjust: 50px;
transition: 1s;
}
.sample-3{ /*I'd change these to different images and classes when done*/
background-image: url(Images/April2022.png);
}
.sample-2{
background-image: url(Images/July2022.png);
}
.sample-1{
background-image: url(Images/Aug2022.png);
}
.sample-4{
background-image: url(Images/June2022.png);
}
.sample-5{
background-image: url(Images/Jan2022.png);
}
.sample-6{
background-image: url(Images/Dec2020.png);
}
.sample-7{
background-image: url(Images/Dec2019.jpg);
}
.sample-0{
background-image: url(Images/cccover.jpg);
}
.sample-01{
background-image: url(Images/mm.jpg);
}
.card p{
padding: 10px;
}
.card h2{
padding: 10px;
text-align: center;
}
h1{
text-align: center;
font-size: 100px;
padding-top: 100px;
color: #921e16;
text-shadow: white;
transition: 0.5s;
}
h1:hover{
color: aliceblue;
}
.header{
min-height: 100vh;
width: 100%;
background-image: url(Images/homepage.jpg);
background-position: center;
background-size: cover;
position: relative;
}
.logo{
width: 70px;
cursor: pointer;
}
.navbar{
width: 85%;
height: 15%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
size: 70px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: white;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.met img{
width: 30px;
animation: meteor 7s linear infinite;
}
.met{
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
top: -70px;
}
nav .fa-solid{
display: none;
}
@keyframes meteor{
0%{
transform: translateX(0);
opacity: 0;
}
50%{
opacity: 1;
}
70%{
opacity: 1;
}
100%{
transform: translateY(+80vh);
opacity: 0;
}
}
.met img:nth-child(1){
animation-delay: 2s;
width: 25px;
}
.met img:nth-child(2){
animation-delay: 1s;
width: 15px;
}
.met img:nth-child(3){
animation-delay: 3s;
width: 20px;
}
.met img:nth-child(4){
animation-delay: 4.5s;
width: 10px;
}
.met img:nth-child(5){
animation-delay: 3s;
width: 25px;
}
.met img:nth-child(6){
animation-delay: 6s;
width: 22px;
}
.met img:nth-child(7){
animation-delay: 7s;
width: 20px;
}
@media(max-width: 700px){
.content h1{
font-size: 30px;
line-height: 30px;
}
nav .fa-solid{
display: block;
margin: top;
font-size: 22px;
cursor: pointer;
padding: 10px;
}
.nav-links ul {
padding: 30px;
}
small{
font-size: 10px;
}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
background: rgba( 255, 0, 0, 0.3 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
}
</style>
</html>