CSS Snippet Cheatsheet

Flexbox Row

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

Flexbox Column

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

CSS Grid Layout

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

Linear Gradients

random content in box

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

Box Transition Glow

.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 8px 8px 
        8px rgba(232, 182, 236, 1), 
        0 0 15px rgba(232, 102, 
        236, 1);
}

Overlay Card with Title

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