Answers Redesign

by colin_young

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/base.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/layout.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/skeleton/1.2/stylesheets/skeleton.css">
<div class="container">
    <div class="five columns tab-list">
        <div style="margin-right: 0;" class="four columns alpha report-menu">
            <div class="three columns offset-by-one alpha">
                 <h5>
                        <span class="healthedge">
                            <span class="first">Health</span><span class="second">Rules</span>
                        </span>
                    </h5>

                 <h6>
                        by 
                        <span class="healthedge"> 
                            <span class="first">Health</span><span class="second">Edge</span>
                        </span>
                    </h6>

            </div>
             <h2 class="three columns alpha inactive current-section">Reports</h2>

            <ul class="three columns offset-by-one alpha omega">
                <li>
                    Dashboard
                </li>
                <li>
                    <span class="report-count">
                        <span class="run">2</span>
                        <span class="view">6</span>
                    </span>
                    Accounting
                </li>
                <li>
                    <span class="report-count">
                        <span class="run">2</span>
                        <span class="view">6</span>
                    </span>
                    Billing
                </li>
                <li class="active">
                    <span class="report-count">
                        <span class="run">3</span>
                        <span class="view">4</span>
                    </span>
                    Account
                </li>
                <li>
            ...

CSS

@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/RzoNiRR1p2Mqyyz2RwqSMw.woff) format('woff');
}
@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 700;
    src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/yVHpdQrmTj9Kax1tmFSx2j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
    font-family:'HEDemo';
    src: local('HEDemo'), local('HEDemo'), url(https://dl.dropbox.com/sh/le29dyhr9zg2xol/Ebvi_Wvb46/he-demo-icons.woff?token_hash=AAHsz-khwwFsm3sDdRTDztEzyIMxaVHKbYEVTSgZNvnuig&dl=1) format('woff');
}
body {
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, li {
    font-family:'Oxygen', sans-serif;
}
.healthedge {
    color: rgb(59, 110, 149);
    font-family:'Oxygen', sans-serif;
    text-transform: lowercase;
}
.healthedge .first {
    font-weight: 400;
}
.healthedge .second {
    font-weight: 700;
}
h2.logo {
    text-align: right;
}
h2.current-section {
    position: relative;
    left: -124px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
}
.tab-list {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    top: 0;
    bottom: 0;
}
ul.icons {
    display: inline;
    list-style: none;
}
ul.icons li {
    display: inline;
    list-style: none;
    font-family: HEDemo;
}
.report-menu > ul li {
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
}
.report-menu > ul li:hover:not(.active):not(.shadow) {
    background-color: #999;
    border-bottom-color: #999;
    box-shadow: 2px 2px 4px #666;
    color: #FFF;
    z-index: 4;
}
.inactive, .report-menu > ul li {
    color: #AAA;
    position: relative;
}
.report-menu > ul li {
    background-color: #DDD;
   ...

JavaScript

$('#content-card .flip-card').click(function () {
    $('#content-card').toggleClass('rotated');
});