<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.