Manaful-SearchResult

by mejileben

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<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">
                login
            </button>
        </div>
    </div>
</div>
<div class="frame-contents">
    <div class="mod-title">
        <div class="box">
            <span class="msg">Search Result</span>
        </div>
    </div>
    <div class="sec-rList">
        <li class="mod-result">
            <div class="siteLabel opened">
                <span class="pulldownIcon"><i class="fa fa-sort-up"></i></span>
                <span class="siteName">Qiita</span>
            </div>
            <div class="contents">
                <ul class="content">
                    <div class="thumbnail tabc">
                        <span class="needTime inlb">5min</span>
                    </div>
                    <div class="summary tabc">
                        <div class="titleLabel">
                            <span class="title">JavaScriptのアロー関数がただのシンタックスシュガーでは無かった話</span>
                        </div>
                        <div class="previewLabel">
                            <span class="preview">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ……</span>
                        </div>
                    </div>
                </ul>
                <ul class="content">
                    <div class="thumbnail tabc">
                        <span class="needTime inlb">5min</span>
                    </div>
                    <div class="summary tabc">
                        <div class="titleLabel">
                            <span class="title">JavaScriptのアロー関数がただのシンタックスシュガーでは無かった話</span>
                       ...

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;
}
/*リストのマークを消します*/
ul,ol,li{
	list-style-type: none;
}
/* 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;
    font-size: 60%;
}
/* frame-contents */
.frame-contents {
    width: 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;
}
/* sec-rList */
.sec-rList {
    width: 85%;
    margin: 0 auto;
}
.mod-result {
    margin-bottom: 20px;
}
.mod-result .inlb {
    display: inline-block;
}
.mod-result .tabc {
    display: table-cell;
}
.mod-result .siteLabel {
    padding: 15px 10px 10px 10px;
    border: 2px solid #ccc;
    border-top: 5px solid #228822;
    border-radius: 8px 8px 0px 8px;
    background: rgba(255, 255, 255, 0.9);
}
.mod-result .siteLabel.opened .siteName {
    font-weight: bold;
}
.mod-result .contents {
    margin-left: 50px;
    background: rgba(255, 255, 255, 0);
    border-radius: 0px 0px 10px 10px;
    overflow: hidden;
}
.mod-result .contents .content {
    height: 80px;
    background-color: rgba(255, 255, 255,...