-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog-rwd.html
177 lines (159 loc) · 6.1 KB
/
blog-rwd.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Blog - Web mobile</title>
<link rel="stylesheet" type="text/css" href="css/blog-fluid.css"/>
<link rel="stylesheet" type="text/css" href="css/blog-tablet.css"
media="only screen and (min-width: 768px)" />
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li><a href="index.html">Back</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<header>
<h1>ñamñam</h1>
<div id="logo"></div>
<h2>
Duis accumsan blandit nisi at aliquet. Nam a
consectetur nisl, at pulvinar augue. Donec
sagittis arcuvulputate pretium lacinia.
</h2>
</header>
<section id="main">
<article>
<h2>Main article</h2>
<time>2013-10-10</time>
<figure>
<img src="i/responsive1_w300.jpg" alt="image 1"
srcset="i/responsive1_w600.jpg 600w,
i/responsive1_w1200.jpg 1200w"
sizes="(max-width: 576px) 90vw, 30vw"/>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
tortor purus, dictum eget tincidunt et, dictum eu mi. Fusce
a lobortis enim, non vulputate massa. Praesent sapien ipsum,
ultrices nec ultrices hendrerit, tristique ut eros. Quisque
dapibus magna ac ornare varius. Maecenas imperdiet massa
dapibus, gravida lorem eu, viverra eros.
</p>
<p>
Nullam ut euismod tortor. Vestibulum non porta tellus. Nam a
consectetur nisl, at pulvinar augue. Donec sagittis arcu
vulputate pretium lacinia. Sed molestie nibh nibh, vel ultrices
quam tincidunt ac.Fusce in venenatis arcu. Nunc varius pretium
auctor.
</p>
<p>
Cras venenatis lobortis urna, in accumsan arcu vehicula at.
Quisque a fringilla elit. Integer eget felis diam. Duis a
ccumsan blandit nisi at aliquet. Fusce ac mollis ligula.
Mauris pulvinar imperdiet ante tincidunt congue. Praesent
placerat eget orci eget molestie. Curabitur auctor orci a
congue ultrices.
</p>
<p>
Praesent rhoncus porttitor erat non sagittis. Sed mi purus,
tristique ac hendrerit et, sagittis vitae augue. Quisque
vehicula felis metus. Nam molestie neque et venenatis
molestie. Nulla risus massa, suscipit ut leo id, cursus
ultricies nibh. Sed vulputate felis ut mi hendrerit
ullamcorper. In nulla mi, ultricies a dictum nec, blandit
et risus.
</p>
</article>
</section>
<section id="older-entries">
<h2>Older entries</h2>
<article>
<h3><a href="#">Donec lobortis vestibulum augue</a></h3>
<time>2013-10-10</time>
<figure>
<img src="i/responsive2_w300.jpg" alt="image 1"
srcset="i/responsive2_w600.jpg 600w,
i/responsive2_w1200.jpg 1200w"
sizes="(max-width: 576px) 90vw, 10vw"/>
</figure>
<p>
Vestibulum ullamcorper feugiat nulla, nec mattis metus
pellentesque quis. Praesent luctus elementum quam et ornare.
</p>
</article>
<article>
<h3><a href="#">Duis pellentesque ipsum sit amet</a></h3>
<time>2013-10-10</time>
<figure>
<img src="i/responsive3_w300.jpg" alt="image 1"
srcset="i/responsive3_w600.jpg 600w,
i/responsive3_w1200.jpg 1200w"
sizes="(max-width: 576px) 90vw, 10vw"/>
</figure>
<p>
Duis pretium euismod ante, sit amet auctor purus varius sed.
In feugiat urna sodales tellus placerat, non tincidunt nunc
ullamcorper.
</p>
</article>
</section>
<aside>
<h2>Other contents</h2>
<div id="list">
<h3>Highlights</h3>
<ul>
<li>
<a href="#">Item 1</a>
<span class="desc">
Curabitur fringilla mattis risus a semper. Nam
ultrices risus vel massa convallis pharetra.
</span>
</li>
<li>
<a href="#">Item 2</a>
<span class="desc">
Nam libero leo,
tempor in elit vitae, pellentesque adipiscing mauris.
</span>
</li>
<li>
<a href="#">Item 3</a>
<span class="desc">
Risus vel massa convallis pharetra.
</span>
</li>
<li>
<a href="#">Item 4</a>
<span class="desc">
Curabitur fringilla mattis risus a semper. Nam
</span>
</li>
</ul>
</div>
<div id="about">
<h3>About</h3>
<p>
Nulla augue orci, iaculis ut lacinia a, sollicitudin id lacus.
Praesent nec ipsum justo.
</p>
</div>
<div id="social">
<h3>Follow us</h3>
<a href="#" class="icon twitter"> </a>
<a href="#" class="icon facebook"> </a>
</div>
</aside>
<footer>
IPM - 17/18 <br/>
Noelia Barreira Rodríguez<br/>
</footer>
</div>
</body>
</html>