-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (127 loc) · 6.12 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/gif/png" href="assets/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kirito</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=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">
<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=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<body>
<main>
<header class="head" id="home">
<h2 id="logo">
Kirito
</h2>
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="me">
<img src="https://i.pinimg.com/564x/9e/a4/a8/9ea4a8f5e130974e221d94e7932fb47a.jpg" alt="Swordsman wielder">
<section class="introduction">
<h3>Hello there !</h3>
<p>
I am Kirigaya Kazuto aka Kirito , main protagonist of <a href="#" class="keywords">Sword art
online</a> series.
I became known as the «Black Swordsman» (黒の剣士, Kuro no Kenshi?) due to my tendency to wear black
clothing.
<p>As Asuna and a small group of Sword Art Online survivors were not logged out from Sword Art Online in
the aftermath of the incident, Kazuto began playing ALfheim Online as a Spriggan due to seeing an
in-game screenshot of what resembled Asuna, and thus wanting to investigate the matter.</p>
</p>
<button id="gs">Link Start</button>
</section>
</section>
<hr>
<section id="about">
<h3 class='impHead'>
My Carrier so far
</h3>
<div class="feature">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, sequi magnam est repudiandae nemo
laboriosam omnis exercitationem repellat perferendis officiis maxime modi unde aliquam dicta laborum
veritatis reprehenderit eos sunt.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus impedit, eius, esse nostrum ullam
iure necessitatibus, ea aspernatur rerum quis consequatur fugit ratione temporibus provident nam
vitae accusamus similique. Qui!
</p>
<ul id="grace">
<li id="A">Deep Learning</li>
<li id="A">AI</li>
<li id="B">HTML/CSS/JS</li>
<li id="B">Database Management</li>
<li id="A">Python</li>
<li id="A">C</li>
<li id="B">Flutter</li>
<li id="C">Asuna life-time</li>
</ul>
</div>
<section class="test feature">
<p class="comment">
<span class="qoute">“</span> Sword Art Online sucks, Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Atque deserunt ducimus neque accusantium incidunt fugit eius, dolorum optio ipsa dicta expedita
repellat pariatur eum quibusdam eaque harum alias delectus nostrum. <span
class="qoute">”</span>
<span class="author"> -Asuna (Girlfirend)</span>
</p>
<div class="avatar">
<img src="https://qph.fs.quoracdn.net/main-thumb-600118935-200-cwupzwswbibyxizhxwfjakgftcfadelx.jpeg"
alt="asuna">
</div>
</section>
<section class="test feature f2">
<p class="comment">
<span class="qoute">“</span> Sword Art Online sucks,Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Atque deserunt ducimus neque accusantium incidunt fugit eius, dolorum optio ipsa dicta expedita
repellat pariatur eum quibusdam eaque harum alias delectus nostrum. <span
class="qoute">”</span>
<span class="author"> -Suguha (Sibling)</span>
</p>
<div class="avatar">
<img src="https://avatarfiles.alphacoders.com/843/84398.jpg" alt="sister">
</div>
</section>
</section>
<hr>
<section class="cotactme">
<h3 class="impHead">
Contact Me
</h3>
<div id="social">
<form action="#">
<input type="email" id="mail" placeholder="kirito@simp.xyz">
<label for="mail">Your mail</label>
<textarea name="" id="" cols="30" rows="10" placeholder="pat me.. "></textarea>
<button type="submit">Send</button>
</form>
</div>
</section>
<hr>
<footer id="contact">
<ul class="social-bar">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-github"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
</ul>
<p class="copy">made with ♥ by Tri10 </p>
</footer>
</main>
</body>
</html>