Flexbox Row

Use these properties to create a Flexbox row.

element {
    display: flex;
    flex-direction: row;
    /*flex-direction: coloumn;*/
    /*flex-wrap: wrap;*/
}
            

Hover Function

Use these properties to create pseudo element that listens for mouse hover.

        section:hover {
            /*Desired properties*/
        }
            

Hover visibility links

Use these properties to have invisible links appear when hovering over header.

section "specific"{
    display: none;
}

section:hover "specific"{
    display: block;
}
            

Creating a Fixed Header

Make header stick to the top of the screen even when scrolled down.

header {
    position: fixed;
    top: 0;
    z-index: 2;
}
            

Tooltip

Add tooltip to specific words.

span[data-descr] {
/*text-decoration: underline;*/
/*cursor: grab;*/
position: relative;
color: #000;
}

span[data-descr]:hover::after {
    content: attr(data-descr);
    position: absolute;
    bottom: 20px;
    min-width:100px;
    border: 1px #aaaaaa solid;
    background-color:#FFFFCA;
    padding: 6px;
    color: #000000;
    font-size: 70%;
    z-index: 1;
    border-radius: 6px;
    white-space:nowrap;
}
            

Media Query (Desktop, Tablet, Phone)

Apply properties depending on screen size

@media screen and (max-wdith: "Screen Size"px){
    section {
        properties
    }
}