मातृ दिवस की शुभकामना

अनुशंसित

10 February 2025

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>

मातृ दिवस की शुभकामना

अनुशंसित

कार्ड की जानकारी

नये साल की उलटी गिनती

मिकी का नया कैलकुलेटर

HTML

CSS

JS

अनुशंसित

कार्ड की जानकारी

नये साल की उलटी गिनती

मिकी का नया कैलकुलेटर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS