---
tags: 互動程式設計,作業一,CodePen
---

# 作業一 名片

[CodePen作業網頁](https://codepen.io/ygevsuhu-the-encoder/pen/vYprrww)


HTML內容

<div class="box">
  <div class="top">
    <h2 class="name">詹雅媛 <span class="smallText">Yvonne Jen</span></h2>
    <div class="tag"></div>
    <div class="cirbutton"></div>
  </div>
  <div class="bottom">
    <ul>
      <li>
        淡江大學教育科技學系三年級
      </li>
      <li>
        [e-mail]
      </li>
    </ul>
    <div class="btn buttons">
      <a class="btn btnNews" href="https://codepen.io/ygevsuhu-the-encoder" target="_blank">作品集</a>
    </div>
  </div>
</div>

CSS內容

html,
body {
  background-color:#F5CE5A;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  background-color: #fff;
}
.box:hover{
  background-color:#dcf6f7;
  box-shadow:5px 5px 60px rgba(0,0,0,0.5) ;
  transform:translate(-3px,-5px);
  transition:0.5s;
}
.top {
  height: 330px;
  background-image: url(https://i.imgur.com/E4SfzN6.jpg);
  background-size: cover;
  position: relative;
}
.name{
  color:#fff;
  position: absolute;
  margin: 0;
  left: 10px;
  bottom: 0px;
  letter-spacing: 2px;
}
.top .name .smallText {
  font-size: 16px;
}
a{
color: initial;
text-decoration: initial;
}
.tag{
  width: 30px;
  height: 30px;
  background-color: #95e1e5;
  border-radius: 20%;
  position: absolute;
  right: 25px;
  bottom: 15px;
}
.cirbutton {
  width: 20px;
  height: 20px;
  background-color: #F5CE5A;
  border-radius: 50%;
  position: absolute;
  right: 320px;
  bottom: 250px;
}
.bottom{
  padding:10px 20px 20px 20px;  
}
.bottom li{
  padding:5px;
}
.bottom ul{
  list-style:none;
  padding-left:0;
}
.buttons .btn{
  display:inline-block;
  border:solid 2px black;
  padding:10px 25px;
  letter-spacing:2px;
}
.buttons{
  background-color:#F5CE5A;
}
.btnNews{
  float:right;
}
.btnNews:hover{
  background-color:#F5CE5A;
  transition:0.8s;
}

---


步驟一
編寫名片內容及分段

HTML內容

詹雅媛Yvonne Jen
淡江大學教育科技學系三年級
[e-mail]
作品集

---

步驟二
更換背景顏色及置中名片

HTML內容

<div class="box">
  <div class="top">
    <h2 class="name">詹雅媛 <span class="smallText">Yvonne Jen</span></h2>
    </div>
    <div class="bottom">
    <ul>
      <li>
        淡江大學教育科技學系三年級
      </li>
      <li>
        [e-mail]
      </li>
    </ul>
    <div class="btn buttons">
      <a class="btn btnNews">作品集</a>
    </div>
  </div>
</div>

CSS內容

html,
body {
  background-color:#F5CE5A;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  background-color: #fff;
}
.name{
  color:black;
  margin: 0;
  left: 10px;
  bottom: 0px;
  letter-spacing: 2px;
}

---


步驟三
加入圖片及更換名字格式顏色
.top
.name

HTML內容

<div class="box">
  <div class="top">
    <h2 class="name">詹雅媛 <span class="smallText">Yvonne Jen</span></h2>
  </div>
  <div class="bottom">
    <ul>
      <li>
        淡江大學教育科技學系三年級
      </li>
      <li>
        [e-mail]
      </li>
    </ul>
    <div class="btn buttons">
      <a class="btn btnNews" href="https://codepen.io/ygevsuhu-the-encoder" target="_blank">作品集</a>
    </div>
  </div>
</div>

CSS內容

html,
body {
  background-color:#F5CE5A;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  background-color: #fff;
}
.top {
  height: 330px;
  background-image: url(https://i.imgur.com/E4SfzN6.jpg);
  background-size: cover;
  position: relative;
}
.name{
  color:#fff;
  position: absolute;
  margin: 0;
  left: 10px;
  bottom: 0px;
  letter-spacing: 2px;
}
.top .name .smallText {
  font-size: 16px;
}

---


步驟四
加入裝飾畫面的方塊圖形
.tag
.cirbutton

HTML內容

<div class="box">
  <div class="top">
    <h2 class="name">詹雅媛 <span class="smallText">Yvonne Jen</span></h2>
    <div class="tag"></div>圓角方形
    <div class="cirbutton"></div>圓形
  </div>
  <div class="bottom">
    <ul>
      <li>
        淡江大學教育科技學系三年級
      </li>
      <li>
        [e-mail]
      </li>
    </ul>
    <div class="btn buttons">
      <a class="btn btnNews" href="https://codepen.io/ygevsuhu-the-encoder" target="_blank">作品集</a>
    </div>
  </div>
</div>

CSS內容

html,
body {
  background-color:#F5CE5A;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  background-color: #fff;
}
.top {
  height: 330px;
  background-image: url(https://i.imgur.com/E4SfzN6.jpg);
  background-size: cover;
  position: relative;
}
.name{
  color:#fff;
  position: absolute;
  margin: 0;
  left: 10px;
  bottom: 0px;
  letter-spacing: 2px;
}
.top .name .smallText {
  font-size: 16px;
}
a{
color: initial;
text-decoration: initial;
}
.tag{
  width: 30px;
  height: 30px;
  background-color: #95e1e5;
  border-radius: 20%;
  position: absolute;
  right: 25px;
  bottom: 15px;
}
.cirbutton{
  width: 20px;
  height: 20px;
  background-color: #F5CE5A;
  border-radius: 50%;
  position: absolute;
  right: 320px;
  bottom: 250px;
}

---


步驟五
名片內容和按鈕按鍵調整
.bottom
.bottom li
.bottom ul
.buttons .btn
.buttons
.btnNews

CSS內容

html,
body {
  background-color:#F5CE5A;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  background-color: #fff;
}
.top {
  height: 330px;
  background-image: url(https://i.imgur.com/E4SfzN6.jpg);
  background-size: cover;
  position: relative;
}
.name{
  color:#fff;
  position: absolute;
  margin: 0;
  left: 10px;
  bottom: 0px;
  letter-spacing: 2px;
}
.top .name .smallText {
  font-size: 16px;
}
a{
color: initial;
text-decoration: initial;
}
.tag{
  width: 30px;
  height: 30px;
  background-color: #95e1e5;
  border-radius: 20%;
  position: absolute;
  right: 25px;
  bottom: 15px;
}
.cirbutton {
  width: 20px;
  height: 20px;
  background-color: #F5CE5A;
  border-radius: 50%;
  position: absolute;
  right: 320px;
  bottom: 250px;
}
.bottom{
  padding:10px 20px 20px 20px;  
}
.bottom li{
  padding:5px;
}
.bottom ul{
  list-style:none;
  padding-left:0;
}
.buttons .btn{
  display:inline-block;
  border:solid 2px black;
  padding:10px 25px;
  letter-spacing:2px;
}
.buttons{
  background-color:#F5CE5A;
}
.btnNews{
  float:right;
}

---

步驟六
加入滑鼠移動進去後的效果
.box:hover
.btnNews:hover

HTML

<div class="box">
  <div class="top">
    <h2 class="name">詹雅媛 <span class="smallText">Yvonne Jen</span></h2>
    <div class="tag"></div>
    <div class="cirbutton"></div>
  </div>
  <div class="bottom">
    <ul>
      <li>
        淡江大學教育科技學系三年級
      </li>
      <li>
        [e-mail]
      </li>
    </ul>
    <div class="btn buttons">
      <a class="btn btnNews" href="https://codepen.io/ygevsuhu-the-encoder" target="_blank">作品集</a>
    </div>
  </div>
</div>

CSS內容

html,
body {
  background-color:#F5CE5A;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  background-color: #fff;
}
.box:hover{
  background-color:#dcf6f7;
  box-shadow:5px 5px 60px rgba(0,0,0,0.5) ;
  transform:translate(-3px,-5px);
  transition:0.5s;
}
.top {
  height: 330px;
  background-image: url(https://i.imgur.com/E4SfzN6.jpg);
  background-size: cover;
  position: relative;
}
.name{
  color:#fff;
  position: absolute;
  margin: 0;
  left: 10px;
  bottom: 0px;
  letter-spacing: 2px;
}
.top .name .smallText {
  font-size: 16px;
}
a{
color: initial;
text-decoration: initial;
}
.tag{
  width: 30px;
  height: 30px;
  background-color: #95e1e5;
  border-radius: 20%;
  position: absolute;
  right: 25px;
  bottom: 15px;
}
.cirbutton {
  width: 20px;
  height: 20px;
  background-color: #F5CE5A;
  border-radius: 50%;
  position: absolute;
  right: 320px;
  bottom: 250px;
}
.bottom{
  padding:10px 20px 20px 20px;  
}
.bottom li{
  padding:5px;
}
.bottom ul{
  list-style:none;
  padding-left:0;
}
.buttons .btn{
  display:inline-block;
  border:solid 2px black;
  padding:10px 25px;
  letter-spacing:2px;
}
.buttons{
  background-color:#F5CE5A;
}
.btnNews{
  float:right;
}
.btnNews:hover{
  background-color:#F5CE5A;
  transition:0.8s;
}