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>
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.