css-mini-project

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 form top to bottom


.linear-gradient-background {
background-image: color1 0% color2 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;
}