style1.css

*{
    margin: 0px;
    padding: 0px;
}

body{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    perspective: 900px;
}

.card{
    width: 20%;
    height: 500px;
    border-radius: 20px;
    box-shadow: 1px 5px 15px -1px #555555;
    transform: rotateX(60deg) scale(.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    transition: all .5s ease-in-out;
}
img{
    width: 100%;
    height: 40%;

}
.title{
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.75rem;
}
.card:hover{
    transform: rotate(0deg) scale(1) translateY(10px);
}