body { margin: 0; padding: 0; font-family: sans-serif; } #container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .card-container { position: relative; width: 300px; height: 400px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); overflow: hidden; cursor: grab; } .card-container:hover { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); } .card-container:active { cursor: grabbing; } .card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.3s ease-in-out; } .card-left { transform: translateX(-200%) rotate(-30deg); opacity: 0; } .card-right { transform: translateX(200%) rotate(30deg); opacity: 0; } .card-liked { transform: translateX(200%) rotate(30deg); opacity: 0; } .card-disliked { transform: translateX(-200%) rotate(-30deg); opacity: 0; } .buttons { display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background-color: rgba(0, 0, 0, 0.4); color: #fff; font-size: 24px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease-in-out; opacity: 0; } .card-container:hover .buttons { opacity: 1; } .button-like { color: #00ff00; } .button-dislike { color: #ff0000; }