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

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

Publicado a las 07:30h en Ejercicios CSS, Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web. por Francesc Ricart 0 Comentarios

Valora esta entrada

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:

Posicionamiento de cajas relativo, absoluto y fijo.
Centrado vertical y horizontal de una caja.

A nivel decorativo también haremos uso de

Centrado horizontal de un texto.
Personalización de tipografías.

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.

Enunciado ejercicio página web en construcción

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!

Entradas relacionadas:

Creación de un menú horizontal con sub menú desplegable mediante CSS
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.

LibrosWeb ahora es UniWebSidad
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!

Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?

Genera una escala cromática con css
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selecto...

¿Maquetar con float:left o con display:inline-block? Ejercicio css
Ejercicio css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. Incluye solución.

CSS3 variables var() para el manual de estilos de un proyecto web
¿Problemas para memorizar colores hexadecimales? Vemos un ejemplo de como usar las variables de css3 para definir los colores de un proyecto web.

Francesc Ricart

hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi