.container
- for(var x = 0; x < 6; x++)
.wrapper
.card
i(class='fal fa-arrow-right')
View Compiled
gradient(a, b)
background a
background linear-gradient(to top, a, b)
flex(a, b)
display flex
align-items a
justify-content b
grid(a, b)
display grid
grid-template-columns a
grid-gap b
radius(a)
border-radius a
background-default()
background-size cover
background-repeat no-repeat
background-position center
font()
font-family 'Montserrat', sans-serif
color1 = #ECE9E6
color2 = #58A4B0
color3 = #373F51
color4 = #1C2541
after(a)
content ''
height 100%
width 100%
position absolute
top 0
left 0
background-image url(a)
background-size cover
background-color color3
background-blend-mode screen
transform skew(10deg) scale(1.2)
transition 0.25s
*
backface-visibility hidden
html
gradient(color1, white)
min-height 100vh
flex(center, center)
body
margin 0
height 100%
width 100%
font()
text-align center
h1
text-align center
padding 2rem 0 1rem
margin 0
color color3
h6
font-size 1.2rem
margin 0
font-weight 300
p
margin-bottom 2rem
.container
grid(auto auto auto, 3rem)
padding 2rem 4rem 4rem
.wrapper
transform skew(-10deg)
transition 0.25s
&:before
content ''
left 0
top 0
height calc(100% - 10px)
width calc(100% - 10px)
radius(40px)
opacity 0
border 2px solid color1
position absolute
z-index -1
transition 0.5s 0.05s
&:hover
&:before
opacity 1
transform translateY(1.5rem) translateX(1.5rem)
&:nth-child(1)
.card
&:after
after('https://images.pexels.com/photos/953219/pexels-photo-953219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
&:nth-child(2)
.card
&:after
after('https://images.pexels.com/photos/316891/pexels-photo-316891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
&:nth-child(3)
.card
&:after
after('https://images.pexels.com/photos/3303/water-drink-fresh-lemons.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
&:nth-child(4)
.card
&:after
after('https://images.pexels.com/photos/635537/pexels-photo-635537.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
&:nth-child(5)
.card
&:after
after('https://images.pexels.com/photos/6478/tree-lemon-fruit.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
&:nth-child(6)
.card
&:after
after('https://images.pexels.com/photos/709816/pexels-photo-709816.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
&:hover
transform translateX(-1rem) translateY(-1rem) skew(-10deg)
.card
&:after
background-blend-mode normal
box-shadow 0.5rem 0.5rem 1rem rgba(0,0,0,0.1)
.fal
bottom 4rem
background-color rgba(255,255,255,0.8)
.card
background-color white
radius(40px)
height 15rem
padding 2rem
position relative
overflow hidden
&:after
background-default()
.fal
position absolute
bottom -1rem
right 3rem
radius(100%)
padding 1rem
font-size 1.5rem
color color3
z-index 1
transform skew(10deg) translateY(50%)
text-align center
transition 0.25s
View Compiled
This Pen doesn't use any external CSS resources.