- FancyBox: http://fancybox.net/
- Recursos del tutorial: http://bextlan.com/recursos/tutoriales/html5/video10-html5.zip
- Colores: http://www.w3schools.com/tags/ref_colorpicker.asp
Mostrando entradas con la etiqueta jQuery. Mostrar todas las entradas
Mostrando entradas con la etiqueta jQuery. Mostrar todas las entradas
sábado, 22 de febrero de 2014
Cap 10 Sitio Web en HTML5 Responsive Web Design y jQuery Fancybox
Sitio Web en HTML5 Responsive Web Design y jQuery Fancybox
Recursos:
domingo, 2 de febrero de 2014
Curso Práctico de HTML5 - Cap 06 Sitio Web en HTML5 galeria jQuery en el Home
Sitio Web en HTML5 galeria jQuery en el Home
FlexSlider: http://www.woothemes.com/flexslider/
jQuery: http://jquery.com/
Recursos del videotutorial:
http://bextlan.com/recursos/tutoriales/html5/video06-html5.zip
index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Sitio con Responsive Web Desing en HTML5, CSS3 y jQuery</title>
<meta name="description" content="Bienvenido a mi portafolio web hecho en HTML5, CSS3 y jQuery con Responsive Web Design">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="author" type="text/plain" href="humans.txt" />
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/estilos.css">
Añadimos jQuery (versión 1.7.1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Añadimos FlexSlider
<script src="js/jquery.flexslider.js"></script>
Hacemos que se sejecute FlexSlider cuando se carga la página:
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>
<a href="index.html">
<img class = "fade" src="img/bextlan-logo.png" alt="bextlan.com | Lugar de bits, vectores y pixeles">
</a>
</h1>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acerca.html">Acerca de</a></li>
<li><a href="servicos.html">Servicios</a></li>
<li><a href="trabajos.html">Trabajos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</header>
<section id="contenido">
<section id="principal">
<article id="galeria-inicio">
Incorporamos el slide de imágenes
<div class="flexslider">
<ul class="slides">
<li>
<a href="http://bextlan.com"><img src="img/slide-0.png" alt=""></a>
<p class="flex-caption">bextlan.com | lugar de bits, vectores y pixeles</p>
</li>
<li>
<img src="img/slide-1.png" alt="">
<p class="flex-caption">bextlan.com | lugar de bits, vectores y pixeles</p>
</li>
<li>
<img src="img/slide-2.png" alt="">
</li>
<li>
<a href="http://bextlan.com"><img src="img/slide-3.png" alt=""></a>
<p class="flex-caption">Curso PHP</p>
</li>
</ul>
</div>
</article>
</section>
<aside>
Widgets Sociales
</aside>
</section>
<footer>
Aprendindo HTML5, CSS3, jQuery y Responsive Web Desing con <a rel ="author" href="http://twitter.com/@bextlan">@bextaln</a>
</footer>
</body>
</html>
jQuery: http://jquery.com/
Recursos del videotutorial:
http://bextlan.com/recursos/tutoriales/html5/video06-html5.zip
index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Sitio con Responsive Web Desing en HTML5, CSS3 y jQuery</title>
<meta name="description" content="Bienvenido a mi portafolio web hecho en HTML5, CSS3 y jQuery con Responsive Web Design">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="author" type="text/plain" href="humans.txt" />
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/estilos.css">
Añadimos jQuery (versión 1.7.1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Añadimos FlexSlider
<script src="js/jquery.flexslider.js"></script>
Hacemos que se sejecute FlexSlider cuando se carga la página:
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>
<a href="index.html">
<img class = "fade" src="img/bextlan-logo.png" alt="bextlan.com | Lugar de bits, vectores y pixeles">
</a>
</h1>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acerca.html">Acerca de</a></li>
<li><a href="servicos.html">Servicios</a></li>
<li><a href="trabajos.html">Trabajos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</header>
<section id="contenido">
<section id="principal">
<article id="galeria-inicio">
Incorporamos el slide de imágenes
<div class="flexslider">
<ul class="slides">
<li>
<a href="http://bextlan.com"><img src="img/slide-0.png" alt=""></a>
<p class="flex-caption">bextlan.com | lugar de bits, vectores y pixeles</p>
</li>
<li>
<img src="img/slide-1.png" alt="">
<p class="flex-caption">bextlan.com | lugar de bits, vectores y pixeles</p>
</li>
<li>
<img src="img/slide-2.png" alt="">
</li>
<li>
<a href="http://bextlan.com"><img src="img/slide-3.png" alt=""></a>
<p class="flex-caption">Curso PHP</p>
</li>
</ul>
</div>
</article>
</section>
<aside>
Widgets Sociales
</aside>
</section>
<footer>
Aprendindo HTML5, CSS3, jQuery y Responsive Web Desing con <a rel ="author" href="http://twitter.com/@bextlan">@bextaln</a>
</footer>
</body>
</html>
Suscribirse a:
Entradas (Atom)