VW Bus mit CSS

by Bianca Kuehweidner

HTML

<div class="wrapper">

    <div class="bus bus--full bus--top-green bus--bottom-green bus--first">
        <div class="bus-body">
            <div class="bus__body--top roof"></div>
            <div class="bus__body--top side-top"></div>
            <div class="bus__body--top side-top side-top--right"></div>
            <div class="bus__body--top gutter"></div>
            <div class="bus__body--top gutter gutter--right"></div>
            <div class="bus__body--top mid-top"></div>
            <div class="bus__body--top bump"></div>

            <div class="bus__body--bottom front"></div>
            <div class="bus__body--bottom front-middle"></div>
            <div class="bus__body--bottom front-middle--bottom"></div>
            <div class="bus__body--bottom grill">
                <div class="grill__hole"></div>
                <div class="grill__hole grill__hole--right"></div>
            </div>
        </div>

        <div class="campertop">
            <div class="poptop-2"></div>
            <div class="poptop-1"></div>
            <div class="poptop-seal"></div>
        </div>

        <div class="mirrors">
            <div class="mirror-l">
                <div class="mirror-glass"></div>
                <div class="mirror-arm"></div>
            </div>
            <div class="mirror-r">
                <div class="mirror-glass"></div>
                <div class="mirror-arm mirror-arm-r"></div>
            </div>
        </div>

        <div class="windshield">
            <div class="windshield-rubber"></div>
            <div class="windshield-rubber--bottom"></div>
            <div class="windshield-rubber--side"></div>
            <div class="windshield-rubber--side windshield-rubber--side--right"></div>
            <div class="windshield-top"></div>
            <div class="windshield-bottom"></div>
        </div>

        <div class="front-parts">
            <div class="wiper">
                <div class="wiper-blade"></div>
                <div...

CSS

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wrapper {
    background: #f4f2eb;
    background-color: #afc7c5;
    color: #555;
    font-size: 125%; /* 20px */
    padding-bottom: 6em;
}

.row:after {
    content: "";
    display: block;
    clear: both;
}

.col--half {
    float: left;
    vertical-align: top;
    width: 50%;
}

.col--third {
    float: left;
    vertical-align: top;
    width: 33.3%;
}




/* ==========================================
   Bus
   ========================================== */
.bus {
    background: transparent;
    /* Font size set to 5em so that 0.01em = 1px */
    font-size: 5em;
    height: 10em;
    margin:1em auto;
    position: relative;
    width: 10em;
}

.bus--first { margin-top: 0; }
.bus--full  { font-size: 7vw; }
.bus--half  { font-size: 4vw; }
.bus--third { font-size: 3vw; }

.bus * {
    position: absolute;
}




/* ==========================================
   Body
   ========================================== */
.bus-body {
    height: 100%;
    width: 100%;
    z-index: 20;
}

.bus__body--top {
    background: #a9a4a2;
    position: absolute;
}

.bus__body--bottom {
    background: #a9a4a2;
    position: absolute;
}

/* Colors */
.bus--top-green .bus__body--top,
.bus--bottom-green .bus__body--bottom    { background: #82a53d; }
.bus--top-orange .bus__body--top,
.bus--bottom-orange .bus__body--bottom   { background: #ee6615; }
.bus--top-yellow .bus__body--top,
.bus--bottom-yellow .bus__body--bottom   { background: #f7c125; }
.bus--top-red .bus__body--top,
.bus--bottom-red .bus__body--bottom      { background: #bb211a; }
.bus--top-blue .bus__body--top,
.bus--bottom-blue .bus__body--bottom     { background: #1f77b5; }
.bus--top-tan .bus__body--top,
.bus--bottom-tan .bus__body--bottom      { background: #c5b889; }
.bus--top-white .bus__body--top,
.bus--bottom-white .bus__body--bottom    { background: #e3e2d8; }
.bus--top-brown .bus__body--top,
.bus--bottom-brown .bus__body--bottom  ...