css layout 2

by Richard Hunter

HTML

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="http://fonts.googleapis.com/css?family=Muli"></script>
<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Poiret+One&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="menu">
    <div class="home-link">home</div>
    <ul>
        <li>
            <span class="text">
            alpha jkjlj
                <span>
        
        </li>
        <li>betajlj</li>
        <li>kfjdkj</li>
    </ul>
</div>

<i class="fa fa-camera-retro"></i>
<i class="fa fa-arrow-right"></i>
<i class="fa fa-arrow-left"></i>

SCSS

*, *:before, *:after {
    box-sizing : border-box;
}
.menu {
    $black : lighten(black, 23%);

    margin : 20px;
    box-shadow : 4px 0px 0px 0px white, 6px 0 0 0 $black;
    .home-link {
        color : #333;
        background : #eee;
        text-transform : uppercase;
        font-weight : bold;
        padding : 12px;
        font-family: 'Muli', sans-serif;
        border-top : solid 2px black;
        
       
        
    }
    width : 300px;
    li {
        border-left : solid orange 5px;
    
        transition : 0.2s linear all;
        font-size : 12px;
        height : 70px;
        &:hover {
           font-size : 25px;
                color : #333;
                background : white;
           border-left-color :lighten(black, 23%);
        }
       
        span {
            display : inline-block;
           
        }
    
        background : lighten(black, 23%);
        line-height : 1.5;
        padding : 12px;
        font-family: arial;
        color : white;
        margin-bottom : 1px;
        position : relative;
       
        
        
        .fa {
            
            background : red;
            height : 100%;
            display : inline-block;
          
            
        }
  
       
    }
}