Skip to content

Commit

Permalink
Original Work
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cheny-chen
Cheny-chen committed Sep 27, 2017
0 parents commit 16657b3
Show file tree
Hide file tree
Showing 3 changed files with 353 additions and 0 deletions.
Binary file added images/black_cat.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 129 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="styles/style.css">
<title>Welcome to Cheny’s Site!!!</title>
</head>
<body>
<div id="nav">
<div class="container">
<ul class="menu">
<li><a href="#about">Who am I</a></li>
<li><a href="#my-work">My Work</a></li>
<li><a href="#contact-me">Contact me</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="container">
<div id="about">
<div id="my-avatar">
<img src="images/black_cat.jpg" alt="my avatar">
</div>
<div id="my-info">
<h1>I am Cheny</h1>
<h3>IOT Software Engineer</h3>
<hr class="bar">
<table>
<tr>
<th>Birth</th>
<td>1974</td>
</tr>
<tr>
<th>工作經驗</th>
<td> 10 年，IT 界</td>
</tr>
<tr>
<th>常用系統</th>
<td>Linux- RHEL, Centos, Fedora, Ubuntu, Raspbian</td>
</tr>
<tr>
<th>開發技能</th>
<td>HTML, CSS, JavaScript, Ruby on Rails, Node.js, Oracle, MySQL, MongoDB</td>
</tr>
<tr>
<th>學習經歷</th>
<td>
大航道計劃結業, 2018<br>
ALPHA 大學結業, 2017
</td>
</tr>
</table>
</div>
</div>
<div id="my-work">
<h1>This is My Work</h1>
<div id="my-work-gallery">
<div class="item">
<img src="http://lorempixel.com/300/300/" alt="My Personal Site">
<div class="item-info">
<h3>我的個人網站</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ad ex quo ab quidem necessitatibus voluptatibus, sit. Soluta aperiam recusandae, fugit, necessitatibus sed blanditiis cumque ullam quidem molestias dolorem quibusdam.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/300/300/" alt="My Personal Site">
<div class="item-info">
<h3>我的個人網站</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ad ex quo ab quidem necessitatibus voluptatibus, sit. Soluta aperiam recusandae, fugit, necessitatibus sed blanditiis cumque ullam quidem molestias dolorem quibusdam.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/300/300/" alt="My Personal Site">
<div class="item-info">
<h3>我的個人網站</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ad ex quo ab quidem necessitatibus voluptatibus, sit. Soluta aperiam recusandae, fugit, necessitatibus sed blanditiis cumque ullam quidem molestias dolorem quibusdam.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/300/300/" alt="My Personal Site">
<div class="item-info">
<h3>我的個人網站</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ad ex quo ab quidem necessitatibus voluptatibus, sit. Soluta aperiam recusandae, fugit, necessitatibus sed blanditiis cumque ullam quidem molestias dolorem quibusdam.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/300/300/" alt="My Personal Site">
<div class="item-info">
<h3>我的個人網站</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ad ex quo ab quidem necessitatibus voluptatibus, sit. Soluta aperiam recusandae, fugit, necessitatibus sed blanditiis cumque ullam quidem molestias dolorem quibusdam.</p>
</div>
</div>
</div>
</div>
<div id="contact-me">

<h1>Contact me</h1>

<form action="" class="contact-form">
<div class="form-row">
<label for="name">姓名</label>
<input id="name" name="name" type="text">
</div>
<div class="form-row">
<label for="email">Email</label>
<input id="email" name="email" type="email">
</div>
<div class="form-row">
<label for="message">訊息</label>
<textarea name="message" id="message"></textarea>
</div>
<div class="form-row">
<button type="reset">重設</button>
<button type="sumbit">提交</button>
</div>
</form>

</div>

</div>
</div>
<div id="footer">
<hr />
<p>
&copy;2017 Cheny.Chen. All rights reserved.
</p>
</div>
</body>
</html>
224 changes: 224 additions & 0 deletions styles/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
* {
box-sizing: border-box;
}

h1 {
margin-bottom: 0;
text-align: center;
}

h3 {
margin: 0;
}

table {
font-size: 14px;
text-align: left;
}

th, td {
vertical-align: top;
}

td {
color: #666;
padding-left: 10px;
}

hr {
border: 0.5px solid #eee;
}

#nav {
/*border: 1px solid red;*/
background-color: #ff6600;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}

#content {
/*border: 1px solid blue;*/
position: relative;
top: 78px;
padding: 15px;
}

.container {
/*border: 1px solid #ccc;*/
width: 800px;
margin: 0 auto;
}

#content > .container > div {
padding: 78px 0;
}


#footer {
/*padding-top: 80px;
position: absolute;*/
}

#footer p {
margin: 30px 20%;
}

#about, #my-work, #contact-me {
/*border: 1px solid yellow;*/
}

#about h1 {
margin-bottom: 0;
text-align: left;
}

#my-work-gallery {
text-align: center;
}

.menu li {
width: 150px;
padding: 10px 0px;
margin-bottom: 15px;
/*border: 1px solid #fff;*/
border-radius: 8px;

list-style-type: none;
text-align: center;
background-color: #ff6600;
color: #fff;
display: inline-block;
float: right;
}

a {
display: block;
color: #fff;
text-decoration: none;
}

li:hover {
/*border: 1px solid #ff6600;*/
background-color: #fff;
}

li:hover a {
color: #ff6600;
font-weight: 800;
}

/* about me */

#my-avatar {
/*border: 1px solid red; /* 標示用，排版完記得拿掉 */
margin-right: 20px;
float: left;
}

#my-avatar img {
max-width: 300px;
max-height: 150px;
}

/* my work */

.item {
position: relative;
display: inline-block;
margin-bottom: 10px;
}

.item img {
width: 300px;
}

.item-info {
/*border: 1px solid red; /* 標示用，排版完記得拿掉 */
background-color: rgba(255,255,255,.8); /* 背景半透明 */

width: 100%;
height: 100%;

text-align: center;
padding: 25px 10px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.item-info:hover {
opacity: 1;
}

#contact-me {
/*border: 1px solid green; /* 標示用，完成後刪除 */
}

form.contact-form {
/*border: 1px solid red; /* 標示用，完成後刪除 */
width: 50%;
margin: 0 auto;
}

form-row {
margin-bottom: 15px;
}

.form-row input, .form-row textarea {
border-radius: 3px;
width: 100%;
border: 1px solid #D6D9DC;
padding: 7px;
}

.form-row textarea {
resize: none;
height: 20em;
}

.form-row button {
border: none;
border-radius: 3px;
padding: 10px 15px;
cursor: pointer;
}

.form-row button[type="reset"] {
background-color: #CCC;
color: #000;
}
.form-row button[type="reset"]:hover {
background-color: #333;
color: #CCC;
}

.form-row button[type="reset"]:active {
background-color: #555;
color: #FFF;
}

.form-row button[type="sumbit"] {
background-color: #5995DD;
color: #DDD;
}

.form-row button[type="sumbit"]:hover {
background-color: #DDD;
color: #5995DA;
}

.form-row button[type="sumbit"]:active {
background-color: #407FC7;
color: #FFF;
}

<!-- 水平線的樣式 -->

hr.bar {
border: 2px solid #ff6600;
width: 80px;
}

0 comments on commit 16657b3

Please sign in to comment.