-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhobbies.html
186 lines (158 loc) · 8.92 KB
/
hobbies.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<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>Games | Given Mikaela Andaya</title>
<!-- CSS -->
<link rel="stylesheet" href="style/general.css">
<link rel="stylesheet" href="style/utility.css">
<link rel="stylesheet" href="style/space.css">
<link rel="stylesheet" href="style/hobbies.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/bb83019d49.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- header -->
<header>
<!-- Navigation -->
<nav>
<ul class="navigation">
<li>
<a href="index.html"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li>
<a href="about.html"> <i class="fa-solid fa-user"></i> About <i class="fa-solid fa-caret-down"></i></a>
<!-- Sub Nav -->
<div class="sub-nav">
<a href="favorites.html"> <i class="fa-solid fa-star"></i> Favorites</a>
<a href="likes.html"> <i class="fa-solid fa-thumbs-up"></i></i> Likes & Dislikes</a>
</div>
</li>
<li>
<a href="hobbies.html"><i class="fa-solid fa-palette"></i> Hobbies <i class="fa-solid fa-caret-down"></i> </a>
<!-- Sub Nav -->
<div class="sub-nav">
<a href="hobbies.html"> <i class="fa-solid fa-paintbrush"></i> Art</a>
<a href="games.html"> <i class="fa-solid fa-gamepad"></i> Games</a>
<a href="favorites.html"> <i class="fa-solid fa-film"></i> Media</a>
</div>
</li>
<li>
<a href="gallery.html"><i class="fa-solid fa-images"></i> Gallery</a>
</li>
<li>
<a href="contacts.html"><i class="fa-solid fa-address-book"></i> Contacts</a>
</li>
</ul>
<div class="line"></div>
<div class="action">
<button class="btn btn-cta ft-primary"> <i class="fa-solid fa-pen"></i> Write me a message!</button>
<i class="fa-solid fa-star"></i>
</div>
</nav>
</header>
<div class="planet">
<img src="media/image/graphic/header.png" class="planet-header">
<h1 class="planet-title">HOBBIES</h1>
<h1 class="planet-title">HOBBIES</h1>
<h1 class="planet-title">HOBBIES</h1>
</div>
<div class="decor">
<img src="media/image/decor/saturn.png" class="saturn-top">
<img src="media/image/decor/saturn.png" class="saturn-next">
<img src="media/image/decor/bluegiants.png" class="giants-one">
<img src="media/image/decor/bluegiants.png" class="giants-two">
<img src="media/image/decor/catstronauts.png" class="catstronauts">
<img src="media/image/decor/curved-arrows.png" class="arrow-top-l">
<img src="media/image/decor/star-sparkle-l.png" class="stars-top-l">
<img src="media/image/decor/curved-arrows.png" class="arrow-top-r">
<img src="media/image/decor/star-sparkle-r.png" class="stars-top-r">
</div>
<main>
<div class="decor">
<img src="media/image/decor/tape.png" class="l-tape">
<img src="media/image/decor/tape.png" class="r-tape">
<!-- <img src="media/image/decor/const1.png" class="const"> -->
</div>
<!-- Title Section -->
<section id="title">
<h2 class="heading">Hobbies</h2>
<hr class="line">
<div class="title-content">
<div class="image">
<div class="left">
<img src="media/image/picture/art-tradit1.jpg" alt="given's art">
</div>
<div class="right">
<img src="media/image/picture/art-comms.png" alt="given's art">
<img src="media/image/picture/art-tradit2.png" alt="given's art">
</div>
</div>
<div class="text-part">
<h2 class="heading-small">About Art</h2>
<p class="paragraph">its a lil frustrating most of the time i feel like im just being a masochist to myself, although it is rlly fun to do too, but looking at other ppl’s art either makes me jealous of their skill or fascinated </p>
</div>
</div>
</section>
<!-- Beginning Section -->
<section id="begin">
<article class="text-part">
<h2 class="small-heading">The Beginning</h2>
<p class="paragraph">i kinda just <span class="bold">grew up</span> with doing <span class="cr-lightYellow">art</span> cuz my aunt drew a lot too and i just thought it was my thing since</p>
<p class="paragraph">what kept me going until now is desire to be as good/better when i look at other ppl’s art, and its fun being able to <span class="cr-blue">draw the images i create in my head</span> exactly <span class="bold">(although sometimes it doesnt turn out like what i expected then its not fun)</span> </p>
</article>
<div class="image">
<img src="media/image/picture/art-old.jpg" alt="give's old art">
</div>
</section>
<!-- Recent Art Section -->
<section id="recent">
<h2 class="heading-small ta-center"> Art I've made so far</h2>
<div class="gallery">
<div class="gallery-item"><img src="media/image/picture/art-moon.png" alt="given's art"></div>
<div class="gallery-item"><img src="media/image/picture/art-snow.png" alt="given's art"></div>
<div class="gallery-item"><img src="media/image/picture/art-room.png" alt="given's art"></div>
<div class="gallery-item"><img src="media/image/picture/art-pink.png" alt="given's art"></div>
</div>
</section>
<!-- Annoy Section -->
<section id="annoy">
<div class="image">
<div class="line"></div>
<div class="line"></div>
<img src="media/image/picture/art-circle.png" alt="given'sart" class="main">
</div>
<article class="text-part">
<h2 class="heading-small">What annoys me</h2>
<p class="paragraph">something that annoys me about art is that <span class="cr-velvet">its way too hard T-T </span> like i said earlier, its so annoying when i wanna create something from my head <span class="cr-blue"> but it doesnt turn out the same way i want it to be</span>, the art is not arting (c" ತ,_ತ) </p>
<p class="paragraph">And its kinda not the same thing but <span class="cr-lightYellow">its so frustrating</span> when other ppl r better than u T-T it either makes me unmotivated or motivated, especially with ppl the same age as me, but i am still young so <span class="bold td-underline"> i’ll hav more time to improve,</span></p>
<p class="paragraph"> just wait until then <span class="bold">I WILL BE A LEGEND</span> well <span class="light">i’d hav to die to be one so nvm</span></p>
</article>
</section>
<!-- Commission section -->
<section id="commission">
<article class="text-part">
<h2 class="heading-small">Art Commissions</h2>
<p class="paragraph mg-center"><span class="bold">OPENING COMMISSIONS!!!</span><br>i do mostly anime art styled stuff, i charge a price for mimicking art styles too, You can just dm me on my art IG <a href="https://instagram.com/mikavenven?igshid=YmMyMTA2M2Y=" target="_blank">Mikavenven</a>, or my tiktok <a href="https://www.tiktok.com/@ven_mika?lang=en" target="_blank">ven_mika</a></p>
</article>
<div class="image">
<div class="main">
<img src="media/image/picture/art-comm.png" alt="given art commission posting">
</div>
<div class="side">
<img src="media/image/picture/art-comm-contact.jpg" alt="given art commission posting">
</div>
</div>
<button class="btn btn-space">Commission Me!</button>
</section>
</main>
<!-- Footer -->
<footer>
<h2 class="ft-alt web-name">Given Mikalea Andaya</h2>
<p class="ft-primary maker ">Website Design By <span class="name cr-blue">Vincent Auriol Liussyaputra</span> 🞄 Shubamium</p>
</footer>
</body>
</html>