card

by Chris LaFrombois

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="stylecard.css">
</head>

<body>

    <div id="card">
        <div class="heart" id="heart1"></div>
        <div id="message">
            <h2>Happy Valentines Day</h2>
        </div>
        <!-- <div class="heart" id="heart2"></div> -->
    </div>
</body>

</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Poiret+One);


body {
    background-color:white;
    font-family: 'Poiret One', Segoe UI Light, cursive;


}
.heart {
    background-color: #d32f2f;
    display: inline-block;
    height: 200px;
    margin: 0 10px;
    position: relative;
    top: 0;
    /* transform: rotate(-45deg); */
    width: 200px;
    margin-top: 200px;
    margin-left: 500px;
    /* transform: rotate(0deg); */
}

.heart:before,
.heart:after {
    content: "";
    background-color: #d32f2f;
    border-radius: 50%;
    height: 200px;
    position: absolute;
    width: 200px;
}

.heart:before {
    top: -110px;
    left: 0;
}

.heart:after {
    left: 110px;
    top: 0;
}


#card{
     margin-top: 200px;

}
#message {

    height: 400px;
    width: 400px;
    margin-top: -410px;
    margin-left: 500px;
    background-color: #333;
    color: white;
    border: 3px dashed violet;
    border-radius: 35% 0 35% 0;

}

#card #heart1 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation: closeLeft 2s ease-in-out forwards;
    -moz-animation: closeLeft 2s ease-in-out forwards;
    -ms-animation: closeLeft 2s ease-in-out forwards;
    animation: closeLeft 2s ease-in-out forwards;
    transform-origin: 0 0;
}


#card:hover #heart1 {
    -webkit-animation: openLeft 2s ease-in-out forwards;
    -moz-animation: openLeft 2s ease-in-out forwards;
    -ms-animation: openLeft 2 ease-in-out forwards;
    animation: openLeft 2s ease-in-out forwards;
}

@-webkit-keyframes closeLeft {
    from {
        -webkit-transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(180deg);
    }
}

@-moz-keyframes closeLeft {
    from {
        -moz-transform: rotateY(0deg);
    }

    to {
        -moz-transform: rotateY(180deg);
    }
}

@-ms-keyframes closeLeft {
    from {
        -ms-transform: rotateY(0deg);
    }

    to {
       ...