responsive_static.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="./style/reset.css" />
        <link rel="stylesheet" type="text/css" href="./style/main.css" />
        <link rel="stylesheet" type="text/css" href="./style/responsive_static.css" />
    </head>
    <body>

    <h4 class="bold m-bottom10">One responsive element:</h4>
    <ul class="abs ex1 border m30 bw3 bc1 clearfix">
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="absolute bc-yellow"></li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-blue right"></li>
        <li class="bc-blue right"></li>
        <li class="bc-blue right"></li>
        <li class="bc-blue right"></li>
    </ul>

    <h4 class="bold m-top20">Two responsive element (50%):</h4>
    <ul class="abs ex2 border m30 bw3 bc1 clearfix">
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="absolute clearfix">
            <div class="w50 left">
                <div class="bc-yellow left"></div>
            </div>
            <div class="w50 left">
                <div class="bc-yellow left"></div>
            </div>
        </li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-blue right"></li>
        <li class="bc-blue right"></li>
        <li class="bc-blue right"></li>
        <li class="bc-blue right"></li>
    </ul>

    <h4 class="bold m-top20">Static element between two responsive element (50%):</h4>
    <ul class="abs ex2 ex3 border m30 bw3 bc1 clearfix">
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="bc-green left"></li>
        <li class="absolute clearfix">
            <div class="w50 left">
                <div class="bc-yellow left"></div>
            </div>
            <div class="w50 left">
                <div class="bc-yellow left"></div>
            </div>
            <div class="wrap left">
                <div class="bc-blue right"></div>
                <div class="bc-blue right"></div>
                <div class="bc-blue right"></div>
                <div class="bc-blue right"></div>
            </div>
        </li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
        <li class="bc-red right"></li>
    </ul>

    </body>
</html>