how to make a design exactly as in image

Question

I have tried to design a website from a PSD, in that some area I could not design. As it is more complex for me to do. But I have tried a lot.

.single {
    width: 200px;
    height: 200px;
    background: #dddedf;
    display: inline-block;
    border: 15px solid #BDBEBB;
    -webkit-box-shadow: 0 0 15px 2px #898B8A;
    -moz-box-shadow: 0 0 15px 2px #898B8A;
    box-shadow: 0 0 15px 2px #898B8A;
}

Above is the code I have tried.

I want the design as exactly in the above image. I am stuck in here. Please help me.

Answer 1

Please check it, If you have any query then please tell me.

HTML :

<div class="upper">
    <div class="inner">
        Hello World
    </div>
</div>

CSS :

.upper {
    padding: 60px;
    background: #bbbebc;
    border: 30px solid #a9abaa;
}
.inner {
    height: 500px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    width: 100vw;
    background: #dddedf;
}