Invitation Card With Music

<!DOCTYPE html>
<html>
    <head>
        <title>INVITACION MUSICAL </title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Mukta:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

<style>
/*ESTILO DE FONDO ANIMADO*/
:root {
  --gradient: linear-gradient(-45deg,white,white,white,deepskyblue
  ,white,white,white
  );
}


/*cuerpo*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: black;
    flex-wrap: wrap;
    
   font-family: basic-sans, sans-serif;
   font-family:cursive;
   font-size: 30px;
   Text-align:center;
   line-height: 1.6;
   color: #333;
}
/*contenedor principal*/
.card {
    position: relative;
    width: 300px;
    height: 1220px;
    border-radius: 5px;
   /* border: 1px white solid;*/
  box-shadow:0px 0px 10px 5px white;
                  0px 0px 10px 5px white;
    overflow: hidden;
    transition: .5s;
    margin: 15px 20px;
    
   min-height: 100%;
  background-size: 300%;
  background-image: var(--gradient);
  -webkit-animation: bg-animation 10s infinite;
          animation: bg-animation 10s infinite;
}

@-webkit-keyframes bg-animation {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

@keyframes bg-animation {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }


}



.card:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,1);
    transform: translateY(-20px);
}





/*contenedor del texto*/
.card .description {
    height: 220px;
    padding: 40px 20px 20px 20px;
    
    text-align: center;
}

.card .description h2,h4,p,i{
text-transform: capitalize;

animation: animate 10s infinite linear;
}
@keyframes animate
{
    0%,100%{
        color:black;
    }
    25%{
        color: deeppink;
    }
    50%{
        color:deepskyblue;
    }
    75%{
        color:blue;
    }
}


/*lluvia*/

.heart {
  position: fixed;
  top: -1vh;
  font-size : 2rem;
  transform: translateY(0);
  animation: fall 100s linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(105vh);
  }
}

/*imagen*/

Img{
    border: 1px black solid;
    
    
    
        border-radius: 50%;
        width:200px;
      
    
    
}

Img:hover {
    
background-image: var(--gradiente);
  
    --gradiente: linear-gradient(to top,red,white,red
    );
     box-shadow: 0 5px 10px rgba(0,0,0,1);
    transform: translateY(-20px);
}

/*texto

Div{
    animation: animate 10s infinite linear;
    
    

}

@keyframes animate
{
    0%,100%{
        color: lawngreen;
    }
    25%{
        color: deeppink;
    }
    50%{
        color:deepskyblue;
    }
    75%{
        color: black;
    }
}
*/

.uno{
    font-size:70px;
}


#song{
    display:none;
}


a{
    text-decoration: none;
    
    
}
.left{
    position :absolute;
    left:50px;
}

.right{
    position :absolute;
    left:200px;
}


</style>
<style>


/*fondo color animado
        :root {
  --gradient: linear-gradient(-45deg,deeppink,white,deeppink);
}

body {

  background: #ddd;
  background-size: 300%;
  background-image: var(--gradient);
  -webkit-animation: bg-animation 20s infinite;
          animation: bg-animation 20s infinite;
}

@-webkit-keyframes bg-animation {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

@keyframes bg-animation {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

/



*/

</style>

    </head>
    <body>
    <div class="card">
        
    <div class="description">
    
    <script>
    

function createHeart() {
  const heart = document.createElement("div");
  heart.classList.add("heart");
  heart.style.left = Math.random() *80+ "vw";
  heart.innerText = "";
  //heart.innerText="💦";
  heart.style.animationDuration = Math.random() * 5+5+"s";
  
  document.body.appendChild(heart);
  
  setTimeout(() => {
    heart.remove();
  }, 5000);
}

setInterval(createHeart,200);

function play(){
   
   document.getElementById("song").play();
    
}

</script>

    
    <div >
    <p>
    <b>Invitacion musical <br /> de bautizo<br />Precio $250<br />tatjeta interactiva <br /> con obcion <br /> a un audio <br /> de tu eleccion <br /> y ademas ubicaciones de tus eventos
    
     <br /> 👼<br /><br />
     toca los iconos <br /> para abrir <br /> las ubicaciones
     
     </p>
    
    <a class="left"
    href="https://maps.app.goo.gl/4um9YVqEmjJ7LZX8A
    ">⛪</a>

        <a class="right" href="https://maps.app.goo.gl/4um9YVqEmjJ7LZX8A
        ">🪩</a><br />
        
        <p>
            Toca Para Escuchar<br /> El Audio
            
        </p>
    
    
    
    <div class="uno">
    <i class="fa fa-hand-o-down" aria-hidden="true"></i><br /></div>
    
    <audio controls autoplay id="song">
        <source src="https://dl.dropbox.com/s/s0rv4nabsg2h0fw/SE%20BUSCA%28MP3_320K%29.mp3?dl=0
        " type="audio/mp3"></source>
        
  </audio>
    
    
    <img src="https://i.ibb.co/DCT2047/images-1.jpg
    " alt="REGALO" border="0"onclick="play()">
</div>

    
    
            
    </div>
    
    
    </body>
</html>





Post a Comment

0 Comments