<article class="card">
<div>
<p class="sub-heading">
Article
<time datetime="2020-03-20">
Mar 20, 2020 </time>
</p>
<h2><a href="https://css-tricks.com/a-complete-guide-to-calc-in-css/" class="main-link" target="_blank">A Complete Guide to calc() in CSS</a></h2>
<p>
In this guide, let’s cover just about everything there is to know about this very useful function.
</p>
</div>
<a class="author-name other-link" href="https://css-tricks.com/author/chriscoyier/" target="_blank"><img src="https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=80&d=retro&r=pg" alt="" /><span>Chris Coyier</span></a>
<div class="tags">
<a class="tag other-link" href="https://css-tricks.com/tag/calc/" target="_blank">calc</a>
<a class="tag other-link" href="https://css-tricks.com/tag/math/" target="_blank">math</a>
</div>
</article>
.card {
position: relative;
}
.main-link {
&::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: transparent;
transition: all 0.5s ease;
border-radius: 16px;
}
&:hover::before,
&:focus::before {
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
}
}
// general styling
body {
display: flex;
}
.card {
font-family: "PT Serif", serif;
min-width: 300px;
width: 300px;
height: 350px;
background: #17141d;
border-radius: 16px;
padding: 1rem 1.5rem;
box-shadow: -1rem 0 3rem #000;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.2s;
margin: 30px;
.other-link {
position: relative;
z-index: 11;
}
}
h2,
a,
p {
color: #fff;
}
a {
text-decoration: none;
transition: 0.2s;
&:hover,
&:focus {
color: #ff8a00;
outline: none;
}
}
time {
color: grey;
}
.author-name {
display: flex;
align-items: center;
img {
height: 36px;
margin-right: 10px;
border-radius: 50%;
}
}
.tags {
display: flex;
margin: 10px 0;
.tag {
padding: 5px 10px;
border: solid 1px grey;
border-radius: 3px;
transition: 0.2s;
&:hover {
background: gray;
}
}
.tag + .tag {
margin-left: 10px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.