Flexbox Row

Use these three properties to create a Flexbox row layout.

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

Flexbow 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.

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

Box Transition Glow

Use transition and box shadows to glow on hover.

                
                    .linear-gradient-background {
                        background-image: linear-gradient(
                          rgba(232, 102, 236, 0.3) 0%,
                          rgba(232, 102, 236, 0.6) 100%
                        );
                      }
                
            

Overlay Card w/ Title

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