2016年春PANTONEトレンドカラー

by higa tsubasa

HTML

<div class="torendok">
        <ul class="one">
            <li><span>#F7CAC9</span></li>
            <li><span>#F7786B</span></li>
            <li><span>#91A8D0</span></li>
            <li><span>#034F84</span></li>
        </ul>
        <ul class="tow">
            <li><span>#FAE03C</span></li>
            <li><span>#98DDDE</span></li>
            <li><span>#9896A4</span></li>
            <li><span>#DD4132</span></li>
        </ul>
        <ul class="three">
            <li><span>#B18F6A</span></li>
            <li><span>#79C753</span></li>
            <li><span>チェックで配色デザイナーへ！</span></li>
        </ul>
    </div>

CSS

.torendok{/* width:100%; *//* height:100%; *//* background-color:#999; */}
.one,
.tow,
.three{display:flex;margin: 0;padding: 0;}
span{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.44);
    padding: 5px 0px 2px 7px;
    font-size: 12px;
}
li{
    height: 100px;
    width: 100px;
    margin: 10px;
    list-style: none;
    position: relative;
}
.one li:nth-of-type(1){background-color: #F7CAC9;}
.one li:nth-of-type(2){background-color: #F7786B;}
.one li:nth-of-type(3){background-color: #91A8D0;}
.one li:nth-of-type(4){background-color: #034F84;}

.tow li:nth-of-type(1){background-color: #FAE03C;}
.tow li:nth-of-type(2){background-color: #98DDDE;}
.tow li:nth-of-type(3){background-color: #9896A4;}
.tow li:nth-of-type(4){background-color: #DD4132;}

.three li:nth-of-type(1){background-color: #B18F6A;}
.three li:nth-of-type(2){background-color: #79C753;}
.three li:nth-of-type(3){
    width: 230px;
    text-align: center;
    margin: 10px 0px 0px 0px;
}
.three li:nth-of-type(3) span{
    background-color: rgba(252, 252, 252, 0.59);
    padding: 13px 10px;
    margin: 0;
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
    font-weight: bold;
    font-size: 13px;
}