-
Notifications
You must be signed in to change notification settings - Fork 0
/
pricesheet.html
219 lines (203 loc) · 10.1 KB
/
pricesheet.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
<!-- TO CHANGE PRICES: Be sure to update both pricesheet.html, autoquote.html, AND autoquote.js -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>furthings</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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/0ccab23ba7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type=text/css href="styles/dark.css">
</head>
<body>
<script src="dropdown.js"></script>
<main>
<a class="backButton" href="index.html"><i class="fa-solid fa-angle-left"></i></a>
<div class="priceSheet">
<h1 class="largeTitle centerText bigLines">PRICE SHEET</h1>
<div class="tosWarning">
<p style="color: var(--orange); font-weight: bold;" class="centerText">
<i class="fa-solid fa-triangle-exclamation"></i> BEFORE YOU BUY <i class="fa-solid fa-triangle-exclamation"></i>
</p>
<p class="centerText">
Ordering from me assumes that you have read, understood, and agreed to the conditions linked below.
</p>
<a href="tos.html">Terms of Service</a>
</div>
<!-- PRICES -->
<div class="prices">
<h1 class="title">BASE PRICE</h1>
<p class="description">
The framing of your character. By default, will be a rough/sketchy render with color and a solid or gradient background.
</p>
<!-- HEADSHOT -->
<div id="headshot" onclick="toggleDropper('headshot')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Headshot</h1>
<h1 class="cost">$35</h1>
<p class="description">
Also called a closeup. Shows the head and shoulder area.
</p>
<div class="dropperContent">
<img src="images/headshots/raine.gif"/>
<img src="images/headshots/steak1.png"/>
<img src="images/headshots/dog puppie dog baby child.gif"/>
</div>
</div>
<!-- BUST -->
<div id="bust" onclick="toggleDropper('bust')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Bust</h1>
<h1 class="cost">$40</h1>
<p class="description">
Also called a medium closeup. Shows the elbow/chest area and above.
</p>
<div class="dropperContent">
<img src="images/busts/willow2.png"/>
<img src="images/busts/bust.png"/>
</div>
</div>
<!-- HALFBODY -->
<div id="halfbody" onclick="toggleDropper('halfbody')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Halfbody</h1>
<h1 class="cost">$45</h1>
<p class="description">
Also called a mid shot. Shows about half the character; belly area and above.
</p>
<div class="dropperContent">
<img src="images/placeholder.png"/>
</div>
</div>
<!-- THIGHUP -->
<div id="thighup" onclick="toggleDropper('thighup')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Thighup</h1>
<h1 class="cost">$50</h1>
<p class="description">
Also called a medium full shot. Shows the thigh/knee area and above.
</p>
<div class="dropperContent">
<img src="images/thighups/willow1.png"/>
<img src="images/thighups/oh, to be.png"/>
</div>
</div>
<!-- FULLBODY -->
<div id="fullbody" onclick="toggleDropper('fullbody')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Fullbody</h1>
<h1 class="cost">$55</h1>
<p class="description">
Also called a full shot. Shows your entire character in full and in focus.
</p>
<div class="dropperContent">
<img src="images/fullbodies/secret santa.gif"/>
<img src="images/fullbodies/late night photography.png"/>
<img src="images/fullbodies/beach wip.png"/>
</div>
</div>
<!-- ADDONS -->
<h1 class="title">ADD-ONS</h1>
<p class="description">
The following is entirely optional. The prices below will be added on top of the base.
</p>
<!-- ADDITIONAL CHARACTERS -->
<div id="additional_characters" onclick="toggleDropper('additional_characters')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Additional Characters</h1>
<h1 class="cost">+ 65% of base</h1>
<p class="description">
Per additional character. For example, if a fullbody costs $60, two fullbodies would be $60.00 + $39.00 (65% of $60) = $99.00. The two characters don't have to share the same framing!
</p>
<div class="dropperContent">
<img src="images/placeholder.png"/>
</div>
</div>
<!-- SHADING -->
<div id="shading" onclick="toggleDropper('shading')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Shading</h1>
<h1 class="cost">+ $10 per character</h1>
<p class="description">
Adds light and shadow to the drawing. Color/style/atmosphere suggestions are always welcome!
</p>
<div class="dropperContent">
<img src="images/placeholder.png"/>
</div>
</div>
<!-- PROPS -->
<div id="props" onclick="toggleDropper('props')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Props</h1>
<h1 class="cost">+ $8</h1>
<p class="description">
First three props are free by default! This is the price for the fourth one and above. Props are any non-character item that is included in the piece or smaller closeups (AKA inserts) of a character.
</p>
<div class="dropperContent">
<img src="images/addons/unsheathe.gif"/>
<img src="images/headshots/raine.gif"/>
<img src="images/fullbodies/late night photography.png"/>
<img src="images/headshots/steak1.png"/>
</div>
</div>
<!-- BACKGROUNDS -->
<!-- ABSTRACT -->
<div id="abstract_background" onclick="toggleDropper('abstract_background')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Abstract Background</h1>
<h1 class="cost">+ $6</h1>
<p class="description">
Examples include simple repeating patterns, graphics, et cetera. Anything that doesn't resemble a concrete environment or location.
</p>
<div class="dropperContent">
<img src="images/placeholder.png"/>
</div>
</div>
<!-- SCENE -->
<div id="simple_scene" onclick="toggleDropper('simple_scene')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>Scenic Background</h1>
<h1 class="cost">+ $15</h1>
<p class="description">
Puts your character into a simplified environment.
</p>
<div class="dropperContent">
<img src="images/thighups/willow1.png"/>
<img src="images/busts/willow2.png"/>
</div>
</div>
<!-- NO COLOR -->
<div id="no_color" onclick="toggleDropper('no_color')" class="listing dropper">
<h1 class="title"><i class="dropperIndicator fa-solid fa-caret-down"></i>No Color</h1>
<h1 class="cost">- $8 per character</h1>
<p class="description">
Looking for an empty sketch/lineart instead? Take this amount away from the base price, per character!
</p>
<div class="dropperContent">
<img src="images/placeholder.png"/>
</div>
</div>
</div>
</div>
</main>
<footer class="socials">
<!-- email -->
<a href="mailto:[email protected]"><i class="fa-solid fa-envelope"></i></a>
<!-- etsy -->
<a href="https://www.etsy.com/shop/furthingsart"><i class="fa-brands fa-etsy"></i></a>
<!-- youtube -->
<a href="https://www.youtube.com/@furthings"><i class="fa-brands fa-youtube"></i></a>
<!-- bluesky -->
<a href="https://bsky.app/profile/furthings.art"><i class="fa-brands fa-bluesky"></i></a>
<!-- fur affinity -->
<a href="https://www.furaffinity.net/user/furthings#"><img src="images/fa-logo.svg"/></a>
<!-- instagram -->
<a href="https://www.instagram.com/furthingsart/"><i class="fa-brands fa-instagram"></i></a>
<!-- twitter -->
<a href="https://twitter.com/furthings"><i class="fa-brands fa-twitter"></i></a>
<!-- toyhouse -->
<a href="https://toyhou.se/furthings"><img src="images/toyhouse_icon.svg"/></a>
<!-- paypal -->
<a href="https://paypal.me/Avrey"><i class="fa-brands fa-paypal"></i></a>
<!-- kofi -->
<a href="https://ko-fi.com/furthings"><img src="images/kofi-logo.svg"/></a>
<!-- patreon -->
<a href="https://www.patreon.com/furthings/"><i class="fa-brands fa-patreon"></i></a>
<!-- artfight -->
<a href="https://artfight.net/~furthings"><img src="images/af-logo.svg"/></a>
</footer>
</body>
</html>