demo de los cards

[josuexyz/.git] / views / index.ejs

diff --git a/views/index.ejs b/views/index.ejs
index 635a53448d59b1fffdfcca44f3c09385f1794bea..856f2fda10ae54ec44622391a330becf92fca8e8 100644 (file)
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -22,15 +22,129 @@
 
 
     <!-- Hero -->
-    <section class="hero is-primary is-medium">
-      <div class="hero-body">
-        <div class="container">
+    <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">
+            <div class="card-image">
+              <figure class="image is-4by3">
+                <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
+              </figure>
+            </div>
+            <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">
+            <div class="card-image">
+              <figure class="image is-4by3">
+                <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
+              </figure>
+            </div>
+            <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>