Css study sheet

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,
    .code-card:hover .card-header {
    box-shadow: inset 0px 0px 8px
    rgba(232, 102, 1), 0 0 15px
    rgba(232, 102, 1);
}

Overlay Card with Title

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

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