-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (140 loc) · 4.89 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
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="ko">
<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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="notosanscjkkr.css">
<title>NotoSansCJKkr</title>
</head>
<style>
body {
min-height: 100vh;
display: grid;
align-content: center;
font-family: "NotoSansKR";
color: #24292E;
}
.value {
font-size: 40px;
}
.fw-thin {
font-weight: 100;
}
.fw-demilight {
font-weight: 350;
}
.fw-black {
font-weight: 900;
}
.linkWrap {
display: flex;
align-items: center;
text-decoration: none;
}
.icon {
width: 40px;
height: 40px;
margin-right: 10px;
}
svg {
width: 100%;
height: 100%;
}
svg path {
fill: #212121;
transition: fill 0.3s ease-in-out;
}
.name {
color: #FDBD3A;
font-weight: 500;
}
svg:hover path {
fill: #FDBD3A;
}
@media (prefers-color-scheme: dark) {
body {
color: #e8eaed;
background-color: #22272E;
}
svg path {
fill: #e8eaed;
}
.name {
color: #49D294;
}
svg:hover path {
fill: #49D294;
}
}
</style>
<body>
<div class="container py-5">
<div class="row mb-5">
<div class="col-12">
<div class="linkWrap mb-2">
<a href="https://github.com/Hansanghyeon/NotoSansCJKkr">
<div class="icon">
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M 10 2 C 8.346 2 7 3.346 7 5 L 7 41 C 7 42.654 8.346 44 10 44 L 11 44 L 11 42 L 10 42 C 9.449 42 9 41.552 9 41 L 9 36 L 41 36 L 41 41 C 41 41.552 40.552 42 40 42 L 25 42 L 25 44 L 40 44 C 41.654 44 43 42.654 43 41 L 43 5 C 43 3.346 41.654 2 40 2 L 10 2 z M 14 8 L 18 8 L 18 12 L 14 12 L 14 8 z M 14 17 L 18 17 L 18 21 L 14 21 L 14 17 z M 14 26 L 18 26 L 18 30 L 14 30 L 14 26 z M 13 38 L 13 48.625 L 18 46.125 L 23 48.625 L 23 38 L 13 38 z" />
</svg>
</div>
</a>
<a href="https://github.com/Hansanghyeon" class="github">
<div class="icon">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512"
xmlns="http://www.w3.org/2000/svg">
<path
d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z" />
</svg>
</div>
</a>
</div>
<div class="name">
@Hansanghyeon
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="label">Thin 100</div>
<div class="value fw-thin">나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="label">Light 300</div>
<div class="value fw-thin">나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="label">DemiLight 350</div>
<div class="value fw-demilight">나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="label">Medium 500</div>
<div class="value fw-normal">나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="label">Blod 700</div>
<div class="value fw-bold">나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="label">Black 900</div>
<div class="value fw-black">나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄</div>
</div>
</div>
</div>
</body>
</html>