Skip to content

Instantly share code, notes, and snippets.

@timetocode
Created July 24, 2019 20:50
Show Gist options
  • Save timetocode/922908c52a76b9c9b1ba0521ba6a6739 to your computer and use it in GitHub Desktop.
Save timetocode/922908c52a76b9c9b1ba0521ba6a6739 to your computer and use it in GitHub Desktop.
CSS mock of cards https://jsfiddle.net/b7e5cjxL/
body {
background-color:#423b41;
}
.wrap {
display: flex;
}
.solo {
border: solid 4px #ebfff9;
background-color: #e6a8dc;
}
.solo-shadow {
border: solid 4px #bd93b7;
background-color: #bd93b7;
}
.duo {
border: solid 4px #fff9e3;
background-color: #7dffd4;
}
.duo-shadow {
border: solid 4px #5ebf9f;
background-color: #5ebf9f;
}
.squad {
border: solid 4px #ebfff9;
background-color: #f2a01b;
}
.squad-shadow {
border: solid 4px #bf7e15;
background-color: #bf7e15;
}
.card {
position: relative;
width: 150px;
height: 250px;
margin: 20px;
}
.card-content {
position: absolute;
width: 150px;
height: 250px;
border-radius: 12px;
z-index: 2;
/* just text related */
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
}
.card-shadow {
position: absolute;
top: 12px;
width: 150px;
height: 250px;
border-radius: 12px;
z-index: 1;
}
<div class='wrap'>
<div class='card'>
<div class='solo card-content'>
SOLO
</div>
<div class='solo-shadow card-shadow'></div>
</div>
<br />
<div class='card'>
<div class='duo card-content'>
DUO
</div>
<div class='duo-shadow card-shadow'></div>
</div>
<div class='card'>
<div class='squad card-content'>
SQUAD
</div>
<div class='squad-shadow card-shadow'></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment