Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="banjo">
    <div id="banjo__body">
        <div id="banjo__rim">
            <div id="banjo__inner">
                <div id="banjo__bridge"></div>
            </div>
            <div id="banjo__protector"></div>
        </div>
        <div id="banjo__endstring"></div>
    </div>
    <div id="banjo__fretboard">
        <div class="banjo__fret top-fret"></div>
        <div class="banjo__fret top-fret"></div>
        <div class="banjo__fret top-fret"></div>
        <div class="banjo__fret top-fret"></div>
        <div id="fifth-fret" class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
        <div class="banjo__fret"></div>
    </div>
    <div id="banjo__strings">
        <div class="banjo__string"></div><!--
     --><div class="banjo__string"></div><!--
     --><div class="banjo__string"></div><!--
     --><div class="banjo__string"></div><!--
     --><div class="banjo__string"></div>
    </div>
    <div id="banjo__head">
        <div class="banjo__peg"></div>
        <div class="banjo__peg"></div>
        <div class="banjo__peg"></div>
        <div class="banjo__peg"></div>
        <div id="end1" class="banjo__string-end"></div>
        <div id="end2" class="banjo__string-end"></div>
        <div id="end3" class="banjo__string-end"></div>
        <div id="end4" class="banjo__string-end"></div>
    </div>
</div>
<div id="trumpet">
    <div id="trumpet__mouthpiece-container">
        <div id="trumpet__mouthpiece"></div>
        <div id="trumpet__mouthpiece-ring"></div>
        <div id="trumpet__mouthpiece-connector"></div>
        <div id="trumpet__mouthpiece-end-ring"></div>
        <div id="trumpet__mouthpiece-end"></div>
    </div>
    <div id="trumpet__leadpipe">
        <div id="trumpet__hook"></div>
    </div>
    <div id="trumpet__water-key"></div>
    <div id="trumpet__bell">
        <div id="trumpet__bell-top">
            <div id="trumpet__bell-top-out"></div>
        </div>
        <div id="trumpet__bell-bottom">
            <div id="trumpet__bell-bottom-out"></div>
        </div>
        <div id="trumpet__bell-ring"></div>
    </div>
    <div id="trumpet__slide">
        <div class="trumpet__pipe-connector" id="trumpet__tuning-slider--t"></div>
        <div id="trumpet__tuning-slider-handle"></div>
        <div id="trumpet__tuning-slide">
            <div id="trumpet__slide-inner"></div>
        </div>
        <div class="trumpet__pipe-connector" id="trumpet__tuning-slider--b"></div>
    </div>
    <div id="trumpet__bottom-right-pipe">
        <div class="trumpet__pipe-connector" id="trumpet__bottom-right-connector"></div>
    </div>
    <div id="trumpet__mid-pipe"></div>
    <div id="trumpet__bottom-left-pipe"></div>
    <div id="trumpet__loop"></div>
    <div id="trumpet__first-slide">
        <div id="trumpet__first-top-end"></div>
        <div class="trumpet__pipe-connector" id="trumpet__first-tr-connector"></div>
        <div id="trumpet__first-top"></div>
        <div class="trumpet__pipe-connector" id="trumpet__first-tl-connector"></div>
        <div id="trumpet__first-hook">
            <div id="trumpet__first-hook-base"></div>
        </div>
        <div id="trumpet__first-loop"></div>
        <div class="trumpet__pipe-connector" id="trumpet__first-bl-connector"></div>
        <div id="trumpet__first-bottom"></div>
        <div class="trumpet__pipe-connector" id="trumpet__first-br-connector"></div>
        <div id="trumpet__first-bottom-end"></div>
    </div>
    <div id="trumpet__second-slide">
            <div id="trumpet__second-pipe--t"></div>
            <div class="trumpet__pipe-connector" id="trumpet__second-t-connector"></div>
            <div id="trumpet__second-loop"></div>
            <div class="trumpet__pipe-connector" id="trumpet__second-b-connector"></div>
            <div id="trumpet__second-pipe--b"></div>
        </div>
    <div id="trumpet__third-slide">
        <div class="trumpet__pipe-connector"></div>
        <div id="trumpet__third-top"></div>
        <div class="trumpet__pipe-connector" id="trumpet__third-tr-connector"></div>
        <div id="trumpet__third-ring"></div>
        <div id="trumpet__third-loop"></div>
        <div id="trumpet__third-bottom"></div>
        <div class="trumpet__pipe-connector" id="trumpet__third-br-connector"></div>
    </div>
    <div id="trumpet__valves">
        <div class="trumpet__valve" id="trumpet__first-valve">
            <div class="trumpet__valve-button"></div>
            <div class="trumpet__valve-top"></div>
            <div class="trumpet__valve-pipe-top"></div>
            <div class="trumpet__valve-pipe"></div>
            <div class="trumpet__valve-cap"></div>
        </div>
        <div class="trumpet__valve-connector" id="trumpet__valve-tl-connector"></div>
        <div class="trumpet__valve-connector" id="trumpet__valve-bl-connector"></div>
        <div class="trumpet__valve" id="trumpet__second-valve">
            <div class="trumpet__valve-button"></div>
            <div class="trumpet__valve-top"></div>
            <div class="trumpet__valve-pipe-top"></div>
            <div class="trumpet__valve-pipe"></div>
            <div class="trumpet__valve-cap"></div>
        </div>
        <div class="trumpet__valve-connector" id="trumpet__valve-tr-connector"></div>
        <div class="trumpet__valve-connector" id="trumpet__valve-br-connector"></div>
        <div class="trumpet__valve" id="trumpet__third-valve">
            <div class="trumpet__valve-button"></div>
            <div class="trumpet__valve-top"></div>
            <div class="trumpet__valve-pipe-top"></div>
            <div class="trumpet__valve-pipe"></div>
            <div class="trumpet__valve-cap"></div>
        </div>
    </div>
</div>
              
            
!

CSS

              
                 @mixin pseudo {
    position: absolute;
    display: block;
    content: '';
}

$bgcolor: #222;
$metal: #999;

html, body {
    margin: 0;
    padding: 0;
    background-color: $bgcolor;
    width: 100%;
    height: 100%;
    min-width: 1000px;
}

div {
    position: absolute;
}

  // // // // // // //
//                    //
//  IT'S BANJO TIME   //
// WHO NEEDS GUITARS? //
//                    //
  // // // // // // //

#banjo {
    position: relative;
    margin: 50px 50px auto auto;
    width: 200px;
    transform: rotate(45deg);
    
}


    // The body of the banjo, outer circle.
    #banjo__body {
        top: 290px;
        background-color: #888;
        height: 150px;
        width: 150px;
        border-radius: 100%;
        border: 4px solid #1a0d00;
    }

        // Circle of holes
        #banjo__rim {
            height: 135px;
            width: 135px;
            top: 3px;
            left: 3px;
            border-radius: 100%;
            border: 4px dashed #333;
        }

        // Inner circle of the body
        #banjo__inner {
            height: 120px;
            width: 120px;
            top: 3px;
            left: 3px; 
            border-radius: 100%;
            background-color: #111;
            border: 4px solid #555;
        }

            // Bridge
            #banjo__bridge {
                top: 70px;
                left: 42px;
                height: 6px;
                width: 36px;
                background-color: #bbb;
                z-index: 1;
            }

        // Didn't know what to call this. That metal thing what leans on you when yout play.
        #banjo__protector {
            top: 15px;
            left: 5px;
            width: 0;
            height: 0;
            border-radius: 100%;
            border-top: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 67px solid #bbb;  
            transform: rotate(55deg);

        &::after {
            @include pseudo;
            left: -51px;
            top: -47px;
            width: 100px;
            height: 100px;
            background-color: #111;
            border-radius: 100%;
        }
    }

    // The thing the strings go into, I'm not a professional musician...
    #banjo__endstring {
        top: 110px;
        left: 63px;
        width: 16px;
        height: 0;
        border-top: 38px solid #BBB;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;

        &::before {
            @include pseudo;
            height: 7px;
            width: 7px;
            background-color: #111;
            top: -40px;
            left: 5px;
            border-radius: 100%;
            z-index: 0;
        }
    }

    // I know what a fretboard is called at least
    #banjo__fretboard {
        left: 68px;
        top: 47px;
        height: 290px;
        z-index: 1;

        // The top part of the board where it thins
        &::after {
            @include pseudo;
            left: -12px;
            height: 50px;
            width: 50px;
            top: 264px;
            background-color: #111;
            border-radius: 50px;
        }
    }

        // Frets
        .banjo__fret {
            position: relative;
            background-color: #331a00;
            width: 25px;
            border-top: 1px solid #fff;
        }

            // The frets at the top are thinner
            .top-fret {
                width: 20px;
                margin-left: 5px;
            }

            // The fifth fret is where it thins. Could do this in the nth of type declarations
            // but it's important enough to have it's own id
            #fifth-fret {
                position: relative;
                height: 0;
                width: 20px;
                background-color: unset;
                border-top-width: 0;
                border-left: 5px solid transparent;
                border-bottom: 16px solid #331a00;

                // This is also where we have the tuning peg
                &::before {
                    @include pseudo;
                    left: -15px;
                    top: 3px;
                    width: 7px;
                    height: 10px;
                    background: #bbb;
                    border-radius: 40% / 50%;
                    z-index: 3;
                }

                &::after {
                    @include pseudo;
                    left: -9px;
                    top: 5px;
                    width: 8px;
                    height: 5px;
                    background: $metal;
                }
            }


                // These are all just heights for the frets, going down as they should. I even went on a
                // calculator thing to make sure they're right.
                .banjo__fret:nth-of-type(1) {
                    height: 19.6px;
                    border-top-color: #ffbf80;
                }

                .banjo__fret:nth-of-type(2) {
                    height: 18.5px;
                }

                .banjo__fret:nth-of-type(3) {
                    height: 17.5px;
                }

                .banjo__fret:nth-of-type(4) {
                    height: 16.5px;
                    // the 4th fret has a bottom border because a top one on the 5th fret would screw it up
                    border-bottom: 1px solid #fff;
                }

                .banjo__fret:nth-of-type(5) {
                    height: 15.6px;
                }

                .banjo__fret:nth-of-type(6) {
                    height: 14.7px;
                }

                .banjo__fret:nth-of-type(7) {
                    height: 13.9px;
                }

                .banjo__fret:nth-of-type(8) {
                    height: 13.1px;
                }

                .banjo__fret:nth-of-type(9) {
                    height: 12.4px;
                }

                .banjo__fret:nth-of-type(10) {
                    height: 11.7px;
                }

                .banjo__fret:nth-of-type(11) {
                    height: 11px;
                }

                .banjo__fret:nth-of-type(12) {
                    height: 10.4px;
                }

                .banjo__fret:nth-of-type(13) {
                    height: 9.8px;
                }

                .banjo__fret:nth-of-type(14) {
                    height: 9.3px;
                }

                .banjo__fret:nth-of-type(15) {
                    height: 8.8px;
                }

                .banjo__fret:nth-of-type(16) {
                    height: 8.3px;
                }

                .banjo__fret:nth-of-type(17) {
                    height: 7.8px;
                }

                .banjo__fret:nth-of-type(18) {
                    height: 7.4px;
                }

                .banjo__fret:nth-of-type(19) {
                    height: 7px;
                }

                .banjo__fret:nth-of-type(20) {
                    height: 6.6px;
                }

                .banjo__fret:nth-of-type(21) {
                    height: 6.2px;
                }

    // Strings
    #banjo__strings {
        height: 365px;
        left: 68px;
        top: 47px;
        z-index: 3;
    }

        // Each string is just a very thin div
        .banjo__string {
            position: relative;
            display: inline-block;
            height: 365px;
            width: 1px;
            background-color: $metal;
            padding: 0;
            margin: 0 2px;

            // Fifth (or first from left to right) string is a bit shorter than the rest
            &:first-of-type {
                height: 279px;
            }
        }


    // The head of banjo is a couple of rectangles with rounded borders
    #banjo__head {
        left: 65px;
        top: 0px;
        height: 30px;
        width: 37px;
        border-radius: 50%;
        background-color: #111;  
   
        &::after {
            @include pseudo;
            top: 22px;
            height: 25px;
            width: 37px;
            border-radius: 35% / 50%;
            background-color: #111;  
        }

        // And the top cut off
        &::before {
            @include pseudo;
            top: -2px;
            height: 6px;
            width: 36px;
            background-color: #222;  
        }
    }


        // Tuning pegs, just little circles
        .banjo__peg {
            display: block;
            height: 6px;
            width: 6px;
            background-color: #bbb;
            border-radius: 6px;
            z-index: 5;

            // Positioning each peg
            &:nth-of-type(1) {
                top: 10px;
                left: 6px;
            }
            &:nth-of-type(2) {
                top: 32px;
                left: 4px;
            }
            &:nth-of-type(3) {
                top: 10px;
                left: 25px;
            }
            &:nth-of-type(4) {
                top: 32px;
                left: 27px;
            }
        }

        // The ends of the strings are again, just 1px wide divs.
        .banjo__string-end {
            width: 1px;
            display: block;
            background-color: $metal;
            z-index: 5;
        }

            // Each one is positioned and rotated. nth-of-type wasn't working, it's a fun project so 
            // I opted for a lazy workaround
            #end1 {
                left: 9px;
                top: 37px;
                height: 12px;
                transform: rotate(-15deg);
            }

            #end2 {
                left: 12px;
                top: 11px;
                height: 37px;
                transform: rotate(-11deg);
            }

            #end3 {
                left: 24px;
                top: 11px;
                height: 37px;
                transform: rotate(11deg);
            }

            #end4 {
                left: 27px;
                top: 37px;
                height: 12px;
                transform: rotate(15deg);
            }

// Color Variables
$brass: #ffc34d;
$gold: #e69900;

  // // // // // // //
//                    //
//      TRUMPET       //
//                    //
  // // // // // // //
  // This is a long one

#trumpet {
    position: relative;
    height: 150px;
    width: 500px;
    margin: 50px;
}

// (almost) every div has absolute positioning, and is coloured a golden brass color. 
#trumpet div {
    position: absolute;
    background-color: $brass;
}

    // First part is the silver...
    
     // // // // //
    // mouthpiece //
     // // // // //
        #trumpet #trumpet__mouthpiece {
            top: 10px;
            left: 8px;
            height: 26px;
            width: 12px;
            border-radius: 30% / 50%;
            background-color: #bbb;
        }

        // A lot of these divs are similar *rings*
        #trumpet #trumpet__mouthpiece-ring {
            top: 12px;
            left: 16px;
            height: 22px;
            width: 8px;
            border-left: 2px solid $metal;
            border-radius: 30% / 50%;
            background-color: #bbb;
        }

        // The connector is where it thins
        #trumpet #trumpet__mouthpiece-connector {
            top: 12px;
            left: 20px;
            height: 22px;
            width: 15px;
            border-left: 2px solid $metal;
            background-color: #bbb;
            border-radius: 25% 0 0 25%;
            // This is done with two pseudo elements with a background color of the color of the page
            &::before {
                @include pseudo;
                top: -5.5px;
                left: 2px;
                width: 40px;
                height: 12px;
                border-radius: 50% / 50%;
                background-color: $bgcolor;
            }
            &::after {
                @include pseudo;
                top: 15.5px;
                left: 2px;
                width: 40px;
                height: 15px;
                border-radius: 50% / 50%;
                background-color: $bgcolor;
            }
        }

        #trumpet #trumpet__mouthpiece-end-ring {
            top: 18px;
            left: 33px;
            height: 10px;
            width: 12px;
            background-color: #bbb;
            border-left: 2px solid $metal;
            border-radius: 30% / 50%;
        }

        #trumpet #trumpet__mouthpiece-end {
            top: 18px;
            left: 39px;
            height: 10px;
            width: 25px;
            background-color: #bbb;
            border-left: 2px solid $metal;
            border-radius: 30% 0 0 30%;
        }


     // // // // //
    //    Pipes   //
     // // // // //

    // The leadpipe is the main pipe running along the top
    #trumpet__leadpipe {
        top: 17px;
        left: 66px;
        height: 10px;
        width: 290px;
        border-left: 2px solid $gold;
        z-index: 5;
        border-top: 1px solid $gold;
        border-bottom: 1px solid $gold;
    }

        #trumpet__hook {
            height: 22px;
            width: 15px;
            left: 195px;
            top: -22px;
            border-radius: 15px 0 0 15px;
            z-index: 3;
            &::after {
                @include pseudo;
                height: 4px;
                width: 15px;
                background-color: $brass;
                top: 18px;
                left: -6px;
                border-top-right-radius: 5px;
            }
            &::before {
                @include pseudo;
                height: 16px;
                width: 13px;
                background-color: $bgcolor;
                border-radius: 14px 0 0 13px;
                top: 2px;
                left: 2px;
            }
        }


    // These pipe connectors are found all over the trumpet, they are just small rectangles with gold borders
    .trumpet__pipe-connector {
        height: 12px;
        width: 9px;
        border-left: 2px solid $gold;
        border-right: 2px solid $gold;
    }

      // // // // // //
    //  Tuning Slide  //
     // // // // // // 

    // The main tuning slide is a special part of the piping
    #trumpet__slide {
        left: 356px;
        z-index: 4;
    }

        #trumpet__tuning-slider--t {
            height: 11px;
            width: 10px;
            left: 2px;
            top: 17px;
            z-index: 5;
            border-top: 1px solid $gold;
        }

        #trumpet__tuning-slider-handle {
            height: 30px;
            width: 6px;
            top: 37px;
            left: 6px;
            z-index: 4;
            box-sizing: border-box;
            border: 2px solid $gold;
            border-width: 0 2px;
            &::before, &::after {
                @include pseudo;
                height: 8px;
                width: 10px;
                background-color: $brass;
                top: -8px;
                left: -4px;
                box-sizing: border-box;
                border: 2px solid $gold;
            }
            &::after {
                top: 30px;
            }
        }

        // I don't play trumpet so I don't know what a water key is. 
        // What I do know is that it was quite annoying to make due to z-indexes and background colors overriding.
        // Hence, it's out of the #tuning-slide div.
        #trumpet #trumpet__water-key {
            top: 31px;
            left: 370px;
            background-color: $bgcolor;
            border-top: 35px solid transparent;
            border-bottom: 35px solid transparent; 
            border-right: 45px solid $brass;
            border-radius: 50%;
            transform: rotate(40deg);
            z-index: 3;
            &::before {
                @include pseudo;
                top: -30px;
                left: 0px;
                border-top: 33px solid transparent;
                border-bottom: 32px solid transparent; 
                border-right: 40px solid $bgcolor;
                border-radius: 50%;
            }
            &::after {
                @include pseudo;
                height: 10px;
                width: 10px;
                background-color: $brass;
                left: 31px;
                border-radius: 0 5px;
            }
        }

        // This is the main loop, just a semi circle with a smaller one inside
        // colored the same as the page
        #trumpet__tuning-slide {
            height: 69px;
            width: 34px;
            left: 16px;
            top: 17px;
            border-radius: 0 69px 69px 0;
            z-index: 1;
            border: 1px solid $gold;
            border-left-width: 0;
            &::before {
                @include pseudo;
                top: 10px;
                height: 46px;
                width: 22px;
                background-color: $bgcolor;
                border-radius: 0 50px 50px 0;
                border: 1px solid $gold;
                border-left-width: 0;
                z-index: 0;
            }
        }

        #trumpet__tuning-slider--b {
            @extend #trumpet__tuning-slider--t;
            top: 75px;
            z-index: 1;
            height: 12px;
            border-bottom: 1px solid $gold;
            border-top: none;
        }


    // Then the pipe goes from the loop towards the valves
    #trumpet__bottom-right-pipe {
        top: 75px;
        left: 261px;
        height: 12px;
        width: 95px;
        border-left: 2px solid $gold;
        z-index: 4;
        border-bottom: 1px solid $gold;
    }

    #trumpet__bottom-right-connector {
        left: -11px;
        border-width: 0;
        height: 12px;
        z-index: 4;
        border-bottom: 1px solid $gold;
        // The pseudo element is the curved pipe going into the valve
        &::before {
            @include pseudo;
            height: 11px;
            width: 13px;
            border: 1px solid $gold;
            border-right-width: 2px;
            background-color: $brass;
            left: -15px;
            border-radius: 50% 0 0 50%;
        }
    }    

    // The next pipe is a very small one between the second and third valves
    #trumpet__mid-pipe {
        top: 78px;
        left: 227px;
        height: 12px;
        width: 5px;
        border-left: 1px solid $gold;
        border-right: 1px solid $gold;
    }

    // The pipe comes out of the valves
    #trumpet__bottom-left-pipe {
        top: 81px;
        left: 109px;
        height: 11px;
        width: 75px;
        z-index: 1;
    }

    // And goes round the second loop, this one uses the same technique as the first.
    #trumpet__loop {
        height: 78px;
        width: 50px;
        top: 14px;
        left: 59px;
        border-radius: 39px 0 0 39px;
        &::before {
            @include pseudo;
            height: 56px;
            width: 39px;
            left: 11px;
            top: 11px;
            background-color: $bgcolor;
            border-radius: 28px 0 0 28px;
        }
    }

    
    // Finally theres the big bell
    #trumpet__bell {
        z-index: 2;
        left: 109px;
        top: -33px;
    }
        
        #trumpet__bell-top {
            top: 1px;
            height: 53px;
            width: 355px; 
            z-index: 2;
        }
            // These inner divs use a similar technique to the loops to create the curve of the bell
            #trumpet #trumpet__bell-top-out {
                height: 46px;
                width: 355px;
                background-color: $bgcolor;
                border-radius: 120px / 0 0px 46px 0;
                z-index: 1;
            }

        #trumpet__bell-bottom {
            top: 54px;
            height: 53px;
            width: 355px;
            z-index: 6;
        }
        
            #trumpet #trumpet__bell-bottom-out {
                top: 7px;
                height: 46px;
                width: 355px;
                background-color: $bgcolor;
                border-radius: 120px / 0 46px 0 0;
                z-index: 1;
            }

        // Tried to avoid an obvious pun here....
        #trumpet__bell-ring {
            top: 0px;
            left: 351px;
            height: 102px;
            width: 8px;
            z-index: 1;
            border-radius: 6px / 50px;
            border: 2px solid $gold;
        }



      // // // // // //
    //  Valve Slides  //
     // // // // // // 

    // The first valve slide is the one on the left.
    // All the parts of it are things we've seen before,
    // Pipes, connectors and loops.
    #trumpet__first-slide {
        left: 114px;
        top: 64px;   
        z-index: 2;
    }

        #trumpet__first-top-end {
            height: 10px;
            left: 69px;
            width: 7px;
            z-index: 2;
            border-radius: 0 6px 6px 0;
            border: 1px solid $gold;
        }

        #trumpet__first-tr-connector {
            left: 57px;
        }

        #trumpet__first-top {
            height: 12px;
            left: 29px;
            width: 28px;
        }

        #trumpet__first-tl-connector {
            left: 16px;
        }
    
        // There is a hook on the first slide, made from a rounded brass rectangle
        #trumpet__first-hook {
            height: 30px; 
            width: 26px;
            top: -31px;
            left: 36px;
            border-radius: 0 0 13px 13px / 15px;
            // With a smaller, inner rectangle taken out of it
            &::before {
                @include pseudo;
                top: 0px;
                left: 2px;
                height: 28px;
                width: 22px;
                background-color: $bgcolor;
                border-radius: 0 0 11px 11px / 13px
            }
            // As well as a triangle to make the edges different heights
            &::after {
                @include pseudo;
                border-top: 10px solid #222;
                border-right: 26px solid transparent;
                top: 0px;
                left: 0px;
            }
        }

            #trumpet__first-hook-base {
                height: 3px;
                width: 20px;
                background-color: $brass;
                top: 28px;
                left: 2px;
            }

        #trumpet__first-loop {
            height: 30px;
            width: 15px;
            left: 0px;
            border-radius: 32px 0 0 32px;
            border: 1px solid $gold;
            border-right-width: 0;
            &::before {
                @include pseudo;
                height: 4px;
                width: 3px;
                left: 12px;
                top: 12px;
                background-color: $bgcolor;
                border-radius: 3px 0 0 0;
                border-left: 1px solid $gold;
            }
        }

        #trumpet__first-bl-connector {
            left: 16px;
            top: 20px;
            height: 11px;
            z-index: 2;
            border-top: 1px solid $gold;
        }

        #trumpet__first-bottom {
            @extend #trumpet__first-top;
            top: 20px;
            height: 11px;
            border-top: 1px solid $gold;
            z-index: 2;
        }

        #trumpet__first-br-connector {
            left: 57px;
            top: 20px;
            height: 11px;
            z-index: 2;
            border-top: 1px solid $gold;
        }

        #trumpet__first-bottom-end {
            @extend #trumpet__first-top-end;
            top: 20px;
            width: 10px;
        }
    

    // The second slide is similar, except it is skewed and rotated to create a 3d effect.
    // This could probably have been done better.
    #trumpet__second-slide {
        left: 196px;
        top: 77px;
        z-index: 4;
        transform: skew(-20deg) rotate(-20deg);
    }

        #trumpet__second-pipe--t {
            height: 12px;
            width: 7px;
            left: 15px;
            border-radius: 0 6px 6px 0 / 4px;
            border-right: 2px solid $gold;
            z-index: 2;
        }          
            
        #trumpet__second-t-connector {
            left: 12px;
            width: 3px;
            border-radius: 0 3px 3px 0 / 5px;
            border-left-width: 0;
            z-index: 3;
        }

        #trumpet__second-loop {
            height: 30px;
            width: 12px;
            z-index: 3;
            border-radius: 32px 0 0 32px;
            border: 1px solid $gold;
            border-right-width: 0;
            &::before {
                @include pseudo;
                height: 8px;
                width: 3px;
                top: 10px;
                left: 8px;
                background-color: $bgcolor;
                border-radius: 8px 0 0 8px;
                border: 1px solid $gold;
                border-right-color: #222;
            }
        }

        #trumpet__second-b-connector {
            @extend #trumpet__second-t-connector;
            top: 20px;
        }
            
        #trumpet__second-pipe--b {
            @extend #trumpet__second-pipe--t;
            top: 20px;
        }          


    // The third slide is basically the same as the first,
    // Except the hook is replaced with a ring
    #trumpet__third-slide {
        left: 252px;
        top: 60px;
        z-index: 3;
    }

        #trumpet__third-top {
            height: 12px;
            left: 13px;
            width: 80px;
        }

        #trumpet__third-tr-connector {
            left: 93px;
        }

        #trumpet__third-ring {
            height: 24px; 
            width: 24px;
            top: -24px;
            left: 27px;
            border-radius: 50%;
            &::before {
                @include pseudo;
                height: 20px;
                width: 20px;
                background-color: $bgcolor;
                top: 2px;
                left: 2px;
                border-radius: 50%;
            }
            &::after {
                @include pseudo;
                height: 3px;
                width: 20px;
                background-color: $brass;
                top: 21px;
                left: 2px;
            }
        }

        #trumpet__third-loop {
            height: 32px;
            width: 16px;
            left: 106px;
            z-index: 2;
            border-radius: 0 32px 32px 0;
            &::before {
                @include pseudo;
                height: 8px;
                width: 4px;
                top: 12px;
                background-color: $bgcolor;
                border-radius: 0 8px 8px 0;
            }
        }

        #trumpet__third-bottom {
            top: 20px;
            height: 12px;
            left: 0px;
            width: 93px;
            z-index: 2;
        }

        #trumpet__third-br-connector {
            left: 93px;
            top: 20px;
        }



      // // // // // //
    //     Valves     //
     // // // // // // 
    // Finally, there are the valves
    #trumpet #trumpet__valves {
        top: -6px;
        left: 184px;
        background-color: $bgcolor;
    }
    
    // Each valve is the same, so it's just 3 repeated
    #trumpet .trumpet__valve {
        position: relative;
        display: inline-block;
        margin-right: 1px;
        width: 20px;
        height: 50px;
        background-color: $bgcolor;
    }
        
        // At the top of the valve, there's the button thing (again, I don't play trumpet)
        // This is made of a half oval,
        #trumpet .trumpet__valve-button {
            left: 3px;
            height: 5px;
            width: 11px;
            background-color: $metal;
            border-radius: 0 0 6px 6px / 4px;
            z-index: 5;
            // An oval
            &::before {
                @include pseudo;
                top: -2px;
                left: -2px;
                height: 5px;
                width: 15px;
                background-color: $metal;
                border-radius: 8px / 4px;
            }
            // And a rectangle with rounded base
            &::after {
                @include pseudo;
                top: 5px;
                left: 2px;
                width: 7px; 
                height: 13px;
                background-color: $metal;
                border-radius: 0 0 4px 4px / 3px;
                border-bottom: 1px solid #444;
            }
        }

        // The top of the valve is just an oval with different color
        #trumpet .trumpet__valve-top {
            height: 7px;
            top: 14px;
            left: -1px;
            width: 20px;
            border-radius: 10px 10px / 5px;
            background-color: #633;
            border-bottom: 1px solid #444;
            z-index: 4;
        }

        // The 3 pipe parts are rectangles with rounded bottoms overlapping each other
        #trumpet .trumpet__valve-pipe-top {
            top: 19px;
            left: -1px;
            height: 33px;
            width: 18px;
            border: 1px solid #444;
            border-radius: 0 0 10px 10px / 5px;
            z-index: 3;
            border-width: 0 1px 2px 1px;
            background-color: $metal;
        }

        .trumpet__valve-pipe {
            top: 51px;
            height: 65px;
            width: 18px;
            border-bottom: 2px solid $gold;
            border-radius: 0 0 10px 10px / 5px;
            z-index: 2;
        }

        .trumpet__valve-cap {
            top: 114px;
            height: 15px;
            width: 18px;
            border-radius: 0 0 10px 10px / 5px;
        }

        // In between the valves there are small connectors
        .trumpet__valve-connector {
            top: 58px;
            left: 18px;
            height: 7px;
            width: 5px;
            border-left: 1px solid $gold;            
            border-right: 1px solid $gold;   
            z-index: 2;         
        }

            #trumpet__valve-bl-connector {
                top: 104px;
            }

            #trumpet__valve-tr-connector {
                left: 43px;
            }

            #trumpet__valve-br-connector {
                top: 104px;
                left: 43px;
            }

              
            
!

JS

              
                /*
    There's no JS here. 
    Hope you enjoy it, you can read through it if you want. 
    I've sort of commented most of it, although it could use 
    some work, and the code needs a cleanup. 
    Comment here or contact me directly at @benKolyaM
    Thanks!  
*/
              
            
!
999px

Console