Flexbox Row

Use these three properties to create a Flex box road layout.

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

Flexbox Column

Use this to create a Flex box column layout.

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

CSS grid layout

Build a twelve – 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(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,
        .code-card:hover 
        .card-header {
        box-shadow: 
        inset 0px 0px 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 the natural starting point.

.card-header {
        position: relative;
        }