/
index.html
180 lines (174 loc) · 5.11 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Alva Chen Bio</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #dcb879;
}
#card {
width: 744px;
height: 528px;
background-color: white;
position: relative;
}
#intro {
width: 238px;
height: 284px;
background-color: #b4a582;
position: absolute; /*將位置設為絕對*/
left: 0;
bottom: 0;
color: white;
padding-left: 16px; /*推左邊內距*/
}
#center {
width: 320px;
height: 528px;
background-color: #dac9a6;
padding-left: 16px; /*paddin內距*/
position: absolute; /*由於最底層的那塊(card)已經定位為relative，其他區域設定為絕對*/
left: 238px; /*由於粉紅框的寬度為238px將center區塊推到粉紅框旁邊*/
color: grey;
}
h3 {
color: #ba9132;
}
#right {
width: 186px;
height: 528px;
position: absolute;
padding-left: 12px; /*把區塊搬到右邊*/
right: 0; /*讓此區塊跟右邊距離為0，也就是貼齊*/
}
/* 製作出進度條的區塊，使用skill去包graybar跟greenbar */
.skill {
width: 138px;
height: 32px;
/* background: #b9887d; 一開始設計方便好了解區塊在哪，不需要就先助解掉*/
position: relative; /*Skill區塊為rlative是最基層的區塊，使用relative*/
color: #7d6c46;
font-size: 16px;
margin-top: 6px;
}
.gray-bar {
width: 138px;
height: 12px;
background-color: gray;
position: absolute;
bottom: 0;
border-radius: 6px; /* 設計出圓角 */
}
.green-bar {
width: 40%;
height: 12px;
background-color: #ba9132;
position: absolute;
border-radius: 6px; /* 設計出圓角 */
bottom: 0;
}
.right-tag {
position: absolute;
right: 0;
top: 0;
}
.green-bar-2 {
width: 24px;
height: 12px;
background-color: #ba9132;
position: absolute;
border-radius: 6px; /* 設計出圓角 */
bottom: 0;
left: 60%;
}
img {
position: absolute;
top: 0;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/25bcd05e0d.js"></script>
<script>
$(function () {
$("#img_2").hide();
// 使用#去定位id然後再來下指令給id
$("#img_1").click(function () {
// 空括號裡面是預設設定
$("#img_1").fadeOut();
// alert("OK");
// 寫alert去讓此事件有警示讓他發生
$("#img_2").fadeIn();
$("#img_2").click(function () {
$("#img_2").fadeOut();
$("#img_1").fadeIn();
});
});
});
</script>
</head>
<body>
<div id="card">
<!----順序為上到下-->
<img src="IMG_0921.JPG" id="img_1" , width="238" , height="244" />
<img src="photo.jpg" id="img_2" , width="238" , height="244" />
<div id="intro">
<h2>Alva Chen</h2>
<p>專案工程師</p>
<p>
25歲的夢想是到日本東京生活半年
<br />有事沒事只想放空
</p>
</div>
<div id="center">
<h3><i class="fas fa-briefcase"></i> 工作經歷</h3>
<!-- 直接帶入fontawsesome語法至h3前面 -->
<ul>
<!----Ul去塞li的標籤-->
<li>快樂學程式 專案實習生</li>
<li>創創數位 專案工程師</li>
</ul>
<h3><i class="far fa-calendar-alt"></i> 專案經驗</h3>
<ul>
<!----Ul去塞li的標籤-->
<li>ScrumDay 6小時工作坊專案負責人</li>
<p>Accupass上架</p>
<p>線上宣傳暨線下工作坊籌備</p>
<li>快樂學程式社群小編</li>
<li>行銷工程學會 3G工作坊主持人</li>
<li>女生的訪間 企劃籌備</li>
</ul>
</div>
<div id="right">
<h3>個性</h3>
<div class="skill">
內向
<!---名稱--->
<div class="right-tag">外向</div>
<div class="gray-bar"></div>
<div class="green-bar-2"></div>
</div>
<h3>技能</h3>
<div class="skill">
SQL
<!---名稱--->
<div class="gray-bar"></div>
<div class="green-bar" style="width: 60%;"></div>
<!-- 使用CSS屬性來定義他的%數也就是呈現的樣貌 -->
</div>
<div class="skill">
HTML
<!---名稱--->
<div class="gray-bar"></div>
<div class="green-bar"></div>
</div>
</div>
</div>
</body>
</html>