Card by ahmed150up
#212121
1.chat-card { 2 width: 300px; 3 background-color: #fff; 4 border-radius: 5px; 5 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 6 overflow: hidden; 7} 8 9.chat-header { 10 padding: 10px; 11 background-color: #f2f2f2; 12 display: flex; 13 align-items: center; 14} 15 16.chat-header .h2 { 17 font-size: 16px; 18 color: #333; 19} 20 21.chat-body { 22 padding: 20px; 23} 24 25.message { 26 margin-bottom: 10px; 27 padding: 10px; 28 border-radius: 5px; 29} 30 31.incoming { 32 background-color: #e1e1e1; 33} 34 35.outgoing { 36 background-color: #f2f2f2; 37 text-align: right; 38} 39 40.message p { 41 font-size: 14px; 42 color: #333; 43 margin: 0; 44} 45 46.chat-footer { 47 padding: 10px; 48 background-color: #f2f2f2; 49 display: flex; 50} 51 52.chat-footer input[type="text"] { 53 flex-grow: 1; 54 padding: 5px; 55 border: none; 56 border-radius: 3px; 57} 58 59.chat-footer button { 60 padding: 5px 10px; 61 border: none; 62 background-color: #4285f4; 63 color: #fff; 64 font-weight: bold; 65 cursor: pointer; 66 transition: background-color 0.3s; 67} 68 69.chat-footer button:hover { 70 background-color: #0f9d58; 71} 72 73@keyframes chatAnimation { 74 0% { 75 opacity: 0; 76 transform: translateY(10px); 77 } 78 79 100% { 80 opacity: 1; 81 transform: translateY(0); 82 } 83} 84 85.chat-card .message { 86 animation: chatAnimation 0.3s ease-in-out; 87 animation-fill-mode: both; 88 animation-delay: 0.1s; 89} 90 91.chat-card .message:nth-child(even) { 92 animation-delay: 0.2s; 93} 94 95.chat-card .message:nth-child(odd) { 96 animation-delay: 0.3s; 97} 98
1.8K views
1.8K views
MIT License