comment faire un design exactement comme dans l'image

Question

J'ai essayé de concevoir un site Web à partir d'un PSD, dans ce domaine que je ne pouvais pas concevoir. Comme c'est plus complexe pour moi de le faire. Mais j'ai beaucoup essayé.

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

Ci-dessus, le code que je l'ai essayé.

Je veux la conception comme exactement dans l'image ci-dessus. Je suis coincé ici. Aidez-moi, s'il vous plaît.

Answer 1

S'il vous plaît vérifier, Si vous avez des questions alors s'il vous plaît dites-moi.

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