spin 404

by xu xiaofei

HTML

<div id="offset"></div>

<div id="wrapper">
    
    <h1 class="fadein">Uh-oh!</h1>
    
    <div id="fourohfour">
        <span class="four">4</span>
        <div id="compass">
            <span>N</span>
            <div id="needle"></div>
        </div>
        <span class="four">4</span>
    </div>

    
</div>

SCSS

#wrapper {
    margin: 100px auto;
    text-align: center;
    width: 600px;
}

#wrapper p,
#wrapper span,
#wrapper h1 {
    color: #555;
    font-family: helvetica neue, arial, sans-serif;
}

#wrapper h1 {
    font-size: 40px;
}

#fourohfour {
    margin: 20px 0 30px;
}

#wrapper span,
#wrapper h1 {
    font-weight: bold;
}

#wrapper .four {
    font-size: 150px;
}

#compass {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background-image: -webkit-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: -moz-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: -ms-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: -o-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    border: 25px solid #AAA;
    border-left-color: #B4B4B4;
    border-top-color: #B4B4B4;
    display: inline-block;
    height: 115px;
    margin: 0 15px;
    position: relative;
    width: 115px;
    vertical-align: bottom;
    
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

#compass span {
    color: #8bc347;
    font-size: 20px;
}

#needle {
    background: #eee;
    background:#8bc347;
    background-image: -webkit-linear-gradient(top, #8bc347 50%, #eee 50%);
    background-image:...