Skip to content

C
css-e002
Switch branch/tag
Find file
Normal viewHistoryPermalink
index.html 4.92 KB
Newer Older
ejercicios css02
6b12bdaa
 
roshka committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   	<link rel="stylesheet" type="text/css" href="style/estilos.css" title="style" />
	<title>Lorem ipsum</title>
</head>

<body>
<!-- Contenedor -->
<div id="contenedor">

	<!-- Cabecera -->
	<div id="cabecera">
		<div id="logo">
			<h1><span>LOGOTIPO</span></h1>
		</div>

		<div id="buscador">
			<form action="#" method="post">
				Buscar &nbsp; <input name="busqueda" type="text" />
			</form>
		</div>
		
		<div class="clear"></div>
	</div>
	<!-- /Cabecera -->
	
	<!-- Menu principal -->
	<div id="menu">
		<ul id="menu_principal">
			<li><a href="#">Lorem</a></li>
			<li><a href="#">Ipsum</a></li>
			<li><a href="#">Dolor</a></li>
			<li><a href="#">Sit</a></li>
			<li><a href="#">Amet</a></li>
		</ul>
		<div class="clear"></div>
	</div>
	

	<!-- Lateral -->
	<div id="lateral">
	
		<!-- Noticias -->
		<div id="noticias">
			<h3><a href="#">Noticias</a></h3>
			<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Lorem ipsum dolor sit amet</a></p>
			<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Consectetuer adipiscing elit</a></p>
			<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Donec molestie nunc eu sapien</a></p>
			<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Maecenas aliquam dolor eget metus</a></p>
			<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Fusce tristique lorem id metus</a></p>
				
			<h3><a href="#">Enlaces relacionados</a></h3>
			<ul>
				<li><a href="#">Proin placerat</a></li>
				<li><a href="#">Nulla in felis</a></li>
				<li><a href="#">Nam luctus</a></li>
			</ul>
		</div>
		<!-- /Noticias -->
	
		<!-- Publicidad -->
		<div id="publicidad">
			<h3><a href="#">Publicidad</a></h3>
			<p>Etiam fermentum, nisl tincidunt blandit interdum, massa velit posuere dolor, sed euismod sem odio at mi.</p>
			<p>Duis porta placerat arcu. Nullam felis pede, commodo vel, suscipit a, molestie vel, felis. Maecenas mattis est vel est.</p>
			<p><a href="#">Seguir leyendo...</a></p>
		</div>
		<!-- /Publicidad -->

	</div>
	<!-- /Lateral -->
	
<div id="contenido">
	
	<!-- Principal -->
	<div id="principal">
		
		<div class="articulo">
			<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
		
			<img src="imagenes/imagen.png" alt="Imagen gen�rica" />
			
			<p>Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus. Vivamus vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus fringilla dui, vel aliquet pede diam tempor tortor.</p>
			<p>Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui imperdiet laoreet. Quisque eget ipsum.</p>
			<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
			<p><a href="#">Seguir leyendo...</a></p>
		</div>
	
		<div class="articulo">
			<h2>Vivamus lobortis turpis ac ante fringilla faucibus</h2>
		
			<img src="imagenes/imagen.png" alt="Imagen gen�rica" />
			
			<p>Quisque eget ipsum. Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
			<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dictum hendrerit neque. Mauris id ligula non elit mattis semper. Fusce arcu ipsum, tempus eget, tincidunt at, imperdiet in, mi.</p>
			<p>Sed fermentum cursus dolor. Aenean a diam. Phasellus feugiat. Donec tempor dignissim sem.</p>
			<p><a href="#">Seguir leyendo...</a></p>
		</div>
		
	</div>
	<!-- /Principal -->
	
	<!-- Secundario -->
	<div id="secundario">
		<h2>Phasellus blandit</h2>
		<p>Praesent sodales imperdiet augue. Mauris lorem felis, semper eu, tincidunt eu, sollicitudin eget, sem. Nulla facilisi. Morbi ut enim ut enim ultricies dapibus.</p>
		<p><a href="#">Seguir leyendo...</a></p>
	
		<h2>Nullam vel turpis</h2>
		<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
		<p><a href="#">Seguir leyendo...</a></p>
	</div>
	<!-- /Secundario -->

	</div>
	<!-- /Contenido -->
	
    <div class="clear"></div>
	
    <!-- Pie -->
	<div id="pie">
		<span class="enlaces">
			<a href="#">Nulla</a> |
			<a href="#">Pharetra</a> |
			<a href="#">Luctus</a> |
			<a href="#">Ipsum</a> |
			<a href="#">Proin</a> |
			<a href="#">Placerat</a>
		</span>
		
		<span class="copyright">
			&copy; Copyright Lorem ipsum
		</span>
		<div class="clear"></div>
	</div>
	<!-- /Pie -->

</div>
<!-- /Contenedor -->

</body>
</html>