<!doctype <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- You don't have to include font-awesome. If you don't, the card will fall back gracefully to a Materialize Icon -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
</head>
<body>
<div class="businessCard materialize">
<div class="background">
<div class="diagonals"></div>
</div>
<div class="card-panel z-depth-4 hoverable">
<div class="row valign-wrapper">
<div class="col s8 leftSide">
<div class="row nameAndTitleSection">
<div class="fullName col s12">Mr. Joshua Tzucker</div>
<div class="divider col s12" style="height: 2px;"></div>
<div class="jobTitle col s11 offset-s1">Professional Tinkerer</div>
</div>
<div class="row">
<div class="col s11 offset-s1 linksAndDetailsSection">
<div class="emailAddress col s12 valign-wrapper">
<div class="iconWrapper z-depth-2 iconsSolidBackground">
<div class="icon">
<i class="material-icons left">email</i>
</div>
</div>
<div class="textWrapper">
<a href="mailto:email@example.com" target="_blank">email@example.com</a>
</div>
</div>
<div class="rowJoinerWrapper"><div class="rowJoiner iconsSolidBackground"></div></div>
<div class="geography col s12 valign-wrapper">
<div class="iconWrapper z-depth-2 iconsSolidBackground">
<div class="icon">
<i class="material-icons left">map</i>
</div>
</div>
<div class="textWrapper">
<span>Greater Seattle Area</span>
</div>
</div>
<div class="rowJoinerWrapper"><div class="rowJoiner iconsSolidBackground"></div></div>
<div class="linkedInURL col s12 valign-wrapper">
<div class="iconWrapper z-depth-2 iconsSolidBackground">
<div class="icon">
<i class="material-icons left">link</i><i class="fa fa-linkedin-square iconsSolidBackground" aria-hidden="true"></i>
</div>
</div>
<div class="textWrapper">
<a href="https://www.linkedin.com/in/joshuatzucker" target="_blank">LinkedIn</a>
</div>
</div>
<div class="rowJoinerWrapper"><div class="rowJoiner iconsSolidBackground"></div></div>
<div class="codingProfileURL col s12 valign-wrapper">
<div class="iconWrapper z-depth-2 iconsSolidBackground">
<div class="icon">
<i class="material-icons left">code</i><i class="fa fa-github iconsSolidBackground" aria-hidden="true"></i>
</div>
</div>
<div class="textWrapper">
<a href="https://github.com/joshuatz" target="_blank">Github</a>
</div>
</div>
</div>
</div>
</div>
<div class="col s4 rightSide">
<div class="valign-wrapper">
<div class="profilePictureWrapper col s12 z-depth-2">
<img class="profilePicture responsive-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAAP8AAP/qAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOYV9agAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGHRFWHRTb2Z0d2FyZQBwYWludC5uZXQgNC4xLjQTQGjEAAADqElEQVR42u3cMRLDIAwAwSij/z8Z+QduGMYCdvvYRFxUJurHzf5GIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAOwgV78gzNgGQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAAJiVCjzbMH8EgAAQAAJAAAgAASAABIAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAALgBNn9gOWOXoUNgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACEAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAB0kKd/wVj8/Gp+PhsAASAABIAAEAACQAAIAAEgAAEYgQAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAuAIefsARvNfyLABEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAPw/wPbKBkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAAQgAASAABAAAkAACAABIABukGEGNgACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAARAd6kQGwABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAKgvZx9QE1+PtyBDYAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAEYAQCQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAAbC//PoA5Q5sAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABCAAIxAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIgP3l7APi8gGGDYAAEAACQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABIAAEAACQAAIAAGwXhjB3soGQAAIAAEgAASAABAAAkAACAABIAAEgAAQAAJAAAgAASAABCAABIAAEAACQAAIAAEgAG7wANIDDhaO2U6TAAAAAElFTkSuQmCC">
</div>
</div>
<div class="ageWrapper col s12 center">
<span>Age ----</span>
</div>
</div>
</div>
</div>
</div>
<style>
/** Moved to style.css */
</style>
</body>
</html>
.businessCard {
width: 80%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
font-family: 'lato','sans-serif';
font-size: 1.1em;
position: relative;
}
.businessCard .fullName {
font-weight: bolder;
font-size: 2em;
}
.businessCard .jobTitle {
font-style: italic;
font-size: 1.3em;
}
.businessCard .profilePictureWrapper {
overflow: hidden;
border-radius: 50%;
padding: 10px;
border: 4px solid black;
margin-top: 38%;
}
.businessCard .linksAndDetailsSection .rowJoinerWrapper {
width: 34px;
height: 15px;
padding-left: 0.75rem;
min-height: 1px;
position: relative;
text-align: center;
z-index: 999;
float: left;
margin-bottom: -1px;
margin-top: -1px;
}
.businessCard .linksAndDetailsSection .rowJoiner {
width: 50%;
height: 100%;
margin-left: auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.businessCard .linkedInURL i, .businessCard .codingProfileURL i {
position: absolute;
width: 24px;
height: 24px;
text-align: center;
font-size: large;
}
.businessCard .linksAndDetailsSection i.fa {
font-size: x-large;
}
.businessCard .linksAndDetailsSection .iconWrapper {
display: inline-block;
width: 34px;
height: 31px;
padding-top: 3px;
padding-left: 4px;
margin-right: 10px;
border-radius: 8px;
border: 1px solid black;
}
.businessCard .linksAndDetailsSection .textWrapper {
display: inline-block;
}
.businessCard .iconsSolidBackground {
background-color: black;
color: white !important;
}
.businessCard .diagonals {
position: absolute;
height: 200%;
width: 14px;
top: -50%;
right: 222px;
border-left: 4px solid red;
border-right: 4px solid red;
transform: rotateZ(24deg);
background-color: #38013d;
}
.businessCard > .card-panel {
position: relative;
background-color: unset;
}
.businessCard .background {
width: 100%;
position: absolute;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
background-color: white;
}
.businessCard .ageWrapper {
margin-top: 4px;
font-size: medium;
font-style: italic;
}
.businessCard .linksAndDetailsSection {
min-height: 88px;
}
.businessCard .fixedUpperRightToolbar {
position: absolute;
right: 10px;
top: 10px;
}
@media (max-width: 600px) {
.businessCard .profilePictureWrapper {
margin-top: 0px;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.