Code Snippet

Flexbox Row

Use these three properties to create a flexbox row layout.

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

Use this to create a Flexbox column layout.

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

Build a 12-column layout using CSS Grid.

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

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%
    );
}

Use transition and box shadows to glow on hover.

.code-card .card-header {
    border-radius: 8px;
    transition: all 0.5s ease-in-
    out;
}

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

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