├── sectiongit
├── JS
    └── Ejemplo1
    │   ├── img
    │       └── main.jpg
    │   ├── main.js
    │   ├── style.css
    │   └── index.html
├── CSS
    ├── Ejemplo13
    │   ├── img
    │   │   └── main.jpg
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo19
    │   ├── img
    │   │   ├── .DS_Store
    │   │   ├── Summer_39.jpg
    │   │   └── background.jpg
    │   ├── index.html
    │   └── style.css
    ├── Ejemplo20-
    │   ├── img
    │   │   ├── .DS_Store
    │   │   ├── Summer_39.jpg
    │   │   └── background.jpg
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo17
    │   ├── img
    │   │   └── background.jpg
    │   ├── index.html
    │   └── style.css
    ├── Ejemplo7
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo1
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo4
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo5
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo16
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo15
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo14
    │   ├── index.html
    │   └── style.css
    ├── Ejemplo22
    │   ├── index.html
    │   └── style.css
    ├── Ejemplo18
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo3
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo2
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo6
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo11
    │   ├── index.html
    │   └── style.css
    ├── Ejemplo9
    │   ├── style.css
    │   └── index.html
    ├── Ejemplo21
    │   ├── style.css
    │   └── index.html
    └── Ejemplo20
    │   ├── style.css
    │   └── index.html
├── .vscode
    └── settings.json
└── HTML
    ├── Ejemplo8
        └── index.html
    ├── Ejemplo7
        ├── pg1.html
        ├── pg2.html
        ├── pg3.html
        └── index.html
    ├── Ejemplo1
        ├── index.html
        └── Person.xml
    ├── Ejemplo16
        └── index.html
    ├── Ejemplo17
        └── index.html
    ├── Ejemplo2
        └── index.html
    ├── Ejercicio1
        └── index.html
    ├── Ejemplo4
        └── index.html
    ├── Ejemplo18
        └── index.html
    ├── Ejemplo5
        └── index.html
    ├── Ejemplo3
        └── index.html
    └── Ejemplo6
        └── index.html


/sectiongit:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/JS/Ejemplo1/img/main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/JS/Ejemplo1/img/main.jpg


--------------------------------------------------------------------------------
/CSS/Ejemplo13/img/main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo13/img/main.jpg


--------------------------------------------------------------------------------
/CSS/Ejemplo19/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo19/img/.DS_Store


--------------------------------------------------------------------------------
/CSS/Ejemplo20-/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo20-/img/.DS_Store


--------------------------------------------------------------------------------
/CSS/Ejemplo17/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo17/img/background.jpg


--------------------------------------------------------------------------------
/CSS/Ejemplo19/img/Summer_39.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo19/img/Summer_39.jpg


--------------------------------------------------------------------------------
/CSS/Ejemplo19/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo19/img/background.jpg


--------------------------------------------------------------------------------
/CSS/Ejemplo20-/img/Summer_39.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo20-/img/Summer_39.jpg


--------------------------------------------------------------------------------
/CSS/Ejemplo20-/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DouglasHdezT/CursoCEIIWebEjemplos2020/HEAD/CSS/Ejemplo20-/img/background.jpg


--------------------------------------------------------------------------------
/CSS/Ejemplo7/style.css:
--------------------------------------------------------------------------------
1 | #adyacentes> h1 + p{
2 | 	padding: 16px;
3 | 	border: 1px solid black;
4 | }
5 | 
6 | #general > h1 ~ p{
7 | 	padding: 16px;
8 | 	border: 1px solid black;
9 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo1/style.css:
--------------------------------------------------------------------------------
 1 | h1{
 2 | 	padding: 16px;
 3 | 
 4 | 	background: crimson;
 5 | 
 6 | 	color: white;
 7 | 	font-size: 36px;
 8 | 	letter-spacing: -2px;
 9 | 
10 | 	border-radius: 15px;
11 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo4/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 | 	margin: 0;
 3 | }
 4 | 
 5 | div{
 6 | 	background: firebrick;
 7 | 	width: 30vw;
 8 | 	height: 100vh;
 9 | }
10 | 
11 | #first{
12 | 	background: deeppink;
13 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo5/style.css:
--------------------------------------------------------------------------------
 1 | h1, h2 {
 2 | 	font-family: monospace;
 3 | 	text-decoration: underline;
 4 | }
 5 | 
 6 | h3, h4, h5, h6 {
 7 | 	color: indigo;
 8 | 	padding-left: 4px;
 9 | 	border-left: 2px solid indigo;
10 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo16/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   display: flex;
 3 |   flex-wrap: wrap;
 4 |   width: 70%;
 5 |   margin: 0 auto;
 6 |   justify-content: center;
 7 | }
 8 | 
 9 | .container > img {
10 |   margin: 2em 10px;
11 | }
12 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"editor.fontSize": 28,
3 | 	"editor.fontLigatures": false,
4 | 	"editor.fontWeight": "500",
5 | 	"workbench.colorTheme": "Community Material Theme",
6 | 	"window.zoomLevel": 1,
7 | 	"liveServer.settings.port": 5501,
8 | }


--------------------------------------------------------------------------------
/HTML/Ejemplo8/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Enlaces externos</title>
 7 | </head>
 8 | <body>
 9 | 	
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo7/pg1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Pagina 1</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		Pagina 1
11 | 	</h1>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo7/pg2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Pagina 2</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		Pagina 2
11 | 	</h1>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo7/pg3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Pagina 3</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		Pagina 3
11 | 	</h1>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title> Unidades flexibles </title>
 8 | </head>
 9 | <body>
10 | 	<div id="first"></div>
11 | 	<div></div>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 	<head>
 4 | 		<!-- Metadatos -->
 5 | 		<meta charset="UTF-8">
 6 | 		<meta 
 7 | 			name="viewport" 
 8 | 			content="width=device-width, initial-scale=1.0">
 9 | 		<title> Primera página web </title>
10 | 	</head>
11 | 	<body>
12 | 		<!-- Cuerpo de la página web -->
13 | 	</body>
14 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo1/Person.xml:
--------------------------------------------------------------------------------
 1 | <Person name="Douglas" lastname="Hernandez">
 2 | 	<Body>
 3 | 		<Head/>
 4 | 		<Torso/>
 5 | 		<Arm position="left"/>
 6 | 		<Arm position="right"/>
 7 | 		<Leg position="left"/>
 8 | 		<Leg position="right"/>
 9 | 	</Body>
10 | 	<Hobbies>
11 | 		...
12 | 	</Hobbies>
13 | </Person>
14 | 
15 | <etiqueta attr="value">
16 | 	Contenido
17 | </etiqueta>


--------------------------------------------------------------------------------
/CSS/Ejemplo15/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 | }
 4 | 
 5 | .container {
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   width: 100%;
 9 |   height: 100vh;
10 |   justify-content: center;
11 |   align-items: center;
12 | }
13 | .container > h1 {
14 |   font-weight: 200;
15 |   font-size: 4em;
16 | }
17 | .container > h2 {
18 |   font-weight: 100;
19 |   font-size: 2em;
20 | }
21 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo20-/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 | }
 4 | 
 5 | .image-container {
 6 |   width: 100%;
 7 |   height: 100vh;
 8 |   
 9 | }
10 | 
11 | .image-container > img {
12 |   width: 100%;
13 |   height: 100%;
14 | }
15 | 
16 | .img-2 {
17 |   display: none;
18 | }
19 | 
20 | @media (max-width: 1100px) {
21 |   .img-1 {
22 |     display: none;
23 |   }
24 |   .img-2 {
25 |     display: block;
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/HTML/Ejemplo16/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Formularios</title>
 7 | </head>
 8 | <body>
 9 | 	<form action="index.html" method="GET">
10 | 		<label for="username"> Username </label>
11 | 		<input type="text" name="username">
12 | 
13 | 		<input type="submit">
14 | 	</form>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Elementos individuales</title>
 8 | </head>
 9 | <body>
10 | 	<h1> Título 1 </h1>
11 | 	<h2> Título 2 </h2>
12 | 	<h3> Título 3 </h3>
13 | 	<h4> Título 4 </h4>
14 | 	<h5> Título 5 </h5>
15 | 	<h6> Título 6 </h6>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo15/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="stylesheet" href="style.css" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <h1>Mi biografia</h1>
12 |       <h2>Una historia triste de un hombre sin suerte</h2>
13 |     </div>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Flexbox</title>
 8 | </head>
 9 | <body>
10 | 	<main>
11 | 		<div> 1 </div>
12 | 		<div class="texto"> 2 </div>
13 | 		<div> 3 </div>
14 | 		<div> 4 </div>
15 | 		<div> 5 </div>
16 | 		<div class="texto"> 6 </div>
17 | 		
18 | 	</main>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Enlaces internos</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		Paginas asociadas
11 | 	</h1>
12 | 
13 | 	<ul>
14 | 		<li><a href="pg1.html">Pagina 1</a></li>
15 | 		<li><a href="pg2.html">Pagina 2</a></li>
16 | 		<li><a target="_blank" href="pg3.html">Pagina 3</a></li>
17 | 	</ul>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo20-/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1.0"
 8 |     />
 9 |     <link rel="stylesheet" href="style.css" />
10 |     <title>Document</title>
11 |   </head>
12 |   <body>
13 |     <div class="image-container">
14 |       <img class="img-1" src="./img/background.jpg" />
15 |       <img class="img-2" src="./img/Summer_39.jpg" />
16 |     </div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo22/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Grid template</title>
 8 | </head>
 9 | <body>
10 | 	<header>
11 | 		<span> Header </span>
12 | 	</header>
13 | 	<aside>
14 | 		<span> Aside </span>
15 | 	</aside>
16 | 	<main>
17 | 		<span> Main </span>
18 | 	</main>
19 | 	<footer>
20 | 		<span> Footer </span>
21 | 	</footer>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo19/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1.0"
 8 |     />
 9 |     <link rel="stylesheet" href="style.css" />
10 |     <title>Document</title>
11 |   </head>
12 |   <body>
13 |     <div class="cover parallax"></div>
14 |     <section>
15 |       <h1>Aqui iria una buena pagina pero nel</h1>
16 |     </section>
17 |     <div class="cover-2 parallax"></div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo18/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 100%;
 3 |   height: 100vh;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 |   flex-wrap: wrap;
 8 |   align-content: center;
 9 | }
10 | 
11 | h1 {
12 |   font-size: 3em;
13 |   font-weight: 200;
14 | }
15 | 
16 | .box {
17 |   width: 400px;
18 |   height: 200px;
19 |   margin: 0.3em;
20 |   background-color: rgba(0, 128, 128, 0.411);
21 |   display: flex;
22 |   justify-content: center;
23 |   align-items: center;
24 | }
25 | 
26 | .box:nth-child(2n) {
27 |   background-color: deeppink;
28 | }
29 | 


--------------------------------------------------------------------------------
/JS/Ejemplo1/main.js:
--------------------------------------------------------------------------------
 1 | const switchButton = document.querySelector("button#switch-theme");
 2 | let stateLight = true;
 3 | 
 4 | switchButton.addEventListener("click", (event) => { 
 5 | 	const body = document.querySelector("body");
 6 | 	body.classList.remove("dark");
 7 | 	body.classList.remove("light");
 8 | 	
 9 | 	if (stateLight) { 
10 | 		body.classList.add("dark")
11 | 	} else {
12 | 		body.classList.add("light")
13 | 	}
14 | 
15 | 	stateLight = !stateLight;
16 | 
17 | 	const nav = document.querySelector("section");
18 | 	console.log(nav.offsetTop);
19 | 	window.scrollTo({top: nav.offsetTop - 175, behavior: "smooth"});
20 | }); 


--------------------------------------------------------------------------------
/CSS/Ejemplo19/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 | }
 4 | .cover,
 5 | .cover-2,
 6 | section {
 7 |   width: 100%;
 8 |   height: 100vh;
 9 | }
10 | 
11 | .parallax {
12 |   background-attachment: fixed;
13 |   background-position: center;
14 |   background-repeat: no-repeat;
15 |   background-size: cover;
16 | }
17 | 
18 | .cover {
19 |   background-image: url("./img/Summer_39.jpg");
20 | }
21 | 
22 | .cover-2 {
23 |   background-image: url("./img/background.jpg");
24 | }
25 | 
26 | h1 {
27 |   font-weight: 200;
28 |   font-size: 4em;
29 | }
30 | 
31 | section {
32 |   display: flex;
33 |   justify-content: center;
34 |   align-items: center;
35 | }
36 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo3/style.css:
--------------------------------------------------------------------------------
 1 | html{
 2 | 	font-size: 36px; /* Root font size */
 3 | }
 4 | 
 5 | h1{
 6 | 	font-size: 1rem; /* 1rem = 36px */
 7 | }
 8 | 
 9 | h2{
10 | 	font-size: 1em; /* 1em = 36px */
11 | }
12 | 
13 | section{
14 | 	font-size: 20px;
15 | }
16 | 
17 | section h1 {
18 | 	font-size: 1em; /* 1em = 20px */
19 | }
20 | 
21 | section h2 {
22 | 	font-size: 1rem; /*1rem = 36px*/
23 | }
24 | 
25 | p{
26 | 	width: 20ch;
27 | 	background: crimson;
28 | 	color: white;
29 | }
30 | 
31 | article{
32 | 	height: 200px;
33 | 	margin: 8px 0;
34 | 
35 | 	background: deeppink;
36 | }
37 | 
38 | .cont-20{
39 | 	width: 20%;
40 | }
41 | 
42 | .cont-50{
43 | 	width: 50%;
44 | }
45 | 
46 | .cont-100{
47 | 	width: 100%;
48 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo14/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 | 	margin: 0;
 3 | }
 4 | 
 5 | main{
 6 | 	box-sizing: border-box;
 7 | 	width: 100%;
 8 | 	height: 100vh;
 9 | 
10 | 	padding: 32px;
11 | 
12 | 	background: #eee;
13 | 
14 | 	display: flex;
15 | 	flex-direction: column;
16 | 
17 | 	justify-content: center;
18 | 	
19 | 	align-items: stretch;
20 | 	align-content: stretch;
21 | 
22 | 	flex-wrap: wrap;
23 | }
24 | 
25 | main>div{
26 | 	flex-grow: 1;
27 | 
28 | 	background: steelblue;
29 | 	color: white;
30 | 	font-size: 3em;
31 | }
32 | 
33 | main>div:nth-child(2n){
34 | 	background: deeppink;
35 | }
36 | 
37 | main>div:nth-child(3n){
38 | 	background: crimson;
39 | }
40 | 
41 | main>div:nth-child(4n){
42 | 	background: indigo;
43 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo2/style.css:
--------------------------------------------------------------------------------
 1 | div{
 2 | 	width: 100px;
 3 | 	height: 100px;
 4 | 
 5 | 	background: #eee;
 6 | 	margin-bottom: 10px;
 7 | }
 8 | 
 9 | .clase{
10 | 	border: 5px dotted #999;	
11 | }
12 | 
13 | #cajaUnica{
14 | 	background: #D32F2F;
15 | }
16 | 
17 | h1{
18 | 	width: 40%;
19 | 	padding: 16px;
20 | 	margin: 10px auto 36px;
21 | 
22 | 	background: crimson;
23 | 
24 | 	color: whitesmoke;
25 | 	font-size: 36px;
26 | 	letter-spacing: -2px;
27 | 	text-align: center;
28 | 
29 | 	border-radius: 15px 0 15px 0;
30 | }
31 | 
32 | p{
33 | 	margin: 16px;
34 | 	text-align: justify;
35 | }
36 | 
37 | #intro{
38 | 	padding: 16px;
39 | 	border: 1px solid black;
40 | }
41 | 
42 | .important{
43 | 	color: crimson;
44 | 	font-weight: bold;
45 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo6/style.css:
--------------------------------------------------------------------------------
 1 | .card{
 2 | 	width: 15%;
 3 | 	height: auto;
 4 | 	overflow: hidden;
 5 | 
 6 | 	background: #1A237E;
 7 | 	color: white;
 8 | 
 9 | 	border-radius: 15px 0 15px 0;
10 | }
11 | 
12 | .card > header {
13 | 	border-radius: 0 0 15px 15px;
14 | }
15 | 
16 | .card > header, .card > footer {
17 | 	padding: 16px;
18 | 	background: #303F9F;
19 | }
20 | 
21 | .card h1, .card h2 {
22 | 	margin: 0 auto;
23 | 
24 | 	font-size: 1.5em;
25 | 	text-align: center;
26 | 	font-weight: normal;
27 | }
28 | 
29 | .card > main {
30 | 	padding: 4px 8px;
31 | 	height: 150px;
32 | 	overflow-y: auto;
33 | }
34 | 
35 | .card  p {
36 | 	text-align: justify;
37 | 	font-size: 0.8em;
38 | }
39 | 
40 | .card > footer {
41 | 	border-radius: 15px 15px 0 0;
42 | }


--------------------------------------------------------------------------------
/HTML/Ejemplo17/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Tipos de input</title>
 7 | </head>
 8 | <body>
 9 | 	<form action="index.html" method="get">
10 | 		<input type="text">
11 | 		<br>
12 | 		<input type="password">
13 | 		<br>
14 | 		<input type="date">
15 | 		<br>
16 | 		<input type="email">
17 | 		<br>
18 | 		<input type="datetime-local">
19 | 		<br>
20 | 		<input type="file">
21 | 		<br>
22 | 		<input type="range" min="10" max="20">
23 | 		<br>
24 | 		<input type="number" min="0" max="25">
25 | 		<br>
26 | 		<input type="color">
27 | 		<br>
28 | 		<textarea cols="30" rows="10"></textarea>
29 | 	</form>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 | 	<link rel="stylesheet" href="style.css">
 8 | 	<style>
 9 | 		h2 {
10 | 			padding-left: 10px;
11 | 			color: #aaa;
12 | 			border-left: 10px teal solid;
13 | 		}
14 | 	</style>
15 | 
16 | 	<title>Prueba de estilo</title>
17 | </head>
18 | <body>
19 | 	<h1> 
20 | 		Titulo de la página 
21 | 	</h1>
22 | 
23 | 	<h2> Subtitulo de la página </h2>
24 | 
25 | 	<p style="text-align: justify;">
26 | 		Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quibusdam earum animi dolor, obcaecati praesentium odio quidem et provident facilis eius reprehenderit laudantium dolorum dolore voluptates eveniet sapiente, adipisci culpa!
27 | 	</p>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Pseudo</title>
 8 | </head>
 9 | <body>
10 | 	<!-- Boton hechizo -->
11 | 	<button class="custom-button">
12 | 		Hechizo
13 | 	</button>
14 | 	
15 | 	<hr>
16 | 	
17 | 	<section id="first-last">
18 | 		<article></article>
19 | 		<article></article>
20 | 		<article></article>
21 | 		<article></article>
22 | 		<article></article>
23 | 	</section>
24 | 	
25 | 	<hr>	
26 | 
27 | 	<section id="nth">
28 | 		<article></article>
29 | 		<article></article>
30 | 		<article></article>
31 | 		<article></article>
32 | 		<article></article>
33 | 	</section>
34 | 
35 | 	<hr>
36 | 
37 | 	<input type="text">
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo18/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1.0"
 8 |     />
 9 |     <link rel="stylesheet" href="style.css" />
10 |     <title>Centering things</title>
11 |   </head>
12 |   <body>
13 |     <div class="container">
14 |       <div class="box">
15 |         <h1>Caja 1</h1>
16 |       </div>
17 |       <div class="box">
18 |         <h1>Caja 2</h1>
19 |       </div>
20 |       <div class="box">
21 |         <h1>Caja 3</h1>
22 |       </div>
23 |       <div class="box">
24 |         <h1>Caja 4</h1>
25 |       </div>
26 |       <div class="box">
27 |         <h1>Caja 5</h1>
28 |       </div>
29 |       <div class="box">
30 |         <h1>Caja 6</h1>
31 |       </div>
32 |     </div>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo22/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 | 	margin: 0;
 3 | 	box-sizing: border-box;
 4 | }
 5 | 
 6 | body{
 7 | 	width: 100%;
 8 | 	height: 100vh;
 9 | 
10 | 	display: grid;
11 | 	grid-template-areas: 	"head head"
12 |                        		"aside  main"
13 | 							"aside  foot";
14 | 	grid-template-rows: 10vh 1fr 7vh;
15 | 	grid-template-columns: 20% 1fr;
16 | }
17 | 
18 | span {
19 | 	font-size: 3em;
20 | }
21 | 
22 | header, main, footer, aside{
23 | 	display: flex;
24 | 	justify-content: center;
25 | 	align-items: center;
26 | }
27 | 
28 | header{
29 | 	grid-area: head;
30 | 	color: white;
31 | 	background: #1A237E;
32 | }
33 | 
34 | main{
35 | 	grid-area: main;
36 | 	background: #eee;
37 | }
38 | 
39 | footer{
40 | 	grid-area: foot;
41 | 	color: white;
42 | 	background: #999;
43 | }
44 | 
45 | aside{
46 | 	grid-area: aside;
47 | 	color: white;	
48 | 	background: #5C6BC0;
49 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Medidas</title>
 8 | </head>
 9 | <body>
10 | 	<!-- Ems y REMs -->
11 | 	<div>
12 | 		<h1> Titulo Fuera de Section </h1>
13 | 		<h2> Subtitulo </h2>
14 | 	</div>
15 | 
16 | 	<hr>
17 | 
18 | 	<section>
19 | 		<h1> Titulo en Section </h1>
20 | 		<h2> Subtitulo de section</h2>
21 | 
22 | 	</section>
23 | 
24 | 	<!-- CH -->
25 | 	<p>
26 | 		00000000000000000000
27 | 	</p>
28 | 
29 | 	<!-- Porcentaje -->
30 | 	<article class = "cont-20">
31 | 
32 | 	</article>
33 | 
34 | 	<article class = "cont-50">
35 | 		<article style="background: gold;" class = "cont-50">
36 | 		</article>
37 | 	</article>
38 | 
39 | 	<article class = "cont-100">
40 | 
41 | 	</article>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo9/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 | 	margin: 0;
 3 | 	overflow-x: hidden;
 4 | 
 5 | }
 6 | 
 7 | section{
 8 | 	margin: 0;
 9 | 	width: 100vw;
10 | 	height: 100vh;
11 | 
12 | 	padding: 36px;
13 | }
14 | 
15 | section:nth-child(2n){
16 | 	background: #eee;
17 | }
18 | 
19 | section:nth-child(2n) > div{
20 | 	background: crimson;
21 | }
22 | 
23 | div{
24 | 	width: 100px;
25 | 	height: 100px;
26 | 
27 | 	margin: 4px 0;
28 | 
29 | 	background: deeppink;
30 | 	border: 1px solid black ;
31 | }
32 | 
33 | #relativo{
34 | 	position: relative;
35 | 
36 | 	top: -75px;
37 | 	left: 250px;
38 | }
39 | 
40 | #absoluto{
41 | 	position: absolute;
42 | 	left: 150px;
43 | 	top: 25px;
44 | }
45 | 
46 | #pegajoso{
47 | 	background: darkblue;
48 | 
49 | 	position: sticky;
50 | 	position: -webkit-sticky;
51 | 
52 | 	top: 25px;
53 | 	left: 0;
54 | }
55 | 
56 | #fijo{
57 | 	position: fixed;
58 | 
59 | 	margin: 0;
60 | 
61 | 	top:0;
62 | 	left: 0;
63 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Hijos</title>
 8 | </head>
 9 | <body>
10 | 	<article class="card">
11 | 		<header>
12 | 			<h1> Título </h1>
13 | 		</header>
14 | 		<main>
15 | 			<p>
16 | 				Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quod nesciunt molestias temporibus delectus. Culpa illo, blanditiis repellat, alias ipsam deserunt unde fugit veritatis earum natus dolorum, molestiae officia! Iste. Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic velit ab rerum iste? Molestias tempora unde minus praesentium nam, esse quidem exercitationem iste, in, temporibus id? Et sed eligendi possimus.
17 | 			</p>
18 | 		</main>
19 | 		<footer>
20 | 			<h2> Mmmm... patas </h2>
21 | 		</footer>
22 | 	</article>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo9/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Position</title>
 8 | </head>
 9 | <body>
10 | 	<!-- Static -->
11 | 	<section>
12 | 		<div></div>
13 | 		<div></div>
14 | 		<div></div>
15 | 	</section>
16 | 
17 | 	<!-- Relative -->
18 | 	<section>
19 | 		<div></div>
20 | 		<div></div>
21 | 		<div id="relativo"></div>
22 | 		<div></div>
23 | 	</section>
24 | 
25 | 	<!-- Absoluta -->
26 | 	<section style="position: relative;">
27 | 		<div></div>
28 | 		<div id="absoluto"></div>
29 | 		<div></div>
30 | 	</section>
31 | 
32 | 	<!-- Sticky -->
33 | 	<section>
34 | 		<div></div>
35 | 		<div id="pegajoso"></div>
36 | 		<div></div>
37 | 	</section>
38 | 
39 | 	<!-- Fixed -->
40 | 	<section>
41 | 		<div></div>
42 | 		<div id="fijo"></div>
43 | 		<div></div>
44 | 	</section>
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo11/style.css:
--------------------------------------------------------------------------------
 1 | .custom-button{
 2 | 	padding: 8px 16px;
 3 | 	background: transparent;
 4 | 
 5 | 	color: darkred;
 6 | 
 7 | 	border: 1px darkred solid;
 8 | 	transition: 250ms ease-in-out all;
 9 | 
10 | }
11 | 
12 | .custom-button:hover{
13 | 	background: darkred;
14 | 	color: white;
15 | }
16 | 
17 | section > article {
18 | 	width: 200px;
19 | 	height: 200px;
20 | 
21 | 	margin: 16px 0;
22 | 
23 | 	background: teal;
24 | }
25 | 
26 | #first-last > article:first-child{
27 | 	background: steelblue;
28 | }
29 | 
30 | #first-last > article:last-child{
31 | 	background: springgreen;
32 | }
33 | 
34 | #nth > article:nth-child(2n){
35 | 	background: royalblue;
36 | }
37 | 
38 | #nth > article:nth-child(3n){
39 | 	background: sienna;
40 | }
41 | 
42 | input{
43 | 	display: block;
44 | 	width: 50%;
45 | 	margin: 0 auto;
46 | 	padding: 16px;
47 | 
48 | 	font-size: 1.5em;
49 | 	transition: 250ms ease-in-out all;
50 | }
51 | 
52 | input:focus{
53 | 	outline: none;
54 | 	border-radius: 15px;
55 | }


--------------------------------------------------------------------------------
/HTML/Ejemplo2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>¡Hola mundo!</title>
 7 | </head>
 8 | <body>
 9 | 	5G: Causante del coronavirus
10 | 	¿Metira o conspiración?
11 | 
12 | 	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos praesentium, est vitae perspiciatis quasi odio velit! Corrupti deserunt doloribus ipsam aspernatur, molestiae praesentium libero enim, consectetur odio, illo consequuntur maxime!
13 | 
14 | 	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, sed distinctio illum ut magni quis error et nostrum explicabo sunt. Voluptatem labore dolore officiis voluptatibus minus, modi ducimus et est!
15 | 
16 | 	Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat minus assumenda expedita est vero eveniet doloribus quisquam ea cumque incidunt, itaque corporis quae consequuntur sequi consectetur eligendi voluptatem, natus maiores!
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo17/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="stylesheet" href="style.css" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <header>
11 |       <button id="open">Open Source</button>
12 |       <button id="download">Download Site</button>
13 |       <button id="faq">F.A.Q</button>
14 |     </header>
15 |     <main>
16 |       <h1>Pedrogas</h1>
17 |       <div class="line"></div>
18 |       <div class="icons">
19 |         <div></div>
20 |         <div></div>
21 |         <div></div>
22 |         <div></div>
23 |         <div></div>
24 |         <div></div>
25 |         <div></div>
26 |         <div></div>
27 |         <div></div>
28 |         <div></div>
29 |         <div></div>
30 |         <div></div>
31 |         <div></div>
32 |         <div></div>
33 |         <div></div>
34 |       </div>
35 |     </main>
36 |     <footer>
37 |       <a href="#">Contact us</a>
38 |       <a href="#">Help?</a>
39 |     </footer>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo21/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 3 | 
 4 | *{
 5 | 	margin: 0;
 6 | 	box-sizing: border-box;
 7 | }
 8 | 
 9 | body{
10 | 	width: 100%;
11 | 	height: 100vh;
12 | 
13 | 	display: flex;
14 | 	justify-content: center;
15 | 	align-items: center;
16 | }
17 | 
18 | .list{
19 | 	width: 450px;
20 | 	height: 650px;
21 | 
22 | 	overflow-y: auto;
23 | 
24 | 	background: #eee;
25 | }
26 | 
27 | .list dt {
28 | 	width: 100%;
29 | 	background: crimson;
30 | 
31 | 	padding: 16px;
32 | 
33 | 	color: white;
34 | 	font-family: "Montserrat", sans-serif;
35 | 
36 | 	border-radius: 0 0 15px 15px;
37 | 
38 | 	margin: 0 0 16px;
39 | 
40 | 	position: sticky;
41 | 	position: -webkit-sticky;
42 | 
43 | 	top: 0;
44 | 	left: 0;
45 | 
46 | 	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
47 | 
48 | }
49 | 
50 | .list dt:nth-of-type(2n){
51 | 	background: steelblue;
52 | }
53 | 
54 | .list dd{
55 | 	width: 100%;
56 | 	padding: 16px;
57 | 	font-family: "Roboto", sans-serif;
58 | 	font-weight: 300;
59 | }
60 | 
61 | 


--------------------------------------------------------------------------------
/HTML/Ejercicio1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Biografía</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		Douglas Hernandez
11 | 	</h1>
12 | 
13 | 	<h2>
14 | 		Biografía
15 | 	</h2>
16 | 	<p>
17 | 		Soy estudiante de 5to año de Ingeniería Informática, y por lo tanto me doy el lujo de poner: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi fugit laboriosam quo voluptas praesentium exercitationem corrupti? Quos consequuntur sit minima sint esse adipisci? Id voluptate nesciunt totam rerum ea a.
18 | 	</p>
19 | 
20 | 	<p>
21 | 		Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi aperiam ipsa atque, totam porro laborum, est impedit maxime doloremque officiis eum obcaecati pariatur, maiores quisquam modi incidunt tempore. Similique, aliquid. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates sit placeat optio eos recusandae unde tempora non exercitationem laudantium, odio doloribus nemo amet quibusdam commodi? Ipsam nihil aspernatur ab et?
22 | 	</p>
23 | 
24 | 	
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Receta: Pasta al pasto</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		Receta: Pasta al pasto
11 | 	</h1>
12 | 
13 | 	<h2>
14 | 		Descripcion
15 | 	</h2>
16 | 	<p>
17 | 		Disfruta de los mejores macarrones acompañados de una buena racion de grama
18 | 	</p>
19 | 
20 | 	<h2>
21 | 		Ingredientes
22 | 	</h2>
23 | 	<ul>
24 | 		<li>
25 | 			Macarrones
26 | 		</li>
27 | 		<li>
28 | 			Aceite
29 | 		</li>
30 | 		<li>
31 | 			Agua
32 | 		</li>
33 | 		<li>
34 | 			Grama
35 | 		</li>
36 | 		<li>
37 | 			Oregano
38 | 		</li>
39 | 	</ul>
40 | 
41 | 	<h2>
42 | 		Instrucciones
43 | 	</h2>
44 | 	<ol>
45 | 		<li>
46 | 			Poner a hevir agua con aceite
47 | 		</li>
48 | 		<li>
49 | 			Esperar a que este hirviendo
50 | 		</li>
51 | 		<li>
52 | 			Poner la pasta en el agua
53 | 		</li>
54 | 		<li>
55 | 			Esperar a que esté al dente
56 | 		</li>
57 | 		<li>
58 | 			Drenar el agua
59 | 		</li>
60 | 		<li>
61 | 			Colocar grama y oregano al gusto
62 | 		</li>
63 | 		<li>
64 | 			Servir y disfrutar
65 | 		</li>
66 | 	</ol>
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo16/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="stylesheet" href="style.css" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <img
12 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_A.svg/200px-Playing_card_club_A.svg.png"
13 |       />
14 | 
15 |       <img
16 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_2.svg/200px-Playing_card_club_2.svg.png"
17 |       />
18 |       <img
19 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_3.svg/200px-Playing_card_club_3.svg.png"
20 |       />
21 |       <img
22 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_4.svg/200px-Playing_card_club_4.svg.png"
23 |       />
24 |       <img
25 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_5.svg/200px-Playing_card_club_5.svg.png"
26 |       />
27 |       <img
28 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_6.svg/200px-Playing_card_club_6.svg.png"
29 |       />
30 |       <img
31 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_7.svg/200px-Playing_card_club_7.svg.png"
32 |       />
33 |       <img
34 |         src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_8.svg/200px-Playing_card_club_8.svg.png"
35 |       />
36 |     </div>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/HTML/Ejemplo18/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Radio, check y select</title>
 7 | </head>
 8 | <body>
 9 | 	<form action="index.html" method="get">
10 | 		<select name="gustos">
11 | 			<option value="op1">Opcion 1</option>
12 | 			<option value="op2">Opcion 2</option>
13 | 			<option value="op3">Opcion 3</option>
14 | 			<option value="op4">Opcion 4</option>
15 | 			<option value="op5">Opcion 5</option>
16 | 		</select>
17 | 
18 | 		<hr>
19 | 
20 | 		<input type="radio" name="radioG1" value="r11" id="r11"> 
21 | 		<label for="r11">Radio 11</label> <br>
22 | 
23 | 		<input type="radio" name="radioG1" value="r12" id="r12"> 
24 | 		<label for="r12">Radio 12</label> <br>
25 | 		
26 | 		<input type="radio" name="radioG1" value="r13" id="r13"> 
27 | 		<label for="r13">Radio 13</label> <br>
28 | 
29 | 		<hr>
30 | 
31 | 		<input type="radio" name="radioG2" value="r21" id="r21"> 
32 | 		<label for="r21">Radio 21</label> <br>
33 | 
34 | 		<input type="radio" name="radioG2" value="r22" id="r22"> 
35 | 		<label for="r22">Radio 22</label> <br>
36 | 		
37 | 		<input type="radio" name="radioG2" value="r23" id="r23"> 
38 | 		<label for="r23">Radio 23</label> <br>		
39 | 
40 | 		<hr>
41 | 
42 | 		<input type="checkbox" name="check1" value="c1" id="c1"> 
43 | 		<label for="c1">Check 1</label> <br>
44 | 
45 | 		<input type="checkbox" name="check1" value="c2" id="c2"> 
46 | 		<label for="c2">Check 2</label> <br>
47 | 		
48 | 		<input type="checkbox" name="check1" value="c3" id="c3"> 
49 | 		<label for="c3">Check 3</label> <br>
50 | 
51 | 		<input type="submit">
52 | 	</form>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo17/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 | }
 4 | body {
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   justify-content: space-between;
 8 |   margin: 0;
 9 |   box-sizing: border-box;
10 |   padding: 10px;
11 |   height: 100vh;
12 |   background-image: url("./img/background.jpg");
13 |   background-repeat: none;
14 |   background-size: cover;
15 |   background-position: center;
16 | }
17 | 
18 | header {
19 |   display: flex;
20 |   justify-content: flex-end;
21 | }
22 | 
23 | header > button {
24 |   padding: 10px;
25 |   margin: 4px 8px;
26 |   border: 0;
27 |   border-radius: 4px;
28 |   color: white;
29 |   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
30 | }
31 | 
32 | button#open {
33 |   background: indigo;
34 | }
35 | 
36 | button#download {
37 |   background: slateblue;
38 | }
39 | 
40 | button#faq {
41 |   background: deeppink;
42 | }
43 | 
44 | main {
45 |   display: flex;
46 |   flex-direction: column;
47 |   justify-content: center;
48 |   align-items: center;
49 |   width: 100%;
50 |   height: 70vh;
51 | }
52 | 
53 | main > h1 {
54 |   font-size: 4em;
55 |   background: #ffffff40;
56 |   padding: 8px 0;
57 | }
58 | 
59 | .line {
60 |   height: 4px;
61 |   width: 40%;
62 |   margin: 1em;
63 |   border-radius: 8px;
64 |   background: white;
65 | }
66 | 
67 | .icons {
68 |   width: 30%;
69 |   display: flex;
70 |   flex-wrap: wrap;
71 |   justify-content: center;
72 | }
73 | 
74 | .icons > div {
75 |   width: 45px;
76 |   height: 45px;
77 |   margin: 4px;
78 |   border-radius: 50%;
79 |   background: teal;
80 | }
81 | 
82 | footer {
83 |   display: flex;
84 |   justify-content: space-between;
85 | }
86 | 
87 | footer > a {
88 |   padding: 4px;
89 |   border-radius: 2px;
90 |   background: #00000070;
91 |   color: white;
92 | }
93 | 


--------------------------------------------------------------------------------
/CSS/Ejemplo21/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Sticky List</title>
 8 | </head>
 9 | <body>
10 | 	<div class="list">
11 | 		<dl>
12 | 			<dt> A </dt>
13 | 			<dd> Nombre con A 1 </dd>
14 | 			<dd> Nombre con A 2 </dd>
15 | 			<dd> Nombre con A 3 </dd>
16 | 			<dd> Nombre con A 4 </dd>
17 | 			<dd> Nombre con A 5 </dd>
18 | 			<dd> Nombre con A 6 </dd>
19 | 			<dd> Nombre con A 7 </dd>
20 | 			<dd> Nombre con A 8 </dd>
21 | 			<dd> Nombre con A 9 </dd>
22 | 
23 | 			<dt> B </dt>
24 | 			<dd> Nombre con B 1 </dd>
25 | 			<dd> Nombre con B 2 </dd>
26 | 			<dd> Nombre con B 3 </dd>
27 | 			<dd> Nombre con B 4 </dd>
28 | 			<dd> Nombre con B 5 </dd>
29 | 
30 | 			<dt> C </dt>
31 | 			<dd> Nombre con C 1 </dd>
32 | 			<dd> Nombre con C 2 </dd>
33 | 			<dd> Nombre con C 3 </dd>
34 | 			<dd> Nombre con C 4 </dd>
35 | 			<dd> Nombre con C 5 </dd>
36 | 			<dd> Nombre con C 6 </dd>
37 | 			<dd> Nombre con C 7 </dd>
38 | 			<dd> Nombre con C 8 </dd>
39 | 
40 | 			<dt> D </dt>
41 | 			<dd> Nombre con D 1 </dd>
42 | 			<dd> Nombre con D 2 </dd>
43 | 			<dd> Nombre con D 3 </dd>
44 | 
45 | 			<dt> E </dt>
46 | 			<dd> Nombre con E 1 </dd>
47 | 			<dd> Nombre con E 2 </dd>
48 | 			<dd> Nombre con E 3 </dd>
49 | 			<dd> Nombre con E 4 </dd>
50 | 			<dd> Nombre con E 5 </dd>
51 | 			<dd> Nombre con E 6 </dd>
52 | 			<dd> Nombre con E 7 </dd>
53 | 			<dd> Nombre con E 8 </dd>
54 | 			<dd> Nombre con E 9 </dd>
55 | 			<dd> Nombre con E 10 </dd>
56 | 			<dd> Nombre con E 11 </dd>
57 | 			<dd> Nombre con E 12 </dd>
58 | 			<dd> Nombre con E 13 </dd>
59 | 			<dd> Nombre con E 14 </dd>
60 | 		</dl>
61 | 	</div>
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo20/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 3 | 
 4 | *{
 5 | 	box-sizing: border-box;
 6 | 	margin: 0;
 7 | }
 8 | 
 9 | h1, h2, h3, h4, h5, h6 {
10 | 	font-family: "Montserrat", sans-serif;
11 | }
12 | 
13 | p{
14 | 	font-family: "Roboto", sans-serif;
15 | 	font-weight: 300;
16 | 	text-align: justify;
17 | }
18 | 
19 | .cards-container{
20 | 	width: 100%;
21 | 	min-height: 100vh;
22 | 
23 | 	background: #eee;
24 | 
25 | 	display: flex;
26 | 	justify-content: center;
27 | 	align-items: center;
28 | }
29 | 
30 | .cards-container>section{
31 | 	width: 90%;
32 | 
33 | 	display: flex;
34 | 	justify-content: space-around;
35 | 	flex-wrap: wrap;
36 | }
37 | 
38 | .cards-container>section>.card{
39 | 	flex-grow: 1;
40 | 	flex-shrink: 0;
41 | 	flex-basis: 30%;
42 | 
43 | 	min-width: 40ch;
44 | 	margin: 32px 16px;
45 | 	padding: 32px 40px;
46 | 
47 | 	background: #0D47A1;
48 | 
49 | 	display: flex;
50 | 	flex-direction: column;
51 | 	justify-content: space-between;
52 | 	align-items: center;
53 | 
54 | 	color: white;
55 | 	font-size: 20px;
56 | 
57 | 	border-radius: 15px;
58 | 	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
59 | }
60 | 
61 | .card p {
62 | 	margin: 0 0 16px;
63 | }
64 | 
65 | .card h3{
66 | 	margin: 64px 0;
67 | 	font-size: 1.7em;
68 | 
69 | 	align-self: flex-start;
70 | }
71 | 
72 | .card button{
73 | 	align-self: flex-end;
74 | 
75 | 	margin: 32px 0;
76 | 	padding: 16px 32px;
77 | 
78 | 	color: white;
79 | 	font: 1em;
80 | 
81 | 	background: transparent;
82 | 	border: 1px solid white;
83 | 
84 | 	transition: 250ms ease-in-out all;
85 | }
86 | 
87 | .card button:hover{
88 | 	background: white;
89 | 	color: #0D47A1;
90 | }


--------------------------------------------------------------------------------
/HTML/Ejemplo5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Document</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		Diccionario
11 | 	</h1>
12 | 	
13 | 	<dl>
14 | 		<dt>Definicion 1</dt>
15 | 		<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. A eveniet qui necessitatibus voluptate illum sint asperiores, quo consequatur voluptates soluta esse rerum eos quos delectus? Obcaecati consectetur repellendus velit quibusdam?</dd>
16 | 		
17 | 		<dt>Definicion 2</dt>
18 | 		<dd>Qui mollitia natus cum libero quaerat obcaecati, quo assumenda reiciendis rerum, blanditiis minus? Nostrum recusandae soluta, dolor asperiores illum optio aliquid non, laudantium quasi nisi at animi fugiat? Voluptas, in.</dd>
19 | 		
20 | 		<dt>Definicion 3</dt>
21 | 		<dd>Voluptatibus id voluptates voluptas? Quam nesciunt explicabo, ullam temporibus possimus doloremque cum? Nisi, enim nihil. Cupiditate facilis tempora repellendus voluptatum ad recusandae, accusamus fuga molestias voluptatibus, blanditiis nam velit modi?</dd>
22 | 		
23 | 		<dt>Definicion 4</dt>
24 | 		<dd>Eveniet modi harum iure, voluptate blanditiis quasi veritatis cumque consequuntur, sequi officiis suscipit voluptatum quia delectus totam molestias ea commodi quod? Blanditiis ab corrupti harum enim architecto minus, voluptatibus neque.</dd>
25 | 		
26 | 		<dt>Definicion 5</dt>
27 | 		<dd>Similique soluta, adipisci eaque blanditiis accusamus tempore porro maiores suscipit aut quos a sint molestias corporis inventore, animi, voluptatem ex ullam! Modi nobis soluta consequuntur similique enim asperiores alias illo.</dd>
28 | 		
29 | 		<dt>Definicion 6</dt>
30 | 		<dd>Consectetur pariatur est architecto. Saepe, minus, vitae quo velit possimus, beatae aperiam vero neque consectetur ipsa inventore aut dignissimos. Modi eveniet esse est, omnis iusto quae laboriosam dolore pariatur ut.</dd>
31 | 	</dl>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>Uso de parrafos y títulos</title>
 7 | </head>
 8 | <body>
 9 | 	<h1>
10 | 		5G: Causante del Coronavirus 
11 | 	</h1>
12 | 
13 | 	<h2>
14 | 		¿Mentira o Conspiraci&oacute;n?
15 | 	</h2>
16 | 
17 | 	<p>
18 | 		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad ducimus quia magnam rem incidunt voluptates fuga sint eum, aliquam temporibus minus iure alias eos dolorum <strong>doloribus</strong> <em>reprehenderit</em> veniam maxime unde!
19 | 	</p>
20 | 
21 | 	<p>
22 | 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quis quaerat dolor repellat itaque, nulla atque ipsam, distinctio iusto eum culpa, aspernatur vel. Non officiis, cupiditate autem eaque magnam dicta.
23 | 	</p>
24 | 
25 | 	<p>
26 | 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, beatae atque. Quis earum, labore culpa nam quae libero nesciunt possimus id harum eaque minus sint ad quos obcaecati quam ea!
27 | 	</p>
28 | 
29 | 	<h2>
30 | 		Pruebas
31 | 	</h2>
32 | 
33 | 	<p>
34 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti sequi, ullam repudiandae rerum aspernatur necessitatibus, libero dolores commodi, suscipit dolore eos alias. Maxime provident culpa voluptates quod numquam quidem harum.
35 | 	</p>
36 | 
37 | 	<p>
38 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi nostrum nulla facere cum quam commodi reprehenderit blanditiis atque aperiam, fugiat obcaecati amet, quia doloribus sapiente, doloremque adipisci ducimus eos. Dolor!
39 | 	</p>
40 | 
41 | 	<h2>
42 | 		Desinformación de los gobiernos
43 | 	</h2>
44 | 
45 | 	<p>
46 | 		Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum iste totam delectus quod reprehenderit iusto commodi eius? Fuga dolor beatae vitae facilis asperiores neque, sed corporis ut, nostrum suscipit reprehenderit.
47 | 	</p>
48 | 	
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo13/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  3 | 
  4 | *{
  5 | 	box-sizing: border-box;
  6 | }
  7 | 
  8 | body{
  9 | 	margin: 0;
 10 | }
 11 | 
 12 | h1, h2, h3, h4, h5, h6{
 13 | 	font-family: "Montserrat", sans-serif;
 14 | }
 15 | 
 16 | h3{
 17 | 	font-size: 1.5em;
 18 | }
 19 | 
 20 | p{
 21 | 	font-family: "Roboto", sans-serif;
 22 | 	font-weight: 300;
 23 | 	text-align: justify;
 24 | }
 25 | 
 26 | header{
 27 | 	width: 100%;
 28 | 	height: 100vh;
 29 | 
 30 | 	margin: 0;
 31 | 	padding: 0;
 32 | 
 33 | 	background-image: url("./img/main.jpg");
 34 | 	background-repeat: no-repeat;
 35 | 	background-size: cover;
 36 | 	background-position: center;
 37 | }
 38 | 
 39 | header>div{
 40 | 	width: 100%;
 41 | 	height: 100vh;
 42 | 
 43 | 	padding: 16px;
 44 | 	background-color: #000000aa;
 45 | }
 46 | 
 47 | header h1{
 48 | 	margin: 72px 0;
 49 | 
 50 | 	text-align: center;
 51 | 
 52 | 	color: white;
 53 | 	font-size: 5rem;
 54 | 
 55 | 	font-weight: 100;
 56 | }
 57 | 
 58 | nav#navbar{
 59 | 	width: 100%;
 60 | 	height: auto;
 61 | 
 62 | 	margin: 0;
 63 | 	padding: 16px 16px 0;
 64 | 
 65 | 	position: sticky;
 66 | 	position: -webkit-sticky;
 67 | 	top: 0;
 68 | 	left: 0;
 69 | 
 70 | 	background: #1A237E;
 71 | }
 72 | 
 73 | nav#navbar > h2 {
 74 | 	margin: 0 0 8px;
 75 | 
 76 | 	text-align: center;
 77 | 	color: white;
 78 | 	font-size: 2em;
 79 | }
 80 | 
 81 | nav#navbar > ul {
 82 | 	margin: 0;
 83 | 	padding: 0;
 84 | 
 85 | 	list-style: none;
 86 | 	text-align: center;
 87 | }
 88 | 
 89 | nav#navbar li{
 90 | 	display: inline-block;
 91 | }
 92 | 
 93 | nav#navbar li>a{
 94 | 	display: inline-block;
 95 | 	padding: 16px 32px;
 96 | 
 97 | 	color: white;
 98 | 	text-decoration: none;
 99 | 	font-family: "Roboto", sans-serif;
100 | 	font-weight: 300;
101 | 
102 | 	transition: ease-in-out 250ms all;
103 | }
104 | 
105 | nav#navbar li>a:hover{
106 | 	text-decoration: underline white;
107 | 	background: #3949AB;
108 | 	border-radius: 15px 15px 0 0;
109 | }
110 | 
111 | main{
112 | 	margin: 64px 15%;
113 | }
114 | 
115 | main>section{
116 | 	border-bottom: 1px #aaa solid;
117 | }
118 | 
119 | main>section:last-child{
120 | 	border-bottom: 0;
121 | }
122 | 
123 | main>section>p:first-of-type::first-letter{
124 | 	font-size: 2em;
125 | }
126 | 
127 | footer{
128 | 	width: 100%;
129 | 	padding: 32px;
130 | 
131 | 	background: #eee;
132 | }
133 | 
134 | footer>p{
135 | 	text-align: center;
136 | 	color: #999;
137 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo20/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Flex Cards</title>
 8 | </head>
 9 | <body>
10 | 	<section class="cards-container">
11 | 		<section>
12 | 			<article class="card">
13 | 				<h3> Card 1 </h3>
14 | 				<div>
15 | 					<p>
16 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum velit quo quasi assumenda unde. Id quam dolorum, dignissimos obcaecati labore doloremque consequuntur reprehenderit hic quaerat distinctio explicabo mollitia. Commodi, non.
17 | 					</p>
18 | 					<p>
19 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum velit quo quasi assumenda unde. Id quam dolorum, dignissimos obcaecati labore doloremque consequuntur reprehenderit hic quaerat distinctio explicabo mollitia. Commodi, non.
20 | 					</p>
21 | 				</div>
22 | 				<button> Leer más </button>
23 | 			</article>
24 | 			<article class="card">
25 | 				<h3> Card 2 </h3>
26 | 				<div>
27 | 					<p>
28 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum velit quo quasi assumenda unde. Id quam dolorum, dignissimos obcaecati labore doloremque consequuntur reprehenderit hic quaerat distinctio explicabo mollitia. Commodi, non.
29 | 					</p>
30 | 	
31 | 					<p>
32 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum velit quo quasi assumenda unde. Id quam dolorum, dignissimos obcaecati labore doloremque consequuntur reprehenderit hic quaerat distinctio explicabo mollitia. Commodi, non.
33 | 					</p>
34 | 	
35 | 					<p>
36 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum velit quo quasi assumenda unde. Id quam dolorum, dignissimos obcaecati labore doloremque consequuntur reprehenderit hic quaerat distinctio explicabo mollitia. Commodi, non.
37 | 					</p>
38 | 				</div>
39 | 				<button> Leer más </button>
40 | 			</article>
41 | 			<article class="card">
42 | 				<h3> Card 3 </h3>
43 | 				<div>
44 | 					<p>
45 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum velit quo quasi assumenda unde. Id quam dolorum, dignissimos obcaecati labore doloremque consequuntur reprehenderit hic quaerat distinctio explicabo mollitia. Commodi, non.
46 | 					</p>
47 | 	
48 | 					<p>
49 | 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum velit quo quasi assumenda unde. Id quam dolorum, dignissimos obcaecati labore doloremque consequuntur reprehenderit hic quaerat distinctio explicabo mollitia. Commodi, non.
50 | 					</p>
51 | 				</div>
52 | 				<button> Leer más </button>
53 | 			</article>
54 | 		</section>
55 | 	</section>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/JS/Ejemplo1/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  3 | 
  4 | *{
  5 | 	box-sizing: border-box;
  6 | }
  7 | 
  8 | body{
  9 | 	margin: 0;
 10 | }
 11 | 
 12 | body.light{
 13 | 	background: white;
 14 | 	--switch-color: #000000;
 15 | 	--text-color: #000000;
 16 | 	--text-color-inv: #fff;
 17 | 	--primary-color: #1A237E;
 18 | 	--section-border-color: #999;
 19 | 	--footer-bg: #eee;
 20 | }
 21 | 
 22 | body.dark{
 23 | 	background: black;
 24 | 	--switch-color: #fff;
 25 | 	--text-color: #fff;
 26 | 	--text-color-inv: #000;
 27 | 	--primary-color: #1A237E;
 28 | 	--section-border-color: #ffffff;
 29 | 	--footer-bg: #333;
 30 | }
 31 | 
 32 | h1, h2, h3, h4, h5, h6{
 33 | 	font-family: "Montserrat", sans-serif;
 34 | 	color: var(--text-color);
 35 | }
 36 | 
 37 | h3{
 38 | 	font-size: 1.5em;
 39 | }
 40 | 
 41 | p{
 42 | 	font-family: "Roboto", sans-serif;
 43 | 	font-weight: 300;
 44 | 	text-align: justify;
 45 | 	color: var(--text-color);
 46 | }
 47 | 
 48 | header{
 49 | 	width: 100%;
 50 | 	height: 100vh;
 51 | 
 52 | 	margin: 0;
 53 | 	padding: 0;
 54 | 
 55 | 	background-image: url("./img/main.jpg");
 56 | 	background-repeat: no-repeat;
 57 | 	background-size: cover;
 58 | 	background-position: center;
 59 | }
 60 | 
 61 | header>div{
 62 | 	width: 100%;
 63 | 	height: 100vh;
 64 | 
 65 | 	padding: 16px;
 66 | 	background-color: #000000aa;
 67 | }
 68 | 
 69 | header h1{
 70 | 	margin: 72px 0;
 71 | 
 72 | 	text-align: center;
 73 | 
 74 | 	color: white;
 75 | 	font-size: 5rem;
 76 | 
 77 | 	font-weight: 100;
 78 | }
 79 | 
 80 | button#switch-theme{
 81 | 	height: 50px;
 82 | 	width: 50px;
 83 | 
 84 | 	position: fixed;
 85 | 	bottom: 20px;
 86 | 	left: 20px;
 87 | 
 88 | 	color: var(--text-color-inv);
 89 | 	font-family: "Montserrat", sans-serif;
 90 | 	font-weight: 400;
 91 | 	font-size: 2em;
 92 | 
 93 | 	background: var(--switch-color);
 94 | 	border: 1px solid var(--primary-color);
 95 | 	border-radius: 50%;
 96 | }
 97 | 
 98 | nav#navbar{
 99 | 	width: 100%;
100 | 	height: auto;
101 | 
102 | 	margin: 0;
103 | 	padding: 16px 16px 0;
104 | 
105 | 	position: sticky;
106 | 	position: -webkit-sticky;
107 | 	top: 0;
108 | 	left: 0;
109 | 
110 | 	background: var(--primary-color);
111 | }
112 | 
113 | nav#navbar > h2 {
114 | 	margin: 0 0 8px;
115 | 
116 | 	text-align: center;
117 | 	color: white;
118 | 	font-size: 2em;
119 | }
120 | 
121 | nav#navbar > ul {
122 | 	margin: 0;
123 | 	padding: 0;
124 | 
125 | 	list-style: none;
126 | 	text-align: center;
127 | }
128 | 
129 | nav#navbar li{
130 | 	display: inline-block;
131 | }
132 | 
133 | nav#navbar li>a{
134 | 	display: inline-block;
135 | 	padding: 16px 32px;
136 | 
137 | 	color: white;
138 | 	text-decoration: none;
139 | 	font-family: "Roboto", sans-serif;
140 | 	font-weight: 300;
141 | 
142 | 	transition: ease-in-out 250ms all;
143 | }
144 | 
145 | nav#navbar li>a:hover{
146 | 	text-decoration: underline white;
147 | 	background: #3949AB;
148 | 	border-radius: 15px 15px 0 0;
149 | }
150 | 
151 | main{
152 | 	margin: 64px 15%;
153 | }
154 | 
155 | main>section{
156 | 	border-bottom: 1px var(--section-border-color) solid;
157 | }
158 | 
159 | main>section:last-child{
160 | 	border-bottom: 0;
161 | }
162 | 
163 | main>section>p:first-of-type::first-letter{
164 | 	font-size: 2em;
165 | }
166 | 
167 | footer{
168 | 	width: 100%;
169 | 	padding: 32px;
170 | 
171 | 	background: var(--footer-bg);
172 | }
173 | 
174 | footer>p{
175 | 	text-align: center;
176 | 	color: #777;
177 | }


--------------------------------------------------------------------------------
/CSS/Ejemplo2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Tipos de selectores</title>
 8 | </head>
 9 | <body>
10 | 	<div></div>
11 | 	<div class="clase"></div>
12 | 	<div id="cajaUnica"></div>
13 | 
14 | 	<h1>Titulo</h1>
15 | 
16 | 	<p id="intro">
17 | 		Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est delectus labore eius ex dicta quisquam, sequi repellat libero aperiam! Autem, atque eius? Repudiandae esse totam doloremque temporibus sint vitae.
18 | 		Laudantium hic, veniam corporis voluptatem cum error quasi aspernatur ab quia cumque aperiam laborum alias vitae nemo magnam magni impedit odio eligendi rem, itaque minus. Explicabo eveniet aperiam esse recusandae?
19 | 		Illo quasi voluptas autem asperiores quisquam quam veniam unde sunt iure dicta molestiae neque suscipit possimus, incidunt eligendi eveniet porro cum quos maiores at sint ipsam ab rem? Voluptates, magni!
20 | 		Veritatis aut praesentium facere officiis necessitatibus voluptatem! Nisi id similique rerum possimus a nostrum perspiciatis harum est reprehenderit accusantium, veritatis vero delectus quibusdam minima ipsam alias corrupti esse impedit nobis?
21 | 	</p>
22 | 
23 | 	<p>
24 | 		Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla molestiae ex sequi, vero voluptatum delectus esse illum, amet eum, veritatis itaque libero ipsam. Eius quas quod sapiente iure? Perspiciatis, modi!
25 | 		Ea, accusantium neque aspernatur fugiat commodi minus quae consectetur cum vel assumenda doloremque autem sit, voluptates deserunt quaerat non at temporibus pariatur! Ab, asperiores molestiae? Deleniti officia doloribus laudantium sint.
26 | 		Aliquid totam nemo sed ipsa exercitationem, velit veritatis omnis dolorem ad sint quam perferendis eligendi mollitia consequuntur voluptas aspernatur inventore ducimus, aliquam ratione molestiae quas illo, provident voluptatem obcaecati! Architecto.
27 | 		Ex voluptatibus, saepe, iusto quas enim est placeat qui fuga cum, molestiae dolorum necessitatibus assumenda non autem deserunt dolores rerum! Iste mollitia obcaecati architecto asperiores totam consectetur quam, at consequuntur!
28 | 	</p>
29 | 
30 | 	<p>
31 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis est aperiam, doloremque numquam voluptate, totam molestiae vero adipisci eius odio rem sunt error sint earum deserunt. Laudantium quibusdam maxime quo.
32 | 		Autem inventore beatae, temporibus at placeat labore vitae enim. Rerum molestias quasi corporis nesciunt, minima blanditiis unde libero eligendi magni natus voluptatum quisquam eveniet perferendis? Quos, nam. Molestias, eveniet! Distinctio?
33 | 		Tempore deleniti enim dolorem eos, eius beatae exercitationem eum accusamus ipsa officia accusantium provident, quidem repudiandae quae aut, magni nesciunt fugiat saepe porro! Optio temporibus quaerat magnam nostrum nulla alias?
34 | 		Labore ipsam, reprehenderit perspiciatis dolorum ad, dolores tenetur alias modi ea in, et aperiam dolor ut magni doloremque harum nostrum cupiditate sed. Ab sunt officia placeat totam nam nobis quidem.
35 | 	</p>
36 | 
37 | 	<p class="important">
38 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis est aperiam, doloremque numquam voluptate, totam molestiae vero adipisci eius odio rem sunt error sint earum deserunt. Laudantium quibusdam maxime quo.
39 | 		Autem inventore beatae, temporibus at placeat labore vitae enim. Rerum molestias quasi corporis nesciunt, minima blanditiis unde libero eligendi magni natus voluptatum quisquam eveniet perferendis? Quos, nam. Molestias, eveniet! Distinctio?
40 | 		Tempore deleniti enim dolorem eos, eius beatae exercitationem eum accusamus ipsa officia accusantium provident, quidem repudiandae quae aut, magni nesciunt fugiat saepe porro! Optio temporibus quaerat magnam nostrum nulla alias?
41 | 		Labore ipsam, reprehenderit perspiciatis dolorum ad, dolores tenetur alias modi ea in, et aperiam dolor ut magni doloremque harum nostrum cupiditate sed. Ab sunt officia placeat totam nam nobis quidem.
42 | 	</p>
43 | 
44 | 	<p>
45 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis est aperiam, doloremque numquam voluptate, totam molestiae vero adipisci eius odio rem sunt error sint earum deserunt. Laudantium quibusdam maxime quo.
46 | 		Autem inventore beatae, temporibus at placeat labore vitae enim. Rerum molestias quasi corporis nesciunt, minima blanditiis unde libero eligendi magni natus voluptatum quisquam eveniet perferendis? Quos, nam. Molestias, eveniet! Distinctio?
47 | 		Tempore deleniti enim dolorem eos, eius beatae exercitationem eum accusamus ipsa officia accusantium provident, quidem repudiandae quae aut, magni nesciunt fugiat saepe porro! Optio temporibus quaerat magnam nostrum nulla alias?
48 | 		Labore ipsam, reprehenderit perspiciatis dolorum ad, dolores tenetur alias modi ea in, et aperiam dolor ut magni doloremque harum nostrum cupiditate sed. Ab sunt officia placeat totam nam nobis quidem.
49 | 	</p>
50 | 
51 | 	<p>
52 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis est aperiam, doloremque numquam voluptate, totam molestiae vero adipisci eius odio rem sunt error sint earum deserunt. Laudantium quibusdam maxime quo.
53 | 		Autem inventore beatae, temporibus at placeat labore vitae enim. Rerum molestias quasi corporis nesciunt, minima blanditiis unde libero eligendi magni natus voluptatum quisquam eveniet perferendis? Quos, nam. Molestias, eveniet! Distinctio?
54 | 		Tempore deleniti enim dolorem eos, eius beatae exercitationem eum accusamus ipsa officia accusantium provident, quidem repudiandae quae aut, magni nesciunt fugiat saepe porro! Optio temporibus quaerat magnam nostrum nulla alias?
55 | 		Labore ipsam, reprehenderit perspiciatis dolorum ad, dolores tenetur alias modi ea in, et aperiam dolor ut magni doloremque harum nostrum cupiditate sed. Ab sunt officia placeat totam nam nobis quidem.
56 | 	</p>
57 | 
58 | 	<p class="important">
59 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis est aperiam, doloremque numquam voluptate, totam molestiae vero adipisci eius odio rem sunt error sint earum deserunt. Laudantium quibusdam maxime quo.
60 | 		Autem inventore beatae, temporibus at placeat labore vitae enim. Rerum molestias quasi corporis nesciunt, minima blanditiis unde libero eligendi magni natus voluptatum quisquam eveniet perferendis? Quos, nam. Molestias, eveniet! Distinctio?
61 | 		Tempore deleniti enim dolorem eos, eius beatae exercitationem eum accusamus ipsa officia accusantium provident, quidem repudiandae quae aut, magni nesciunt fugiat saepe porro! Optio temporibus quaerat magnam nostrum nulla alias?
62 | 		Labore ipsam, reprehenderit perspiciatis dolorum ad, dolores tenetur alias modi ea in, et aperiam dolor ut magni doloremque harum nostrum cupiditate sed. Ab sunt officia placeat totam nam nobis quidem.
63 | 	</p>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<link rel="stylesheet" href="style.css">
 7 | 	<title>Hermanos</title>
 8 | </head>
 9 | <body>
10 | 	<section id="adyacentes">
11 | 		<h1> Titulo </h1>
12 | 		<p>
13 | 			Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita deleniti impedit quia similique necessitatibus et labore sed enim est, fugit cum iste? Nemo corrupti harum placeat asperiores, dolor molestias temporibus?
14 | 			Earum assumenda itaque saepe nesciunt accusamus error id natus ab cum optio? Ut quae dignissimos et nesciunt praesentium? Ducimus exercitationem illo atque qui recusandae porro nesciunt ut obcaecati distinctio tenetur!
15 | 			Voluptatum distinctio facilis nostrum consectetur totam voluptate odit. Aut repellat molestias omnis, tempore necessitatibus facere obcaecati, dolorum enim, iste sit tempora exercitationem quis! Sed excepturi molestiae odit magnam, provident explicabo.
16 | 			Officiis delectus quidem animi tempora nostrum vel pariatur, itaque reprehenderit quia adipisci optio similique deleniti modi impedit sapiente earum. Voluptatem maxime commodi velit autem inventore suscipit dolorem molestiae labore animi.
17 | 			Sed aliquam minima culpa, eius dicta error voluptatem praesentium ratione nemo consequatur pariatur vitae, deserunt ad laborum dolore officia totam ut repellendus! Sapiente hic soluta fugiat saepe quo. Eius, quasi.
18 | 			Dolores unde corporis veritatis animi soluta voluptate velit magni quidem repellat perspiciatis iusto itaque a odit, laboriosam obcaecati odio autem molestias aperiam nostrum. Quas id aspernatur nisi adipisci aliquam? At.
19 | 		</p>
20 | 		<p>
21 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, libero alias. Nemo praesentium expedita debitis eaque accusantium cumque mollitia voluptatum nesciunt, doloremque, veritatis animi nobis sint exercitationem perspiciatis iusto in.
22 | 			Est suscipit eum fugit quam vero provident voluptatem facilis, voluptates accusamus! Tempore ut similique cupiditate accusantium in fuga recusandae neque inventore suscipit id rerum corrupti deleniti, culpa modi optio maxime.
23 | 			Nostrum esse provident commodi expedita repudiandae, debitis, aliquid laudantium laborum totam deleniti aspernatur quaerat velit dolore tempore voluptas, itaque delectus maxime! Ut architecto impedit sed id optio laborum blanditiis eaque?
24 | 		</p>
25 | 		<p>
26 | 			Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto incidunt impedit officia officiis est delectus eveniet, corporis dolor consectetur consequatur illo eos provident odit blanditiis vero! Accusamus adipisci expedita labore.
27 | 			Explicabo veniam quasi minus aperiam excepturi. Perspiciatis repellat ullam enim, sit tempore est sapiente voluptatem pariatur officia nostrum fugiat saepe deserunt voluptatum placeat praesentium quod voluptate reiciendis nulla dignissimos vero?
28 | 			Iure, voluptatum doloremque eum molestias deserunt necessitatibus assumenda enim deleniti ea eaque quis totam ipsa sed voluptates voluptatibus consequatur dolorum libero harum reprehenderit nostrum dolores quibusdam. Impedit ratione officia totam!
29 | 			Earum necessitatibus facere voluptatum rerum cumque ex tempora nam maiores ratione optio quidem tempore magni provident aperiam porro, ad ipsum sequi. Mollitia iure similique pariatur sit veniam rem eius obcaecati!
30 | 		</p>
31 | 		<p>
32 | 			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti voluptas autem veniam rem harum fugit repudiandae sequi, nemo, nam consequatur quos sapiente iste totam voluptates porro veritatis alias non quam.Ea quas incidunt ipsa velit nostrum. Rem officiis praesentium ea excepturi temporibus accusamus? Numquam omnis, et quisquam officiis enim perspiciatis eius vero, exercitationem doloremque voluptatibus atque sequi! Molestiae, porro enim.
33 | 		</p>
34 | 	</section>
35 | 	<section id="general">
36 | 		<h1> Titulo </h1>
37 | 		<p>
38 | 			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam ex, quaerat tenetur harum facere vero, inventore, id explicabo magnam quos illum ab ducimus molestias. Voluptatum enim obcaecati officiis eius quasi!
39 | 			Error beatae non repudiandae eligendi quo, dolore officia culpa nemo alias officiis ipsum eveniet atque. In, voluptatem, fugit illum dolorum minus velit quos accusantium, amet saepe mollitia nemo? Minima, laborum!
40 | 			Dolor voluptates corrupti adipisci accusamus delectus consectetur reprehenderit atque temporibus. Voluptatum dolorum aut odit ipsa ea quibusdam voluptate, vitae tempore odio et rem exercitationem quaerat, harum nisi, error mollitia facere!
41 | 			Reprehenderit molestiae sed quam fugit voluptates, optio voluptatibus beatae similique quis magnam. Debitis, reprehenderit neque. Minus dolor voluptatibus totam dolorem aperiam eius aut rerum repudiandae in. Saepe sapiente eaque ullam?
42 | 			Cupiditate officia, eos dolor quasi reprehenderit qui tempora veniam nemo necessitatibus iste laborum, deserunt odit nostrum ratione similique fugit impedit aliquam quis eveniet laboriosam sequi, minus dolorum quidem asperiores. Tenetur!
43 | 			Ipsum ut voluptatum ex perferendis fuga obcaecati tenetur dolorum est. Nulla, fuga. Ex veniam incidunt doloremque veritatis blanditiis quas, mollitia quis amet id ea. Similique cumque id atque laboriosam voluptate?
44 | 			Repellendus harum aperiam nulla eos velit ratione mollitia, incidunt enim, exercitationem ad quam tempora corrupti quo voluptatibus. Assumenda, nam odit. Odio voluptatem ratione quos eligendi excepturi sed quas, quia ea.
45 | 			Magnam sed fugiat nisi corporis sint voluptatum earum, dolores consequuntur animi obcaecati temporibus soluta beatae consectetur reiciendis tempore quasi omnis deserunt nostrum delectus nulla, placeat nihil neque. Vero, delectus fugiat?
46 | 			Aliquid, maxime. Voluptatibus, eos labore a amet omnis ratione accusantium, suscipit eligendi perferendis cumque exercitationem corrupti earum sunt quo, minima odio minus veniam autem illum soluta nesciunt assumenda? Veniam, ipsam?
47 | 			Doloribus eum fugiat necessitatibus possimus minus quia officiis nostrum eaque unde accusantium, at, fugit deleniti quo ut alias doloremque quaerat! Aliquam, consequatur ut? Maxime velit odio est repellat, ipsum impedit.
48 | 		</p>
49 | 		<p>
50 | 			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eum sunt alias illo ipsum possimus est vel, commodi enim quo voluptatum quod veniam vero quam. Distinctio enim adipisci autem accusantium?
51 | 			Aut dolores sed iste quasi fugit atque nostrum animi blanditiis itaque, culpa id maiores perspiciatis nemo facilis harum tempora sint nisi libero. Recusandae blanditiis labore veniam! Neque modi doloribus accusantium.
52 | 			Molestiae consequuntur quibusdam maxime nemo excepturi illo quod distinctio autem labore ipsam. Fugit, ex, illo fuga vel voluptatibus ducimus perspiciatis aliquid eos sint amet cumque repellendus dignissimos! Tenetur, voluptatum illum.
53 | 		</p>
54 | 		<p>
55 | 			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsum est eaque, veritatis dolorem vitae? Optio illo corrupti odio distinctio quod, eaque nisi similique illum facilis dolor velit necessitatibus! Placeat?Cupiditate tempora laborum, temporibus reprehenderit esse ipsum enim quidem adipisci molestiae sequi numquam modi corrupti dolore recusandae aliquid fugit voluptas unde corporis nesciunt alias eligendi natus aperiam. Odit, corporis aut.
56 | 		</p>
57 | 	</section>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/CSS/Ejemplo13/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 	<link rel="stylesheet" href="style.css">
  7 | 	<title>Landing page</title>
  8 | </head>
  9 | <body class="light">
 10 | 	<!-- Header pantalla completa -->
 11 | 	<header>
 12 | 		<div>
 13 | 			<h1> Mi biografía </h1>
 14 | 		</div>
 15 | 	</header>
 16 | 
 17 | 	<nav id="navbar">
 18 | 		<h2> Nombre Apellido </h2>
 19 | 		<ul>
 20 | 			<li><a href="#"> Link 1 </a></li>
 21 | 			<li><a href="#"> Link 2 </a></li>
 22 | 			<li><a href="#"> Link 3 </a></li>
 23 | 			<li><a href="#"> Link 4 </a></li>
 24 | 			<li><a href="#"> Link 5 </a></li>
 25 | 			<li><a href="#"> Link 6 </a></li>
 26 | 		</ul>
 27 | 	</nav>
 28 | 
 29 | 	<main>
 30 | 		<section>
 31 | 			<h3> Titulo </h3>
 32 | 			
 33 | 			<p>
 34 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
 35 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
 36 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
 37 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
 38 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
 39 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
 40 | 			</p>
 41 | 			<p>
 42 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
 43 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
 44 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
 45 | 			</p>
 46 | 			<p>
 47 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
 48 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
 49 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
 50 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
 51 | 			</p>
 52 | 		</section>
 53 | 
 54 | 		<section>
 55 | 			<h3> Titulo </h3>
 56 | 			
 57 | 			<p>
 58 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
 59 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
 60 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
 61 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
 62 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
 63 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
 64 | 			</p>
 65 | 			<p>
 66 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
 67 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
 68 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
 69 | 			</p>
 70 | 			<p>
 71 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
 72 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
 73 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
 74 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
 75 | 			</p>
 76 | 		</section>
 77 | 
 78 | 		<section>
 79 | 			<h3> Titulo </h3>
 80 | 			
 81 | 			<p>
 82 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
 83 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
 84 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
 85 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
 86 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
 87 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
 88 | 			</p>
 89 | 			<p>
 90 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
 91 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
 92 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
 93 | 			</p>
 94 | 			<p>
 95 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
 96 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
 97 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
 98 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
 99 | 			</p>
100 | 		</section>
101 | 
102 | 		<section>
103 | 			<h3> Titulo </h3>
104 | 			
105 | 			<p>
106 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
107 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
108 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
109 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
110 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
111 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
112 | 			</p>
113 | 			<p>
114 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
115 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
116 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
117 | 			</p>
118 | 			<p>
119 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
120 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
121 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
122 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
123 | 			</p>
124 | 		</section>
125 | 
126 | 		<section>
127 | 			<h3> Titulo </h3>
128 | 			
129 | 			<p>
130 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
131 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
132 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
133 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
134 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
135 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
136 | 			</p>
137 | 			<p>
138 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
139 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
140 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
141 | 			</p>
142 | 			<p>
143 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
144 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
145 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
146 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
147 | 			</p>
148 | 		</section>
149 | 
150 | 		<section>
151 | 			<h3> Titulo </h3>
152 | 			
153 | 			<p>
154 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
155 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
156 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
157 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
158 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
159 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
160 | 			</p>
161 | 			<p>
162 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
163 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
164 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
165 | 			</p>
166 | 			<p>
167 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
168 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
169 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
170 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
171 | 			</p>
172 | 		</section>
173 | 	</main>
174 | 
175 | 	<footer>
176 | 		<p> Recuerden suscribirse al canal del CEII </p>
177 | 	</footer>
178 | </body>
179 | </html>


--------------------------------------------------------------------------------
/JS/Ejemplo1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 	<link rel="stylesheet" href="style.css">
  7 | 	<title>Landing page</title>
  8 | </head>
  9 | <body class="light">
 10 | 	<!-- Header pantalla completa -->
 11 | 	<header>
 12 | 		<div>
 13 | 			<h1> Mi biografía </h1>
 14 | 		</div>
 15 | 	</header>
 16 | 
 17 | 	<button id="switch-theme">
 18 | 		*
 19 | 	</button>
 20 | 
 21 | 	<nav id="navbar">
 22 | 		<h2> Nombre Apellido </h2>
 23 | 		<ul>
 24 | 			<li><a href="#"> Link 1 </a></li>
 25 | 			<li><a href="#"> Link 2 </a></li>
 26 | 			<li><a href="#"> Link 3 </a></li>
 27 | 			<li><a href="#"> Link 4 </a></li>
 28 | 			<li><a href="#"> Link 5 </a></li>
 29 | 			<li><a href="#"> Link 6 </a></li>
 30 | 		</ul>
 31 | 	</nav>
 32 | 	<main>
 33 | 		<section>
 34 | 			<h3> Titulo </h3>
 35 | 			
 36 | 			<p>
 37 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
 38 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
 39 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
 40 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
 41 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
 42 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
 43 | 			</p>
 44 | 			<p>
 45 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
 46 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
 47 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
 48 | 			</p>
 49 | 			<p>
 50 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
 51 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
 52 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
 53 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
 54 | 			</p>
 55 | 		</section>
 56 | 
 57 | 		<section>
 58 | 			<h3> Titulo </h3>
 59 | 			
 60 | 			<p>
 61 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
 62 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
 63 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
 64 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
 65 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
 66 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
 67 | 			</p>
 68 | 			<p>
 69 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
 70 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
 71 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
 72 | 			</p>
 73 | 			<p>
 74 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
 75 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
 76 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
 77 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
 78 | 			</p>
 79 | 		</section>
 80 | 
 81 | 		<section>
 82 | 			<h3> Titulo </h3>
 83 | 			
 84 | 			<p>
 85 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
 86 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
 87 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
 88 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
 89 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
 90 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
 91 | 			</p>
 92 | 			<p>
 93 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
 94 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
 95 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
 96 | 			</p>
 97 | 			<p>
 98 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
 99 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
100 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
101 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
102 | 			</p>
103 | 		</section>
104 | 
105 | 		<section>
106 | 			<h3> Titulo </h3>
107 | 			
108 | 			<p>
109 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
110 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
111 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
112 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
113 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
114 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
115 | 			</p>
116 | 			<p>
117 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
118 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
119 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
120 | 			</p>
121 | 			<p>
122 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
123 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
124 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
125 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
126 | 			</p>
127 | 		</section>
128 | 
129 | 		<section>
130 | 			<h3> Titulo </h3>
131 | 			
132 | 			<p>
133 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
134 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
135 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
136 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
137 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
138 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
139 | 			</p>
140 | 			<p>
141 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
142 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
143 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
144 | 			</p>
145 | 			<p>
146 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
147 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
148 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
149 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
150 | 			</p>
151 | 		</section>
152 | 
153 | 		<section>
154 | 			<h3> Titulo </h3>
155 | 			
156 | 			<p>
157 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus aperiam, reiciendis natus temporibus tempore eaque consequuntur itaque ducimus enim exercitationem! Quas, hic quasi repudiandae debitis quos distinctio reiciendis similique omnis.
158 | 				Voluptatem illo ullam, facilis ipsum rerum ratione reiciendis perspiciatis earum repellendus aperiam in dolore laboriosam omnis. Minus, atque quia velit eius ab laborum adipisci rerum eum aspernatur? Doloribus, magni aspernatur.
159 | 				Mollitia similique maxime distinctio, dolore soluta laudantium vel ratione facere assumenda rem aperiam, saepe cumque doloribus perferendis eum qui perspiciatis cum officia odio! Nihil, accusantium ullam? Dolorem delectus iste odio?
160 | 				Id eos veritatis corporis ratione odio nesciunt accusantium cupiditate. Alias quod officiis in quis, esse atque possimus facere hic reiciendis exercitationem quaerat, dolores rem. Qui cumque voluptates odio sed sunt.
161 | 				Magnam necessitatibus quod sunt sapiente impedit iste tempora ex voluptas at, ea unde ducimus totam laboriosam dignissimos inventore molestias aspernatur nostrum nam. Expedita iusto modi, quaerat assumenda vero eos provident!
162 | 				Culpa et, adipisci explicabo velit, placeat deserunt quo voluptas autem harum tempora, perferendis nemo repellat vitae iste eaque tenetur. Eligendi facilis reiciendis necessitatibus atque illum explicabo laboriosam, aliquid dicta placeat!
163 | 			</p>
164 | 			<p>
165 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus deleniti, inventore fuga provident quidem enim id asperiores soluta quaerat harum illum amet natus repudiandae, labore voluptates ipsam, deserunt architecto.
166 | 				Tempora esse at sint sunt blanditiis voluptatem excepturi unde voluptate, magnam adipisci? Aliquid placeat porro quidem est exercitationem omnis dolorum distinctio, veniam quo optio quam mollitia. Dicta qui dolores autem?
167 | 				Aut sed ratione sit vel excepturi? Corporis quaerat saepe ut qui. Repellendus earum vel consequuntur minima nam, necessitatibus blanditiis nostrum incidunt, ipsum porro excepturi aut, veritatis alias ex harum ad!
168 | 			</p>
169 | 			<p>
170 | 				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ut rerum accusamus incidunt, officia, quidem aperiam nesciunt culpa repudiandae, recusandae pariatur aliquam enim repellat nihil illum saepe quam perspiciatis facere.
171 | 				Perspiciatis voluptate accusantium ducimus, at, a aliquid placeat aperiam in asperiores labore ratione laboriosam error sequi cupiditate, eius dicta iure ipsum dolore rerum modi totam obcaecati consectetur. Iure, odio nobis.
172 | 				Fugit quaerat sapiente natus velit, ipsam facere possimus provident consectetur eveniet, maiores tempora maxime sed amet voluptas id consequuntur quo nulla beatae ducimus necessitatibus quasi sunt accusamus? Molestiae, voluptatem deserunt.
173 | 				Quisquam quidem eveniet unde dolorum nulla veritatis cum illum tempora ipsa placeat officiis autem minus accusantium, dolore quas enim repellat alias sed velit delectus! Quia earum facilis repellendus quam ex?
174 | 			</p>
175 | 		</section>
176 | 	</main>
177 | 
178 | 	<footer>
179 | 		<p> Recuerden suscribirse al canal del CEII </p>
180 | 	</footer>
181 | 
182 | 	<script src="main.js"></script>
183 | </body>
184 | </html>


--------------------------------------------------------------------------------
/HTML/Ejemplo6/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 	<title>Anclas</title>
  7 | </head>
  8 | <body>
  9 | 	<h1>
 10 | 		5G: Causante del Coronavirus 
 11 | 	</h1>
 12 | 
 13 | 	<h2>
 14 | 		Tabla de contenido
 15 | 	</h2>
 16 | 	<ol>
 17 | 		<li><a href="#MOC">¿Mentira o Conspiraci&oacute;n?</a></li>
 18 | 		<li><a href="#pruebas">Pruebas</a></li>
 19 | 		<li><a href="#DDG">Desinformacion de los gobiernos</a></li>
 20 | 	</ol>
 21 | 
 22 | 	<h2 id="MOC">
 23 | 		¿Mentira o Conspiraci&oacute;n?
 24 | 	</h2>
 25 | 
 26 | 	<p>
 27 | 		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad ducimus quia magnam rem incidunt voluptates fuga sint eum, aliquam temporibus minus iure alias eos dolorum <strong>doloribus</strong> <em>reprehenderit</em> veniam maxime unde!
 28 | 	</p>
 29 | 
 30 | 	<p>
 31 | 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quis quaerat dolor repellat itaque, nulla atque ipsam, distinctio iusto eum culpa, aspernatur vel. Non officiis, cupiditate autem eaque magnam dicta.
 32 | 	</p>
 33 | 
 34 | 	<p>
 35 | 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, beatae atque. Quis earum, labore culpa nam quae libero nesciunt possimus id harum eaque minus sint ad quos obcaecati quam ea!
 36 | 	</p>
 37 | 
 38 | 	<p>
 39 | 		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet exercitationem ipsa animi. Reiciendis ducimus sunt consequuntur maxime quisquam soluta ex deserunt amet. Esse repellat quam suscipit corporis? Alias, officia recusandae!
 40 | 		Odit quis voluptatibus minima id totam eum doloribus quia, reprehenderit tempora praesentium, numquam incidunt harum perspiciatis quibusdam quod veritatis debitis, ad ut suscipit! Architecto suscipit, cum vero quaerat consequuntur reiciendis.
 41 | 		Nostrum quod esse porro impedit vero iusto saepe, expedita culpa rem optio ex doloribus, eveniet quos dolorem explicabo tempora accusantium! Saepe consequuntur voluptates a libero maxime deserunt dolores corrupti doloribus.
 42 | 	</p>
 43 | 	<p>
 44 | 		Error molestias laboriosam amet? In quam voluptatem quas! Consectetur ipsam error et porro dignissimos commodi repudiandae. Modi labore, quas quisquam suscipit ratione aliquam asperiores iste consequuntur quod earum inventore cum.
 45 | 		Autem id incidunt qui aliquam aliquid dolorem molestias fugiat corrupti, reiciendis aut maxime non quos explicabo doloribus ex nemo animi! Quis excepturi ut recusandae dolorem quas cupiditate! Adipisci, delectus earum!
 46 | 		Perspiciatis voluptatum, aspernatur reiciendis in soluta magnam ipsum maiores ab ipsam culpa, reprehenderit ducimus dolorem sit. Nam magnam pariatur temporibus asperiores id deleniti laboriosam numquam nisi nostrum totam, magni perspiciatis?
 47 | 	</p>
 48 | 	<p>
 49 | 		Deserunt neque molestiae minima? Cupiditate nemo voluptas pariatur beatae esse quibusdam veritatis, dolore voluptates molestias error aut modi? Sit dolorum blanditiis libero amet praesentium consequuntur cumque eum aspernatur labore fugiat!
 50 | 		Molestias repudiandae iste odio vel natus quas sed sunt, cum nihil consequuntur sequi similique voluptatum voluptates esse nulla. Totam nemo quos unde veritatis nostrum quis vel ipsam quam omnis laborum.
 51 | 		Sed, qui ipsam cum ea eius libero ratione sapiente, magnam assumenda consequuntur magni consectetur, numquam tenetur doloribus. Beatae, illum eius ullam ut porro, nulla repellendus blanditiis facilis, molestias temporibus iusto?
 52 | 	</p>
 53 | 	<p>
 54 | 		Error, nobis modi. Doloribus perspiciatis maiores nostrum aliquid obcaecati, eaque deleniti eius quasi pariatur excepturi illo ea saepe sapiente ullam numquam dolorem nulla ipsum, rem provident totam. Laborum, fugiat sapiente.
 55 | 		Maiores nisi delectus illo exercitationem eius molestias voluptates ad harum voluptatum a assumenda esse voluptatibus eos totam iusto numquam facere eveniet velit, doloremque deleniti nesciunt illum? Repellat dignissimos earum velit.
 56 | 		Voluptatum a placeat laborum impedit, dolorum quae, ea dolores tenetur maxime esse temporibus, quas perspiciatis magnam dolorem natus. Reprehenderit unde dignissimos, totam nobis illum consequatur similique saepe quia aliquam magnam.
 57 | 	</p>
 58 | 	<p>
 59 | 		Nobis est quae tempore dicta deleniti. Saepe debitis consectetur odio blanditiis quod deleniti quisquam harum reiciendis numquam possimus a delectus dignissimos distinctio facilis hic sint eum vitae natus, aliquam atque.
 60 | 		Optio, praesentium eaque incidunt perspiciatis at delectus distinctio, doloremque architecto laudantium temporibus consectetur fugiat minima numquam fugit! Ab, pariatur ratione. Atque vitae similique aspernatur, magnam totam iste debitis deleniti. Voluptatibus!
 61 | 		Aspernatur cupiditate quis, ullam tempore inventore nam saepe incidunt esse eum! Numquam voluptates laudantium modi incidunt nihil sed quo officiis odit aperiam mollitia? Voluptate praesentium ullam mollitia, distinctio saepe quas.
 62 | 	</p>
 63 | 	<p>
 64 | 		Aperiam nihil est commodi alias excepturi iure at impedit amet modi quia eaque, quidem nulla eum laudantium temporibus eos dolorum sit quae repudiandae harum explicabo tempore aut fugit hic. Aperiam!
 65 | 		Dolor repellendus nihil sed, placeat ea voluptatem molestias ullam nostrum mollitia iure quisquam sit! Ipsa vel nostrum nemo corporis, dolore enim ad eius tenetur reiciendis nesciunt perferendis modi quod laboriosam.
 66 | 		Soluta commodi deleniti consequatur sint! Ipsa porro dolorum assumenda aspernatur, odit repellendus! Labore esse velit veritatis nisi ex repellat. Recusandae iure dignissimos consequatur deleniti aliquam blanditiis consectetur deserunt in magnam?
 67 | 	</p>
 68 | 
 69 | 	<h2 id="pruebas">
 70 | 		Pruebas
 71 | 	</h2>
 72 | 
 73 | 	<p>
 74 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti sequi, ullam repudiandae rerum aspernatur necessitatibus, libero dolores commodi, suscipit dolore eos alias. Maxime provident culpa voluptates quod numquam quidem harum.
 75 | 	</p>
 76 | 
 77 | 	<p>
 78 | 		Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate exercitationem illo dignissimos deleniti dolorem fugit reprehenderit accusamus? Non eligendi nam, architecto laudantium inventore unde adipisci, deleniti ipsa impedit doloremque doloribus.
 79 | 	</p>
 80 | 	<p>
 81 | 		Iusto, quos quaerat! Repellat totam fugiat obcaecati consectetur at neque et aspernatur quo beatae itaque sint eius asperiores enim facere sit, dolorum blanditiis. Quidem ea assumenda eum! Excepturi, saepe praesentium.
 82 | 	</p>
 83 | 	<p>
 84 | 		Dolor distinctio, quidem atque obcaecati minus ex repellat libero unde esse facilis eligendi officia autem nostrum itaque nobis tempora provident maxime reiciendis non debitis. Aperiam, voluptates eos. Eos, harum velit?
 85 | 	</p>
 86 | 	<p>
 87 | 		Voluptatum eius laborum doloremque, recusandae, dolore eaque deleniti neque explicabo magnam tempora reiciendis quae nam animi, ipsam alias. Recusandae praesentium voluptate repudiandae deleniti natus voluptas fugit dolore rerum quaerat consectetur.
 88 | 	</p>
 89 | 	<p>
 90 | 		Quos fugit ex repellat esse quidem doloremque optio soluta non possimus porro, aliquid tempora alias ipsa, accusantium quis, ad voluptas at dignissimos molestias. Ut expedita neque necessitatibus ex recusandae aspernatur.
 91 | 	</p>
 92 | 	<p>
 93 | 		Aspernatur libero maxime enim dolor reiciendis dicta rem saepe quisquam voluptatibus, odio itaque illo deleniti eum quam voluptates odit nisi amet eaque nam eligendi facere aliquid. Earum architecto accusantium inventore!
 94 | 	</p>
 95 | 
 96 | 	<p>
 97 | 		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi nostrum nulla facere cum quam commodi reprehenderit blanditiis atque aperiam, fugiat obcaecati amet, quia doloribus sapiente, doloremque adipisci ducimus eos. Dolor!
 98 | 	</p>
 99 | 	<p>
100 | 		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet exercitationem ipsa animi. Reiciendis ducimus sunt consequuntur maxime quisquam soluta ex deserunt amet. Esse repellat quam suscipit corporis? Alias, officia recusandae!
101 | 		Odit quis voluptatibus minima id totam eum doloribus quia, reprehenderit tempora praesentium, numquam incidunt harum perspiciatis quibusdam quod veritatis debitis, ad ut suscipit! Architecto suscipit, cum vero quaerat consequuntur reiciendis.
102 | 		Nostrum quod esse porro impedit vero iusto saepe, expedita culpa rem optio ex doloribus, eveniet quos dolorem explicabo tempora accusantium! Saepe consequuntur voluptates a libero maxime deserunt dolores corrupti doloribus.
103 | 	</p>
104 | 	<p>
105 | 		Error molestias laboriosam amet? In quam voluptatem quas! Consectetur ipsam error et porro dignissimos commodi repudiandae. Modi labore, quas quisquam suscipit ratione aliquam asperiores iste consequuntur quod earum inventore cum.
106 | 		Autem id incidunt qui aliquam aliquid dolorem molestias fugiat corrupti, reiciendis aut maxime non quos explicabo doloribus ex nemo animi! Quis excepturi ut recusandae dolorem quas cupiditate! Adipisci, delectus earum!
107 | 		Perspiciatis voluptatum, aspernatur reiciendis in soluta magnam ipsum maiores ab ipsam culpa, reprehenderit ducimus dolorem sit. Nam magnam pariatur temporibus asperiores id deleniti laboriosam numquam nisi nostrum totam, magni perspiciatis?
108 | 	</p>
109 | 	<p>
110 | 		Deserunt neque molestiae minima? Cupiditate nemo voluptas pariatur beatae esse quibusdam veritatis, dolore voluptates molestias error aut modi? Sit dolorum blanditiis libero amet praesentium consequuntur cumque eum aspernatur labore fugiat!
111 | 		Molestias repudiandae iste odio vel natus quas sed sunt, cum nihil consequuntur sequi similique voluptatum voluptates esse nulla. Totam nemo quos unde veritatis nostrum quis vel ipsam quam omnis laborum.
112 | 		Sed, qui ipsam cum ea eius libero ratione sapiente, magnam assumenda consequuntur magni consectetur, numquam tenetur doloribus. Beatae, illum eius ullam ut porro, nulla repellendus blanditiis facilis, molestias temporibus iusto?
113 | 	</p>
114 | 	<p>
115 | 		Error, nobis modi. Doloribus perspiciatis maiores nostrum aliquid obcaecati, eaque deleniti eius quasi pariatur excepturi illo ea saepe sapiente ullam numquam dolorem nulla ipsum, rem provident totam. Laborum, fugiat sapiente.
116 | 		Maiores nisi delectus illo exercitationem eius molestias voluptates ad harum voluptatum a assumenda esse voluptatibus eos totam iusto numquam facere eveniet velit, doloremque deleniti nesciunt illum? Repellat dignissimos earum velit.
117 | 		Voluptatum a placeat laborum impedit, dolorum quae, ea dolores tenetur maxime esse temporibus, quas perspiciatis magnam dolorem natus. Reprehenderit unde dignissimos, totam nobis illum consequatur similique saepe quia aliquam magnam.
118 | 	</p>
119 | 	<p>
120 | 		Nobis est quae tempore dicta deleniti. Saepe debitis consectetur odio blanditiis quod deleniti quisquam harum reiciendis numquam possimus a delectus dignissimos distinctio facilis hic sint eum vitae natus, aliquam atque.
121 | 		Optio, praesentium eaque incidunt perspiciatis at delectus distinctio, doloremque architecto laudantium temporibus consectetur fugiat minima numquam fugit! Ab, pariatur ratione. Atque vitae similique aspernatur, magnam totam iste debitis deleniti. Voluptatibus!
122 | 		Aspernatur cupiditate quis, ullam tempore inventore nam saepe incidunt esse eum! Numquam voluptates laudantium modi incidunt nihil sed quo officiis odit aperiam mollitia? Voluptate praesentium ullam mollitia, distinctio saepe quas.
123 | 	</p>
124 | 	<p>
125 | 		Aperiam nihil est commodi alias excepturi iure at impedit amet modi quia eaque, quidem nulla eum laudantium temporibus eos dolorum sit quae repudiandae harum explicabo tempore aut fugit hic. Aperiam!
126 | 		Dolor repellendus nihil sed, placeat ea voluptatem molestias ullam nostrum mollitia iure quisquam sit! Ipsa vel nostrum nemo corporis, dolore enim ad eius tenetur reiciendis nesciunt perferendis modi quod laboriosam.
127 | 		Soluta commodi deleniti consequatur sint! Ipsa porro dolorum assumenda aspernatur, odit repellendus! Labore esse velit veritatis nisi ex repellat. Recusandae iure dignissimos consequatur deleniti aliquam blanditiis consectetur deserunt in magnam?
128 | 	</p>
129 | 
130 | 	<h2 id="DDG">
131 | 		Desinformación de los gobiernos
132 | 	</h2>
133 | 
134 | 	<p>
135 | 		Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum iste totam delectus quod reprehenderit iusto commodi eius? Fuga dolor beatae vitae facilis asperiores neque, sed corporis ut, nostrum suscipit reprehenderit.
136 | 	</p>
137 | 	<p>
138 | 		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet exercitationem ipsa animi. Reiciendis ducimus sunt consequuntur maxime quisquam soluta ex deserunt amet. Esse repellat quam suscipit corporis? Alias, officia recusandae!
139 | 		Odit quis voluptatibus minima id totam eum doloribus quia, reprehenderit tempora praesentium, numquam incidunt harum perspiciatis quibusdam quod veritatis debitis, ad ut suscipit! Architecto suscipit, cum vero quaerat consequuntur reiciendis.
140 | 		Nostrum quod esse porro impedit vero iusto saepe, expedita culpa rem optio ex doloribus, eveniet quos dolorem explicabo tempora accusantium! Saepe consequuntur voluptates a libero maxime deserunt dolores corrupti doloribus.
141 | 	</p>
142 | 	<p>
143 | 		Error molestias laboriosam amet? In quam voluptatem quas! Consectetur ipsam error et porro dignissimos commodi repudiandae. Modi labore, quas quisquam suscipit ratione aliquam asperiores iste consequuntur quod earum inventore cum.
144 | 		Autem id incidunt qui aliquam aliquid dolorem molestias fugiat corrupti, reiciendis aut maxime non quos explicabo doloribus ex nemo animi! Quis excepturi ut recusandae dolorem quas cupiditate! Adipisci, delectus earum!
145 | 		Perspiciatis voluptatum, aspernatur reiciendis in soluta magnam ipsum maiores ab ipsam culpa, reprehenderit ducimus dolorem sit. Nam magnam pariatur temporibus asperiores id deleniti laboriosam numquam nisi nostrum totam, magni perspiciatis?
146 | 	</p>
147 | 	<p>
148 | 		Deserunt neque molestiae minima? Cupiditate nemo voluptas pariatur beatae esse quibusdam veritatis, dolore voluptates molestias error aut modi? Sit dolorum blanditiis libero amet praesentium consequuntur cumque eum aspernatur labore fugiat!
149 | 		Molestias repudiandae iste odio vel natus quas sed sunt, cum nihil consequuntur sequi similique voluptatum voluptates esse nulla. Totam nemo quos unde veritatis nostrum quis vel ipsam quam omnis laborum.
150 | 		Sed, qui ipsam cum ea eius libero ratione sapiente, magnam assumenda consequuntur magni consectetur, numquam tenetur doloribus. Beatae, illum eius ullam ut porro, nulla repellendus blanditiis facilis, molestias temporibus iusto?
151 | 	</p>
152 | 	<p>
153 | 		Error, nobis modi. Doloribus perspiciatis maiores nostrum aliquid obcaecati, eaque deleniti eius quasi pariatur excepturi illo ea saepe sapiente ullam numquam dolorem nulla ipsum, rem provident totam. Laborum, fugiat sapiente.
154 | 		Maiores nisi delectus illo exercitationem eius molestias voluptates ad harum voluptatum a assumenda esse voluptatibus eos totam iusto numquam facere eveniet velit, doloremque deleniti nesciunt illum? Repellat dignissimos earum velit.
155 | 		Voluptatum a placeat laborum impedit, dolorum quae, ea dolores tenetur maxime esse temporibus, quas perspiciatis magnam dolorem natus. Reprehenderit unde dignissimos, totam nobis illum consequatur similique saepe quia aliquam magnam.
156 | 	</p>
157 | 	<p>
158 | 		Nobis est quae tempore dicta deleniti. Saepe debitis consectetur odio blanditiis quod deleniti quisquam harum reiciendis numquam possimus a delectus dignissimos distinctio facilis hic sint eum vitae natus, aliquam atque.
159 | 		Optio, praesentium eaque incidunt perspiciatis at delectus distinctio, doloremque architecto laudantium temporibus consectetur fugiat minima numquam fugit! Ab, pariatur ratione. Atque vitae similique aspernatur, magnam totam iste debitis deleniti. Voluptatibus!
160 | 		Aspernatur cupiditate quis, ullam tempore inventore nam saepe incidunt esse eum! Numquam voluptates laudantium modi incidunt nihil sed quo officiis odit aperiam mollitia? Voluptate praesentium ullam mollitia, distinctio saepe quas.
161 | 	</p>
162 | 	<p>
163 | 		Aperiam nihil est commodi alias excepturi iure at impedit amet modi quia eaque, quidem nulla eum laudantium temporibus eos dolorum sit quae repudiandae harum explicabo tempore aut fugit hic. Aperiam!
164 | 		Dolor repellendus nihil sed, placeat ea voluptatem molestias ullam nostrum mollitia iure quisquam sit! Ipsa vel nostrum nemo corporis, dolore enim ad eius tenetur reiciendis nesciunt perferendis modi quod laboriosam.
165 | 		Soluta commodi deleniti consequatur sint! Ipsa porro dolorum assumenda aspernatur, odit repellendus! Labore esse velit veritatis nisi ex repellat. Recusandae iure dignissimos consequatur deleniti aliquam blanditiis consectetur deserunt in magnam?
166 | 	</p>
167 | 	<p>
168 | 		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet exercitationem ipsa animi. Reiciendis ducimus sunt consequuntur maxime quisquam soluta ex deserunt amet. Esse repellat quam suscipit corporis? Alias, officia recusandae!
169 | 		Odit quis voluptatibus minima id totam eum doloribus quia, reprehenderit tempora praesentium, numquam incidunt harum perspiciatis quibusdam quod veritatis debitis, ad ut suscipit! Architecto suscipit, cum vero quaerat consequuntur reiciendis.
170 | 		Nostrum quod esse porro impedit vero iusto saepe, expedita culpa rem optio ex doloribus, eveniet quos dolorem explicabo tempora accusantium! Saepe consequuntur voluptates a libero maxime deserunt dolores corrupti doloribus.
171 | 	</p>
172 | 	<p>
173 | 		Error molestias laboriosam amet? In quam voluptatem quas! Consectetur ipsam error et porro dignissimos commodi repudiandae. Modi labore, quas quisquam suscipit ratione aliquam asperiores iste consequuntur quod earum inventore cum.
174 | 		Autem id incidunt qui aliquam aliquid dolorem molestias fugiat corrupti, reiciendis aut maxime non quos explicabo doloribus ex nemo animi! Quis excepturi ut recusandae dolorem quas cupiditate! Adipisci, delectus earum!
175 | 		Perspiciatis voluptatum, aspernatur reiciendis in soluta magnam ipsum maiores ab ipsam culpa, reprehenderit ducimus dolorem sit. Nam magnam pariatur temporibus asperiores id deleniti laboriosam numquam nisi nostrum totam, magni perspiciatis?
176 | 	</p>
177 | 	<p>
178 | 		Deserunt neque molestiae minima? Cupiditate nemo voluptas pariatur beatae esse quibusdam veritatis, dolore voluptates molestias error aut modi? Sit dolorum blanditiis libero amet praesentium consequuntur cumque eum aspernatur labore fugiat!
179 | 		Molestias repudiandae iste odio vel natus quas sed sunt, cum nihil consequuntur sequi similique voluptatum voluptates esse nulla. Totam nemo quos unde veritatis nostrum quis vel ipsam quam omnis laborum.
180 | 		Sed, qui ipsam cum ea eius libero ratione sapiente, magnam assumenda consequuntur magni consectetur, numquam tenetur doloribus. Beatae, illum eius ullam ut porro, nulla repellendus blanditiis facilis, molestias temporibus iusto?
181 | 	</p>
182 | 	<p>
183 | 		Error, nobis modi. Doloribus perspiciatis maiores nostrum aliquid obcaecati, eaque deleniti eius quasi pariatur excepturi illo ea saepe sapiente ullam numquam dolorem nulla ipsum, rem provident totam. Laborum, fugiat sapiente.
184 | 		Maiores nisi delectus illo exercitationem eius molestias voluptates ad harum voluptatum a assumenda esse voluptatibus eos totam iusto numquam facere eveniet velit, doloremque deleniti nesciunt illum? Repellat dignissimos earum velit.
185 | 		Voluptatum a placeat laborum impedit, dolorum quae, ea dolores tenetur maxime esse temporibus, quas perspiciatis magnam dolorem natus. Reprehenderit unde dignissimos, totam nobis illum consequatur similique saepe quia aliquam magnam.
186 | 	</p>
187 | 	<p>
188 | 		Nobis est quae tempore dicta deleniti. Saepe debitis consectetur odio blanditiis quod deleniti quisquam harum reiciendis numquam possimus a delectus dignissimos distinctio facilis hic sint eum vitae natus, aliquam atque.
189 | 		Optio, praesentium eaque incidunt perspiciatis at delectus distinctio, doloremque architecto laudantium temporibus consectetur fugiat minima numquam fugit! Ab, pariatur ratione. Atque vitae similique aspernatur, magnam totam iste debitis deleniti. Voluptatibus!
190 | 		Aspernatur cupiditate quis, ullam tempore inventore nam saepe incidunt esse eum! Numquam voluptates laudantium modi incidunt nihil sed quo officiis odit aperiam mollitia? Voluptate praesentium ullam mollitia, distinctio saepe quas.
191 | 	</p>
192 | 	<p>
193 | 		Aperiam nihil est commodi alias excepturi iure at impedit amet modi quia eaque, quidem nulla eum laudantium temporibus eos dolorum sit quae repudiandae harum explicabo tempore aut fugit hic. Aperiam!
194 | 		Dolor repellendus nihil sed, placeat ea voluptatem molestias ullam nostrum mollitia iure quisquam sit! Ipsa vel nostrum nemo corporis, dolore enim ad eius tenetur reiciendis nesciunt perferendis modi quod laboriosam.
195 | 		Soluta commodi deleniti consequatur sint! Ipsa porro dolorum assumenda aspernatur, odit repellendus! Labore esse velit veritatis nisi ex repellat. Recusandae iure dignissimos consequatur deleniti aliquam blanditiis consectetur deserunt in magnam?
196 | 	</p>
197 | 
198 | 	
199 | </body>
200 | </html>


--------------------------------------------------------------------------------