-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
148 lines (129 loc) · 3.61 KB
/
about.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ma Favorite</title>
<style media="screen">
body{
background-color: #6fa2f2;
margin : 0;
}
a {
text-decoration: none;
color: black;
}
.header p {
text-align: center;
margin: 40px;
font-size: 15vh;
font-weight: bold;
font-family: fantasy;
height: 20vh;
}
.nav{
display: flex;
justify-content: space-around;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
width: 300px;
background-color: white;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
img {
border-radius: 5px 5px 0 0;
width: auto;
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
.card_container{
display: flex;
justify-content: space-around;
}
.am {
font-size: 25px;
font-family: fantasy;
}
.br {
font-size: 25px;
font-family: fantasy;
}
.mf {
font-size: 25px;
font-family: fantasy;
}
.kb {
font-size: 25px;
font-family: fantasy;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
font-size:18px;
font-family: fantasy;
margin-top: 10%;
}
</style>
</head>
<body>
<div class="header">
<a href="index.html"><p>MA !</p></a>
</div>
<div class="nav">
<div class="am">
<a href="about.html"><p>About Me</p></a>
</div>
<div class="br">
<a href="book.html"><p>Book Review</p></a>
</div>
<div class="mf">
<a href="my.html"><p>My Favorite</p></a>
</div>
<div class="kb">
<a href="knowledge1.html"><p>Knowledge Base</p></a>
</div>
</div>
<div class="card_container">
<div class="card">
<img src="Element.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Element School</b></h4>
<p> 밝고 명랑하며 세상 놀기 바빴던 초등학교 시절</p>
</div>
</div>
<div class="card">
<img src="Middle.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Middle School</b></h4>
<p>한창 음식을 좋아하고 친구들이랑 놀며 적당히 공부를 했던 중학교 시절</p>
</div>
</div>
<div class="card">
<img src="High.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>High School</b></h4>
<p> 인생에서 가장 공부로 스트레스를 받으며 성취감도 얻었던 고등학교 시절</p>
</div>
</div>
<div class="card">
<img src="NOW.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Now</b></h4>
<p> 20살의 청춘을 즐기는 지금</p>
</div>
</div>
</div>
<div class="footer">
<p> Ma Soyoung | Kookmin Univ. MIS | 2021 </p>
</div>
</body>
</html>