Card by gharsh11032000
#212121
1.card { 2 width: 320px; 3 height: 350px; 4 padding: 20px; 5 color: white; 6 background: linear-gradient(#212121, #212121) padding-box, 7 linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box; 8 border: 2px solid transparent; 9 border-radius: 8px; 10 display: flex; 11 flex-direction: column; 12 cursor: pointer; 13 transform-origin: right bottom; 14 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 15} 16 17.card .main-content { 18 flex: 1; 19} 20 21.card .header span:first-child { 22 font-weight: 600; 23 color: #717171; 24 margin-right: 4px; 25} 26 27.card .heading { 28 font-size: 24px; 29 margin: 24px 0 16px; 30 font-weight: 600; 31} 32 33.card .categories { 34 display: flex; 35 gap: 8px; 36} 37 38.card .categories span { 39 background-color: #e81cff; 40 padding: 4px 8px; 41 font-weight: 600; 42 text-transform: uppercase; 43 font-size: 12px; 44 border-radius: 50em; 45} 46 47.card .footer { 48 font-weight: 600; 49 color: #717171; 50 margin-right: 4px; 51} 52 53.card:hover { 54 rotate: 8deg; 55}
3.9K views
3.9K views
Variations
1 MIT License