I copied a design of my brother again and added a 3d effect. Hope you like it :)
https://dribbble.com/shots/3186204-Thank-you
A Pen by marksumoto on CodePen.
I copied a design of my brother again and added a 3d effect. Hope you like it :)
https://dribbble.com/shots/3186204-Thank-you
A Pen by marksumoto on CodePen.
<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> |
credit : bulma, vuejs, devices.css, chancejs, css-flip
A Pen by Dzulfikar Adi Putra on CodePen.
a user Profile.
A Pen by Genaro Colusso on CodePen.
<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> |
.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 |
Basic code of a hover flip card on material design using HTML and CSS3
A Pen by Wanderson Silva on CodePen.
Image gallery made with Flexbox and CSS Grid.
A Pen by Katherine Kato on CodePen.
<div class="🤚"> | |
<div class="👉"></div> | |
<div class="👉"></div> | |
<div class="👉"></div> | |
<div class="👉"></div> | |
<div class="🌴"></div> | |
<div class="👍"></div> | |
</div> |
<div class="container"> | |
<div class="📦"></div> | |
<div class="📦"></div> | |
<div class="📦"></div> | |
<div class="📦"></div> | |
<div class="📦"></div> | |
</div> |