<div class="container">
<div class="paper">
<h1>contact me</h1>
<p>I look forward to hearing from you!</p>
</div>
<ul class="numbers" role="list">
<li class="number" role="listitem">
<div class="link-wrapper">
<i class="fab fa-twitter" aria-hidden="true"></i>
<a href="https://twitter.com/s_aitchison" aria-label="Twitter profile">@s_aitchison</a>
</div>
</li>
<li class="number" role="listitem">
<div class="link-wrapper">
<i class="fab fa-dev" aria-hidden="true"></i>
<a href="https://dev.to/s_aitchison" aria-label="DEV profile">@s_aitchison</a>
</div>
</li>
<li class="number" role="listitem">
<div class="link-wrapper">
<i class="fab fa-instagram" aria-hidden="true"></i>
<a href="https://www.instagram.com/suzanneaitchison/" aria-label="Instagram profile">@suzanneaitchison</a>
</div>
</li>
<li class="number" role="listitem">
<div class="link-wrapper">
<i class="fab fa-github" aria-hidden="true"></i>
<a href="https://github.com/aitchiss" aria-label="GitHub profile">@aitchiss</a>
</div>
</li>
<li class="number" role="listitem">
<div class="link-wrapper">
<i class="fab fa-codepen" aria-hidden="true"></i>
<a href="https://codepen.io/aitchiss" aria-label="CodePen profile">@aitchiss</a>
</div>
</li>
</ul>
</div>
:root {
--gray: #808080;
--gray-medium: #c1bfbf;
--gray-light: #d3d3d3;
--paper-color: #eff8fe;
}
body {
background: #fec0ca;
padding-top: 30px;
display: flex;
flex-direction: column;
align-items: center;
font-family: Courier New, sans-serif;
}
h1 {
font-size: 1.2rem;
}
.paper {
position: relative;
padding: 10px;
width: 12rem;
min-height: 120px;
background: linear-gradient(
135deg,
var(--paper-color),
85%,
var(--gray-light)
);
box-shadow: 1px 0 1px var(--gray);
text-align: center;
}
/* Tacks */
.paper::before {
content: "";
position: absolute;
left: 5px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gray);
}
.paper::after {
content: "";
position: absolute;
right: 5px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gray);
}
.numbers {
display: flex;
min-height: 11rem;
list-style: none;
padding: 0;
margin: 0;
}
.number {
position: relative;
width: 100%;
background: linear-gradient(
to right,
var(--paper-color),
80%,
var(--gray-light)
);
border-top: 1px dashed var(--gray);
box-shadow: 1px 1px 1px var(--gray);
transform-origin: center top;
}
.link-wrapper {
position: absolute;
display: flex;
top: 0;
transform: rotate(90deg);
transform-origin: top left;
font-size: 0.9rem;
margin-left: 1.7rem;
margin-top: 1rem;
align-items: center;
}
.link-wrapper i {
margin-right: 5px;
font-size: 1.1rem;
}
.link-wrapper a {
text-decoration-style: dashed;
font-family: sans-serif;
}
.number:nth-child(2) {
transform: skew(-5deg, 0deg);
background: var(--paper-color);
}
.number:nth-child(2)::after,
.number:nth-child(4)::after {
content: "";
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
var(--gray-light),
5%,
rgba(211, 211, 211, 0)
);
}
.number:nth-child(1),
.number:nth-child(3) {
background: linear-gradient(
to right,
var(--paper-color),
60%,
var(--gray-light)
);
}
.number:nth-child(4) {
transform: skew(-8deg, 0deg);
background: var(--paper-color);
}
.number:nth-child(5) {
transform: skew(-3deg, 0deg);
}
This Pen doesn't use any external JavaScript resources.