<a href="https://css-tricks.com/a-complete-guide-to-calc-in-css/" class="main-link" target="_blank">
<article class="card">
<div>
<p class="sub-heading">
Article
<time datetime="2020-03-20">
Mar 20, 2020 </time>
</p>
<h2>A Complete Guide to calc() in CSS</h2>
<p>
In this guide, let’s cover just about everything there is to know about this very useful function.
</p>
</div>
<span class="author-name"><img src="https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=80&d=retro&r=pg" alt="" /><span>Chris Coyier</span></span>
<div class="tags">
<span class="tag">calc</span>
<span class="tag">math</span>
</div>
</article>
</a>
body {
display: flex;
}
.card {
font-family: "PT Serif", serif;
width: 300px;
min-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;
cursor: pointer;
transition: 0.2s;
margin: 30px;
}
.main-link {
&:hover {
transform: translateY(-10px);
h2 {
color: #ff8a00;
}
}
&:focus-within {
box-shadow: 0 0 0 0.25rem;
}
&:focus-within a:focus {
text-decoration: none;
}
}
h2,
a,
p,
span {
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;
}
.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.