gistfile1.txt

<div class="small-12 medium-3 columns">
  <!--User card-->
  <div class="panel custom-panel custom-radius">
    <div class="profile-data">
      <p class = "text-center"><%= image_tag @user.avatar.url, class: "profile-image" %></p>
      <hr/>
      <h2>@<%= @user.username %></h2>
      <h4><%= @user.name.capitalize %> <%= @user.lastname.capitalize %></h4>
    </div>
    <%= link_to "Follow", current_user.follow!(@user), class: "button expand ultra-small" %>
  </div>
  <%= link_to "Projects", projects_path, class: "button expand" %>
  <ul class="stack button-group expand">
    <li><a href="#" class="button">Bucket</a></li>
    <li><a href="#" class="button">Posts</a></li>
  </ul>
</div>

<!-- Columnas de proyectos 
<h3 class = "subheader text-center">Latest projects</h3>
<div class="small-12 medium-9 columns">
  <div class="row" data-equalizer>
    <div class="large-6 columns thumbnail" data-equalizer-watch>
      <p class="text-center"><%= image_tag "logo.png", class: "project-image" %></p>
      <p class="text-center custom-description"><%= link_to "Project's name", "#"%></p>
    </div>
    <div class="large-6 columns thumbnail" data-equalizer-watch>
      <p class = "text-center"><%= image_tag "dummy.jpg", class: "project-image" %></p>
      <p class="text-center custom-description"><%= link_to "Project's name", "#"%></p>
    </div>
  </div>

  <h3 class="subheader text-center">Latest post</h3>
  <div class="row" data-equalizer>
    <div class="small-12 large-4 columns panel radius" data-equalizer-watch>
      <h4>Título post</h4>
      <p>Descripción del post</p>
    </div>
    <div class="small-12 large-4 columns panel radius" data-equalizer-watch>
      <h4>Título post</h4>
      <p>Descripción del post</p>
    </div>
    <div class="small-12 large-4 columns panel" data-equalizer-watch>
      <h4>Título post</h4>
      <p>Descripción del post</p>
    </div>
  </div>
  <div class="row" data-equalizer>
    <div class="small-12 large-4 columns panel radius" >
      <h4>Título post</h4>
      <p>Descripción del post</p>
    </div>
    <div class="small-12 large-4 columns panel radius" >
      <h4>Título post</h4>
      <p>Descripción del post</p>    
    </div>
    <div class="small-12 large-4 columns panel radius" >
      <h4>Título post</h4>
      <p>Descripción del post</p>    
    </div>
  </div>
</div> -->

<div class="small-12 large-9 columns">
  <ul class="tabs" data-tab role="tablist">
    <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li>
    <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Tab 2</a></li>
    <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li>
  </ul>
    <div class="custom-panel tabs-content" data-equalizer>
      <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
        <h2>First panel content goes here...</h2>
      </section>
      <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
        <h2>Second panel content goes here...</h2>
      </section>
      <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
        <h2>Third panel content goes here...</h2>
      </section>
    </div>
 </div> 

<!--
<div class="tabnav">
  <ul class="tabnav-tabs" data-pjax>
    <li data-tab="Latest projects"></li>
    <a href="#" class="tabnav-tabs selected">Latest projects</a>
  </ul>
  <ul class="tabnav-tabs" data-pjax>
    <li data-tab="Latest posts"></li>
    <a href="#" class="tabnav-tabs">Latest posts</a>
  </ul>
  <ul class="tabnav-tabs" data-pjax>
    <li data-tab="My bucket"></li>
    <a href="#" class="tabnav-tabs">My bucket</a>
  </ul>
</div> -->