@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 { @include pseudo; height: 8px; width: 10px; background-color: $brass; top: -8px; left: -4px; box-sizing: border-box; border: 2px solid $gold; } &::after { @extend #trumpet__tuning-slider-handle::before; 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; }

!