HTML
<div class="container">
<div class="icon ae">
<div class="icon-text">Ae</div>
</div>
<div class="icon ai">
<div class="icon-text">Ai</div>
</div>
<div class="icon au">
<div class="icon-text">Au</div>
</div>
<div class="icon br">
<div class="icon-text">Br</div>
</div>
<div class="icon dw">
<div class="icon-text">Dw</div>
</div>
<div class="icon fl">
<div class="icon-text">Fl</div>
</div>
<div class="icon fw">
<div class="icon-text">Fw</div>
</div>
<div class="icon ic">
<div class="icon-text">Ic</div>
</div>
<div class="icon id">
<div class="icon-text">Id</div>
</div>
<div class="icon lr">
<div class="icon-text">Lr</div>
</div>
<div class="icon pr">
<div class="icon-text">Pr</div>
</div>
<div class="icon ps">
<div class="icon-text">Ps</div>
</div>
</div>
SASS
// Icon colors
$ae1: #cb9dff
$ae2: #100d14
$ai1: #ff731b
$ai2: #140902
$au1: #00e1b8
$au2: #00120f
$br1: #ffb821
$br2: #140f03
$dw1: #71f900
$dw2: #091400
$fl1: #fe441a
$fl2: #140502
$fw1: #ffd600
$fw2: #141100
$ic1: #fd66f5
$ic2: #140814
$id1: #ff3a93
$id2: #14050c
$lr1: #abcfe8
$lr2: #0e1113
$pr1: #d778ff
$pr2: #110a14
$ps1: #3dc3fb
$ps2: #051014
// Icon styles
.ae
border-color: $ae1
background: $ae2
color: $ae1
.ai
border-color: $ai1
background: $ai2
color: $ai1
.au
border-color: $au1
background: $au2
color: $au1
.br
border-color: $br1
background: $br2
color: $br1
.dw
border-color: $dw1
background: $dw2
color: $dw1
.fl
border-color: $fl1
background: $fl2
color: $fl1
.fw
border-color: $fw1
background: $fw2
color: $fw1
.ic
border-color: $ic1
background: $ic2
color: $ic1
.id
border-color: $id1
background: $id2
color: $id1
.lr
border-color: $lr1
background: $lr2
color: $lr1
.pr
border-color: $pr1
background: $pr2
color: $pr1
.ps
border-color: $ps1
background: $ps2
color: $ps1
// Global styles
*
box-sizing: border-box
body
display: flex
flex-wrap: wrap
align-items: center
justify-content: center
height: 100vh
width: 100vw
font-family: Arial, sans-serif
background: #202020
overflow-x: hidden
.container
display: flex
flex-wrap: wrap
align-items: center
justify-content: center
height: 100vh
width: 50vw
.icon
position: relative
margin: 10px
display: flex
align-items: center
justify-content: center
min-width: 200px
width: 200px
min-height: 200px
height: 200px
border: 10px solid
.icon-text
font-weight: bold
font-size: 112px
letter-spacing: -5px
// Footer - unrelated to icons
.small p
padding: 20px
font-weight: bold
font-size: 20px
letter-spacing: 0
color: $ps1
.small a
text-decoration: none
color: $lr1