• Flexbox Row

  Use these three properties to create a Flexbox row layout.

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

• Flexbox Column

  Use this to create a Flexbox column layout.

  .column {
    display: flex;
    flex-direction: column;
  }

• CSS Grid Layout

  Build a 12-column layout using CSS grid

  .grid {
    display: grid;
    width: 100%;
    grid-template-columns:
  repeat(12, 1fr);
  }

• Linear Gradients

  This will create a background linear gradient from top to bottom.

  .linear-gradient-background {
    background-image: linear-gradient(
      rgba(232, 102, 236, 0.3) 0%,
      rgba(232, 102, 236, 0.6) 100%
    );
  }

• Box Transition Glow

  Use transition and box shadows to glow on hover.

  .code-card .card-header {
      border-radius: 8px;
      transition: all 0.5s ease-in-out;
  }
  
  .code-card:hover,
  .card-header:hover .card-header {
      box-shadow: inset 0 0 8px
      rgba(232, 102, 236, 1), 0 0 15px
      rgba(232, 102, 236, 1);
  }

• Overlay Card with Title

  Use position properties and negative margins to raise elements higher than their natural string point.

  .card-header {
      position: relative;
      margin-top: -20px;
  }

• Click to Highlight

  Use these 4 lines to copy when element is selected.

  .code-card {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all; 
  }

• Inset card Shadow

  The card shadow will disappear when it is replaced by the ::hover shadow

  .card {
    box-shadow: 
    rgba(0, 0, 0, 0.4)
    0 300px inset;
  }
  
  .card:hover {
    box-shadow:
    inset 0 0 5px #DCA8FF,
    0 0 15px #DCA8FF;
  }