Terran ID Card

index.html

<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 
<div class="id-card-wrapper">
    <div class="id-card">
      <div class="profile-row">
        <div class="dp">
          <div class="dp-arc-outer"></div>
          <div class="dp-arc-inner"></div>
          <img src="https://cdn.discordapp.com/attachments/972896211369603134/1064966291829555320/holoportrait_small.gif" />
        </div>
        <div class="desc">
          <h1>Kurt Madsen</h1>
          <p>Species: Human</p>
          <p>Home System: Terra</p>
          <p>ID#: 5a-3465-23</p>
        </div>
      </div>
    </div>
  </div>

style.css

body {
	margin:0px;
}
.id-card-wrapper {
	height: 100vh;
	width:100%;
	background-color: #090c14;
	display: flex;
}
.id-card {
	flex-direction:row;
	flex-basis: 100%;
	max-width: 30em;
	border: 2px solid rgb(97, 145, 245);
	margin: auto;
	color: #fff;
	padding: 1em;
	background-color: #080a17;
	box-shadow: 0px 0px 3px 1px rgb(18, 60, 160), inset 0px 0px 3px 1px rgb(18, 60, 160);
}
@media only screen and (max-width: 600px) {
	.id-card,
	.profile-row {
		flex-direction: column;
	}
}
.profile-row {
	display: flex;
}
.profile-row .dp {
	flex-basis: 33.3%;
	position: relative;
	margin: 24px;
	align-self: center;
}
.profile-row .desc {
	flex-basis: 66.6%;
}

.profile-row .dp img {
	max-width: 100%;
	border-radius: 50%;
	display: block;
	box-shadow: 0px 0px 4px 3px rgb(18, 60, 160);
}
.profile-row .desc {
	padding: 1em;
}

.profile-row .dp .dp-arc-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 6px solid transparent;
	border-top-color: rgb(10, 124, 223);
	border-radius: 50%;
	top: -6px;
	left: -6px;

	animation-duration: 2s;
	animation-name: rotate-clock;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes rotate-clock {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.profile-row .dp .dp-arc-outer {
	position: absolute;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	border: 6px solid transparent;
	border-bottom-color: rgb(10, 124, 223);
	border-radius: 50%;
	top: -16px;
	left: -16px;

	animation-duration: 2s;
	animation-name: rotate-anticlock;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes rotate-anticlock {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

.profile-row .desc {
	font-family: 'Orbitron', sans-serif;
	color: #e1f3fd;
	text-shadow: 0px 0px 4px rgb(18, 60, 160);
	letter-spacing: 1px;
}
.profile-row .desc h1 {
	margin: 0px;
}

terran-id-card.markdown

Terran ID Card

A Pen by Kurt Madsen on CodePen.

License.