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>