Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save harunpehlivan/998920a870eea5029ac167775e8e4d27 to your computer and use it in GitHub Desktop.
Save harunpehlivan/998920a870eea5029ac167775e8e4d27 to your computer and use it in GitHub Desktop.
Card challenge (No SVG clip method)
//Challenge: https://twitter.com/florinpop1705/status/1647668618002329602
.card
.image(style="background-image: url(https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1683202596/344858545_754946146123467_8902886746539079799_n_qocv1l.jpg)")
.price
span HARUN PEHLİVAN
.details
p CODER,DESIGNER,PUBLİSHER,DIGITAL CONTENT PRODUCER FOUNDER CEO ENTREPRENEUR
p 22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi
p <a href="https://bnd.link/harunpehlivan" target="_blank" class="w3-hover-text-green"> BandLab </a>
:root
--card-bg #1A1917
--card-text white
--border-radius .5rem
body
display grid
place-items center
min-height 100vh
font-family 'Inter', sans-serif
.card
display grid
grid-template-columns repeat(2, 1fr)
grid-gap 1rem
max-width 400px
width calc(100% - 4rem)
.price
.details
background var(--card-bg)
color var(--card-text)
padding 1rem
.price
.price span
position relative
&:before
&.price:after
content ''
position absolute
bottom 100%
width 1rem
height 1rem
border-radius 100%
box-shadow -.5rem .5rem white
.image
// aspect-ratio 4/3
height 300px
grid-column 1/3
grid-row 1/3
border-radius var(--border-radius)
background-size cover
background-position center
&:before
bottom 0
transform translateX(50%)
.price
display grid
grid-column 1
grid-row 2
padding-top 0
padding-bottom 0
font-weight 500
font-size 1.5rem
box-shadow 0 1rem var(--card-bg), 0 0 0 1rem white
border-radius var(--border-radius) var(--border-radius) 0 0
text-align center
span
position relative
top 1rem
background white
color black
padding 1rem .5rem
border-radius var(--border-radius)
&:before
bottom 0
right 0
transform translate(300%, -100%)
&:before
bottom calc(100% + 1rem)
left 0
&.price:after
left unset
right 0
top 100%
transform translateX(100%) translateY(-50%)
width 2rem
height 2rem
box-shadow -1rem 1rem var(--card-bg)
.details
grid-column span 2
grid-row 3
font-size 1.25rem
border-radius 0 var(--border-radius) var(--border-radius) var(--border-radius)
p
&:first-child
margin-top 0
&:last-child
margin-bottom 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment