Creación de una página web en mantenimiento con html y css

4
(2)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

ejercicio html y css página web en construcción

En este ejercicio vamos a crear desde cero una página web en mantenimiento exclusivamente con css y html.

Los conceptos necesarios para poderlo resolver son:

A nivel decorativo también haremos uso de

Entremos en materia.

Enunciado

Crea una página de aterrizaje como la de la imagen siguiendo las siguientes especificaciones:

  • Un contenedor de color blanco centrado verticalmente y horizontalmente de dimensiones reales 600px de ancho y 400 de alto con bordes redondeados de 10px. Elige el tipo de posicionamiento más adecuado.
  • Un título principal centrado de tamaño 3em.
  • El texto Lo sentimos pero no hemos encontrado ninguna forma más original de decirte que estamos trabajando en ello.
  • Un título secundario en italica de tamaño 2em y con el texto Web disponible en:.
  • Un reloj (la idea es en un futuro convertirlo en una cuenta atrás con javascript) en la posición 00:00:00
  • Todo el texto usa la tipografía noto sans que encontrarás en google fonts.
  • El body tiene el color #fafafa.
  • Los párrafos tienen un interlineado de 1.5em y tamaño de fuente 16px.

Creación de una página web en mantenimiento con html y css 1

Solución del ejercicio

Como observaciones considerar que:

  • El posicionamiento que yo he elegido para la resolución del ejercicio es position:fixed;
  • Se ha usado la propiedad box-sizing:border-box;para facilitar el centrado horizontal y vertical.
  • Para importar la tipografía desde google fonts se ha optado por la instrucción@import url();
<!DOCTYPE html>
<html>
<head>
	<title>Página web en mantenimiento</title>
	<meta charset="utf-8"/>
	<meta name="description" content="Ejemplo práctico de aplicación del posicionamiento fijo"/>
	<meta name="author" content="francesc ricart"/>
	<style>
		/*TIPOGRAFÍAS*/
		@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
		/*INICIALIZACIÓN DE ESTILOS*/
		*{
			margin:0;
			padding:0;
			box-sizing:border-box;
		}

		body{background-color:#f6f6f6;}

		/*PERSONALIZACIÓN DE P.MANTENIMIENTO*/
		.mantenimiento{
			width:600px;
			height:400px;
			padding:32px;
			border:1px solid #000;
			border-radius:10px;
			margin-top:-200px;
			margin-left:-300px;
			background-color:#fff;
			position:fixed;
			top:50%;
			left:50%;
		}
		.mantenimiento h1, .mantenimiento h2, .mantenimiento p{
			font-family:"noto sans", sans-serif;
		}

		.mantenimiento h1{
			font-size:3em;
			text-align:center;
			padding:16px;
		}
		.mantenimiento h2{
			font-size:2em;
			font-style:italic;
		}
		.mantenimiento p{
			margin:16px 0;
			line-height:1.5em;
		}

	</style>
</head>
<body>
	<div class="mantenimiento">
		<h1>Página web en construcción</h1>
		<p>Lo sentimos, no hemos encontrado un mensaje más original para decirte que estamos trabajando en ello.</p>
		<h2>Web disponible en:</h2>
		<p class="casio" id="reloj">00:00:00</p>
	</div>
</body>
</html>

¡Hola!

Querido lector,

Con este ejercicio se han practicado una gran cantidad de conceptos: posicionamiento de cajas, diferencia entre centrado de texto y de cajas, personalización de tipografía,…

Espero que te sea de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *