<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport"
      content="width=device-width,
      initial-scale=1,
      maximum-scale=1,
      user-scalable=no">

<title>Welfare Subsidies</title>

<style>
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    background:#fff;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

/* =========================
   TOP BAR
========================= */

.topbar{
    width:100%;
    height:72px;
    background:#087b5b;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.title{
    color:#fff;
    font-size:24px;
    line-height:1;
    font-weight:700;
}

.back{
    position:absolute;
    left:52px;
    top:26px;
    width:16px;
    height:16px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(45deg);
    cursor:pointer;
}

/* =========================
   EMPTY CONTENT
========================= */

.empty{
    width:100%;
    height:calc(100vh - 72px);
    min-height:500px;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    padding-top:275px;
}

.no-data{
    color:#c7c7c7;
    font-size:24px;
    font-weight:400;
    line-height:1;
}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

    .topbar{
        height:72px;
    }

    .title{
        font-size:24px;
    }

    .back{
        left:51px;
        top:26px;
        width:16px;
        height:16px;
        border-left-width:2px;
        border-bottom-width:2px;
    }

    .empty{
        height:calc(100vh - 72px);
        padding-top:275px;
    }

    .no-data{
        font-size:24px;
    }
}

/* =========================
   SMALL PHONES
========================= */

@media(max-width:390px){

    .topbar{
        height:64px;
    }

    .title{
        font-size:20px;
    }

    .back{
        left:30px;
        top:23px;
        width:14px;
        height:14px;
    }

    .empty{
        height:calc(100vh - 64px);
        padding-top:240px;
    }

    .no-data{
        font-size:20px;
    }
}
</style>

</head>

<body>

<header class="topbar">

    <div
        class="back"
        onclick="history.back()">
    </div>

    <div class="title">
Our Moments
    </div>

</header>

<main class="empty">

    <div class="no-data">
        No data
    </div>

</main>

</body>
</html>