-
Notifications
You must be signed in to change notification settings - Fork 0
/
art.html
194 lines (178 loc) · 13.5 KB
/
art.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>F_TEK/art</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/svg" href="asrc/img/lq/leaf.svg">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="asrc/mod.css">
<script src="asrc/lazysizes.min.js" async=""></script>
<script data-goatcounter="https://f-tek.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</head>
<body class="w3-black orange-bg">
<!-- Menu Bar -->
<div class="w3-bar w3-white">
<a href="index.html" class="w3-bar-item w3-hide-small w3-button w3-hover-pale-red"><i class="las la-home"></i> Home</a>
<a href="#" class="w3-bar-item w3-button w3-orange w3-hover-pale-orange"><i class="las la-paint-brush"></i> Art</a>
<a href="code.html" class="w3-bar-item w3-hide-small w3-button w3-hover-pale-yellow"><i class="las la-code"></i> Code</a>
<a href="games.html" class="w3-bar-item w3-hide-small w3-button w3-hover-pale-green"><i class="las la-gamepad"></i> Games</a>
<a href="social.html" class="w3-bar-item w3-hide-small w3-button w3-hover-pale-blue"><i class="las la-link"></i> Social</a>
<a href="brand.html" class="w3-bar-item w3-hide-small w3-button w3-hover-pale-purple"><i class="las la-user-alt"></i> Brand</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="menuExpand()"><i class="las la-bars"></i></a>
</div>
<div id="burger" class="w3-bar-block w3-hide w3-hide-large w3-hide-medium w3-white">
<a href="index.html" class="w3-bar-item w3-button w3-hover-pale-red"><i class="las la-home"></i> Home</a>
<a href="code.html" class="w3-bar-item w3-button w3-hover-pale-yellow"><i class="las la-code"></i> Code</a>
<a href="games.html" class="w3-bar-item w3-button w3-hover-pale-green"><i class="las la-gamepad"></i> Games</a>
<a href="social.html" class="w3-bar-item w3-button w3-hover-pale-blue"><i class="las la-link"></i> Social</a>
<a href="brand.html" class="w3-bar-item w3-button w3-hover-pale-purple"><i class="las la-user-alt"></i> Brand</a>
</div>
<!-- Unofficial Ko-fi Button -->
<div class="w3-bottom w3-padding-small">
<a href="https://ko-fi.com/ftedianiak" class="w3-button w3-red w3-round"><i class="las la-coffee w3-large"></i> Support Me</a>
</div>
<!-- Header -->
<div class="art-banner w3-display-container w3-grayscale-min">
<div class="w3-display-middle w3-center w3-orange w3-padding" style="white-space:nowrap;">
<div class="w3-animate-zoom">
<h3>Hi, I'm F_TEK and this is</h3>
<h1><b>MY DRAWING JOURNEY</b></h1>
</div>
</div>
</div>
<!-- TOC -->
<div class="w3-container w3-center w3-transparent w3-stretch">
<a href="https://www.deviantart.com/foxie-the-edianiak" class="w3-button w3-orange w3-card"><i class="lab la-deviantart"></i> DeviantArt</a>
<a href="https://itaku.ee/profile/ftedianiak" class="w3-button w3-orange w3-card"><i class="las la-crow"></i> Itaku</a>
<a href="gal/index.html" class="w3-button w3-orange w3-card"><i class="lab la-html5"></i> Web Gallery</a>
<a href="https://unsplash.com/@f_tek" class="w3-button w3-orange w3-card"><i class="las la-camera"></i> Unsplash</a>
<a href="alb/index.html" class="w3-button w3-orange w3-card"><i class="lab la-html5"></i> Web Album</a>
<a href="https://www.instagram.com/ftedianiak/" class="w3-button w3-orange w3-card"><i class="lab la-instagram"></i> Instagram</a>
</div>
<div style="height:3%;"></div>
<div class="w3-container w3-center w3-pale-orange w3-padding-64 w3-stretch">
<h2 class="w3-swide hwrit"><b>My art styles:</b></h2>
<div class="w3-row">
<div class="w3-col m6">
<h1 class="hwrit"><b>DIGITAL</b></h1>
<div class="w3-row">
<div class="w3-col w3-padding-small" style="width:50%;">
<div style="height:25vh;overflow:hidden;">
<img data-srcset="asrc/img/lq/ast/dig.webp 600w, asrc/img/mq/ast/dig.webp 1200w, asrc/img/hq/ast/dig.webp 2400w" srcset="asrc/img/lq/ast/dig.webp" src="asrc/img/mq/ast/dig.webp" class="lazyload" style="width:75%;" alt="a cutesy digital drawing of a girl with long blue hair and big blue eyes holding a cup of hot chocolate while wearing a sweater and a fluffy blanket">
</div>
<p><b class="w3-xxxlarge hwrit">CUTESY</b></p>
<ul class="w3-ul">
<li>Tablet:<br><a href="https://www.xp-pen.com/product/star-03-v2.html">XPPen Star 03 V2</a></li>
<li>Software:<br><a href="https://www.clipstudio.net/en/">CLIP STUDIO PAINT</a></li>
</ul>
</div>
<div class="w3-col w3-padding-small" style="width:50%;">
<div style="height:25vh;overflow:hidden;">
<img data-srcset="asrc/img/lq/ast/pix.webp 600w, asrc/img/mq/ast/pix.webp 1200w, asrc/img/hq/ast/pix.webp 2400w" srcset="asrc/img/lq/ast/pix.webp" src="asrc/img/mq/ast/pix.webp" class="lazyload" style="width:75%;" alt="a pixel-art picture of a green frog">
</div>
<p><b class="w3-xxxlarge hwrit">PIXEL ART</b></p>
<ul class="w3-ul">
<li>Software:<br><a href="https://graphicsgale.com/us/">GraphicsGale</a></li>
</ul>
</div>
</div>
</div>
<div class="w3-col m6">
<h1 class="hwrit"><b>TRADITIONAL</b></h1>
<div class="w3-row">
<div class="w3-col w3-padding-small" style="width:50%;">
<div style="height:25vh;overflow:hidden;">
<img data-srcset="asrc/img/lq/ast/tra.webp 600w, asrc/img/mq/ast/tra.webp 1200w, asrc/img/hq/ast/tra.webp 2400w" srcset="asrc/img/lq/ast/tra.webp" src="asrc/img/mq/ast/tra.webp" class="lazyload" style="width:75%;" alt="a cutesy drawing of a person in a plaid shirt with a sun pin shouting into a hole">
</div>
<p><b class="w3-xxxlarge hwrit">CUTESY</b></p>
<ul class="w3-ul">
<li>Whatever pencils and paper are available.</li>
</ul>
</div>
<div class="w3-col w3-padding-small" style="width:50%;">
<div style="height:25vh;overflow:hidden;">
<img data-srcset="asrc/img/lq/ast/pai.webp 600w, asrc/img/mq/ast/pai.webp 1200w, asrc/img/hq/ast/pai.webp 2400w" srcset="asrc/img/lq/ast/pai.webp" src="asrc/img/mq/ast/pai.webp" class="lazyload" style="width:75%;" alt="a painting of a magician sitting in an armchair with a book looking at a golem holding a glowing stone">
</div>
<p><b class="w3-xxxlarge hwrit">PAINT</b></p>
<ul class="w3-ul">
<li>Whatever brushes and paper are available.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div style="height:3%;"></div>
<div class="w3-container w3-center w3-pale-orange w3-padding-64 w3-stretch">
<h2 class="w3-swide hwrit"><b>My comic series:</b></h2>
<h1 class="hwrit">COMING SOON</h1>
</div>
<div style="height:3%;"></div>
<div class="w3-container w3-center w3-pale-orange w3-padding-64 w3-stretch">
<h2 class="w3-swide hwrit"><b>Proudest of:</b></h2>
<div class="w3-row">
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/fav/f01.webp 600w, asrc/img/mq/fav/f01.webp 1200w, asrc/img/hq/fav/f01.webp 2400w" srcset="asrc/img/lq/fav/f01.webp" src="asrc/img/mq/fav/f01.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a traditional drawing of a town with its street full of red cloaked figures walking towards the burning town hall">
</div>
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/fav/f02.webp 600w, asrc/img/mq/fav/f02.webp 1200w, asrc/img/hq/fav/f02.webp 2400w" srcset="asrc/img/lq/fav/f02.webp" src="asrc/img/mq/fav/f02.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a cutesy digital drawing of two high-school students">
</div>
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/fav/f03.webp 600w, asrc/img/mq/fav/f03.webp 1200w, asrc/img/hq/fav/f03.webp 2400w" srcset="asrc/img/lq/fav/f03.webp" src="asrc/img/mq/fav/f03.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a traditional drawing of a character wearing rain-themed clothes comforting a sad character with a rain cloud above its head">
</div>
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/fav/f04.webp 600w, asrc/img/mq/fav/f04.webp 1200w, asrc/img/hq/fav/f04.webp 2400w" srcset="asrc/img/lq/fav/f04.webp" src="asrc/img/mq/fav/f04.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a cutesy digital drawing of a wide landscape filled with different characters">
</div>
</div>
</div>
<div style="height:3%;"></div>
<div class="w3-container w3-center w3-pale-orange w3-padding-64 w3-stretch">
<h2 class="w3-swide hwrit"><b>Stock photography:</b></h2>
<div class="w3-row">
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/sto/s01.webp 600w, asrc/img/mq/sto/s01.webp 1200w, asrc/img/hq/sto/s01.webp 2400w" srcset="asrc/img/lq/sto/s01.webp" src="asrc/img/mq/sto/s01.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a photo of a waving Ukrainian flag">
</div>
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/sto/s02.webp 600w, asrc/img/mq/sto/s02.webp 1200w, asrc/img/hq/sto/s02.webp 2400w" srcset="asrc/img/lq/sto/s02.webp" src="asrc/img/mq/sto/s02.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a close-up photo of pink blossoms on a tree">
</div>
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/sto/s03.webp 600w, asrc/img/mq/sto/s03.webp 1200w, asrc/img/hq/sto/s03.webp 2400w" srcset="asrc/img/lq/sto/s03.webp" src="asrc/img/mq/sto/s03.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a photo of a sleeping fox">
</div>
<div class="w3-col m3 w3-padding-small">
<img data-srcset="asrc/img/lq/sto/s04.webp 600w, asrc/img/mq/sto/s04.webp 1200w, asrc/img/hq/sto/s04.webp 2400w" srcset="asrc/img/lq/sto/s04.webp" src="asrc/img/mq/sto/s04.webp" class="prew w3-hover-opacity lazyload" onclick="modalOpen(this)" alt="a close-up photo of pink blossoms on a tree">
</div>
</div>
<p>EXCEPTION: These are released under service-specific licenses. For Unsplash, it's <a href="https://unsplash.com/license">their license</a>.</p>
</div>
<div style="height:3%;"></div>
<!-- Scripts -->
<!-- Modal -->
<div id="modal" class="w3-modal w3-black" onclick="this.style.display='none'">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="las la-times"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img-modal" class="w3-image" style="max-height:75vh;" src="data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkwBADs=" alt="">
<p id="txt-modal" class="w3-opacity w3-large"></p>
</div>
</div>
<script>
function modalOpen(element) {
document.getElementById("img-modal").src = element.src;
document.getElementById("modal").style.display = "block";
document.getElementById("txt-modal").innerHTML = element.alt;
}
</script>
<!-- Collapsible Menu -->
<script>
function menuExpand() {
var x = document.getElementById("burger");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>