/
index.html
86 lines (85 loc) · 3.21 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;500&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<title>Wu Tang Lorem Ipsum</title>
</head>
<body>
<header class="header fadeIn">
<img class="logo" src="./image/wu-vector.png" alt="wu-logo" />
<h1 class="heading">Wu Lorem Ipsum</h1>
</header>
<main>
<div class="instruction-container">
<p class="instruction-text">
Generate classic Wu Tang rap lyrics as placeholder text. Just select
the number of words, sentences or paragraphs you need and hit generate.
Copy your placeholder text directly to your clipboard by clicking the
copy button.
</p>
</div>
<div class="box fadeIn">
<div class="form-container">
<div>
<input
class="input"
id="input"
type="text"
maxlength="3"
autocomplete="off"
size="2"
/>
<select name="selection" id="selection" class="input">
<option name="paragraphs" value="paragraphs">Paragraphs</option>
<option name="sentences" value="sentences" selected="selected">
Sentences
</option>
<option name="words" value="words">Words</option>
</select>
<button class="btn" id="btn">Generate</button>
</div>
<button id="copy" class="btn copy" data-clipboard-target="#content">
Copy
</button>
</div>
<hr />
<div class="content-container" id="content">
<p id="paragraph">
<!-- Text Content -->
</p>
</div>
</div>
</main>
<footer class="footer">
<ul class="footer-nav">
<li class="footer-navlink">
©
<script class="nav-link">
new Date().getFullYear() > 2010 &&
document.write(" " + new Date().getFullYear());
</script>
<a class="nav-link" target="_blank" href="https://www.samkingston.xyz">S Kingston</a>
</li>
<li class="footer-navlink"><a class="nav-link" target="_blank" href="https://github.com/s-kngstn/wu-loremipsum"><i class="fab fa-github-alt fa-1x icon"></i> Source code</a></li>
<li class="footer-navlink"><a class="nav-link" target="_blank" href="https://www.buymeacoffee.com/skingston"><i class="fas fa-mug-hot fa-1x icon"></i> Buy me a Coffee</a></li>
</ul>
</footer>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/55981f14a4.js" crossorigin="anonymous"></script>
<!-- ClipboardJS -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>