31TSAI/AAAAAA EMOTIONAL DAMAGE/style.css

94 lines
1.6 KiB
CSS
Raw Normal View History

2023-03-01 13:37:33 +01:00
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;
}