-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (134 loc) · 8.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />
<title>Introducción a la programación para el Diseño de interacción 🏗</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script>
var favoritismo = [
{ lugar: 1, nombre: "Nivel e adiccion", motivo: "ta weno el juegazo", valor:100 },
{ lugar: 2, nombre: "Hacer cualquiero otra cosa que no sea jugar", motivo: "pa que po si la vida es una" , valor:0 },
];
function setup() {
createCanvas(windowWidth, windowHeight).position(0, 0).style("z-index", -1).style("position", "fixed");
tabla();
}
function draw() {
colorMode(HSB, 360, 100, 100);
background(map(mouseX, 0, width, 360, 120), 50, 75);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function tabla() {
favoritismo.forEach(function (e) {
createElement('tr', '<th scope="row">' + e.lugar + '</th><td>' + e.nombre + '</td><td>' + e.motivo + '</td><td><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+e.valor+'%;" aria-valuenow="'+e.valor+'" aria-valuemin="0" aria-valuemax="100">'+e.valor+'%</div></div></td>').parent("pongale");
});
}
</script>
</head>
<body class="bg-dark">
<header class="container">
<div class="row">
<div class="col text-start"><h1 class="fs-4 pt-5 text-white">Estoy sumamente adicto</h1></div>
<div class="col text-end"><h2 class="fs-5 pt-5 text-white-50">al new world</h2></div>
</div>
</header>
<aside class="container">
<div class="row py-5">
<div class="col-sm-6 col-lg-3">
<a target="_blank" href="https://cannesprlions.com/en/lionsnews/new-uses/" rel="noopener noreferrer">
<img src="images/new-uses.jpg" class="shadow img-fluid" />
</a>
</div>
<div class="col-sm-6 col-lg-3">
<a target="_blank" href="https://cannesprlions.com/en/lionsnews/human-power/" rel="noopener noreferrer">
<img src="images/human-power.jpg" class="shadow img-fluid" />
</a>
</div>
<div class="col-sm-6 col-lg-3">
<a target="_blank" href="https://cannesprlions.com/en/lionsnews/community/" rel="noopener noreferrer">
<img src="images/community.jpg" class="shadow img-fluid" />
</a>
</div>
<div class="col-sm-6 col-lg-3">
<a target="_blank" href="https://cannesprlions.com/en/lionsnews/mismatches/" rel="noopener noreferrer">
<img src="images/mismatches.jpg" class="shadow img-fluid" />
</a>
</div>
</div>
</aside>
<main class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col-11 col-sm-10 col-md-9 mx-auto mt-5">
<p class="lead">
Esta semana no he parado de jugar un nuevo MMo
</p>
<p>
New World es el nuevo MMO que lanso amazon, a fnales de septiembre, lo descargue esta semana, digamos martes en la tarde y ya llevo siendo jueves 25 horas jugadas.
Practicamente un dia entero de la semana! y nisiquiera se ha terminado, el juego esta genial y tengo un grupo extenso de amigos con los que hacerlo juntos
espero jugar mas aun el fin de semana, pero eh postergado todos mis encargos asi que probablemnte los tenga que hacer todo el domingo a las 1 am.
por suerte el lunes es feriado
</p>
</div>
<div class="col-12 my-3">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/900/400?random=1.webp" class="d-block w-100" alt="Deberían describirla a quien no la pueda ver" />
</div>
<div class="carousel-item">
<img src="https://picsum.photos/900/400?random=2.webp" class="d-block w-100" alt="Deberían describirla a quien no la pueda ver" />
</div>
<div class="carousel-item">
<img src="https://picsum.photos/900/400?random=3.webp" class="d-block w-100" alt="Deberían describirla a quien no la pueda ver" />
</div>
<div class="carousel-item">
<img src="https://picsum.photos/900/400?random=4.webp" class="d-block w-100" alt="Deberían describirla a quien no la pueda ver" />
</div>
</div>
</div>
</div>
<div class="col-11 col-sm-10 col-md-9 mx-auto mt-3 mb-5">
<p>
El juego consiste como cualquier MMO en recolectar recursos y realizar objetivos en grupo siguiendo una historia que se desarrolla en el mundo en que viven tus personajes.
Honestamente la historia no peude importarme menos, solo quiero pasar un buen rato con mis amigos y practicar el pvp que esta bastante emocionante.
</p>
<div class="table-responsive my-3">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Asignatura</th>
<th scope="col">Motivo</th>
<th scope="col">Progress</th>
</tr>
</thead>
<tbody id="pongale"></tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<footer class="container">
<div class="row">
<div class="col pt-4 pb-2">
<!--reemplace los # por vínculo al repositorio o cuenta de GitHub correspondiente-->
<p class="text-white small d-flex justify-content-between align-items-center"><a href="https://github.com/Toomanypanchos" class="link-light">Francisco Cabrera</a> <a href="#" class="link-light">AUD5V0010</a></p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>