06 Mar Creación de una página web en mantenimiento con html y css
Posted at 07:30h in Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS 0 Comments
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.
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:
Como decorar un texto seleccionado con el ratón
En alguna páginas web el texto se decora cuando es seleccionado mediante el ratón. Aquí encontrarás toda la información de esta pseudo clase.
En alguna páginas web el texto se decora cuando es seleccionado mediante el ratón. Aquí encontrarás toda la información de esta pseudo clase.
Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales
Ejercicio para practicar los conceptos de colores web safe colors, rgb, rgba y colores hexadecimales en css. Incluye solución.
Ejercicio para practicar los conceptos de colores web safe colors, rgb, rgba y colores hexadecimales en css. Incluye solución.
Mi chuleta de instrucciones css útiles para estilizar table de html
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
Ejemplo de menú vertical con submenú horizontal mediante CSS
Código html y css de como crear un menú vertical con un submenú horizontal.
Código html y css de como crear un menú vertical con un submenú horizontal.
Ejercicio nivel básico sobre selectores CSS
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
La propiedad z-index
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
No Comments