F. index.html

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