<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Alex+Brush|Roboto&display=swap" rel="stylesheet">
<div class="banner parallax-window" data-parallax="scroll" data-image-src='banner.jpg'
style="background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
<div class="container">
<div>
<div id="snow" style="background-image: url('http://www.webstrot.com/html/wedding/multi_page/images/header/sn1.png'), url('http://www.webstrot.com/html/wedding/multi_page/images/header/sn2.png'), url('http://www.webstrot.com/html/wedding/multi_page/images/header/sn3.png');"></div>
<div class="row py-5 pb-5">
<div class="col-md-1">
<img src="https://victorthemes.com/themes/ceremony/wp-content/uploads/2019/02/icon2@1x.png">
</div>
<div class="col-md-10 text-center">
<h1 id="titulo-banner">La Boda Perfecta</h1>
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<p id="desc-banner"><i>"<span id="banner-frase"></span>"</i><br> autor: <span id="banner-autor"></span></p>
</div>
</div>
</div>
<div class="col-md-1">
<img src="https://victorthemes.com/themes/ceremony/wp-content/uploads/2019/02/icon3@1x.png">
</div>
</div>
</div>
</div>
</div>
:root {
--font-cursive: 'Alex Brush', cursive;
--font-normal: 'Roboto', sans-serif;
}
.mpe {
background-color: cadetblue;
}
.banner {
color: white;
padding-bottom: 20px;
padding-top: 100px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#titulo-banner {
position: relative;
font-size: 100px;
font-family: var(--font-cursive) !important;
font-weight: bold;
color: #fff;
}
#titulo-banner:after {
content: url('https://cutt.ly/UeQwaIT');
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 0px;
top: -10px;
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
-moz-transform: scaleX(-1);
/* Firefox */
-o-transform: scaleX(-1);
/* Opera */
-webkit-transform: scaleX(-1);
/* Chrome y Safari */
transform: scaleX(-1);
/* w3org */
filter: FlipH;
/* Internet Explorer */
}
#titulo-banner:before {
content: url('https://cutt.ly/UeQwaIT');
display: block;
width: 10px;
height: 10px;
position: absolute;
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#desc-banner {
font-family: var(--font-normal);
font-size: 20px;
position: relative;
top: -20px;
}
#snow{
background: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:0;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
$(document).ready(function () {
var fraces_romanticas = [{
'frase': 'El amor es intensidad y por esto es una distensión del tiempo: estira los minutos y los alarga como siglos',
'autor': 'Octavio Paz'
},
{
'frase': 'El amor se compone de una sola alma que habita en dos cuerpos',
'autor': 'Aristóteles'
},
{
'frase': 'Andábamos sin buscarnos, pero sabiendo que andábamos para encontrarnos',
'autor': 'Julio Cortázar'
},
{
'frase': 'Por encima de todo vístanse de amor que es el vínculo perfecto',
'autor': 'Colosenses 3:14'
},
{
'frase': 'Prefiero vivir una vida contigo, que pasar el resto de las edades sin ti',
'autor': 'El señor de los anillos'
},
{
'frase': 'Creo que los lugares en que he estado y las fotos que he hecho durante mi vida me han estado conduciendo hacia ti”',
'autor': 'Los puentes de Madison'
},
{
'frase': 'A veces podemos pasarnos años sin vivir en absoluto, y de pronto toda nuestra vida se concentra en un solo instante',
'autor': 'Oscar Wilde'
},
{
'frase': 'Te quiero no por quien eres, sino por quien soy cuando estoy contigo ',
'autor': 'Gabriel García Márquez'
},
{
'frase': 'Siempre fuiste mi espejo. Quiero decir que para verme tenía que mirarte',
'autor': 'Julio Cortázar'
},
{
'frase': 'Me basta mirarte para saber que contigo me voy a empapar el alma',
'autor': 'Julio Cortázar'
},
{
'frase': 'Yo no te pido que me bajes una estrella azul, solo te pido que mi espacio lo llenes con tu luz',
'autor': 'Mario Benedetti'
},
{
'frase': 'Fíjese que cuando sonríe se le forman unas comillas en cada extremo de la boca. Esa, su boca, es mi cita favorita',
'autor': 'Mario Benedetti'
},
{
'frase': 'Amor es solo una palabra, hasta que alguien llega para darle sentido',
'autor': 'Paulo Coelho.'
},
{
'frase': 'Cuando te das cuenta que quieres pasar el resto de tu vida con una persona, quieres que el resto de tu vida empiece lo antes posible',
'autor': 'Billy Cristal'
},
{
'frase': 'Si no te hubiera conocido, habría soñado hacerte una realidad',
'autor': 'Sebastián Chantoix.'
},
{
'frase': 'Sea lo que sea de lo que estén hechas nuestras almas, la tuya y la mía son las mismas',
'autor': 'Emily Bronte'
},
{
'frase': 'Mi verdadero amor posee mi corazón y yo tengo el suyo',
'autor': 'Philip Sydney'
},
];
var numero = Math.floor(Math.random() * 16) + 1;
var frase = fraces_romanticas[numero]['frase'];
var autor = fraces_romanticas[numero]['autor'];
$('#banner-frase').html(frase);
$('#banner-autor').html(autor);
});
