<!--=================================================-->
<!--Pen by Margus Lillemägi | codepen.io/VisualAngle/-->
<!--=================================================-->
<!-- <!DOCTYPE html> -->
<html lang="en" >
<head>
   <meta charset="UTF-8">
   <title>HTML Business Card</title>
   <meta name="author" content="Margus Lillemagi, codepen.io/VisualAngle/">
   <link rel="stylesheet" href="css/style.css"> 
   <!--Link to Google fonts => Ubuntu-->
   <link href="https://fonts.googleapis.com/css?family=Ubuntu:500">
  </head>
  <body>
    <!--BC main container-->
    <div id="container">
      <!--BC wrapper with size and style-->
      <div class="bc-wrapper bc-size bc-style">
        <!--BC content-->
        <div class="bc-content">
          <!--BC header text-->
          <div class="header-txt text">
            <span class="black-txt">UX</span>
            <span>Design</span>
          </div>
          <!--BC name text-->
          <div class="name-txt text">Liza Lanier</div>
          <!--BC image wrapper with image-->
          <div class="image-wrapper">
            <img src="http://visualangle.ee/image/hipster_004.jpg"/>
          </div>
          <!--BC qualification text-->
          <div class="qualification-txt text">UX designer</div>
          <!--BC call to action button and text-->
          <div id="cta">
          <button type="button" onclick="alert('Thank you for clicking me!')">
            <span class="button-txt">uxdesign.com</span>
           </button>
          </div>  
        </div>
      </div>
    </div>   
  </body>
</html>
body{
  background-color:#1d1f20; /* background color for demo only */
}
body, html{ /* for demo only */
  heigth:100%;
  width:100%;
  padding:0;
  margin:0;
}
#container{ /* center for demo only */
  max-width:300px;
  width:100%;
  overflow:hidden;
  position:absolute;
  top:50%;
  left:50%;
  margin-right:-50%;
  transform:translate(-50%, -50%);
  border: 10px solid #4285f4;
}
.bc-wrapper{ 
  position:relative;
}
.bc-size{
  width:300px;
  height:600px;
}
.bc-style{
  background-image:none;
  text-align:center;
  background-color:#efefef;
  color:#303030;
  overflow:hidden; /* avoid elements to spill outside of the VC edge */ 
}
.bc-content{
  position:absolute;
  background-color:transparent;
}
.text, button{
    font-family:'Ubuntu', sans-serif;
}
.header-txt{
  position:absolute;
  width:280px;
  left:10px;
  top:26px;
  color:#4285f4;
  font-size:70px;
  font-weight:600;
  line-height:.9em;
  letter-spacing:-0.010em;
  text-transform:uppercase;
}
.name-txt{
  position:absolute;
  width:280px;
  left:10px;
  top:422px;
  color:#4285f4;
  font-size:2.5em;
  font-weight:600;
  letter-spacing:-0.010em;
  text-transform:uppercase;
}
.qualification-txt{
  position:absolute;
  width:280px;
  left:10px;
  top:465px;
  color:#303030;
  font-size:2em;
  font-weight:400;
  letter-spacing:-0.050em;
}
.black-txt{
  color:#303030;
}
.image-wrapper{
  position:absolute;
  left:10px;
  top:172px;
  width:280px;
  height:240px; /* To clip bottom of the image */
  overflow:hidden;
}
img{
  position:absolute;
  top:0;
  left:0;
  width:280px;
  height:280px;
  border-radius:50%;
}
button{
  position:absolute;
  left:30px;
  top:520px;
  width:240px;
  height:50px;
  display:block;
  padding:10px 10px 10px 10px;
  background-color:#4285F4;
  border:none;
  border-radius:50px;
  cursor:pointer;
  outline:0;
}
.button-txt{
  font-size:1.5em;
  font-weight:700;
  text-transform:uppercase;
  color:#efefef;
  letter-spacing: 0.05em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.