-
Notifications
You must be signed in to change notification settings - Fork 0
/
skill.html
143 lines (113 loc) · 6.09 KB
/
skill.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>My Skill</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/tzuicon.jpg" rel="icon">
<link href="assets/img/tzuicon.jpg" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container-fluid d-flex justify-content-between align-items-center">
<h1 class="logo me-auto me-lg-0"><a href="index.html">Tzu-Chun</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a class="active" href="skill.html">Skill</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<main id="main">
<!-- ======= Skill Section ======= -->
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skill</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box iconbox-blue">
<h4><a href="">HTML5語法</a></h4>
<p><em>HTML5是目前基礎網頁技術，網頁瀏覽器可以讀取HTML檔案，熟知HTML document網頁內容語意結構，並瞭解如何修改成為視覺化網頁。</em></p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="zoom-in" data-aos-delay="200">
<div class="icon-box iconbox-orange ">
<h4><a href="">CSS3語法</a></h4>
<p><em>網頁語法就像是網頁的樣式表，可彈性自定變化網頁元素顯示樣貌，熟知CSS3網頁語法，能獨立美化網頁樣式，搭配HTML語法完成切版。</em></p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<h4><a href="">JavaScript</a></h4>
<p><em>熟知JavaScript程式語言，了解DOM(Document Object Model)介面，每一個節點皆為(Object)並擁有各自的屬性及方法，熟悉DOM屬性與方法改變網頁架構風格及內容。</em></p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="400">
<div class="icon-box iconbox-pink">
<h4><a href="">Bootstrap</a></h4>
<p><em>熟知Bootstrap由 HTML、CSS 和 JavaScript寫成的前端網頁框架，主要以RWD響應式網頁與行動優先為核心設計，並能獨力修改BS開源框架，快速開發RWD網頁。</em></p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="500">
<div class="icon-box iconbox-pink">
<h4><a href="">Photoshop</a></h4>
<p><em>能獨力使用PS影像處理軟體，用於規劃網頁整體版面或編修圖片，並能獨自製作banner，設計海報。</em></p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="600">
<div class="icon-box iconbox-pink">
<h4><a href="">Illustrator</a></h4>
<p><em>熟悉鋼筆工具使用，並能獨力製作logo、icon，搭配photoshop工具，應用在網頁設計上。</em></p>
</div>
</div>
</div>
</div>
</section><!-- End Services Section -->
</main>
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>Tzu-Chun</span></strong>. All Rights Reserved
</div>
</div>
</footer><!-- End Footer -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>