-
Notifications
You must be signed in to change notification settings - Fork 0
/
Fancy Documentation.html
81 lines (81 loc) · 4.28 KB
/
Fancy Documentation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="node_modules/highlight.js/styles/dracula.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="centered">
<img src="images/sk-logo.svg" class="hero">
</div>
<div class="contact-card">
<img src="images/sk-logo-huge.png">
<ul>
<li><i class="fa fa-user"></i> Scott Kaye</li>
<li><i class="fa fa-globe"></i> <a href="https://scottkaye.net">scottkaye.net</a></li>
<li><i class="fa fa-align-right"></i> Chaotic Neutral</li>
</ul>
</div>
<header>
<i class="fa fa-rocket"></i>
Fancy Document Template
<small>And the wonders within</small>
</header>
<div class="content">
<p>Foreword/abstract text here about the document, since a page break will follow.</p>
<blockquote>
<p>I’m really just struggling <em>fore words</em> here.</p>
</blockquote>
</div>
<div class="header-image" style="background-image: url(images/mountains.jpg)"></div>
<header>
<i class="fa fa-header"></i>
Super Heading
<small>Clever unrelated subtext</small>
</header>
<div class="content">
<h1>Main heading</h1>
<p>Subtext. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur accusamus, ut temporibus incidunt numquam ea enim, vitae debitis iusto aspernatur ipsa excepturi neque vero sequi unde pariatur necessitatibus, itaque adipisci hic id. Beatae blanditiis aut minus.</p>
<p><img src="images/sunset.jpg" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptatum tenetur distinctio eos quas impedit cumque blanditiis similique consequuntur, consequatur, molestiae, iure, illum debitis possimus molestias id laudantium est culpa. Delectus eos, commodi deleniti odio.</p>
<h3>Third-level heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quidem explicabo eligendi deserunt, culpa mollitia nisi natus laudantium magni consequatur quibusdam vel accusantium ipsam, fuga iure possimus illo, ut labore!</p>
<h1>// TODO</h1>
<p><img src="images/sunset.jpg" alt=""></p>
<blockquote>
<p>The way this extends to that picture is :ok_hand:</p>
</blockquote>
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Hot dogs</li>
<li>A million dollars</li>
</ul>
<p>I should also think about getting another picture for this heading.</p>
<h2>Second-level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, officiis deserunt atque ad ipsam architecto, eaque esse quidem deleniti aut. Laudantium accusantium id esse, mollitia voluptas. Recusandae dignissimos molestias soluta optio, amet molestiae veniam, aliquid placeat odit, sapiente corporis alias ex animi ipsa ut accusamus dolores asperiores eligendi ad voluptatum voluptatibus.</p>
<p>Tempore quas distinctio omnis illum, aspernatur ullam fuga recusandae.</p>
</div>
<div class="header-image darker" style="background-image: url(images/architecture.jpg)"></div>
<header>
<i class="fa fa-code-fork"></i>
Look At This Picture
<small>Isn't it great?</small>
</header>
<div class="content">
<h1>More stuff</h1>
<p>That header has a class of <code>darker</code>, because the image is <a href="https://en.wikipedia.org/wiki/Contrast_(vision)">too light to have white text.</a> The full code amounts to this:</p>
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"header-image darker"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image: url(images/architecture.jpg)"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-code-fork"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
Look At This Picture
<span class="hljs-tag"><<span class="hljs-name">small</span>></span>Isn't it great?<span class="hljs-tag"></<span class="hljs-name">small</span>></span>
<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
</code></pre>
<p>This section didn’t need to be in a new document, but it’s nice to be organized.</p>
</div>
</body>
</html>