-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (104 loc) · 6.85 KB
/
index.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>Infografía, infografistas y nuevas tecnologías</title>
</head>
<body>
<header class="container">
<div class="row py-4">
<div class="col-sm-11 col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h1 class="mb-3 mt-5 text-center display-5 ">Reemplaza este título</h1>
<h2 class="mb-5 text-center text-uppercase fs-5">Nombre Apellido & Nombre Apellido</h2>
<p class="lead">Reemplaza este párrafo con un texto introductorio, de una extensión máxima de cien palabras. En este y todos los reemplazos, respeta los colores del código fuente en tu editor. Los colores son indicaciones. Imagina que el editor de código fuente te está indicando: En el lenguaje que reconozco, esto es algo que no debes confundir con eso.</p>
</div>
</div>
</header>
<main class="container">
<div class="row g-4 pb-5">
<div class="col-sm-11 col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h2 class="text-center my-5">NOMBRE TRANSFORMER</h2>
<p>Reemplaza este párrafo con un texto que complemente al introductorio. Puedes extender este párrafo hasta las doscientas palabras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque ultricies elit eu pellentesque. Fusce a justo pellentesque, scelerisque tellus in, aliquet est. Curabitur nec porttitor nunc. Nullam elementum orci eget rhoncus congue. Proin quis laoreet tellus. Vivamus molestie ullamcorpernisi, sed aliquet magna molestie id. Vivamus semper ipsum eget.</p>
</div>
<!--primera imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--segunda imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--tercera imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--cuarta imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--no hay más imágenes-->
</div>
<div class="row g-4 pb-5">
<div class="col-sm-11 col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h2 class="text-center my-5">NOMBRE INFOGRAFISTA</h2>
<p">Reemplaza este párrafo con un texto que complemente al introductorio. Puedes extender este párrafo hasta las doscientas palabras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque ultricies elit eu pellentesque. Fusce a justo pellentesque, scelerisque tellus in, aliquet est. Curabitur nec porttitor nunc. Nullam elementum orci eget rhoncus congue. Proin quis laoreet tellus. Vivamus molestie ullamcorpernisi, sed aliquet magna molestie id. Vivamus semper ipsum eget.</p>
</div>
<!--primera imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--segunda imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--tercera imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--cuarta imagen-->
<div class="col-12 col-sm-6">
<figure class="shadow-sm">
<img loading="lazy" src="img/reemplaza-esta-imagen.png" class="w-100" alt="describe lo que se ve en la imagen" />
<figcaption class="p-3">Reemplaza el texto en este pie de foto.</figcaption>
</figure>
</div>
<!--no hay más imágenes-->
</div>
</main>
<footer class="bg-light">
<div class="container">
<div class="row py-3">
<div class="col-12">
<p class="d-flex justify-content-between small p-1 m-0">
<a href="https://github.com/profesorfaco/dno075-2023-1/" class="link-dark">Infografía Digital</a>
<a href="https://github.com/profesorfaco/dno075-2023-1/tree/main/clase-03" class="link-dark">Martes 21 de marzo, 2023</a>
</p>
</div>
</div>
</div>
</footer>
</body>
</html>