網頁名片製作練習-TC1

index.html

<div class="namecard">
<div class="name">黃 紫婕
</div>
<div class="otherinfo">
  T.C. HUANG
  <br>+886 922 895 696
  <br>tcmiss@gmail.com
  
</div>

</div>

<h1>Namecard for webpage</h1>

style.css

*{
  font-family:'noto-serif'
}
.body{
  
}
.namecard{
 
  height:350px; width:200px;
  position:absolute;
  top:150px;
  left:175px;
  padding-top:210px;
  border:solid 1px;
  border-color:gray;
  box-shadow:3px 5px 5px gray;
}

.name{
  font-size:14px;
  color:gray;
  font-weight:200;
  letter-spacing:1px;
  padding-left:25px;
}

.otherinfo{
  font-size:12px;
  color:#fff;
  font-weight:normal;
  letter-spacing:1px;
  padding-left:15px;
  padding-top:5px;
  padding-bottom:58px;
  background-color:gray;
  overflow:hidden;
  margin-right:10px;
  margin-left:10px;
}

h1{
  font-size:25px;
  color:gray;
  position:absolute;
  top:100px;
  left:175px;

}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

tc1.markdown

網頁名片製作練習-TC1

A Pen by laiyenju on CodePen.

License.