15. two-line.html - Listas con elementos two-line

Salida

Ábrelo en otra pestaña.

1<!DOCTYPE html>
2<html lang="es" class="light dark">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Listas two-line - PWA con MD</title>
8
9 <script src="js/registraServiceWorker.js"></script>
10
11 <meta name="viewport" content="width=device-width">
12 <meta name="theme-color" content="#fffbfe">
13 <link rel="icon" sizes="32x32" href="favicon.ico">
14 <link rel="manifest" href="site.webmanifest">
15 <script src="ungap/custom-elements.js"></script>
16
17 <script type="module" src="js/configura.js"></script>
18 <link rel="stylesheet" href="css/estilos.css">
19 <link rel="stylesheet" href="css/transicion_completa.css">
20
21</head>
22
23<body>
24
25 <md-top-app-bar headline="headline">
26
27 <h1>two-line</h1>
28
29 <button is="md-menu-button" slot="navigation"></button>
30
31 </md-top-app-bar>
32
33 <h1 id="headline">Listas two-line</h1>
34
35 <main>
36
37 <ul class="md-list">
38
39 <li class="md-two-line">
40 <span class="headline">
41 Ciudad de México 2
42 </span>
43 <span class="supporting">
44 Lorem ipsum dolor sit amet consectetur adipisicing elit.
45 Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
46 illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
47 alias!
48 </span>
49 </li>
50
51 <li class="md-two-line icon">
52 <span class="material-symbols-outlined">account_balance</span>
53 <span class="headline">
54 Atenas 2
55 </span>
56 <span class="supporting">
57 Lorem ipsum dolor sit amet consectetur adipisicing elit.
58 Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
59 illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
60 alias!
61 </span>
62 </li>
63
64 <li class="md-two-line avatar">
65 <img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">
66 <span class="headline">
67 Ana 2
68 </span>
69 <span class="supporting">
70 Lorem ipsum dolor sit amet consectetur adipisicing elit.
71 Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
72 illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
73 alias!
74 </span>
75 </li>
76
77 <li class="md-two-line image">
78 <img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
79 <span class="headline">
80 Neza 2
81 </span>
82 <span class="supporting">
83 Lorem ipsum dolor sit amet consectetur adipisicing elit.
84 Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
85 illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
86 alias!
87 </span>
88 </li>
89
90 <li class="md-two-line video">
91 <img alt="Ciudad de San Francisco"
92 src="img/pexels-craig-dennis-3701822.jpg">
93 <span class="headline">
94 San Francisco 2
95 </span>
96 <span class="supporting">
97 Lorem ipsum dolor sit amet consectetur adipisicing elit.
98 Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
99 illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
100 alias!
101 </span>
102 </li>
103
104 <li>
105 <a class="md-two-line image" target="_blank" rel="noreferrer"
106 href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">
107 <img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
108 <span class="headline">
109 Neza Link 2
110 </span>
111 <span class="supporting">
112 Lorem ipsum dolor sit amet consectetur adipisicing elit.
113 Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
114 illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
115 alias!
116 </span>
117 </a>
118 </li>
119
120 </ul>
121
122 <footer>
123 <ul>
124 <li>
125 <p>
126 <small>
127 <a target="_blank" rel="noreferrer"
128 href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">
129 La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.
130 Haz clic en este hipervínculo para más información.
131 </a>
132 </small>
133 </p>
134 </li>
135 <li>
136 <p>
137 <small>
138 <a target="_blank" rel=”noreferrer”
139 href="https://www.pinterest.com.mx/ludresi/">
140 La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio
141 Pinterest. Haz clic en este hipervínculo para más información.
142 </a>
143 </small>
144 </p>
145 </li>
146 <li>
147 <p>
148 <small>
149 <a target="_blank" rel=”noreferrer”
150 href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">
151 La foto del puente de San Francisco es de Craig Dennis, publicada en el
152 sitio Pexels. Haz clic en este hipervínculo para más información.
153 </a>
154 </small>
155 </p>
156 </li>
157 </ul>
158 </footer>
159
160 </main>
161
162 <nav-drw></nav-drw>
163
164</body>
165
166</html>

Solo para los más rudos

skip_previous skip_next