Gitiles
Code Review Sign In
gerrit.openbmc.org / CharlesHsu0511 / YourWeb / a44e211263092a32b39a494f85f40c9b352a8bee / . / index.html
blob: b41f12847d40cd0c1ed10786a7800668798651ba [file] [log] [blame]
Charles93e26742018-02-23 16:33:49 +0800[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
Unknowna44e2112018-02-27 14:31:36 +0800[diff] [blame^]7 <title>Welcome to Charles' site</title>
8 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Charles93e26742018-02-23 16:33:49 +0800[diff] [blame]9 <link rel="stylesheet" href="css/style.css">
10 <link rel="stylesheet" href="css/font-awesome.min.css">
11</head>
12<body>
13 <header id="header">
14 <div class="container">
15 <nav>
16 <div id="logo">
17 <a href="">
18 <img src="images/logo1.png" alt="logo">
19 </a>
20 </div>
21
22 <ul class="nav">
23 <ul class="nav">
24
25 <li><a href="#home">home</a></li>
26
27 <li><a href="#about">about</a></li>
28
29 <li><a href="#service">service</a></li>
30
31 <li><a href="#portfolio">portfolio</a></li>
32
33 <li><a href="#contact">contact</a></li>
34
35 </ul>
36 </ul>
37 </nav>
38 </div>
39 </header>
40
41 <!-- Homepage Background Image -->
42 <section class="home_bg" id="home">
43 <div class="container_table">
44 <div class="container_table_cell">
45 <h2>hi, i am Charles</h2>
46
47 <div class="social_icons">
48 <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
49 <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
50 <a href=""><i class="fa fa-github-alt" aria-hidden="true"></i></a>
51 <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
52 <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
53 </div>
54 </div>
55 </div>
56 </section>
57
58 <!-- About Me -->
59 <section class="about_me clearfix" id="about">
60 <div class="container">
61 <h2>about me</h2>
62
63 <div class="summary">
64 <div class="col-left">
65 <div class="avatar">
66 <img src="images/me.png" alt="avatar">
67 </div>
68 </div>
69
70 <div class="col-right">
71 <div class="personal-info">
72 <h3>hello!</h3>
73 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit maiores facere consequatur omnis ipsa recusandae possimus aspernatur totam illum aliquam excepturi beatae veniam Lorem ipsum dolor sit amet, consectetur.</p>
74 </div>
75
76 <div class="skill">
77 <ul>
78 <li>html5 and css3</li>
79 <li>responsive website design</li>
80 <li>ruby on rails</li>
81 </ul>
82 </div>
83
84 <div class="button-group">
85 <div class="download_cv">
86 <a href="">download CV</a>
87 </div>
88 <div class="hire_me">
89 <a href="">hire me</a>
90 </div>
91 </div>
92 </div>
93 </div>
94 </div>
95 </section>
96
97 <!-- What I Offer -->
98 <section class="my_service clearfix" id="service">
99 <div class="container">
100 <h2>what i offer</h2>
101
102 <div class="service-items">
103 <div class="service-content">
104 <i class="fa fa-html5" aria-hidden="true"></i>
105 <h3>web design and development</h3>
106 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, facere.</p>
107 </div>
108
109 <div class="service-content">
110 <i class="fa fa-css3" aria-hidden="true"></i>
111 <h3>web design and development</h3>
112 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, facere.</p>
113 </div>
114
115 <div class="service-content">
116 <i class="fa fa-camera-retro" aria-hidden="true"></i>
117 <h3>web design and development</h3>
118 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, facere.</p>
119 </div>
120 </div>
121 </div>
122 </section>
123
124 <!-- Resume -->
125 <section class="resume">
126 <div class="container">
127 <h2>resume</h2>
128
129 <div class="col-horizontal clearfix">
130 <h3 class="resume-subtitle">education:</h3>
131
132 <div class="col-item">
133 <p class="experience-year">2001 - 2002</p>
134 <div class="resume-detail">
135 <h4>computer science</h4>
136 <h6>google university, australia</h6>
137 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
138 </div>
139 </div>
140
141 <div class="col-item">
142 <p class="experience-year">2002 - 2003</p>
143 <div class="resume-detail">
144 <h4>google collage</h4>
145 <h6>stanford university, BD</h6>
146 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
147 </div>
148 </div>
149 </div>
150
151 <div class="col-horizontal clearfix">
152 <h3 class="resume-subtitle">experience:</h3>
153
154 <div class="col-item">
155 <p class="experience-year">2004 - 2005</p>
156 <div class="resume-detail">
157 <h4>themeforest company, malibug</h4>
158 <h6>front end developer</h6>
159 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
160 </div>
161 </div>
162
163 <div class="col-item">
164 <p class="experience-year">2005 - 2007</p>
165 <div class="resume-detail">
166 <h4>google company, australia</h4>
167 <h6>wordpress developer</h6>
168 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
169 </div>
170 </div>
171 </div>
172 </div>
173 </section>
174
175 <section class="quotes">
176 <div class="overlay"></div>
177 <div class="container">
178 <div class="quote-inner">
179 <h3>Let's work together!</h3>
180 <p>I am available for freelance projects</p>
181 <a href="#">get quotes</a>
182 </div>
183 </div>
184 </section>
185
186 <!-- Latest Work -->
187 <section class="works" id="portfolio">
188 <div class="container">
189 <h2>latest work</h2>
190
191 <div class="work-items">
192 <div class="col-work">
193 <a href="images/me.png">
194 <img src="images/me.png" alt="portfolio-1">
195 </a>
196 </div>
197
198 <div class="col-work">
199 <a href="images/me.png">
200 <img src="images/me.png" alt="portfolio-2">
201 </a>
202 </div>
203
204 <div class="col-work">
205 <a href="images/me.png">
206 <img src="images/me.png" alt="portfolio-3">
207 </a>
208 </div>
209
210 <div class="col-work">
211 <a href="images/me.png">
212 <img src="images/me.png" alt="portfolio-4">
213 </a>
214 </div>
215
216 <div class="col-work">
217 <a href="images/me.png">
218 <img src="images/me.png" alt="portfolio-5">
219 </a>
220 </div>
221
222 <div class="col-work">
223 <a href="images/me.png">
224 <img src="images/me.png" alt="portfolio-6">
225 </a>
226 </div>
227 </div>
228 </div>
229 </section>
230
231 <!-- Contact -->
232 <section class="contact" id="contact">
233 <div class="container">
234 <h2>get in touch</h2>
235
236 <div class="contact-form">
237 <form action="">
238 <div class="form-input">
239 <input type="text" name="name" class="form-style" placeholder="input your name" required>
240 </div>
241
242 <div class="form-input">
243 <input type="email" name="email" class="form-style" placeholder="enter your email" required>
244 </div>
245
246 <div class="form-input">
247 <textarea name="textarea" id="message" cols="30" rows="10" placeholder="write message" required></textarea>
248 </div>
249
250 <div class="form-submit">
251 <input type="submit" name="submit" value="submit">
252 </div>
253 </form>
254 </div>
255 </div>
256 </section>
257
258 <!-- Footer -->
259 <footer id="footer">
260 <div class="container">
261 <div class="footer-content">
262 <p>&copy; 2017 ALPHA Camp | All Rights Reserved.</p>
263 <div class="footer-social-icon">
264 <ul>
265 <li>
266 <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
267 <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
268 <a href=""><i class="fa fa-github-alt" aria-hidden="true"></i></a>
269 <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
270 <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
271 </li>
272 </ul>
273 </div>
274 </div>
275 </div>
276 </footer>
277
278</body>
279</html>