Card by JaydipPrajapati1910
#e8e8e8
1.container { 2 background: #232427; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 flex-wrap: wrap; 7 margin: 40px 0; 8 border-radius: 20px; 9} 10 11.container .card { 12 position: relative; 13 min-width: 320px; 14 height: 380px; 15 box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), 16 inset -5px -5px 15px rgba(255, 255, 255, 0.1), 17 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1); 18 border-radius: 15px; 19 margin: 30px; 20 transition: 0.5s; 21} 22 23.container .card:nth-child(1) .box .content a { 24 background: #2196f3; 25} 26 27.container .card:nth-child(2) .box .content a { 28 background: #e91e63; 29} 30 31.container .card:nth-child(3) .box .content a { 32 background: #23c186; 33} 34 35.container .card .box { 36 position: absolute; 37 top: 20px; 38 left: 20px; 39 right: 20px; 40 bottom: 20px; 41 background: #2a2b2f; 42 border-radius: 15px; 43 display: flex; 44 justify-content: center; 45 align-items: center; 46 overflow: hidden; 47 transition: 0.5s; 48} 49 50.container .card .box:hover { 51 transform: translateY(-50px); 52} 53 54.container .card .box:before { 55 content: ""; 56 position: absolute; 57 top: 0; 58 left: 0; 59 width: 50%; 60 height: 100%; 61 background: rgba(255, 255, 255, 0.03); 62} 63 64.container .card .box .content { 65 padding: 20px; 66 text-align: center; 67} 68 69.container .card .box .content .heading { 70 position: absolute; 71 top: -10px; 72 right: 30px; 73 font-size: 8rem; 74 color: rgba(255, 255, 255, 0.1); 75} 76 77.container .card .box .content .content { 78 font-size: 1.8rem; 79 color: #fff; 80 z-index: 1; 81 transition: 0.5s; 82 margin-bottom: 15px; 83} 84 85.container .card .box .content p { 86 font-size: 1rem; 87 font-weight: 300; 88 color: rgba(255, 255, 255, 0.9); 89 z-index: 1; 90 transition: 0.5s; 91} 92 93.container .card .box .content a { 94 position: relative; 95 display: inline-block; 96 padding: 8px 20px; 97 background: black; 98 border-radius: 5px; 99 text-decoration: none; 100 color: white; 101 margin-top: 20px; 102 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 103 transition: 0.5s; 104} 105 106.container .card .box .content a:hover { 107 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); 108 background: #fff; 109 color: #000; 110} 111
1K views
1K views
MIT License