Card by Javierrocadev
#212121
1.card { 2 width: 290px; 3 height: 300px; 4 background: #ecf39e; 5 padding: 10px; 6 display: flex; 7 flex-wrap: wrap; 8 color: #31572c; 9 border-radius: 15px; 10 box-shadow: -20px 20px 0px -5px #31572c; 11} 12 13.title { 14 font-weight: 900; 15 font-size: 1.7em; 16} 17 18.tag__name { 19 display: inline-block; 20 color: #fff; 21 font-size: 1.1em; 22 background-color: #31572c; 23 padding: 6px 23px 9px; 24 border-radius: 70em; 25 margin: 8px 6px 8px 0; 26 margin-left: 0px; 27 position: relative; 28 text-transform: lowercase; 29 cursor: pointer; 30 transition: all .3s ease-in-out; 31} 32 33.tag__name::before,.tag__name::after { 34 content: ""; 35 display: inline-block; 36 position: absolute; 37 top: 40%; 38 width: 7px; 39 height: 7px; 40 border-radius: 50%; 41 background: #90a955; 42} 43 44.tag__name::before { 45 left: 7px; 46} 47 48.tag__name::after { 49 right: 7px; 50} 51 52.tag__name:hover { 53 transform: scale(1.1); 54 background-color: #51572c; 55}
896 views
896 views
Variations
1 MIT License