Card challenge (No SVG clip method)

card-challenge-no-svg-clip-method.markdown

Card challenge (No SVG clip method)

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.pug

//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>

style.stylus

: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