-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
236 lines (210 loc) · 13.6 KB
/
index.html
File metadata and controls
236 lines (210 loc) · 13.6 KB
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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>killflex's Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="./assets/library/lightbox2-dev/dist/css/lightbox.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="shortcut icon" type="image" href="./assets/img/favicon2.png">
</head>
<body>
<!-- header -->
<header class="l-header">
<nav class="nav bd-grid">
<div>
<a href="" class="nav__logo">killflex</a>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link"><i class="fas fa-home nav__icon"></i> Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link"><i class="fas fa-user nav__icon"></i> About</a></li>
<li class="nav__item"><a href="#works" class="nav__link"><i class="fas fa-image nav__icon"></i> Works</a></li>
<li class="nav__item"><a href="#contact" class="nav__link"><i class="fas fa-envelope-open-text nav__icon"></i> Contact</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle" style="display: none;">
<i class="fas fa-bars fa-xs"></i>
</div>
</nav>
</header>
<!-- /header -->
<!-- content -->
<main class="l-main">
<!-- home -->
<section class="home bd-grid" id="home">
<div class="home__data">
<p class="home__title-hello">Hello!</p>
<h1 class="home__title">I'm <span class="home__title-color">killflex</span></h1>
<p class="home__title-jabat"><span class="home__title-color">3D Motion Graphic Designer ®</span></p>
<a href="#contact" class="button">Contact</a>
</div>
<div class="home__social">
<a href="https://www.instagram.com/killflex" target="_blank" class="home__social-icon"><i class='bx bxl-instagram-alt'></i></a>
<a href="https://twitter.com/fleksipi" target="_blank" class="home__social-icon"><i class='bx bxl-twitter'></i></a>
<a href="https://github/killflex" target="_blank" class="home__social-icon"><i class='bx bxl-github'></i></a>
<a href="https://linktr.ee/killflex" target="_blank" class="home__social-icon"><i class='bx bxs-layer'></i></a>
</div>
<div class="home__img">
<img src="assets/img/coolguy.svg" alt="guy on landpage">
</div>
</section>
<!-- /home -->
<!-- about -->
<section class="about section" id="about">
<h2 class="section-title">About</h2>
<div class="about__container bd-grid">
<div class="about__img">
<img src="assets/img/itsme3.jpg" alt="killflex face">
</div>
<div>
<h2 class="about__subtitle">Hi there!</h1>
<p class="about__text">Welcome to my portfolio! My name is Ferry Hasan, known as killflex. I'm 18
years old based in Surabaya, Indonesia. I have more than 4 years experience as a Motion Graphic
Designer & almost 2 years as a 3D Artist.
<br><br>
It started from my hobby that loves to play games, watching cartoon animation, and also everything
involved in design. I have the desire to make it by myself. In the end I started learning 2D and 3D
design from various software such as Adobe After Effects, Photoshop, Illustrator, Cinema 4D,
,Blender, and so on.
<br><br>
Doing 3D & Motion Graphic isn't just hobby for me, but it also my biggest passion.</p>
</div>
</div>
</section>
<!-- /about -->
<!-- visuals -->
<section class="visuals section" id="works">
<h2 class="section-title">Works</h2>
<h3 class="visuals__subs bd-grid">3D Art & Illustration</h3>
<div class="visuals__container bd-grid">
<div class="visuals__img">
<a href="assets/img/visuals/work4.jpg" data-lightbox="technology"
data-title="Nobita Room v1 ✦ Blender ✦ Cinema 4D ✦ Arnold ✦ Adobe Photoshop (Personal)">
<img src="assets/img/visuals/work4.jpg" alt="Nobita Room v1 ✦ Blender ✦ Cinema 4D ✦ Arnold ✦ Adobe Photoshop (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work5.jpg" data-lightbox="technology"
data-title="Nobita Room v2 ✦ Blender ✦ Cinema 4D ✦ Arnold ✦ Adobe Photoshop (Personal)">
<img src="assets/img/visuals/work5.jpg" alt="Nobita Room v2 ✦ Blender ✦ Cinema 4D ✦ Arnold ✦ Adobe Photoshop (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work6.jpg" data-lightbox="technology"
data-title="Nobita Room v3 ✦ Blender ✦ Cinema 4D ✦ Arnold ✦ Adobe Photoshop (Personal)">
<img src="assets/img/visuals/work6.jpg" alt="Nobita Room v3 ✦ Blender ✦ Cinema 4D ✦ Arnold ✦ Adobe Photoshop (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work1.jpg" data-lightbox="technology"
data-title="TAKE OUT ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
<img src="assets/img/visuals/work1.jpg" alt="TAKE OUT ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work2.jpg" data-lightbox="technology"
data-title="CLOUDY TRAIN ✦ Blender ✦ Cycles ✦ Adobe After Effects (Personal)">
<img src="assets/img/visuals/work2.jpg" alt="CLOUDY TRAIN ✦ Blender ✦ Cycles ✦ Adobe After Effects (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work3.jpg" data-lightbox="technology"
data-title="NOBODY ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
<img src="assets/img/visuals/work3.jpg" alt="NOBODY ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work7.jpg" data-lightbox="technology" data-title="NIKEAIRMAX ✦ Blender ✦ Cycles ✦ Adobe Photoshop (Personal)">
<img src="assets/img/visuals/work7.jpg" alt="NIKEAIRMAX ✦ Blender ✦ Cycles ✦ Adobe Photoshop (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work8.jpg" data-lightbox="technology" data-title="Ape's Sculpting ✦ Zbrush ✦ base model from Daz3D (Commission)">
<img src="assets/img/visuals/work8.jpg" alt="Ape's Sculpting ✦ Zbrush ✦ base model from Daz3D (Commission)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work9.jpg" data-lightbox="technology" data-title="Dual Sense ✦ Blender ✦ Cycles ✦ Adobe After Effects (Personal)">
<img src="assets/img/visuals/work9.jpg" alt="Dual Sense ✦ Blender ✦ Cycles ✦ Adobe After Effects (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work14.jpg" data-lightbox="technology" data-title="FALLIN ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
<img src="assets/img/visuals/work14.jpg" alt="FALLIN ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work11.jpg" data-lightbox="technology" data-title="i'm_still_waiting ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
<img src="assets/img/visuals/work11.jpg" alt="i'm_still_waiting ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
</a>
</div>
<div class="visuals__img">
<a href="assets/img/visuals/work12.jpg" data-lightbox="technology" data-title="Spooky ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
<img src="assets/img/visuals/work12.jpg" alt="Spooky ✦ Blender ✦ Octane ✦ Adobe After Effects (Personal)">
</a>
</div>
</div>
<div class="visuals__more1">
<a href="https://www.instagram.com/killflex" target="_blank">
<h5>more works</h5>
</a>
</div>
</section>
<!-- /visuals -->
<!-- contact -->
<section class="contact section" id="contact">
<h2 class="section-title">Contact</h2>
<p class="contact__text">Have any questions or job inquiries? Don't hesitate to contact me at any time. </p>
<div class="contact__container bd-grid">
<form method="POST" action="https://formsubmit.co/d8c08cd8faec10fc3a3c3001b362d6b7" class="contact__form">
<input type="hidden" name="_next" value="https://killflex.github.io/success.html">
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<input type="text" placeholder="Name" name="Name" class="contact__input" required>
<input type="email" placeholder="Email" name="Email" class="contact__input" required>
<textarea id="" cols="0" rows="10" name="Messages" class="contact__input txt-area" placeholder="Your message" required></textarea>
<button type="submit" class="contact__button" onlick><i class='bx bxs-send'></i></button>
</form>
</div>
</section>
<!-- /contact -->
</main>
<!-- /content -->
<!-- footer -->
<footer class="footer">
<p class="footer__title">connect with me</p>
<div class="footer__socials">
<a href="https://www.instagram.com/killflex" target="_blank" class="footer__icon"><i class='bx bxl-instagram-alt'></i></a>
<a href="https://twitter.com/fleksipi" target="_blank" class="footer__icon"><i class='bx bxl-twitter'></i></a>
<a href="https://www.facebook.com/flexsify" target="_blank" class="footer__icon"><i class="bx bxl-facebook-square"></i></a>
<a href="https://www.linkedin.com/in/ferry-hasan-4988b8242" target="_blank" class="footer__icon"><i class="bx bxl-linkedin-square"></i></a>
<a href="mailto:killflexediting@gmail.com" target="_parent" class="footer__icon"><i class='bx bxs-envelope'></i></a>
</div>
<p class="footer__email"></p>
<p class="footer__cpy">Copyright © 2021 <a href="https://linktr.ee/killflex" style="text-decoration: none; color: rgba(255, 255, 255, 0.425);"> killflex </a>. All Rights Reserved</p>
</footer>
<!-- /footer -->
<script src="./assets/library/lightbox2-dev/dist/js/lightbox-plus-jquery.js"></script>
<script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>
<script>
lightbox.option({
'alwaysShowNavOnTouchDevices': true,
'disableScrolling': true,
'wrapAround': true,
'showImageNumberLabel': false,
'imageFadeDuration': 400,
'fadeDuration': 200
})
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="assets/js/main.js"></script>
</body>
</html>