Un blog muy interesante y totalmente recomendable para el diseño de páginas web es:
Es un blog muy práctico y con artículos muy interesantes, como el que os propongo en este post.
código:
<div class="image1">
<h1>Titulo de la pagina</h1>
<h2>Texto entre secciones</h2>
</div>
<section class="content">
<p>Texto de la pagina. Parte 1</p>
</section>
<div class="image2">
<h2>Texto entre secciones</h2>
</div>
<section class="content">
<p>Texto de la pagina. Parte 2</p>
</section>
<div class="image3">
<h2><a href="#">VOLVER ATRAS</a></div></h2>
</div>
El Css:
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
|
body {
margin:0;
padding:0;
border:0;
}
.image1 {
position:relative;
background: url('universo.jpg') no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
.image2 {
position:relative;
background: url('universo2.jpg') no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
.image3 {
position:relative;
background: url('universo3.jpg') no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
h1 {
color: #fff;
font-size: 80px;
text-align:center;
font-weight: bold;
margin: 0 auto;
width: 800px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -20%;
margin-left: -400px;
opacity:0.8;
}
h2{
color: #fff;
font-size: 55px;
text-align:center;
margin: 0 auto;
width: 800px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
opacity:0.8;
}
.content {
width: 100%;
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
background: #FFF;
z-index:2;
}
|
Agustín Baraza propone:
situar las imágenes usando el valor
cover de la propiedad background-size y darles unas medidas mínimas (min-height).
Vuelvo de nuevo a estar activa, y en esta ocasión quiero hacerlo con una serie que he descubierto recientemente y que aunque al principio me suscitaba alguna duda, me ha terminando enganchando muchísimo. No sólo el argumento es muy interesante, si te gustan los ordenadores, es más que eso. La serie está ambientada en el Texas de los años 80 y plantea el auge de los ordenadores, la competeción que existe entre empresas informáticas contra IBM y cómo mejorar el Pc, y las relaciones personales y problemas de los protagonistas. (Bueno, no os cuento más: http://www.xataka.com/otros/halt-and-catch-fire-nada-tan-apasionante-como-la-historia-de-los-pioneros-de-la-informatica).
