-
Notifications
You must be signed in to change notification settings - Fork 1
/
hobbies.html
175 lines (168 loc) · 7.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="node_modules/flickity/dist/flickity.min.css" media="screen">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylehsheet" href="node_modules/boostrap-social/bootstrap-social.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" <link rel="preconnect"
href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Bungee&family=Orbitron:wght@900&display=swap"
rel="stylesheet">
<title>
Hoang Hieu
</title>
</head>
<body class="not-index mt-5 hobbies postion-relative" data-bs-spy="scroll" data-bs-target="#hobby-list">
<nav class="navbar navbar-nav navbar-expand-md fixed-top">
<div class="container">
<div class="row w-100 text-center m-0">
<div class="col-md-4 text-center order-md-1 order-first">
<a class="navbar-brand fs-1 bg-music" href="#" onclick="musicBg()">
Hoang Hieu
</a>
</div>
<!--<div class="collapse navbar-collapse" id="navbarNav">-->
<div class="col-3 col-md-2 text-center order-md-0 mt-2">
<ul class="navbar-nav w-100">
<li class="nav-item mx-auto"><a class="nav-link " data-text="Home"
href="/home.html">Home</a></li>
</ul>
</div>
<div class="col-3 col-md-2 text-center order-md-0 mt-2">
<ul class="navbar-nav w-100">
<li class="nav-item mx-auto"><a class="nav-link" data-text="Project"
href="/project.html">Project</a>
</li>
</ul>
</div>
<div class="col-3 col-md-2 text-center order-md-2 mt-2">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="/hobbies.html" data-text="Hobbies">Hobbies</a>
</li>
</ul>
</div>
<div class="col-3 col-md-2 text-center order-md-2 mt-2">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/blog.html" data-text="Blog">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<audio id="musicPlayer" loop>
<source src="music/Forever Young.mp3" type="audio/mp3">
</audio>
<audio id="btnSound">
<source src="music/ES_Light Switch On 6 - SFX Producer.mp3" type="audio/mp3">
</audio>
<div class="container">
<div class="row">
<div class="col-md-2 d-lg-block d-none">
<div id="hobby-list" class="list-group position-fixed">
<a class="list-group-item list-group-item-action" href="#hobby-1">Film</a>
<a class="list-group-item list-group-item-action" href="#hobby-2">Magic</a>
<a class="list-group-item list-group-item-action" href="#hobby-3">Game</a>
<a class="list-group-item list-group-item-action" href="#hobby-4">Reading</a>
<a class="list-group-item list-group-item-action" href="#hobby-5">Photography</a>
<a class="list-group-item list-group-item-action" href="#hobby-6">Music</a>
</div>
</div>
<div class="col-lg-10 col-12">
<div>
<div class="container x" id="hobby-1">
<h1 class="hobby-title">Film</h1>
<div class="row">
<div class="col-12">
<figure>
<blockquote class="blockquote">
<p class="text-center fs-2">When I'm sad I stop being sad and be <strong>AWESOME</strong> instead.</p>
</blockquote>
<figcaption class="blockquote-footer text-center fs-6">
Barney Stinson in <cite title="Source Title">How I met your mother</cite>
</figcaption>
</figure>
<h2 class="fw-bolder">1. How I met your mother</h2>
<video controls>
<source src="image/83 Legendary Moments from Barney Stinson.mp4" type="video/mp4">
</video>
<p class="note"></p>
</div>
<div class="col-12">
<h2 class="fw-bolder">2. The god father</h2>
<video controls>
<source src="image/y2mate.com - The Godfather Trailer HD_1080p.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="container x" id="hobby-2">
<h1 class="hobby-title">Magic</h1>
<div class="row">
<div class="col-4">
<img class="w-100" src="image/IMG_3783.jpg" alt="card">
</div>
<div class="col-4">
<img class="w-100" src="image/IMG_3784.jpg" alt="card">
</div>
<div class="col-4">
<img class="w-100" src="image/IMG_3783.jpg" alt="card">
</div>
<p class="note fs-4">I got like 5 decks of card but it has been so long since the last time I touched it:(. I used to be so into card trick to trick my friends and teachers. Of course, I did not take any course other than Youtube but I still could do some awesome tricks. </p>
</div>
</div>
<div class="container x " id="hobby-3">
<h1 class="hobby-title">Game</h1>
<h2>CSGO</h2>
<div class="row">
<div class="col-md-4"><img class="w-100" src="image/200276262_525464255556082_8240016237446852250_n.jpg"></div>
<div class="col-md-4"><img class="w-100" src="image/201489657_569243624059404_2815562441739580215_n.jpg"></div>
<div class="col-md-4"><img class="w-100" src="image/201986092_126754986200409_5199337753018911967_n.jpg"></div>
<p class="fs-4 note">I don't play too much game these days but sometimes a bit of it would blow some steams.</p>
</div>
</div>
<div class="container x" id="hobby-4">
<h1 class="hobby-title" >Reading</h1>
<div class="row">
<h2>Sherlock Holmes - Conan Doyle</h2>
<h2>All Agatha Christie's detective books<span class="badge bg-danger">Favorite</span></h2>
<p class="fs-4 note">The "G hour" is the first book I ever read from Agatha Christie which is also the first book I ever read seriously and consciously. A 14-year-old reading all the creepy, horrify criminal-filled books, what can he get? Nothing much I would say. But it did richen my imagination. I used to dream I could be Poirot's partner or even a spectator to witness Poirot's wit, delacy in not only solve criminal case but also real life: the ability to pay attention to small details, to read people mind, to be empathy. Yes, it is about people and their mind, sounds like a psychology books. All in all, Agatha Christie has contributed to a part of me, of my mind.<br>You may be more familiar to Sherlock Holmes by Conan Doyle. But for me, Sherlock Holmes is a bit old in its literature style while Poirot's stories being more close to the current life. I may have only read about 5-6 books but then the stories always get me despite how familiar I am to hers style. </p>
<h2>Educated - Tara Westover<span class="badge bg-info"> On progress</span></h2>
<h2>The big magic - Elizabeth Gilbert <span class="badge bg-success"> Done</span></h2>
<h2>Philip Roth's Complaints<span class="badge bg-info">On progress</span></h2>
<p class="note fs-4"></p>
</div>
</div>
<div class="container x" id="hobby-5">
<h1 class="hobby-title" >Photography</h1>
<div class="row">
<div class="col">
</div>
</div>
</div>
<div class="container x" id="hobby-6">
<h1 class="hobby-title">Music</h1>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container d-flex justify-content-center">
<h2>Made in 2021</h2>
</div>
</footer>
<script src="js/main.js">
</script>
<script src="node_modules/flickity/dist/flickity.pkgd.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>