画像を正確にデザインする方法

Question

私はPSDからウェブサイトをデザインしようとしましたが、デザインできなかった部分があります。それは私にとってはもっと複雑です。しかし、私はたくさん試しました。

.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; 
} 

上記は私が試したコードです。

私は正確に上記画像のようなデザインをしたいです。私はここにこだわっています。私を助けてください。

Answer 1

ご確認のうえ、質問がある場合は教えてください。

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; 
}