a ver si lo ponemos al lado
[josuexyz/.git] / views / plantilla.ejs
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   <meta http-equiv="X-UA-Compatible" content="ie=edge">
7   <link rel='stylesheet' href='/stylesheets/style.css'>
8   <title>Bulma Sandbox</title>
9 </head>
10 <body>
11   <div class="container">
12     <!-- HEADINGS -->
13     <div class="block">
14       <h1 class="title">Hello World</h1>
15       <h2 class="subtitle">Hello World</h2>
16       <!-- Sizes -->
17       <h1 class="title is-1">Hello World</h1>
18       <h2 class="title is-2">Hello World</h2>
19       <h3 class="title is-3">Hello World</h3>
20       <h4 class="title is-4">Hello World</h4>
21       <h5 class="title is-5">Hello World</h5>
22       <h6 class="title is-6">Hello World</h6>
23     </div>
24
25     <!-- CONTENT -->
26     <div class="block">
27       <p class="content is-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, rerum?</p>
28       <p class="content is-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, rerum?</p>
29       <p class="content is-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, rerum?</p>
30     </div>
31
32     <!-- BUTTONS -->
33     <div class="block">
34       <button class="button">Button</button>
35       <button class="button is-white">Button</button>
36       <button class="button is-light">Button</button>
37       <button class="button is-dark">Button</button>
38       <button class="button is-black">Button</button>
39       <button class="button is-link">Button</button>
40     </div>
41     <div class="block">
42       <a href="" class="button is-primary">Primary</a>
43       <a href="" class="button is-info">Info</a>
44       <a href="" class="button is-success">Success</a>
45       <a href="" class="button is-warning">Warning</a>
46       <a href="" class="button is-danger">Danger</a>
47     </div>
48     <div class="block">
49       <a href="" class="button is-primary is-small">Primary</a>
50       <a href="" class="button is-info is-medium">Info</a>
51       <a href="" class="button is-success is-large">Success</a>
52     </div>
53     <div class="block">
54       <a href="" class="button is-primary is-outlined">Primary</a>
55       <a href="" class="button is-info is-outlined">Info</a>
56       <a href="" class="button is-success is-outlined">Success</a>
57       <a href="" class="button is-warning is-outlined">Warning</a>
58       <a href="" class="button is-danger is-outlined">Danger</a>
59     </div>
60     <div class="block">
61       <a href="" class="button is-primary is-inverted">Primary</a>
62       <a href="" class="button is-info is-inverted">Info</a>
63       <a href="" class="button is-success is-inverted">Success</a>
64       <a href="" class="button is-warning is-inverted">Warning</a>
65       <a href="" class="button is-danger is-inverted">Danger</a>
66     </div>
67     <div class="block">
68       <a href="" class="button is-hovered">Hovered</a>
69       <a href="" class="button is-focused">Focused</a>
70       <a href="" class="button is-active">Active</a>
71       <a href="" class="button is-loading">Loading</a>
72       <a href="" class="button" disabled>Disabled</a>
73     </div>
74
75     <!-- BOX -->
76     <div class="block">
77       <div class="box">
78         <h1 class="title">Hello World</h1>
79         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, quia.</p>
80       </div>
81     </div>
82
83     <!-- NOTIFICATIONS-->
84     <div class="block">
85       <div class="notification">
86         <button class="delete"></button>
87         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, quisquam!
88       </div>
89       <div class="notification is-primary">
90         <button class="delete"></button>
91         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, quisquam!
92       </div>
93       <div class="notification is-info">
94         <button class="delete"></button>
95         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, quisquam!
96       </div>
97       <div class="notification is-success">
98         <button class="delete"></button>
99         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, quisquam!
100       </div>
101       <div class="notification is-warning">
102         <button class="delete"></button>
103         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, quisquam!
104       </div>
105       <div class="notification is-danger">
106         <button class="delete"></button>
107         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, quisquam!
108       </div>
109     </div>
110
111     <!-- TAGS -->
112     <div class="block">
113       <span class="tag">Hello</span>
114       <span class="tag is-black">Black</span>
115       <span class="tag is-dark">Dark</span>
116       <span class="tag is-light">Light</span>
117       <span class="tag is-white">White</span>
118       <span class="tag is-primary">Primary</span>
119       <span class="tag is-info">Info</span>
120       <span class="tag is-success">Success</span>
121       <span class="tag is-warning is-medium">Warning</span>
122       <span class="tag is-danger is-large">Danger <button class="delete"></button></span>
123     </div>
124
125     <!-- MESSAGES -->
126     <div class="block">
127       <article class="message">
128         <div class="message-header">
129           <p>About Us</p>
130         </div>
131         <div class="message-body">
132           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt animi, facilis laudantium eaque repudiandae optio asperiores quos cumque minus, officia at necessitatibus soluta ut odit incidunt sint blanditiis obcaecati inventore.
133         </div>
134       </article>
135
136       <article class="message is-primary">
137         <div class="message-header">
138           <p>About Us</p>
139         </div>
140         <div class="message-body">
141           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt animi, facilis laudantium eaque repudiandae optio asperiores quos cumque minus, officia at necessitatibus soluta ut odit incidunt sint blanditiis obcaecati inventore.
142         </div>
143       </article>
144
145       <article class="message is-success">
146         <div class="message-header">
147           <p>About Us</p>
148         </div>
149         <div class="message-body">
150           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt animi, facilis laudantium eaque repudiandae optio asperiores quos cumque minus, officia at necessitatibus soluta ut odit incidunt sint blanditiis obcaecati inventore.
151         </div>
152       </article>
153
154       <article class="message is-info">
155         <div class="message-header">
156           <p>About Us</p>
157         </div>
158         <div class="message-body">
159           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt animi, facilis laudantium eaque repudiandae optio asperiores quos cumque minus, officia at necessitatibus soluta ut odit incidunt sint blanditiis obcaecati inventore.
160         </div>
161       </article>
162
163       <article class="message is-warning">
164         <div class="message-header">
165           <p>About Us</p>
166         </div>
167         <div class="message-body">
168           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt animi, facilis laudantium eaque repudiandae optio asperiores quos cumque minus, officia at necessitatibus soluta ut odit incidunt sint blanditiis obcaecati inventore.
169         </div>
170       </article>
171
172       <article class="message is-danger">
173         <div class="message-header">
174           <p>About Us</p>
175         </div>
176         <div class="message-body">
177           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt animi, facilis laudantium eaque repudiandae optio asperiores quos cumque minus, officia at necessitatibus soluta ut odit incidunt sint blanditiis obcaecati inventore.
178         </div>
179       </article>
180     </div>
181
182     <!-- NAVBAR -->
183     <div class="block">
184       <nav class="nav">
185         <div class="nav-left">
186           <a href="" class="nav-item">
187             <h1 class="title is-4">Traversy Media</h1>
188           </a>
189         </div>
190
191         <div class="nav-center">
192           <a href="" class="nav-item">
193             <span class="icon">
194               <i class="fa fa-github"></i>
195             </span>
196           </a>
197           <a href="" class="nav-item">
198             <span class="icon">
199               <i class="fa fa-twitter"></i>
200             </span>
201           </a>
202         </div>
203
204         <div class="nav-right nav-menu">
205           <a href="#" class="nav-item">Home</a>
206           <a href="#" class="nav-item">About Us</a>
207           <a href="#" class="nav-item">Contact</a>
208         </div>
209       </nav>
210     </div>
211
212     <!-- SIDE MENU -->
213     <div class="block">
214       <aside class="menu">
215         <p class="menu-label">
216           Label 1
217         </p>
218         <ul class="menu-list">
219           <li><a href="">Link 1</a></li>
220           <li><a href="">Link 1</a></li>
221         </ul>
222         <p class="menu-label">
223           Label 2
224         </p>
225         <ul class="menu-list">
226           <li>
227             <a class="is-active" href="">Link 1</a>
228             <ul>
229               <li><a href="">Link 1</a></li>
230               <li><a href="">Link 1</a></li>
231               <li><a href="">Link 1</a></li>
232             </ul>
233           </li>
234
235           <li><a href="">Link 2</a></li>
236           <li><a href="">Link 3</a></li>
237         </ul>
238       </aside>
239     </div>
240
241     <!-- HERO -->
242     <div class="block">
243       <section class="hero">
244         <div class="hero-body">
245           <div class="container">
246             <h1 class="title">Hero Title</h1>
247             <h2 class="subtitle">Hero Subtitle</h2>
248           </div>
249         </div>
250       </section>
251       <section class="hero is-primary">
252         <div class="hero-body">
253           <div class="container">
254             <h1 class="title">Hero Title</h1>
255             <h2 class="subtitle">Hero Subtitle</h2>
256           </div>
257         </div>
258       </section>
259       <section class="hero is-success">
260         <div class="hero-body">
261           <div class="container">
262             <h1 class="title">Hero Title</h1>
263             <h2 class="subtitle">Hero Subtitle</h2>
264           </div>
265         </div>
266       </section>
267       <section class="hero is-info">
268         <div class="hero-body">
269           <div class="container">
270             <h1 class="title">Hero Title</h1>
271             <h2 class="subtitle">Hero Subtitle</h2>
272           </div>
273         </div>
274       </section>
275       <section class="hero is-warning">
276         <div class="hero-body">
277           <div class="container">
278             <h1 class="title">Hero Title</h1>
279             <h2 class="subtitle">Hero Subtitle</h2>
280           </div>
281         </div>
282       </section>
283       <section class="hero is-danger">
284         <div class="hero-body">
285           <div class="container">
286             <h1 class="title">Hero Title</h1>
287             <h2 class="subtitle">Hero Subtitle</h2>
288           </div>
289         </div>
290       </section>
291     </div>
292
293     <!-- CARD -->
294     <div class="block">
295       <div class="card">
296         <div class="card-content">
297           <p class="title">
298             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, adipisci.
299           </p>
300         </div>
301         <footer class="card-footer">
302           <p class="card-footer-item">
303             <span>
304               <a href=""><i class="fa fa-twitter"></i>Twitter</a>
305             </span>
306           </p>
307           <p class="card-footer-item">
308             <span>
309               <a href=""><i class="fa fa-facebook"></i>Facebook</a>
310             </span>
311           </p>
312         </footer>
313       </div>
314     </div>
315
316     <!-- PAGINATION -->
317     <div class="block">
318       <nav class="pagination">
319         <a href="" class="pagination-previous" disabled>Previous</a>
320         <a href="" class="pagination-next">Next page</a>
321         <ul class="pagination-list">
322           <li>
323             <a href="" class="pagination-link is-current">1</a>
324           </li>
325           <li>
326             <a href="" class="pagination-link">2</a>
327           </li>
328           <li>
329             <a href="" class="pagination-link">3</a>
330           </li>
331         </ul>
332       </nav>
333     </div>
334
335     <!-- LEVEL -->
336     <div class="block">
337       <nav class="level">
338         <!-- left side -->
339         <div class="level-left">
340           <p class="level-item"><a><strong>All</strong></a></p><p class="level-item"><a>Published</a></p>
341           <p class="level-item"><a>Draft</a></p>
342           <p class="level-item"><a>Deleted</a></p>
343           <p class="level-item"><a class="button is-primary">New</a></p>
344         </div>
345
346         <!-- right side -->
347         <div class="level-right">
348           <div class="level-item">
349             <div class="field">
350               <p class="control">
351                 <input type="text" class="input" placeholder="Search posts...">
352               </p>
353             </div>
354           </div>
355         </div>
356       </nav>
357     </div>
358
359     <!-- FORMS -->
360     <div class="block">
361       <form>
362         <div class="field">
363           <label class="label">Name</label>
364           <input type="text" class="input" placeholder="Enter Name">
365         </div>
366
367         <div class="field">
368           <label class="label">Name</label>
369           <input type="text" class="input is-success" placeholder="Enter Name">
370         </div>
371
372         <div class="field">
373           <label class="label">Name</label>
374           <input type="text" class="input is-danger" placeholder="Enter Name">
375         </div>
376
377         <div class="field">
378           <label class="label">Package</label>
379           <p class="control">
380             <span class="select">
381               <select>
382                 <option>Select dropdown</option>
383                 <option>Simple</option>
384                 <option>Standard</option>
385                 <option>Super</option>
386               </select>
387             </span>
388           </p>
389         </div>
390
391         <div class="field">
392           <label class="label">Message</label>
393           <p class="control">
394             <textarea class="textarea" placeholder="Textarea"></textarea>
395           </p>
396         </div>
397       </form>
398     </div>
399
400     <!-- ATTACHED -->
401     <div class="block">
402       <div class="field has-addons">
403         <p class="control">
404           <input type="text" class="input" placeholder="Enter keywords...">
405         </p>
406         <p class="control">
407           <a href="" class="button is-info">Search</a>
408         </p>
409       </div>
410     </div>
411
412     <div class="block">
413       <div class="field has-addons">
414         <p class="control">
415           <span class="select">
416             <select>
417               <option>$</option>
418               <option>£</option>
419               <option>€</option>
420             </select>
421           </span>
422         </p>
423         <p class="control">
424           <input type="text" class="input" placeholder="Enter amount">
425         </p>
426         <p class="control">
427           <a href="" class="button is-info">Pay</a>
428         </p>
429       </div>
430     </div>
431
432     <!-- TABLES -->
433     <div class="block">
434       <table class="table">
435         <thead>
436           <tr>
437             <th>Name</th>
438             <th>Email</th>
439             <th>Phone</th>
440           </tr>
441         </thead>
442         <tbody>
443           <tr>
444             <td>Rick Grimes</td>
445             <td>rgrimes@gmail.com</td>
446             <td>555-555-5555</td>
447           </tr>
448           <tr class="is-selected">
449             <td>Daryl Dixon</td>
450             <td>daryl@gmail.com</td>
451             <td>112-334-5566</td>
452           </tr>
453           <tr>
454             <td>Glen Rhee</td>
455             <td>glen@gmail.com</td>
456             <td>333-444-5555</td>
457           </tr>
458           <tr>
459             <td>Carol Peletier</td>
460             <td>carol@gmail.com</td>
461             <td>343-344-5543</td>
462           </tr>
463         </tbody>
464       </table>
465
466       <table class="table is-striped">
467         <thead>
468           <tr>
469             <th>Name</th>
470             <th>Email</th>
471             <th>Phone</th>
472           </tr>
473         </thead>
474         <tbody>
475           <tr>
476             <td>Rick Grimes</td>
477             <td>rgrimes@gmail.com</td>
478             <td>555-555-5555</td>
479           </tr>
480           <tr>
481             <td>Daryl Dixon</td>
482             <td>daryl@gmail.com</td>
483             <td>112-334-5566</td>
484           </tr>
485           <tr>
486             <td>Glen Rhee</td>
487             <td>glen@gmail.com</td>
488             <td>333-444-5555</td>
489           </tr>
490           <tr>
491             <td>Carol Peletier</td>
492             <td>carol@gmail.com</td>
493             <td>343-344-5543</td>
494           </tr>
495         </tbody>
496       </table>
497
498       <table class="table is-bordered">
499         <thead>
500           <tr>
501             <th>Name</th>
502             <th>Email</th>
503             <th>Phone</th>
504           </tr>
505         </thead>
506         <tbody>
507           <tr>
508             <td>Rick Grimes</td>
509             <td>rgrimes@gmail.com</td>
510             <td>555-555-5555</td>
511           </tr>
512           <tr>
513             <td>Daryl Dixon</td>
514             <td>daryl@gmail.com</td>
515             <td>112-334-5566</td>
516           </tr>
517           <tr>
518             <td>Glen Rhee</td>
519             <td>glen@gmail.com</td>
520             <td>333-444-5555</td>
521           </tr>
522           <tr>
523             <td>Carol Peletier</td>
524             <td>carol@gmail.com</td>
525             <td>343-344-5543</td>
526           </tr>
527         </tbody>
528       </table>
529
530       <table class="table is-narrow is-striped">
531         <thead>
532           <tr>
533             <th>Name</th>
534             <th>Email</th>
535             <th>Phone</th>
536           </tr>
537         </thead>
538         <tbody>
539           <tr>
540             <td>Rick Grimes</td>
541             <td>rgrimes@gmail.com</td>
542             <td>555-555-5555</td>
543           </tr>
544           <tr>
545             <td>Daryl Dixon</td>
546             <td>daryl@gmail.com</td>
547             <td>112-334-5566</td>
548           </tr>
549           <tr>
550             <td>Glen Rhee</td>
551             <td>glen@gmail.com</td>
552             <td>333-444-5555</td>
553           </tr>
554           <tr>
555             <td>Carol Peletier</td>
556             <td>carol@gmail.com</td>
557             <td>343-344-5543</td>
558           </tr>
559         </tbody>
560       </table>
561     </div>
562
563     <!-- GRID SYSTEM -->
564     <div class="block">
565       <div class="columns">
566         <div class="column">
567           <p class="notification">First Column</p>
568         </div>
569         <div class="column">
570           <p class="notification">Second Column</p>
571         </div>
572         <div class="column">
573           <p class="notification">Third Column</p>
574         </div>
575         <div class="column">
576           <p class="notification">Fourth Column</p>
577         </div>
578       </div>
579     </div>
580
581     <div class="block">
582       <div class="columns">
583         <div class="column is-2">
584           <p class="notification">2 column</p>
585         </div>
586         <div class="column is-8">
587           <p class="notification">8 Column</p>
588         </div>
589         <div class="column is-2">
590           <p class="notification">2 Column</p>
591         </div>
592       </div>
593     </div>
594
595     <div class="block">
596       <div class="columns">
597         <div class="column is-three-quarters">
598           <p class="notification">is-three-quarters</p>
599         </div>
600         <div class="column">
601           <p class="notification">Auto</p>
602         </div>
603         <div class="column">
604           <p class="notification">Auto</p>
605         </div>
606       </div>
607     </div>
608
609     <div class="block">
610       <div class="columns">
611         <div class="column is-two-thirds">
612           <p class="notification">is-two-thirds</p>
613         </div>
614         <div class="column">
615           <p class="notification">Auto</p>
616         </div>
617         <div class="column">
618           <p class="notification">Auto</p>
619         </div>
620       </div>
621     </div>
622
623     <div class="block">
624       <div class="columns">
625         <div class="column is-half">
626           <p class="notification">is-half</p>
627         </div>
628         <div class="column">
629           <p class="notification">Auto</p>
630         </div>
631         <div class="column">
632           <p class="notification">Auto</p>
633         </div>
634       </div>
635     </div>
636
637   </div><!-- /. container -->
638
639   <div style="margin-top:500px"></div>
640 </body>
641 </html>