Card by jeremy-deurvillier
This card was created for Open-Source CSS Odyssey
#e8e8e8
1.card { 2 text-align: center; 3 color: #262626; 4 background: linear-gradient(-45deg, #fbbf24, #fcd34d); 5 border-radius: 4px; 6 padding: 32px; 7} 8 9.heading { 10 font-size: 1.2em; 11 font-weight: bold; 12 text-align: left; 13 margin-bottom: 24px; 14} 15 16.heading > span { 17 font-style: italic; 18 color: #fcd34d; 19 background: #262626; 20 border-radius: 4px; 21 display: inline-block; 22 padding: 2px 6px 2px 4px; 23} 24 25.content { 26 text-align: center; 27 padding: 24px; 28 margin-bottom: 24px; 29} 30 31.item { 32 font-size: 1.05em; 33 display: inline; 34 margin: 10px; 35} 36 37.item:last-child { 38 display: block; 39} 40 41.item > svg { 42 transform: translateY(6px); 43} 44 45.item > span { 46 font-weight: 600; 47 font-style: italic; 48 text-transform: uppercase; 49} 50 51.card > button { 52 font-size: 1.05em; 53 font-weight: bold; 54 text-transform: uppercase; 55 color: #262626; 56 background: transparent; 57 border: 2px solid #262626; 58 border-radius: 4px; 59 padding: 14px 32px 14px 32px; 60 cursor: pointer; 61} 62 63.card > button:hover { 64 color: #fcd34d; 65 background: #262626; 66} 67 68.card > button::before { 69 content: "< "; 70 display: none; 71} 72 73.card > button::after { 74 content: " />"; 75 display: none; 76} 77 78.card > button:hover::before, 79.card > button:hover::after { 80 display: inline; 81}
413 views
413 views
MIT License