Ubuntu Logo

Just the Circle of Friends for now, will complete it to be the full fledged logo with text sometime in the future

by Drknzz

HTML

<div id="ubuntu-CoF-container">
        <div id="ubuntu-CoF-background">
            <div id="ubuntu-CoF-orangeCircle">
                <div id="ubuntu-CoF-whiteMask">
                    <div id="ubuntu-CoF-whiteBar" class="topLeft"> </div>
                    <div id="ubuntu-CoF-whiteBar" class="bottomLeft"> </div>
                    <div id="ubuntu-CoF-whiteBar"> </div>
                </div>
            </div>
            <div id="ubuntu-faceBackground" class="top">
                <div id="ubuntu-faceForeground"></div>
            </div>
            <div id="ubuntu-faceBackground" class="left">
                <div id="ubuntu-faceForeground"></div>
            </div>
            <div id="ubuntu-faceBackground" class="right">
                <div id="ubuntu-faceForeground"></div>
            </div>
        </div>
    </div>

CSS

body {
    background: #DD4814;
}

#main-container {
    margin-left:auto;
    margin-right:auto;
    background: transparent;
}

#ubuntu-container {
    background: transparent;
    margin: 71.25px;
}

p.ubuntu {
    color: white;
    font-family: 'Ubuntu', sans-serif;
    font-size: 570px;
}

#ubuntu-CoF-container {
    position: absolute;
    background: transparent;
    width: 285px;
    height: 285px;
    margin-left: 25%;
    margin-bottom: 25%;
    margin-top: 25%;
    margin-right: 25%;
    float: right;
    vertical-align: text-top;
}

#ubuntu-CoF-background {
    background: white;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#ubuntu-CoF-orangeCircle {
    background: #DD4814;
    position: absolute;
    width: 166px;
    height: 166px;
    border-radius: 83px;
    margin: 60px;
}

#ubuntu-CoF-whiteMask {
    width: 111px;
    height: 111px;
    background: white;
    border-radius:55.5px;
    margin: 27px;
}

#ubuntu-CoF-whiteBar {
    position: absolute;
    background: white;
    height: 11px;
    width: 85px;
    margin-left: 55.5px;
    margin-top: 51px;
}

#ubuntu-CoF-whiteBar.bottomLeft {
    -moz-transform-origin: 100% 100%;
    -moz-transform: translateX(-85px) rotate(-60deg);
}

#ubuntu-CoF-whiteBar.topLeft {
    -moz-transform-origin: 0% 0%;
    -moz-transform: translateY(-70px) translateX(-42px) rotate(60deg);
}

#ubuntu-faceBackground {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: white;
}

#ubuntu-faceBackground.top {
    margin-left: 164px;
    margin-top: 32px;
}

#ubuntu-faceBackground.right {
    margin-left: 164px;
    margin-top: 200px;
}

#ubuntu-faceBackground.left {
    margin-left: 23px;
    margin-top: 118px;
}

#ubuntu-faceForeground {
    position: absolute;
    width: 39px;
    height: 39px;
    border-radius: 19px;
    background: #DD4814;
    margin: 6px;
}