Image gallery made with Flexbox and CSS Grid.
A Pen by Katherine Kato on CodePen.
marksumoto
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 16/07/18 - Simplified approach, now works in Safari as well | |
| --> | |
| <h1>Responsive eCommerce layout using CSS Grid</h1> | |
| <h3><a href="https://codepen.io/collection/DapBxW" target="_blank">More CSS Grid layouts</a></h3> | |
| <ul id="productGrid"> | |
| <li class="product"> | |
| <div class="details"> | |
| <h2>STAN SMITH</h2> | |
| <p class="price">£74.95</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="📦"></div> | |
| <div class="📦"></div> | |
| <div class="📦"></div> | |
| <div class="📦"></div> | |
| <div class="📦"></div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="🤚"> | |
| <div class="👉"></div> | |
| <div class="👉"></div> | |
| <div class="👉"></div> | |
| <div class="👉"></div> | |
| <div class="🌴"></div> | |
| <div class="👍"></div> | |
| </div> |
Basic code of a hover flip card on material design using HTML and CSS3
A Pen by Wanderson Silva on CodePen.
marksumoto
/ index.haml
Created
May 11, 2018 21:16
Movie Card Interactive UI With Pure CSS3 Animation Rating
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .card | |
| .card_left | |
| %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/h8fnwL1.png'} | |
| .card_right | |
| %h1 KILL BILL: VOL. 1 | |
| .card_right__details | |
| %ul | |
| %li 2003 | |
| %li 111 min | |
| %li Action |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="card-movie-wrapper card-movie-wrapper--centered"> | |
| <div class="card-movie-carousel"> | |
| <div class="card-movie card-movie--light card-movie--looper card-movie--active"> | |
| <div class="card-movie__content"> | |
| <div class="card-movie__title">Looper</div> |
a user Profile.
A Pen by Genaro Colusso on CodePen.
credit : bulma, vuejs, devices.css, chancejs, css-flip
A Pen by Dzulfikar Adi Putra on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 class="title">Hover over the cards</h1> | |
| <div id="app" class="container"> | |
| <card data-image="https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop="> | |
| <h1 slot="header">Canyons</h1> | |
| <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | |
| </card> | |
| <card data-image="https://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> | |
| <h1 slot="header">Beaches</h1> | |
| <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> |