#e8e8e8
1.main { 2 display: flex; 3 flex-direction: column; 4 gap: 0.5em; 5} 6 7.up { 8 display: flex; 9 flex-direction: row; 10 gap: 0.5em; 11} 12 13.down { 14 display: flex; 15 flex-direction: row; 16 gap: 0.5em; 17} 18 19.card1 { 20 width: 90px; 21 height: 90px; 22 outline: none; 23 border: none; 24 background: white; 25 border-radius: 90px 5px 5px 5px; 26 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 27 transition: .2s ease-in-out; 28} 29 30.instagram { 31 margin-top: 1.5em; 32 margin-left: 1.2em; 33 fill: #cc39a4; 34} 35 36.card2 { 37 width: 90px; 38 height: 90px; 39 outline: none; 40 border: none; 41 background: white; 42 border-radius: 5px 90px 5px 5px; 43 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 44 transition: .2s ease-in-out; 45} 46 47.twitter { 48 margin-top: 1.5em; 49 margin-left: -.9em; 50 fill: #03A9F4; 51} 52 53.card3 { 54 width: 90px; 55 height: 90px; 56 outline: none; 57 border: none; 58 background: white; 59 border-radius: 5px 5px 5px 90px; 60 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 61 transition: .2s ease-in-out; 62} 63 64.github { 65 margin-top: -.6em; 66 margin-left: 1.2em; 67} 68 69.card4 { 70 width: 90px; 71 height: 90px; 72 outline: none; 73 border: none; 74 background: white; 75 border-radius: 5px 5px 90px 5px; 76 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 77 transition: .2s ease-in-out; 78} 79 80.discord { 81 margin-top: -.9em; 82 margin-left: -1.2em; 83 fill: #8c9eff; 84} 85 86.card1:hover { 87 cursor: pointer; 88 scale: 1.1; 89 background-color: #cc39a4; 90} 91 92.card1:hover .instagram { 93 fill: white; 94} 95 96.card2:hover { 97 cursor: pointer; 98 scale: 1.1; 99 background-color: #03A9F4; 100} 101 102.card2:hover .twitter { 103 fill: white; 104} 105 106.card3:hover { 107 cursor: pointer; 108 scale: 1.1; 109 background-color: black; 110} 111 112.card3:hover .github { 113 fill: white; 114} 115 116.card4:hover { 117 cursor: pointer; 118 scale: 1.1; 119 background-color: #8c9eff; 120} 121 122.card4:hover .discord { 123 fill: white; 124}
Comments
Variations
1 MIT License