Skip to content

Instantly share code, notes, and snippets.

@jnsrikanth
jnsrikanth / index.haml
Created Jan 7, 2019
Navigation Bar by Jan Kaděra
View index.haml
- @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}"}
View 3d-css-grid-mondrian-compositions.markdown

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.

View index.html
<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
jnsrikanth / index.html
Last active Jan 7, 2019
MARVEL POSTER [CSS GRID]
View index.html
<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="">