Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
			<meta name="twitter:site" content="@Esri Chile">
		<meta name="twitter:creator" content="@Esri Chile">
		<meta name="twitter:title" content="Mapa del día del Amor">
		<meta name="twitter:description" content="Mapa del día del Amor">
<script>var HeartsBackground = {
  heartHeight: 60,
  heartWidth: 64,
  hearts: [],
  heartImage: 'https://img.pngio.com/instagram-heart-png-clipart-background-png-play-heart-png-820_613.png',
  maxHearts: 8,
  minScale: 0.4,
  draw: function() {
    this.setCanvasSize();
    this.ctx.clearRect(0, 0, this.w, this.h);
    for (var i = 0; i < this.hearts.length; i++) {
      var heart = this.hearts[i];
      heart.image = new Image();
      heart.image.style.height = heart.height;
      heart.image.src = this.heartImage;
      this.ctx.globalAlpha = heart.opacity;
      this.ctx.drawImage (heart.image, heart.x, heart.y, heart.width, heart.height);
    }
    this.move();
  },
  move: function() {
    for(var b = 0; b < this.hearts.length; b++) {
      var heart = this.hearts[b];
      heart.y += heart.ys;
      if(heart.y > this.h) {
        heart.x = Math.random() * this.w;
        heart.y = -1 * this.heartHeight;
      }
    }
  },
  setCanvasSize: function() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.w = this.canvas.width;
    this.h = this.canvas.height;
  },
  initialize: function() {
    this.canvas = $('#canvas')[0];

    if(!this.canvas.getContext)
      return;

    this.setCanvasSize();
    this.ctx = this.canvas.getContext('2d');

    for(var a = 0; a < this.maxHearts; a++) {
      var scale = (Math.random() * (1 - this.minScale)) + this.minScale;
      this.hearts.push({
        x: Math.random() * this.w,
        y: Math.random() * this.h,
        ys: Math.random() + 1,
        height: scale * this.heartHeight,
        width: scale * this.heartWidth,
        opacity: scale
      });
    }

    setInterval($.proxy(this.draw, this), 30);
  }
};

$(document).ready(function(){
  HeartsBackground.initialize();
});</script>
	<title>Feliz día de San Valentín</title>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">

<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button1 {
  background-color: Transparent;
  color: white;
  border: 2px solid #ffff;
}

.button1:hover {
  background-color: #ffff;
  color: black;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white;
  color: black;
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}
a {
  color: white;
}

a:hover {
  color: black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
	<header>

		<div class="container d-flex flex-column justify-content-center align-items-center">
			<div>
			<h1 class="text-white text-uppercase text-center">¡Feliz día de San Valentín!</h1>
				<h4 class="text-white text-center">Envía un presente virtual a la persona especial<br> que quieras saludar este 14 de Febrero</h4>
				<hr>
			</div>

			<div>
			<a href="https://survey123.arcgis.com/share/02b6241ccf414993929cf0a8d5db39c7" target="_blank"><button class="button button1">Envía tu regalo</button></a>
                <a href="http://esriscl.maps.arcgis.com/apps/webappviewer/index.html?id=723530fd219448e4b5fcb7ed8b714eea" target="_blank"><button class="button button1">Revisa el mapa de presentes</button></a>
                </div>
                <br>
                <br>
                <div class="social-icons">
				<ul>
					<li><a href="http://www.facebook.com/sharer.php?u=http://sanvalentin.esri.cl" class="facebook" target="_blank"><img src="http://usuarios.cl/sanvalentin/images/facebook.png" alt="facebook"> </a></li>
					<li><a href="http://twitter.com/share?url=http://sanvalentin.esri.cl&amp;text=Envia+un+presente+en+el+dia+de+san+valentin @ESRIchile" class="twitter" target="_blank"><img src="http://usuarios.cl/sanvalentin/images/twitter.png" alt="twitter"></a> </li>
					<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://sanvalentin.esri.cl" class="linkedin" target="_blank"><img src="http://usuarios.cl/sanvalentin/images/linkedin.png" alt="linkedin"></a> </li>

				</ul>
		</div>
		</div>

	</header>
</body>
</html>