-
const ITEMS = [
{
title: 'Impossible Checkbox',
link: "https://codepen.io/jh3y/pen/LYNZwGm",
src: "https://assets.codepen.io/605876/impossible-checkbox.png"
},
{
title: "Newton's Light Bulbs",
link: "https://codepen.io/jh3y/pen/abzeaWJ",
src: "https://assets.codepen.io/605876/newtons-lightbulbs.png"
},
{
title: "Pure CSS Tic Tac Toe",
link: "https://codepen.io/jh3y/pen/BVaGKP",
src: "https://assets.codepen.io/605876/css-tic-tac-toe.png"
},
//- {
//- title: "Cards Against Developers",
//- link: "https://codepen.io/jh3y/pen/JZbKpp",
//- src: "https://assets.codepen.io/605876/cards-against-developers.png"
//- },
{
title: "Turbo Kitty",
link: "https://codepen.io/jh3y/pen/bGEBKoy",
src: "https://assets.codepen.io/605876/turbo-kitty.png"
},
//- {
//- title: "Glitchy CSS Text",
//- link: "https://codepen.io/jh3y/pen/jOOQjYP",
//- src: "https://assets.codepen.io/605876/cards-against-developers.png"
//- }
{
title: "Pure CSS Drawers",
link: "https://codepen.io/jh3y/pen/mLaXRe",
src: "https://assets.codepen.io/605876/css-drawers.png?format=auto"
},
{
title: "CSS 3D Studio Room",
link: "https://codepen.io/jh3y/pen/XWdQBRx",
src: "https://assets.codepen.io/605876/3d-studio-room.png"
},
//- {
//- title: "T-Shirt Cannon Button",
//- link: "https://codepen.io/jh3y/pen/eYpmBxQ",
//- src: "https://assets.codepen.io/605876/t-shirt-cannon.png"
//- },
{
title: "Code Name: RamBear",
link: "https://codepen.io/jh3y/pen/QWyYZbP",
src: "https://assets.codepen.io/605876/rambear.png"
},
{
title: "Care Bear Needs Love",
link: "https://codepen.io/jh3y/pen/RwPrOoz",
src: "https://assets.codepen.io/605876/care-bear-needs-love.png"
},
{
title: "HSL Dimmer Switch",
link: "https://codepen.io/jh3y/pen/MWYJPwZ",
src: "https://assets.codepen.io/605876/hsl-dimmer.png"
},
{
title: "Tuggable Light Bulb",
link: "https://codepen.io/jh3y/pen/VwjgdLj",
src: "https://assets.codepen.io/605876/tuggable-lightbulb.png"
}
]
.top-picks
h1.top-picks__title Top 10 in Jhey's Pens Today
ul.top-picks__track
for ITEM, index in ITEMS
li.item.top-picks__item
a.item__card(href=ITEM.link target="_blank" rel="noopener noreferrer")
img(src=ITEM.src)
span= ITEM.title
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
*
*:before
*:after
box-sizing border-box
font-family 'Roboto', sans-serif
// Card measure was 165 x 240
// Font-size was about 110
// Card margin was about 60
:root
--bg hsl(0, 0%, 8%)
--size 50vmin
--height var(--size)
--width calc(0.6875 * var(--size))
--font-size calc(0.74 * var(--size))
--gap calc(0.22 * var(--size))
body
background var(--bg)
min-height 100vh
display flex
align-items center
justify-content start
font-family 'Roboto', sans-serif
.top-picks
max-width 100%
padding 0 2rem
&__track
height var(--height)
margin 0
padding 0
display flex
list-style-type none
padding 0 var(--gap)
max-width 100%
overflow-x auto
overflow-y visible
counter-reset index
scroll-snap-type x mandatory
&__title
color hsl(0, 0%, 100%)
font-size clamp(1.2rem, 5vmin, 3rem)
font-weight 700
&__item
overflow hidden
width calc(var(--width) + var(--gap))
flex 0 0 calc(var(--width) + var(--gap))
position relative
list-style none
counter-increment index
padding-left var(--gap)
scroll-snap-align center
&.item:hover
img
filter saturate(100%)
.item__card
width var(--width)
position absolute
right 0
top 0
bottom 0
border-radius 2vmin
background hsl(0, 0%, 14%)
overflow-x hidden
&:after
position absolute
content ''
bottom 1rem
right 1rem
height 1.5rem
width 1.5rem
background-image url("https://assets.codepen.io/605876/avatar.png")
background-size cover
background-repeat no-repeat
img
position absolute
height 100%
width 100%
object-fit cover
transition filter 0.2s
filter saturate(50%)
span
text-decoration none
position absolute
top 2rem
right 2rem
max-width 50%
text-align right
color white
font-weight bold
font-size clamp(1rem, 2vmin, 2rem)
text-shadow 0.5vmin 0 2vmin var(--bg)
&:after
content counter(index)
position absolute
color var(--bg)
font-size var(--font-size)
line-height 0.7
bottom 0
font-weight bold
letter-spacing -5vmin
left 0
-webkit-text-stroke 0.5vmin hsl(0, 0%, 100%)
text-shadow 1vmin 0 4vmin var(--bg)
transform translate(-14%, 0)
View Compiled
// Nope
// Inspecting the original shows how they are clipping the numbers
// Check the card border-radius and see how the "2" is clipped
// https://twitter.com/CodePen/status/1329534673987506184?s=20
// Made this one with scroll-snap and took some of my demos and put them in ;D
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.