Adobe CC Icons

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
JAVASCRIPT
Expand for more options Login