CSS Knowledge Base

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: linear-gradient(
    var(--dark-purple) 0%, 
    var(--light-purple) 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;
} 
.card-code:hover, .card-title:hover {
    box-shadow: 0px 0px 10px 8px 
    var(--dark-purple), 
    inset 0px 0px 2px 2px white;
}

Overlay Card With Title

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


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