[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap');
:root {
/* The color for your card background and background pattern */
--background: #F3F0D7;
--background-decor: #DBD0C0;
/* Colors for the elements on your card */
--banner-bg: #1C0C5B;
--banner-txt: white;
/* Message area colors */
--message-bg: #F1EDE9;
--message-line: #94ACD4;
--message-txt: #333333;
/* Fonts */
--font-banner: 'Abril Fatface', cursive;
--font-text: 'Shadows Into Light', cursive;
/* Space and other details */
--space: 16px;
--space-xsm: 4px;
--space-sm: 8px;
--space-lg: 24px;
--space-xlg: 48px;
}
.bday-card {
max-width: 420px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
margin: 0 auto 4em;
}
.bday-pic {
display: flex;
align-items: center;
justify-content: center;
width: 280px;
height: 240px;
padding: var(--space-sm) var(--space-sm) var(--space-xlg);
background: white;
border-radius: 4px;
box-shadow: var(--space-xsm) var(--space-xsm) 15px rgba(0,0,0, .15);
/* Edit the Translate property below to adjust the position of your picture */
transform: rotate(5deg) translate(20px, 45px);
}
.bday-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bday-decor--container {
position: relative;
}
.bday-decor--container p {
padding: 0 !important;
}
.bday-banner {
display: flex;
flex-direction: column;
align-items: baseline;
font-size: 42px;
z-index: 1;
/* Play around with those properties to change your banner styling */
color: var(--banner-txt);
font-family: var(--font-banner);
text-transform: uppercase;
transform: rotate(-5deg);
gap: var(--space-sm) 0;
}
.bday-banner span {
background: var(--banner-bg);
padding: var(--space) var(--space-lg);
flex-grow: 0;
}
.bday-banner span:nth-child(2) {
margin-left: var(--space-lg);
}
.bday-message {
max-width: 80%;
padding: 35px var(--space);
font-family: var(--font-text);
font-size: 18px;
line-height: 32px;
color: var(--message-txt);
background-color: var(--message-bg);
}
.bday-message p {
line-height: 32px !important;
}
/* Paper */
.bday-message--paper {
background: repeating-linear-gradient(var(--message-bg), var(--message-bg) 31px, var(--message-line) 31px, var(--message-line) 32px);
box-shadow: var(--space-xsm) var(--space-xsm) 15px rgba(0,0,0, .15);
}
/* End - Paper */
/* Block right */
.bday-message--block-right {
position: relative;
}
.bday-message--block-right::before {
content: "";
width: 100vw;
height: 100%;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: var(--paper);
z-index: -1;
}
/* End - Block right */
/* Block left */
.bday-message--block-left {
position: relative;
}
.bday-message--block-left::before {
content: "";
width: 100vw;
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: var(--paper);
z-index: -1;
}
/* End - Block left */
.bday-decor {
/* Emojis are text - so here we are setting a font-size to make them bigger */
font-size: 96px;
}
/* Positioning for the emojis - play around with the values to change the placement of your decorations */
.bday-decor--top-right {
position: absolute;
bottom: -70px;
right: -20px;
}
.bday-decor--top-left {
position: absolute;
bottom: 0px;
left: -25px;
}
.bday-decor--bottom-right {
position: absolute;
right: 20px;
}
/* Animations */
/* Here we designate an specific animation to an specific element using a class. We have a defined name, time and iteration-count for each animation. We can also define the origin point from which the animation will happen - the default is the center. */
.zoom-left-in-out {
animation-name: zoom-left-in-out;
animation-duration: 1.75s;
animation-iteration-count: infinite;
transform-origin: left bottom;
}
/* Here we specify what will change on the element when they animate */
@keyframes zoom-left-in-out {
/* Animation will start and end with the same settings */
0%, 100% {
transform: scale(0.95) rotate(2deg);
}
/* Animation will reach those settings 50% into the duration time we set on the declaration */
50% {
transform: scale(1) rotate(-2deg);
}
}
/* pulse */
.pulse {
animation-name: pulse;
animation-duration: 1.3s;
animation-iteration-count: infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
}
/* pulse - End */
/* float */
.float {
animation-name: float;
animation-duration: 1.9s;
animation-iteration-count: infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
}
/* float - End */
/* spin */
.spin {
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
</style>
<div class="bday-card">
<!-- Top part of the card: image + decorations -->
<div class="bday-decor--container">
<div class="bday-pic ">
<img src="https://images.unsplash.com/photo-1572451479139-6a308211d8be?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2670&q=80">
</div>
<p class="bday-decor bday-decor--top-right float">🎈</p>
<p class="bday-decor bday-decor--top-left spin">🌻</p>
</div>
<!-- Banner -->
<div class="bday-banner">
<span>Happy</span> <span>Birthday</span>
</div>
<!-- Message + decoration -->
<div class="bday-message bday-message--paper">
<p>Ana, yet another year that we get to celebrate together! Hope you have a great day, and may your new age be full of health, love and laughter. Love you loads <br> Camila</p>
<p class="bday-decor bday-decor--bottom-right zoom-left-in-out">🎉</p>
</div>
</div>
[/html]
