<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>
0 Comments