1<!DOCTYPE html>
2<html>
3<head>
4 <title>Página web en mantenimiento</title>
5 <meta charset="utf-8"/>
6 <meta name="description" content="Ejemplo práctico de aplicación del posicionamiento fijo"/>
7 <meta name="author" content="francesc ricart"/>
8 <style>
9 /*TIPOGRAFÍAS*/
10 @import url('https://fonts.googleapis.com/css?family=Noto+Sans');
11 /*INICIALIZACIÓN DE ESTILOS*/
12 *{
13 margin:0;
14 padding:0;
15 box-sizing:border-box;
16 }
17
18 body{background-color:#f6f6f6;}
19
20 /*PERSONALIZACIÓN DE P.MANTENIMIENTO*/
21 .mantenimiento{
22 width:600px;
23 height:400px;
24 padding:32px;
25 border:1px solid #000;
26 border-radius:10px;
27 margin-top:-200px;
28 margin-left:-300px;
29 background-color:#fff;
30 position:fixed;
31 top:50%;
32 left:50%;
33 }
34 .mantenimiento h1, .mantenimiento h2, .mantenimiento p{
35 font-family:"noto sans", sans-serif;
36 }
37
38 .mantenimiento h1{
39 font-size:3em;
40 text-align:center;
41 padding:16px;
42 }
43 .mantenimiento h2{
44 font-size:2em;
45 font-style:italic;
46 }
47 .mantenimiento p{
48 margin:16px 0;
49 line-height:1.5em;
50 }
51
52 </style>
53</head>
54<body>
55 <div class="mantenimiento">
56 <h1>Página web en construcción</h1>
57 <p>Lo sentimos, no hemos encontrado un mensaje más original para decirte que estamos trabajando en ello.</p>
58 <h2>Web disponible en:</h2>
59 <p class="casio" id="reloj">00:00:00</p>
60 </div>
61</body>
62</html>