-
Notifications
You must be signed in to change notification settings - Fork 0
/
branding.html
216 lines (209 loc) · 9.7 KB
/
branding.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
---
title: Pirate Chain | Branding
description: A collection of Pirate Chain brand logos, assets, and colors schemes which are all open source and free to use
layout: page
css-list:
- "assets/css/branding.css"
javascript-list:
- "assets/js/branding.js"
lang: en
---
<!-- brand section -->
<section class="full-width deepbg brand-section" style="background-color:var(--pirate-calmseas);color:var(--pirate-leviathan)">
<div class="content">
<div class="middle-box">
<div class="box-container" >
<div class="box" style="text-align:center">
<img src="{{ site.baseurl }}{{ site.img }}logo/Pirate_Logo_Coin_Black.svg"
alt="Pirate Chain main Logo"
style="max-height: 200px;" />
</div>
<div class="box-right">
<h2 style="margin-bottom: 30px;color:var(--pirate-leviathan)" >BRANDING</h2>
<p data-translate="yes">A collection of Pirate Chain brand logos, assets, and colors schemes which are all open source and free to use</p>
<a href="https://github.com/PirateNetwork/mediakit/blob/main/PIRATE_DesignGuidelines.pdf" class="a-btn">Brand Guidelines</a>
</div>
</div>
</div>
</div>
</section>
<!-- logo section -->
<section class="full-width lightbg logo-section lightglowup">
<div class="content">
<h2>Main Logo</h2>
<div class="controls">
<div class="color-picker" style="background-color:var(--pirate-calmseas);">
<img src="{{ site.baseurl }}{{ site.img }}icons/dot-wg.svg"
alt="Choose Logo White and Gold Color"
title="white & gold" onclick="change('logo', 'color', 'wg')"/>
<img src="{{ site.baseurl }}{{ site.img }}icons/dot-bg.svg"
alt="Choose Logo Black and Gold Color"
title="black & gold" onclick="change('logo', 'color', 'bg')"/>
<img src="{{ site.baseurl }}{{ site.img }}icons/dot-white.svg"
alt="Choose Logo White Color"
title="white" onclick="change('logo', 'color', 'white')" />
<img src="{{ site.baseurl }}{{ site.img }}icons/dot-black.svg"
alt="Choose Logo Black Color"
title="black" onclick="change('logo', 'color', 'black')" />
</div>
<div class="color-picker" translate="no">
PNG
<form autocomplete="off">
<label class="toggle-control">
<input id="type" type="checkbox" checked="checked" onclick="change('logo', 'type')">
<span class="control"></span>
</label>
</form>
SVG
</div>
<div class="color-picker" translate="no">
STK
<form autocomplete="off">
<label class="toggle-control">
<input id="layout" type="checkbox" checked="checked" onclick="change('logo', 'layout')">
<span class="control"></span>
</label>
</form>
INL
</div>
</div>
<div class="logo-container" id="logo-container">
<div class="logo-box"
id="branding_logo"
style="background-image: url('https://raw.githubusercontent.com/PirateNetwork/mediakit/main/Logo%20Main/SVG/Pirate_Logo_WG.svg')"
title="download"
onclick="download('logo')"></div>
</div>
</div>
</section>
<!-- art section -->
<section class="full-width deepbg art-section">
<div class="content">
<h2>Brand Art</h2>
<div class="controls">
<div class="color-picker" style="background-color:var(--pirate-calmseas);">
<img src="{{ site.baseurl }}{{ site.img }}icons/dot-gold.svg"
alt="Choose Pirate art Gold Color"
id="gold" title="gold" onclick="change('art', 'color', 'gold')" />
<img src="{{ site.baseurl }}{{ site.img }}icons/dot-white.svg"
alt="Choose Pirate art White Color"
id="white" title="white" onclick="change('art', 'color', 'white')" />
<img src="{{ site.baseurl }}{{ site.img }}icons/dot-black.svg"
alt="Choose Pirate art White Color"
id="black"title="black" onclick="change('art', 'color', 'black')" />
</div>
<div class="color-picker" translate="no">
PNG
<form autocomplete="off">
<label class="toggle-control">
<input type="checkbox" checked="checked" onclick="change('art', 'type')">
<span class="control"></span>
</label>
</form>
SVG
</div>
</div>
<div class="art-container" id="art-container">
<div class="art">
<img id="coin"
src="https://raw.githubusercontent.com/PirateNetwork/mediakit/main/Coin/SVG/Pirate_Logo_Coin_Gold.svg"
alt="Pirate Chain Coin Logo"
title="download"
onclick="download('coin')" />
<img id="p"
src="https://raw.githubusercontent.com/PirateNetwork/mediakit/main/P%20Logo/SVG/Pirate_Logo_P_Gold.svg"
alt="Pirate Chain P Logo"
title="download"
onclick="download('p')" />
<img id="ship"
src="https://raw.githubusercontent.com/PirateNetwork/mediakit/main/Ship/SVG/Pirate_Logo_Ship_Gold.svg"
alt="Pirate Chain Ship Logo"
title="download"
onclick="download('ship')" />
<img id="skull"
src="https://raw.githubusercontent.com/PirateNetwork/mediakit/main/Skull/SVG/Pirate_Logo_Skull_Gold.svg"
alt="Pirate Chain Skull Logo"
title="download"
onclick="download('skull')" />
</div>
</div>
<div class="art-container" id="art-container">
<div class="art">
<img id="wordmark"
src="https://raw.githubusercontent.com/PirateNetwork/mediakit/main/Wordmark/SVG/Pirate_Logo_Wordmark_Gold.svg"
alt="Pirate Chain Wordmark Logo"
title="download"
onclick="download('wordmark')" />
</div>
</div>
</div>
</section>
<!-- colors section -->
<section class="full-width lightbg colors-section">
<div class="content">
<h2>Colors</h2>
<div class="controls">
<div class="color-picker" translate="no">
RGB
<form autocomplete="off">
<label class="toggle-control">
<input type="checkbox" checked="checked" onclick="colorCode()">
<span class="control"></span>
</label>
</form>
HEX
</div>
</div>
<div class="cbox-container">
<div class="cbox">
<ul translate="no">
<li><svg><circle cx="50" cy="50" r="40" fill="#bb9645" /></svg><div id="bb9645" class="code">#bb9645</div>Pirate Doubloon</li>
<li><svg><circle cx="50" cy="50" r="40" fill="#ffbd30" /></svg><div id="ffbd30" class="code">#ffbd30</div>Pirate Neon Gold </li>
<li><svg><circle cx="50" cy="50" r="40" fill="#eacd88" /></svg><div id="eacd88" class="code">#eacd88</div>Pirate Golden Sands</li>
<li><svg><circle cx="50" cy="50" r="40" fill="#141414" /></svg><div id="141414" class="code">#141414</div>Pirate Leviathan</li>
</ul>
</div>
<div class="cbox">
<ul translate="no">
<li><svg><circle cx="50" cy="50" r="40" fill="#3f52b7" /></svg><div id="3f52b7" class="code">#3f52b7</div>Pirate Calm Seas</li>
<li><svg><circle cx="50" cy="50" r="40" fill="#151326" /></svg><div id="151326" class="code">#151326</div>Pirate Deep Blue</li>
<li><svg><circle cx="50" cy="50" r="40" fill="#202036" /></svg><div id="202036" class="code">#202036</div>Pirate Navy Blue</li>
<li><svg><circle cx="50" cy="50" r="40" fill="#201633" /></svg><div id="201633" class="code">#201633</div>Pirate Royal Blue</li>
</ul>
</div>
</div>
</div>
<img src="{{ site.baseurl }}{{ site.img }}dividers/basic-triangle-bottom-deep.svg"
alt="Page Divider" class="divider-bottom" />
</section>
<!-- colors section -->
<section class="full-width deepbg fonts-section">
<div class="content">
<h2>Fonts</h2>
<ul>
<li style="font-family:var(--pirate-font-primary);">
<h3 translate="no">Primary | 'Bai Jamjuree'</h3>
<a href="https://fontsource.org/fonts/bai-jamjuree" >https://fontsource.org/fonts/bai-jamjuree</a>
<p>"In an honest service there is thin commons, low wages, and hard labor; in this, plenty and satiety, pleasure and ease, liberty and power"</p>
<i>— Bartholomew 'Black Bart' Roberts</i>
</li>
<li style="font-family:var(--pirate-font-secondary);">
<h3 translate="no">'Roboto', sans-serif</h3>
<a href="https://fontsource.org/fonts/roboto" >https://fontsource.org/fonts/roboto</a>
<p>"If you have a mind to make one of us, we will receive you, and if you'll turn sober, and mind your business, perhaps in time I may make you one of my Lieutenants" </p>
<i>— Henry Avery</i>
</li>
<li style="font-family: var(--pirate-font-tertiary);">
<h3 translate="no">'IBM Plex Mono'</h3>
<a href="https://fontsource.org/fonts/ibm-plex-mono" >https://fontsource.org/fonts/ibm-plex-mono</a>
<p>"Damn ye, you are a sneaking puppy, and so are all those who will submit to be governed by laws which rich men have made for their own security."</p>
<i>— Sam Bellamy</i>
</li>
<li style="font-family:var(--pirate-font-alternative);">
<h3 translate="no">Poppins</h3>
<a href="https://fontsource.org/fonts/poppins" >https://fontsource.org/fonts/poppins</a>
<p>"Yes, I do heartily repent. I repent I had not done more mischief"</p>
<i>— Anonymous pirate</i>
</li>
</ul>
</section>