Scribd
Upload
7 views2 pages

Birthday

Uploaded by

adityahhy27
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views2 pages

Birthday

Uploaded by

adityahhy27
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

body {

height: 100%;
padding: 70px;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
}

.card {
position: relative;
width: 300px;
height: 425px;
border: 10px solid #fcc300;
margin: 60px auto 0 auto;
box-shadow: inset 10px 0px 15px 0px rgba(0, 0, 0, 0.1);
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255),
rgba(255, 255, 255, 0.5)
),
url("https://bit.ly/465NgNX"); /* enter your own image */

background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #e6f0e6;
}
.card .text-container {
width: 80%;
height: 80%;
margin: auto;
}
.strikethrough {
text-decoration: line-through;
}
.card .text-container #head {
font-size: 1.5em;
margin: 60px auto 60px auto;
}
.card p {
font-size: 1.1em;
line-height: 1.4;
font-family: "Nobile";
color: #331717;
font-style: italic;
text-align: center;
margin: 30px auto 0px auto;
}
.card .front {
position: absolute;
width: 100%;
height: 100%;
margin: -10px 0px 0px -10px;
border: 10px solid #fcc300;
backface-visibility: hidden;
background-color: #fcc300;
background-image: url("https://bit.ly/465NgNX");
background-size: contain;
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
}
.card:hover .front {
transform: perspective(800px) rotateY(-170deg);
background-color: #41718d;
}
.card:hover .back {
transform: perspective(800px) rotateY(-170deg);
box-shadow: 7px 0px 5px 0px rgba(0, 0, 0, 0.3),
inset 2px 0px 15px 0px rgba(0, 0, 0, 0.1);
background-color: #d2dcd2;
}
.card .back {
position: absolute;
width: 100%;
height: 100%;
border: 10px solid #fcc300;
margin: -10px 0px 0px -10px;
backface-visibility: visible;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
background-color: #e6f0e6;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.imgset {
position: relative;
z-index: 1;
margin-bottom: -215px;
}
.imgset img {
box-shadow: 0px 6px 11px 7px rgba(0, 0, 0, 0.22);
border-radius: 5px;
}

You might also like