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">
  81             <div class="card-image">
  82               <figure class="image is-4by3">
  83                 <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
  84               </figure>
  85             </div>
  86             <div class="card-content">
  87               <div class="media">
  88                 <div class="media-left">
  89                   <figure class="image is-48x48">
  90                     <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
  91                   </figure>
  92                 </div>
  93                 <div class="media-content">
  94                   <p class="title is-4">John Smith</p>
  95                   <p class="subtitle is-6">@johnsmith</p>
  96                 </div>
  97               </div>
  98
  99               <div class="content">
 100                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 101                 Phasellus nec iaculis mauris. <a>@bulmaio</a>.
 102                 <a href="#">#css</a> <a href="#">#responsive</a>
 103                 <br>
 104                 <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
 105               </div>
 106             </div>
 107           </div>
 108
 109
 110           <!--This is another card working inside-->
 111           <div class="card column">
 112             <div class="card-image">
 113               <figure class="image is-4by3">
 114                 <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
 115               </figure>
 116             </div>
 117             <div class="card-content">
 118               <div class="media">
 119                 <div class="media-left">
 120                   <figure class="image is-48x48">
 121                     <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
 122                   </figure>
 123                 </div>
 124                 <div class="media-content">
 125                   <p class="title is-4">John Smith</p>
 126                   <p class="subtitle is-6">@johnsmith</p>
 127                 </div>
 128               </div>
 129
 130               <div class="content">
 131                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 132                 Phasellus nec iaculis mauris. <a>@bulmaio</a>.
 133                 <a href="#">#css</a> <a href="#">#responsive</a>
 134                 <br>
 135                 <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
 136               </div>
 137             </div>
 138           </div>
 139
 140
 141
 142
 143
 144
 145         </div>
 146       </article>
 147     </section>
 148
 149
 150   </body>
 151
 152
 153
 154   <footer>
 155     <%include ../partials/footer%>
 156   </footer>
 157
 158
 159
 160 </html>