<!-- Hero -->
- <section class="hero is-yellow">
- <div class="hero-body">
- <div class="container">
- <h1 class="title is-2"><%= title %></h1>
- <h2 class="subtitle is-6">Code lover, Network Engineer, Maker.</h2>
+ <section class="is-green-striped no-margin no-pading">
+ <div class="imagebanner">
+ <div class="imageme">
+ <img src="/images/josuecut.png" alt="">
+ </div>
+ <div class="container has-text-right go-up no-margin no-pading">
+ <h1 class="title is-2 is-primary-invert"><%= title %></h1>
+ <h2 class="subtitle is-6 is-primary-invert">Code lover, Network Engineer, Maker.</h2>
</div>
</div>
</section>
+ <section class="parallax">
+ <h1 class="title is-1 has-text-centered has-text-primary"> Profile </h1>
+ <div class="block">
+ <div class="columns">
+ <div class="column ">
+ <p class="notification is-light has-text-black">About Me</p>
+ </div>
+ <div class="column ">
+ <p class="notification is-light has-text-black">Second Column</p>
+ </div>
+ <div class="column ">
+ <p class="notification is-light has-text-black">Details</p>
+ <div class="list is-hoverable">
+ <a class="list-item">
+ <strong></strong>
+ </a>
+ <a class="list-item">
+ <strong></strong>
+ </a>
+ <a class="list-item is-active">
+ <strong></strong>
+ </a>
+ <a class="list-item">
+ <strong></strong>
+ </a>
+ <a class="list-item">
+ <strong></strong>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="no-margin no-pading" >
+ <article class="message">
+ <div class="message-header">
+ <p>Hello World</p>
+ <button class="delete" aria-label="delete"></button>
+ </div>
+ <div class="message-body colums">
+
+ <!--This is a card working as a column in a messa working as container-->
+ <div class="card column is-half">
+
+ <div class="card-content">
+ <div class="media">
+ <div class="media-left">
+ <figure class="image is-48x48">
+ <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
+ </figure>
+ </div>
+ <div class="media-content">
+ <p class="title is-4">John Smith</p>
+ <p class="subtitle is-6">@johnsmith</p>
+ </div>
+ </div>
+
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+ <a href="#">#css</a> <a href="#">#responsive</a>
+ <br>
+ <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ </div>
+ </div>
+ </div>
+
+
+ <!--This is another card working insid-->
+ <div class="card column is-half">
+
+ <div class="card-content">
+ <div class="media">
+ <div class="media-left">
+ <figure class="image is-48x48">
+ <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
+ </figure>
+ </div>
+ <div class="media-content">
+ <p class="title is-4">John Smith</p>
+ <p class="subtitle is-6">@johnsmith</p>
+ </div>
+ </div>
+
+ <div class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+ <a href="#">#css</a> <a href="#">#responsive</a>
+ <br>
+ <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+ </div>
+ </div>
+ </div>
+
+
+
+
+
+
+ </div>
+ </article>
+ </section>
</body>