<div class="mark">NAMECARD</div>
<a href="https://codepen.io/ianchen0419/pen/vXGzpd" target="_blank">
  <div class="namecard">
  <h2>陳怡安<span>(I-An CHEN)</span></h2>
  <h5>前端開發學習者</h5>
  <hr />
  <p>社會新鮮人。持續在工作與進修中找尋平衡點。<br />喜歡用BLOG記錄學習筆記。<br />www.ianchen.thisistap.com</p>
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
</div>
</a>
<h3 class="page_title">Project1_個人名片</h3>
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

*{
/*   border: solid 1px; */
  font-family: 'Noto Sans TC', sans-serif;
  position: relative;
}

a{
  text-decoration: none;
}

html,body
{
  width: 100%; height: 100%;
  margin: 0px; padding: 0px;
}

body{
  background-color: #F1F7ED;
  border-top: solid 20px #7AA880;
  border-bottom: solid 20px #7AA880;
  
  box-sizing: border-box;
  overflow: hidden;
}

.namecard{
  width: 350px;
  height: 200px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  background-color: #243010;
  
  letter-spacing: 1px;
  color: rgba(241, 247, 237, 0.95);
  overflow: hidden;
  border: solid 1px rgba(0,0,0,0.15);
  border-radius: 6px;
  font-weight: 100;
  
  transition-duration: 0.5s;
}

.namecard:hover .circle1{
  bottom: -60px;
}

.namecard:hover .circle2{
  right: -20px; top: -20px;
}

.namecard:hover {
  transform: translateX(-5px) translateY(-5px);
  box-shadow: 15px 15px 25px rgba(134,146,150,0.3)
}

.namecard h2{
  font-size: 25px;
  font-weight: 300;
}

.namecard h2 span{
  font-size: 12px;
  font-weight: 100;
}

.namecard h5{
  color: #7AA880;
  font-weight: 300;
}

.namecard p{
  font-size: 12px;
  line-height: 22px;
}

.circle{
  width: 100px; height: 100px;
  border-radius: 100%;
  position: absolute;
}

.circle1{
  right: 100px;
  bottom: -80px;
  background-color: #7AA880;
  transition-duration: 1s;
}

.circle2{
  width: 60px; height: 60px;
  right: -30px;
  top: -30px;
  border: solid 3px #7AA880;
  transition-duration: 1s;
}

.page_title{
  text-align: center;
  color: #243010;
  font-weight: 400;
}

.mark{
  font-size: 300px;
  position: absolute;
  bottom: 100px;
  font-weight: 100;
  color: rgba(36,48,16,0.1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.