Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .items{
            font-size:0px;
        }
        .item{
            padding:20px 15px 60px 15px;
            text-align:center;
            width:150px;
            display:inline-block;
            vertical-align:top;
            font-size:14px;
        }
        .item-img{
            padding:6px;
            width:35px;
            border-radius:23px;
            display:inline-block;
            box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        .item-img img{
            height:30px;
        }
        .item-title{
            margin-top:30px;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
            font-weight:bold;
        }
        .item-text{
            margin-top:20px;
            color:#ffffff;
        }
        .item:nth-of-type(1){
            background:#a2d6d9;
        }
        .item:nth-of-type(1) .item-img{
            background:#51a7ac;
        }
        .item:nth-of-type(1) .item-title{
            color:#51a7ac;
        }
        .item:nth-of-type(2){
            background:#f48871;
        }
        .item:nth-of-type(2) .item-img{
            background:#e83c34;
        }
        .item:nth-of-type(2) .item-title{
            color:#e83c34;
        }
        .item:nth-of-type(3){
            background:#b9d694;
        }
        .item:nth-of-type(3) .item-img{
            background:#89b453;
        }
        .item:nth-of-type(3) .item-title{
            color:#89b453;
        }
        .item:nth-of-type(4){
            background:#fae17c;
        }
        .item:nth-of-type(4) .item-img{
            background:#f6c640;
        }
        .item:nth-of-type(4) .item-title{
            color:#f6c640;
        }
        .item:nth-of-type(5){
            background:#f6b56b;
        }
        .item:nth-of-type(5) .item-img{
            background:#f07f30;
        }
        .item:nth-of-type(5) .item-title{
            color:#f07f30;
        }
    </style>
</head>
<body>
    <div class="top">

    </div>
    <div class="bottom">
        <div class="items">
            <div class="item">
                <div class="item-img">
                    <img src="https://static.thenounproject.com/png/89200-200.png" alt="">
                </div>
                <div class="item-title">
                    HTML
                </div>
                <div class="item-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo cumque, porro praesentium ut, accusantium itaque placeat possimus assumenda laudantium harum impedit ab, repudiandae qui.laudantium harum impedit ab, repudiandae qui.
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <img src="https://static.thenounproject.com/png/3803708-200.png" alt="">
                </div>
                <div class="item-title">
                    CSS
                </div>
                <div class="item-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo cumque, porro praesentium ut, accusantium itaque placeat possimus assumenda laudantium harum impedit ab, repudiandae qui.laudantium harum impedit ab, repudiandae qui.
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <img src="https://static.thenounproject.com/png/3532081-200.png" alt="">
                </div>
                <div class="item-title">
                    SNIPPETS
                </div>
                <div class="item-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo cumque, porro praesentium ut, accusantium itaque placeat possimus assumenda laudantium harum impedit ab, repudiandae qui.laudantium harum impedit ab, repudiandae qui.
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <img src="https://static.thenounproject.com/png/3805888-200.png" alt="">
                </div>
                <div class="item-title">
                    TAGS
                </div>
                <div class="item-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo cumque, porro praesentium ut, accusantium itaque placeat possimus assumenda laudantium harum impedit ab, repudiandae qui.laudantium harum impedit ab, repudiandae qui.
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <img src="https://static.thenounproject.com/png/1489354-200.png" alt="">
                </div>
                <div class="item-title">
                    HYPERLINKS
                </div>
                <div class="item-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo cumque, porro praesentium ut, accusantium itaque placeat possimus assumenda laudantium harum impedit ab, repudiandae qui.laudantium harum impedit ab, repudiandae qui.
                </div>
            </div>
        </div>
    </div>
</body>
</html>