Pricing component using Sass

Community feedback

• Account deleted

  A cleaner way is using ::before and ::after pseudo elements

  #section-pricing {
    min-height: 100vh;
  }
  
  #section-pricing::before,
  #section-pricing::after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }
  
  #section-pricing::before {
    background-image: url(../images/bg-bottom.svg);
    background-position: left;
    bottom: -30px;
    left: 0;
    width: 25%;
    height: 40%;
  }
  
  #section-pricing::after {
    background-image: url(../images/bg-top.svg);
    background-position: 165px -43px;
    top: -15px;
    right: 0;
    width: 67%;
    height: 40%;
  }
  

  Here is the full implementation

  1

  ---

  

  Alejandro Merino•125

  @AlexLMCodePosted over 4 years ago

  @juanmesa2097 Thanks mate! I will implement this on my next projects

  1

  Account deleted

  @AlexLMCode you're welcome

  0