Manaful-TopPage

by mejileben

HTML

<div class="frame-header">
    <div class="mod-header">
        <div class="serviceName inlb">
            <span class="logo">Manaful</span>
        </div>
        <div class="login inlb">
            <button class="loginButton">
                logout
            </button>
        </div>
    </div>
</div>
<div class="frame-contents">
    <div class="mod-title">
        <div class="box">
            <span class="msg">1. Touch your SUKIMA time !</span>
        </div>
    </div>
    <div class="mod-times">
        <ul class="timeList">
            <li class="time inlb">
                <div class="timeButton">
                    <span class="minute">10min</span>
                </div>
            </li>
            <li class="time inlb">
                <div class="timeButton">
                    <span class="minute">20min</span>
                </div>
            </li>
            <li class="time inlb">
                <div class="timeButton">
                    <span class="minute">30min</span>
                </div>
            </li>
            <li class="time inlb">
                <div class="timeButton">
                    <span class="minute">40min</span>
                </div>
            </li>
            <li class="time inlb">
                <div class="timeButton">
                    <span class="minute">50min</span>
                </div>
            </li>
            <li class="time inlb">
                <div class="timeButton">
                    <span class="minute">60min</span>
                </div>
            </li>        
        </ul>
    </div>
</div>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-image: url(https://s4.postimg.org/y86m0b88d/02634x_Fotor.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/* frame-header */
.frame-header {
    width: 100%;
}
/* mod-header */
.mod-header {
    padding: 5px 0px;
    background: #11cccc;
}
.mod-header .inlb {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
}
.mod-header .serviceName {
    margin-left: 10px;
}
.mod-header .serviceName .logo {
    font-weight: bold;
    color: #ffffff;
}
.mod-header .login {
    float: right;
}
.mod-header .login .loginButton {
    margin-right: 20px;
    padding: 5px 10px;
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    border-right: 1px solid #555555;
    border-bottom: 1px solid #555555;
    border-radius: 5px;
    color: #ffffff;
    background: #339999;
}
/* frame-contents */
.frame-contents {
    width: 100%;
    height: 100%;
    padding-top: 20px;
}
/* mod-title */
.mod-title {
    margin-bottom: 25px;
}
.mod-title .box {
    text-align: center;
    font-size: 120%;
}
.mod-title .box .msg {
    font-weight: bold;
    color: #eee;
}
/* mod-times */
.mod-times {
    margin-left: 5px;
}
.mod-times .inlb {
    display: inline-block;
}
.mod-times .time {
    /* 750 - 50 - 50 = 650 = 300 + 50 + 300 */
    width: 100%;
    margin-left: -3px;
    padding: 5px 10px;
    text-align: center;
    box-sizing: border-box;
}
.mod-times .time .timeButton {
    margin-bottom: 10px;
    padding: 15px 10px;
    border-left: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #888888;
    border-bottom: 1px solid #888888;       
    border-radius: 5px;
    background: rgba(0, 0, 0, .2);
}
.mod-times .time .timeButton .minute {
    font-weight: bold;
    color: #eee;
}