<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">HR</span>
          <span></span>
        </div>
        <!--BC name text-->
        <div class="name-txt text">Liza Lanier</div>
        <!--BC image wrapper with image-->
        <div class="image-wrapper">
          <img src="https://images.pexels.com/photos/10069467/pexels-photo-10069467.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=600&w=800" />
        </div>

      </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: 900px;
  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: 0.9em;
  letter-spacing: -0.01em;
  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.01em;
  text-transform: uppercase;
}
.qualification-txt {
  position: absolute;
  width: 280px;
  left: 10px;
  top: 465px;
  color: #303030;
  font-size: 2em;
  font-weight: 400;
  letter-spacing: -0.05em;
}
.black-txt {
  color: #303030;
}
.image-wrapper {
  position: absolute;
  left: 10px;
  top: 120px;
  width: 280px;
  height: 240px; /* To clip bottom of the image */
  overflow: hidden;
   object-fit: cover;
}
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.