Plantillas para crear una página de destino. Plantillas de página de destino

Se necesitan plantillas de página de destino listas para usar para lanzar rápidamente un nuevo producto, promocionarlo mediante una página LP o una aplicación móvil, o motivar a los usuarios a registrarse o suscribirse a un boletín. Para una página de destino, la comodidad y facilidad de uso con el diseño adecuado son extremadamente importantes. Las plantillas de páginas de destino de ventas modernas se desarrollan teniendo en cuenta la capacidad de crear un sitio web responsivo con altas tasas de conversión.

Demostración | Crossway – Puesta en marcha Página de destino Plantilla

Tema HTML5 ultramoderno basado en Bootstrap 3.1.1. Viene con 4 diseños: opciones de barra de navegación única/multipágina. Se integra un ligero efecto de desplazamiento de paralaje en el tema de la página de destino, adaptado para tráfico móvil y orgánico (SEO).

Demostración | PuntoCuadrado

aterrizaje HTML plantilla de página para web y aplicaciones móviles, destinado a facilitar la generación de leads. Tiene carga rápida y html válido, codigo css. En la parte superior de la página de una sola página hay un formulario de contacto duplicado con .

Demostración | Plantilla de página de destino adaptable de Primo

Plantilla de aterrizaje HTML5 de una página con efectos CSS3. Tiene un marco de tres columnas, creado en Bootstrap 3. Adecuado para vender aplicaciones iOS/Android. La plantilla incluye 2 diseños (con y sin Parallax), formularios de contacto Ajax, caja de luz PrettyPhoto y 5 combinaciones de colores. Fácil de personalizar: cambie los códigos hexadecimales y los elementos relacionados se colorearán en un nuevo color. PSD incluido.

Demostración | Hype – Página de inicio de la aplicación

La moderna plantilla de aplicación móvil lista para Retina ofrece 8 opciones de color, opciones de imagen/.

Demostración | Página de inicio multipropósito de Gotte

La plantilla de página de destino de estilo plano multipropósito viene con 3 opciones de índice y 6 combinaciones de colores. Plantilla creada en twitter bootstrap3, incluida secuencia de comandos PHP formularios de contacto y descargas.

Demostración | Calumnia: página de inicio HTML5 Bootstrap responsiva

Slander es una opción ideal para startups y empresas, adecuada para profesionales o un proyecto individual. Incluye diseño responsivo con Bootstrap y HTML5/CSS3 control deslizante adaptativo, control deslizante de pestañas, formulario de suscripción a noticias, etc.

Demostración | Appster: plantilla de página de inicio de aplicación limpia definitiva

Nube: una página de inicio de aplicación fácil de usar

Plantilla de página de destino HTML5/CSS3 elegante, limpia y minimalista con excelente funcionalidad. La plantilla está diseñada para la página Próximamente (que se lanzará pronto), ideal para crear una página de aplicación y un sitio de exhibición.

Demostración | OnEvent – ​​Página de inicio de eventos especiales

Plantilla de aterrizaje adaptable para ofertas especiales. eventos. Tiene secciones para video comercial, programación de eventos, lista de invitados.

Saludos, mis queridos lectores. Hoy hablaremos de aspectos técnicos con los que podemos incrementar la conversión en ventas de nuestros bienes o servicios. Uno de puntos importantes está bien pensado página de destino con bienes. La llamada página de destino, de cuya creación hablaremos más adelante y obtendremos códigos de página ya preparados.

¿Qué es una página de destino? Esta es la página a la que suelen acceder las personas después de hacer clic en un anuncio. Creado para una oferta: producto, servicio o suscripción. Una página de destino eficaz es la piedra angular del éxito del marketing online. El producto puede ser el mejor del mercado, los anuncios están perfeccionados, pero sin una buena landing page los esfuerzos no dan resultados al 100%. Les dice a los visitantes qué se ofrece y por qué deberían quererlo. El sentido de urgencia contribuye a una rápida toma de decisiones y a la transición del usuario a la categoría de cliente.

¿Cómo crear una página de destino? Es un error creer que la respuesta está en la capacidad de componer tipografía. Una buena página de destino es el resultado de un trabajo coordinado en objetivos, texto, diseño y código. Las páginas de destino, cuyos ejemplos se encontrarán a continuación, ayudarán a los principiantes a aprender los conceptos básicos del diseño, pero no reemplazarán los textos de conversión ni la comprensión del público objetivo. También puedes crearlos utilizando varios diseñadores de páginas de destino.

Entonces, antes de crear una página de destino, pregúntese:

• ¿Qué hará una persona después de llegar a la página de destino? ¿Comprará algo? ¿Llenarás el formulario? ¿Suscribirse al boletín? Antes de realizar un seguimiento de su tasa de conversión, establezca objetivos claros.
• ¿Quiénes son mis competidores? En realidad, se trata de tres preguntas: ¿quiénes, qué tan exitosos son y cómo se pueden aplicar sus logros? La imitación es la forma más sincera de adulación. Si sus competidores están haciendo algo que funciona, replíquelo en su sitio.
• ¿Quién es mi audiencia? Cuanto mejor comprenda su nicho y público objetivo, mayores serán las posibilidades de que sus esfuerzos valgan la pena.

Debes ofrecer toda la información necesaria, pero no tanta como para abrumar y ahuyentar a tu cliente potencial.

Ejemplos de creación de una página de destino + codificación para principiantes

Antes de comenzar, echemos un vistazo rápido a HTML y CSS. Comprender cómo funcionan le ayudará a crear un aterrizaje.

HTML es un lenguaje de marcado del navegador para la visualización de sitios web. Escrito utilizando etiquetas entre corchetes angulares que definen el contenido.

La etiqueta se abre () y se cierra () alrededor del relleno:

contenido

Para realizar ajustes, se agregan atributos después del nombre:

contenido

CSS: define cómo organizar los elementos HTML. Consta de selectores, propiedades y valores:

#selector (propiedad: valor;)

El selector coincide con el nombre de una etiqueta específica en html. Cambiar valores y agregar propiedades regula su apariencia. Puede crear páginas que se vean diferentes entre sí aplicando diferentes estilos CSS al mismo HTML.

5 pasos iniciales

Para un diseño rápido, usaremos una plantilla con un diseño mínimo basado en bootstrap. Se trata de un sistema con selectores propios, que se utiliza en todo el mundo para agilizar el diseño.

Parece modesto.

A partir de este pescado se crea en varias etapas un sitio web para todos los gustos.

Estructura de directorios en la carpeta:

• index.html: Este es el archivo principal que editaremos.
• /assets: los archivos auxiliares se encuentran aquí:
• /css: el directorio contiene estilos de iconos y de arranque. El archivo que editaremos es main.css.
• /img: carpeta para imágenes del sitio.
• /fonts: fuentes de iconos.
• /js: arranca archivos javascript.

Paso 1: usar un encabezado

El título y los subtítulos son lugares clave que ayudan a transmitir el valor de la oferta de manera clara.

Cambiemos el título y el nombre del sitio. Aquí no es necesario tener habilidades de mecanografía: usted escribe su propio texto en los lugares resaltados en amarillo en la pantalla.

Paso 2. La brevedad es hermana de la conversión. Agregar beneficios y tarifas

Necesitará 4 secciones:

• ventajas;
• tarifas;
• reseñas;
• llamada a la acción.

Creemos una sección del contenido principal “main”, en la que insertaremos las secciones necesarias:

…..
…..
…..
…..

Rellenar con relleno en lugar de puntos.

Para la sección de beneficios necesitarás este código:

Ventajas
Rápido

Confiable

Sed diam noummy

Rentable

Elit, sed diam noummy

Técnicamente

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Confiable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Técnicamente

Lorem ipsum dolor sit amet, consectetuer adipiscing

Confiable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Rentable

Lorem ipsum dolor sit amet, consectetuer adipiscing

Contenido para mayor claridad:

Todavía parece descuidado, pero no hay motivo para entrar en pánico, continuemos.

Anotamos precios. El contenido cambia de la misma forma que en el primer paso. Descripción general con la clase “tarifs” y tres tarifas.

Planes tarifarios

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tarifa No. 1
$10

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden
Tarifa No. 2
$20

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden
Tarifa No. 3
$30

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden

Tiene este aspecto.

Por ahora, no estamos interesados ​​​​en la apariencia de la futura página de destino; veremos ejemplos de cambios de estilo a continuación.

Paso 3: señales de confianza y llamado a la acción

El uso de señales específicas indica a los visitantes que la marca es digna de confianza. Las señales pueden adoptar muchas formas, pero la clásica son los comentarios de los clientes.

Opiniones de los usuarios

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo".
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo".

Hagamos un llamado a la acción.

Benefíciese al realizar su pedido hoy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

¡Ordenar ahora!

Las reseñas ayudarán a los clientes potenciales a decidir comprar el producto. Para mayor claridad, necesitamos avatares, por lo que los colocaremos inmediatamente debajo de cada cita.

Nombre del cliente.

Paso 4: Integración compatible con redes móviles y dispositivos móviles

Para implementar la grilla, necesitamos contenedores Bootstrap. Es importante recordar el número total de segmentos de columna válidos: 12. La clase determina el ancho de visualización del contenido. La ventaja de esta rejilla ya preparada es que los contenedores están diseñados teniendo en cuenta la adaptabilidad y se pueden utilizar inmediatamente para dispositivos móviles. Descripción detallada en el sitio oficial. La cuadrícula se ve así.

El contenido de “principal” se envolverá en un contenedor. Para ello, en la parte superior está escrito lo siguiente:

… .

Si necesita que el bloque se ajuste a todo el ancho de la pantalla, entonces se inserta el contenedor en su interior. Aquí será un jumbotron y un llamado a la acción.

Envolveremos todos los elementos que requieran colocación uno encima del otro con separadores de líneas.

Ahora podemos ajustar el ancho de las columnas, centrándonos en la cuadrícula de arranque. Después de envolver, el relleno dejó de pegarse a los bordes de la pantalla y aparecieron prolijas muescas.

Establecemos precios en una fila usando la clase de columna col-lg-4. Dentro de las líneas de las filas, ya no es necesario escribir divs separados para ajustarlos; se pueden combinar con los existentes separados por un espacio.

Por analogía, configuramos columnas para la sección de reseñas y beneficios. Si necesita mover un elemento hacia un lado, use la clase de columna de desplazamiento col-lg-offset-2. El número al final determina en cuántas columnas base se producirá el cambio.

Paso 5. Fuentes e íconos

Implementamos fuentes de encabezado de Google Font. Cuando esté seleccionado, abra la pestaña de importación y copie los datos al archivo main.css. También agregamos selectores de títulos al archivo para el cual se usa la nueva fuente.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importar fuente para encabezados */
.navbar-marca,
h1,
h2,
h3,
h4,
h5,
h6 (
familia de fuentes: "Roboto Condensed", sans-serif; /* Salida de fuente de Google */
}

Para mayor claridad, las ventajas se describen mediante una clase con el nombre autoexplicativo text-center e íconos FontAwesome del conjunto de arranque.

En este punto la preparación está completamente completa.

Página de destino: ejemplos de códigos con oferta, paralaje y contador

Utilizamos los tres tipos más populares: con frase, con forma y con contador de cuenta atrás. A medida que avance el diseño, la plantilla se complementará con efectos.

Ejemplo 1: con una frase

Configuremos el fondo de la parte principal y el relleno para que cubra la primera pantalla.

Jumbotrón (
fondo: #f5f5f5 url(../img/fon.jpg) parte superior central sin repetición;
ancho máximo: 100%;
relleno superior: 250 px;
fondo de relleno: 200px;
alineación de texto: centro;
}

Cambiemos el tamaño del encabezado del jumbotron de h2 a h1. A continuación, escribimos estilos para los elementos que deben cambiarse.

Empecemos por los iconos.

Beneficios i(
color: #cac4c4;
}

Después del signo almohadilla, se especifica un color. Puede elegir su propia opción utilizando tablas de colores html o un editor de imágenes.

Sangría para títulos de sección

sección h2 (
relleno superior: 30px;
margen inferior: 25px;
}

Estamos arreglando la apariencia de los aranceles. Por conveniencia, creamos nuestras propias clases para los elementos que queremos resaltar específicamente.

Tarifa No. 1
$10

por mes/por persona

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Orden

Y mucho CSS. Los lugares de los que son responsables las secciones se indican en los comentarios - /* entre barras con un asterisco */

/* =========Estilos tarifarios======== */
/* vista general de la tarifa */
.precio_artículo(
fondo: #f2f2f2;
posición: relativa;
mostrar: -webkit-flex;
pantalla: flexible;

dirección flexible: columna;

alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexionar: 0 1 330px;
relleno: 2em 3em;
margen: 1 em;
color: #262b38;
cursor: predeterminado;
desbordamiento: oculto;

}
/* cambia el fondo al hacer clic */
.pricing_item: pasar el cursor (
color: #444;
antecedentes: #daebef;
}
/* fondo de etiqueta de precio individual en cada tarifa */
.pricing_item:primer hijo .price (
antecedentes: #9ba9b5;
}
.pricing_item:nth-child(2).precio (
antecedentes: #1f6098;
}
/* en pantallas anchas la columna de tarifa central tiene sangría y está resaltada */
@media pantalla y (ancho mínimo: 66.250em) (
.precio_artículo(
margen: 1,5 em 0;
}
.presentado(
índice z: 10;
margen: 0;
tamaño de fuente: 1,15 em;
}
}
/* título */
.pricing_item h3 (
tamaño de fuente: 2em;
margen: 0,5 em 0 0;
color: #1d211f;
}
/* fondo de la etiqueta de precio */
.precio(
tamaño de fuente: 2em;
peso de fuente: negrita;
color: #fff;
posición: relativa;
índice z: 100;
altura de línea: 95 px;
ancho: 100px;
altura: 100 píxeles;
margen: 1,15em automático 1em;
radio fronterizo: 50%;
fondo: #77a5cc;
-webkit-transición: color 0,3 s, fondo 0,3 s;
transición: color 0,3 s, fondo 0,3 s;
}
/* divisa */
.divisa(
tamaño de fuente: 0,5 em;
alineación vertical: súper;
}
/* aclaración de la propuesta */
.oración (
peso de fuente: negrita;
margen: 0 0 1em 0;
relleno: 0 0 0,5 em;
color: #2a6496;
}
/* lista */
.pricing_item ul (
tamaño de fuente: 0,95 em;
margen: 0;
relleno: 1,5 em 0,5 em 2,5 em;
alineación de texto: izquierda;
}
/* listar elementos */
.pricing_item li (
relleno: 0,15 em 0;
}
/* botón de orden de tasa */
.botón de elemento de precio (
peso de fuente: negrita;
margen superior: automático;
relleno: 1em 2em;
color: #fff;
radio del borde: 5px;
antecedentes: #428bca;
-transición-webkit: color de fondo 0,3s;
transición: color de fondo 0,3 s;
}
/* cambia de color cuando se presiona el botón */
Botón .pricing_item: desplazar el cursor,
Botón .pricing_item: foco (
color de fondo: #285e8e;
}
/* antecedentes arancelarios*/
.bg-2 (
fondo: #dddddd;
}

Resultado

Opiniones de los usuarios. Démosles una mirada ordenada e indiquemos su ubicación.

/* =========Estilos de testimonios======== */
testimonios (
relleno: 4em 0;
alineación de texto: centro;
}
.testimonios .avatar img (
radio fronterizo: 50%;
flotador izquierdo;
pantalla: en línea;
margen derecho: 1em;
ancho: 65 píxeles;
altura: 65 píxeles;
margen inferior: 30px;
}
.testimonios .avatar p (
alineación de texto: izquierda;
acolchado superior: 1em;
color: #5d5d5d;
peso de fuente: 900;
}

Ya solo queda decorar la última llamada a la acción y el pie de página.

/* Acción */
.acción(
antecedentes: #476177;
altura mínima: 180 px;
ancho: 100%;
relleno: 4em 0;
alineación de texto: centro;
}
.acción h2 (
color: #fff;
peso de fuente: 300;

}
.acción p(
color: #fff;
sombra de texto: 0 1px 2px rgba(0, 0, 0, .2);
tamaño de fuente: 1,2 em;
}
.acción .contenedor (
margen superior: 3em;
}
/* Pie de página */
pie de página (
antecedentes: #333333;
relleno: 1em 0;
alineación de texto: derecha;
}
pie de página p(
color: #fff;
altura de línea: 1;
transformación de texto: mayúsculas;
tamaño de fuente: 0,7 em;
margen superior: 0,5 em;
}

Al botón de pie de página se le asigna la clase de arranque incorporada btn-default.

Dando vida a la plantilla. Introduciremos un desplazamiento suave y botones para las secciones, así como animación de texto en la primera pantalla.

Para que las transiciones funcionen, reemplazaremos algunas de las clases de la sección con id, para beneficios y tarifas. Y agregaremos enlaces a la identificación de los botones. Captura de pantalla: qué se adjunta a qué, resaltado con un marcador amarillo.

Establecemos sangrías para los botones: jbutton. El desplazamiento cuando se presiona funciona, pero de manera muy abrupta.

Las transiciones suaves se crean usando javascript o jquery. Este último está conectado a las plantillas Bootstrap de forma predeterminada.

El desplazamiento ahora es fluido.

Agregar animación al texto usando Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Este es un código fuente abierto listo para usar y se puede utilizar en cualquier sitio web. Coloque el archivo de Github en la carpeta css y especifique la ruta.

Seleccionamos los efectos aquí: https://daneden.github.io/animate.css/. Hemos seleccionado fadeInDown. Está escrito en el código así:

Ahora, cuando la página se cargue o actualice, el texto se animará. Listo.

Ejemplo 2: con forma y efecto de paralaje

Cuantos más campos de formulario se presenten a un visitante, es menos probable que los complete. Solicite sólo la información mínima necesaria.

Está ensamblado por analogía. Cambiaremos fondos y colores. Y, por supuesto, agregaremos una forma.

Comencemos con el paralaje.

Cambiemos el fondo del jumbotron a transparente:

fondo: transparente;

Dentro del encabezado insertaremos el script:

$(ventana).scroll(función(e)(
paralaje();
});
función paralaje())(
var desplazado = $(ventana).scrollTop();
$(".bgparallax").css("arriba",-(desplazado*0.2)+"px");
}

La primera línea del cuerpo es un contenedor de paralaje:

Y en CSS su comportamiento es:

Bgparalaje (
fondo: url(/../img/fon.jpg) repetir;
posición: fija;
ancho: 100%;
altura: 300%;
arriba: 0;
izquierda: 0;
índice z: -1;
}

El paralaje está listo. Pero realizar cambios en el código y un nuevo fondo requiere reasignar la combinación de colores.

Oscurecer el menú:

Barra de navegación predeterminada (
color de fondo: #333;
color del borde: #444;
color: gris oscuro;
radio de borde: 0;
}

Barra de navegación predeterminada .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
color: gris oscuro;
color de fondo: rgba(0, 0, 0, 0.5);
}

Reemplazamos la oración en jumbotron por una nueva, con el código de formulario:

La página de destino convierte a los visitantes en clientes
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

Y prescribimos la apariencia.

/* forma */
.lista de formularios de cabeza (
tipo de estilo de lista: ninguno;
altura de línea: 26px;
peso de fuente: 400;
relleno: 0px;
margen inferior: 40px;
}
.forma de cabeza (
desbordamiento: oculto;
posición: relativa;
color de fondo: rgba(0,0,0,.4);
relleno: 35px 40px;
radio del borde: 8px;
}
entrada, botón, seleccionar, área de texto (
ancho: 100%;
margen inferior: 10px;
}
.headform-lista li .fa (
posición: absoluta;
arriba: 0px;
izquierda: 0px;
ancho: 42px;
tamaño de fuente: 24px;
alineación de texto: centro;
}
.headform-lista li (
posición: relativa;
altura mínima: 38px;
relleno-izquierda: 62px;
margen inferior: 20px;
}
.jumbotron p (
color: #fff;
tamaño de fuente: 16px;
estilo de fuente: cursiva;
}

Aquí también acabó el texto del jumbotron, que exigía cambios.

Estamos cambiando las tarifas.

/* vista general de la tarifa */
.precio_artículo(
color de fondo: rgba(0,0,0,.4); /* línea cambiada */
radio del borde: 4px; /* línea cambiada */
posición: relativa;
mostrar: -webkit-flex;
pantalla: flexible;
-webkit-flex-direction: columna;
dirección flexible: columna;
-webkit-align-items: estirar;
alinear elementos: estirar;
alineación de texto: centro;
-webkit-flex: 0 1 330px;
flexionar: 0 1 330px;
relleno: 2em 3em;
margen: 1 em;
color: #f2f2f2; /* línea cambiada */
cursor: predeterminado;
desbordamiento: oculto;
sombra de cuadro: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* cambia el fondo al hacer clic */
.pricing_item: pasar el cursor (
color: #444;
fondo: #ddd; /* línea cambiada */
}

Ahora se ven así: un fondo transparente y esquinas redondeadas.

La plantilla está lista.

Ejemplo 3: con contador de cuenta atrás

Volvemos a cambiar el relleno del jumbotron y volvemos a colorear la plantilla para que coincida con el nuevo fondo, similar a la plantilla anterior. Conecte el guión del contador:

HTML





el tiempo no espera
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = nueva cuenta atrás((
tiempo: 86400 * 3, // 86400 segundos = 1 día
ancho: 300
, altura: 60
, rangoHola: "día"
, estilo: "voltear" //