jnsrikanth

- @icons = ['icon-reorder','icon-th-large','icon-bar-chart','icon-tasks','icon-bell','icon-archive','icon-comment','icon-sitemap','icon-thumbs-up','icon-tumblr']
%ul
  - @icons.each do |icon|
    %li
      %a.list-item{:href=>""}
        %i{:class=>"#{icon}"}

jnsrikanth

3D CSS Grid Mondrian Compositions

A simple art experiment and learning exercise using CSS grids, plus a small dash of GSAP.

A Pen by Peter Barr on CodePen.

License.

jnsrikanth

<div class="media">

  <div class="img">
    <img src="http://placehold.it/250x250" alt="Placeholder">
  </div>
  <h2 class="title">This is my title</h2>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus.
      Praesent quis risus id dolor venenatis condimentum.</p>
  </div>

jnsrikanth

<h4>Trying to recreate <a target="_blank" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/full.jpg">this</a> (as seen <a target="_blank" href="https://www.uniqlo.com/utgp/2018/us/">here</a>) using CSS Grid and Clip-path.</h4>
<div class="grid">
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg" alt="">
    <figcaption>
      <div><div><h3>Ms Marvel</h3></div></div>
    </figcaption>
  </figure>
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg" alt="">