Plantilla HTML para Web 2.0
HTML
Actualizado el 22 de Febrero del 2020 por Scriptshow (141 códigos) (Publicado el 19 de Agosto del 2017)
9.821 visualizaciones desde el 19 de Agosto del 2017
Una Web 2.0 basada en HTML y CSS compatible.
Un efecto Parallax y Reveal para presentar todos los contenidos desplazando la barra de Scroll.
La estructura es ampliable, adaptable, compatible con cualquier pantalla y/o dispositivo.
La respuesta del Sitio es ágil y rápida con imágenes optimizadas.
Un Saludo
Un efecto Parallax y Reveal para presentar todos los contenidos desplazando la barra de Scroll.
La estructura es ampliable, adaptable, compatible con cualquier pantalla y/o dispositivo.
La respuesta del Sitio es ágil y rápida con imágenes optimizadas.
Un Saludo
Comentarios sobre la versión: 2.0 (13)
He tratado de utilizarlo en una web que me estoy creando, pero no veo la forma.
Crees que podria acoplarlo a esta web que me estoy haciendo...??
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
<link rel="icon" href="imagenes/icon.ico" />
<head>
<!--SI AÑADO LA SIGUIENTE API (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css) , FUNCIONA EL MENU DE NAVEGACION PERO ESTROPEA EL RESTO DE PAGINA-->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>pruebas</title>
</head>
<body>
<header id="header">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-fire"></span>
Logo
</a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Principal</a>
</li>
<li>
<a href="#">Sobre mi</a>
</li>
<li>
<a href="#">Estudios</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Recursos<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Prodcutos</a></li>
<li><a href="#">Juegos</a></li>
<li><a href="#">Diseño</a></li>
</ul>
</li>
</ul>
<!-- Search -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div id="container">
<main id="center" class="column">
<article>
<h1>BIENVENIDOS A MI SITIO WEB...</h1>
<p>Hola, me llamo Miguel y os voy a presentar mi sitio web,
En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos </p>
<P></P>
<h2>CURRICULUM</h2>
<p>Aquí encontrareis los <a href="curriculum-1.html">trabajos </a>por los que me he movido, siendo el transporte por carretera lo que mas he desempeñado estos
últimos años. </p>
<h2></h2>
<h2>ESPEDIENTE ACADEMICO</h2>
<p>Mis estudios no son muchos, deje pronto la escuela para trabajar. Pero en los últimos años he retomado el tema académico,
formandome en el tema de la programación y aunque llevo poco tiempo ya he creado alguna <a href="proyectos-4.html">humilde aplicacion.</a></p>
<h2>EXPERIENCIA</h2>
<p>Como ya he dicho, mi carrera de desarrollador no a echo mas que empezar, y son pocos y pequeños los <a href="proyectos-4.html">proyectos </a>que he
</p>
<h2></h2>
<h2></h2>
<a href="pdf/html.pdf">Haz clic aquí para el PDF</a>
<object data="pdf/html.pdf"></object>
<iframe src="pdf/html.pdf"></iframe>
</article>
</main>
<nav id="left" class="column">
<h3>DATOS PERSONALES</h3>
<ul>
<li><a target="_blank" href="curriculum-1.html">Curriculum</a></li><br>
<li><a target="_blank" href="estudios-2.html">Estudios</a></li><br>
<li><a target="_blank" href="experiencia-3.html">Experiencia</a></li><br>
<li><a target="_blank" href="proyectos-4.html">Proyectos</a></li><br>
<li><a target="_blank" href="futuro-5.html">Futuro</a></li>
</ul>
<br>
<br>
<br>
<h3>Redes sociales</h3>
<ul>
<li><a href="https://www.facebook.com/profile.php?id=100009248037432">Facebook</a></li>
<li><a href="https://twitter.com/laparramiguel">Twitter</a></li>
<!--<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>-->
</ul>
</nav>
<div id="right" class="column">
<h3>FOTO DE PERFIL</h3>
</div>
</div>
<!-- <div id="footer-wrapper">
<footer id="footer"><p>Footer...</p></footer>
</div>-->
</body>
<!-- Latest compiled and minified JavaScript -->
</html>
He puesto el header, pero no consigo que se quede arriba al hacer scrool.
Se te ocurre alguna idea...??
Gracias por compartir tus logros
intenta colocar el HEADER en su posición en la estructura HTML. Dale una clase con posición FIXED.
Prueba todo sin librerías externas, que afectan a toda la estructura.
Espero sea útil.
Gracias
descomprime los archivos en una carpeta y accede ejecutando el html. Todo irá bien...
Sólo es preciso un navegador web y/o dispositivo compatible.
Espero sea útil.