views/index.ejs

   1 <!DOCTYPE html>
   2 <html>
   3
   4
   5
   6   <head>
   7     <%include ../partials/head%>
   8   </head>
   9
  10
  11
  12   <body>
  13
  14
  15     <header>
  16
  17
  18       <%include ../partials/header%>
  19
  20
  21     </header>
  22
  23
  24     <!-- Hero -->
  25     <section class="is-green-striped no-margin no-pading">
  26       <div class="imagebanner">
  27         <div class="imageme">
  28           <img src="/images/josuecut.png" alt="">
  29         </div>
  30         <div class="container has-text-right go-up no-margin no-pading">
  31           <h1 class="title is-2 is-primary-invert"><%= title %></h1>
  32           <h2 class="subtitle is-6 is-primary-invert">Code lover, Network Engineer, Maker.</h2>
  33         </div>
  34       </div>
  35     </section>
  36
  37     <section class="parallax">
  38       <h1 class="title is-1 has-text-centered has-text-primary"> Profile </h1>
  39       <div class="block">
  40         <div class="columns">
  41           <div class="column ">
  42             <p class="notification is-light has-text-black">About Me</p>
  43           </div>
  44           <div class="column ">
  45             <p class="notification is-light has-text-black">Second Column</p>
  46           </div>
  47           <div class="column ">
  48             <p class="notification is-light has-text-black">Details</p>
  49             <div class="list is-hoverable">
  50               <a class="list-item">
  51                 <strong></strong>
  52               </a>
  53               <a class="list-item">
  54                 <strong></strong>
  55               </a>
  56               <a class="list-item is-active">
  57                 <strong></strong>
  58               </a>
  59               <a class="list-item">
  60                 <strong></strong>
  61               </a>
  62               <a class="list-item">
  63                 <strong></strong>
  64               </a>
  65             </div>
  66           </div>
  67         </div>
  68       </div>
  69     </section>
  70
  71     <section class="no-margin no-pading" >
  72       <article class="message">
  73         <div class="message-header">
  74           <p>Hello World</p>
  75           <button class="delete" aria-label="delete"></button>
  76         </div>
  77         <div class="message-body colums">
  78
  79           <!--This is a card working as a column in a messa working as container-->
  80           <div class="card column is-half">
  81
  82             <div class="card-content">
  83               <div class="media">
  84                 <div class="media-left">
  85                   <figure class="image is-48x48">
  86                     <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
  87                   </figure>
  88                 </div>
  89                 <div class="media-content">
  90                   <p class="title is-4">John Smith</p>
  91                   <p class="subtitle is-6">@johnsmith</p>
  92                 </div>
  93               </div>
  94
  95               <div class="content">
  96                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  97                 Phasellus nec iaculis mauris. <a>@bulmaio</a>.
  98                 <a href="#">#css</a> <a href="#">#responsive</a>
  99                 <br>
 100                 <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
 101               </div>
 102             </div>
 103           </div>
 104
 105
 106           <!--This is another card working insid-->
 107           <div class="card column is-half">
 108
 109             <div class="card-content">
 110               <div class="media">
 111                 <div class="media-left">
 112                   <figure class="image is-48x48">
 113                     <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
 114                   </figure>
 115                 </div>
 116                 <div class="media-content">
 117                   <p class="title is-4">John Smith</p>
 118                   <p class="subtitle is-6">@johnsmith</p>
 119                 </div>
 120               </div>
 121
 122               <div class="content">
 123                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 124                 Phasellus nec iaculis mauris. <a>@bulmaio</a>.
 125                 <a href="#">#css</a> <a href="#">#responsive</a>
 126                 <br>
 127                 <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
 128               </div>
 129             </div>
 130           </div>
 131
 132
 133
 134
 135
 136
 137         </div>
 138       </article>
 139     </section>
 140
 141
 142   </body>
 143
 144
 145
 146   <footer>
 147     <%include ../partials/footer%>
 148   </footer>
 149
 150
 151
 152 </html>