Happy Mother's day

Open In Editor Video Publish Your Code

CREDITS TO: https://codepen.io/oliverjam/pen/WwQqWv
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feliz dia das mães</title>
    <style>
    @import url(https://fonts.googleapis.com/css?family=Oleo+Script);
    @import url(https://fonts.googleapis.com/css?family=Poiret+One);
    body {
    background: #45b9d3;
    color: white;
    overflow: hidden;
    }

.dark {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background: rgba(29, 25, 52, 0.9);
    z-index: 5000;
    }

h1, h2 {
    position: relative;
    text-align: center;
    font-family: "Poiret One", "Oleo Script", cursive;
    text-shadow: 1px 1px 1px rgba(77, 77, 77, 0.5);
    z-index: 1000;
    margin: 0;
    }

h1 {
    margin-top: 4.5rem;
    font-size: 8vw;
    }

h2 {
    font-size: 6vw;
    font-family: "Oleo Script", cursive;
    }

.sun {
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 3rem;
    height: 3rem;
    background: khaki;
    border-radius: 100%;
    box-shadow: 0 0 20px khaki;
    }

.flowers {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    }

.flower {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .flower_head {
    height: 7rem;
    width: 7rem;
    background: #cba8ed;
    border-radius: 100%;
    }
    .flower_stem {
    width: 0.5rem;
    height: 20rem;
    max-height: 0;
    background: green;
    }
    .flower_stem::after {
    content: "";
    margin-left: 0.5rem;
    margin-top: 1rem;
    width: 3em;
    height: 3em;
    display: block;
    background: green;
    border-radius: 2em 0 2em 0em;
    }

.red {
    width: 6rem;
    height: 6rem;
    background: #ff4b4b;
    }

.fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn 1s 2s ease-in forwards;
            animation: fadeIn 1s 2s ease-in forwards;
    }

.slideIn {
    transform: translateX(-5rem);
    -webkit-animation: slideIn 3s ease-out forwards;
            animation: slideIn 3s ease-out forwards;
    }

.fadeOut {
    opacity: 1;
    -webkit-animation: fadeOut 4s 0.25s ease forwards;
            animation: fadeOut 4s 0.25s ease forwards;
    }

.grow-12 {
    -webkit-animation: grow-12 2s 0.5s ease-in-out forwards;
            animation: grow-12 2s 0.5s ease-in-out forwards;
    }

.grow-15 {
    -webkit-animation: grow-15 2s 1.5s ease-in-out forwards;
            animation: grow-15 2s 1.5s ease-in-out forwards;
    }

.grow-9 {
    -webkit-animation: grow-9 2s 2.5s ease-in-out forwards;
            animation: grow-9 2s 2.5s ease-in-out forwards;
    }

.pulse {
    -webkit-animation: pulse 1s 0.5s ease-in-out infinite alternate;
            animation: pulse 1s 0.5s ease-in-out infinite alternate;
    }

@-webkit-keyframes fadeIn {
    100% {
        opacity: 1;
    }
    }

@keyframes fadeIn {
    100% {
        opacity: 1;
    }
    }
    @-webkit-keyframes slideIn {
    100% {
        transform: translateX(0);
    }
    }
    @keyframes slideIn {
    100% {
        transform: translateX(0);
    }
    }
    @-webkit-keyframes fadeOut {
    100% {
        opacity: 0;
    }
    }
    @keyframes fadeOut {
    100% {
        opacity: 0;
    }
    }
    @-webkit-keyframes grow-12 {
    100% {
        max-height: 14rem;
    }
    }
    @keyframes grow-12 {
    100% {
        max-height: 14rem;
    }
    }
    @-webkit-keyframes grow-15 {
    100% {
        max-height: 17rem;
    }
    }
    @keyframes grow-15 {
    100% {
        max-height: 17rem;
    }
    }
    @-webkit-keyframes grow-9 {
    100% {
        max-height: 11rem;
    }
    }
    @keyframes grow-9 {
    100% {
        max-height: 11rem;
    }
    }
    @-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
    }
    @keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
    }
    @media (max-width: 480px) {
    h1 {
        font-size: 2.777rem;
    }

h2 {
        font-size: 1.777rem;
    }
    }
    </style>
</head>
<body>
    
<div class="dark fadeOut"></div>
<div class="sun slideIn"></div>
<h1 class="fadeIn">Feliz dia das mães</h1>
<section class="flowers">
  <div class="flower">
    <div class="flower_head pulse red"></div>
    <div class="flower_stem grow-12"></div>
  </div>
  <div class="flower">
    <div class="flower_head pulse red"></div>
    <div class="flower_stem grow-15"></div>
  </div>
  <div class="flower">
    <div class="flower_head pulse red"></div>
    <div class="flower_stem grow-9"></div>
  </div>
</section>
    
</body>
</html>

Happy Mother's day

Recommended

Friday Night Funkin' HTML5 Game Embed

happy wheel

Day and night lighthouse illustration

HTML

CSS

JS

Recommended

Friday Night Funkin' HTML5 Game Embed

happy wheel

Day and night lighthouse illustration

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS