Feliz día de la madre

1,640 byby.createsite

Abrir en el editor Publica tu código

Recomendado

26 August 2024

Tienda de accesorios de Star Wars

28 August 2025

Explorador de la Tierra: Ecología, geografía y biomas

28 May 2026

Mi cuento de Undertale

HTML

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>

CSS