<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
<div class="card">
    
    <div class="star top">
        <img src="https://svgshare.com/i/YdG.svg">
    </div>
    <div class="star top-rg">
      <img src="https://svgshare.com/i/Ydc.svg">
    </div>
    <div class="star bottom-lf">
      <img src="https://svgshare.com/i/YdG.svg">
    </div>
    <div class="star bottom-rg">
      <img src="https://svgshare.com/i/Ydo.svg">
    </div>
      <div class="container flex">
          <div class="error">
              <span>404
                  error
              </span>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
                  elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                 ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud 
                 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <button>more</button>
          </div>
          <div class="img">
            <img src="https://svgshare.com/i/Ye7.svg">
        </div>

          
      </div>
  </div
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    background-color: #ffb000;
}
.container{
    padding-left: 20px;
    padding-right: 20px;
    margin-top: auto;
    margin-bottom:auto ;
}
.card{
    background-color: #ffb000;
    margin-top: 100px;
    position: relative;  

}
.star{
    position: absolute;
}
.star img{
    width: 100%;
}

.top{
    left: 37px;
    top: -71px;
    width: 300px;
}
.top-rg{
    right: 37px;
    width: 83px;
    top: -71px

}
.bottom-lf{
    bottom: -160px;
    width: 300px;
    left: 37px;
}
.bottom-rg{
    right: 37px;
    bottom: -160px;
    width: 83px;

}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}


.error{
    z-index: 1;
    position: relative;
}

.error span{
    font-size: 90px;
    color: #150035;
    font-weight: 900;
    white-space: pre-line;
    line-height: 1;
    letter-spacing: 3px;
    text-shadow: 1px 7px 1px #fff;
}
.error p{
    color: #fff;
    white-space: pre-line;
    padding-top: 25px;
    font-size: 15px;
    line-height: 1.3;
}

.img img{
    width: 570px;
}
button{
    width: 100px;
    padding: 8px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 25px;
    border: none;
    background-color:#150035 ;
    color:#ffb000 ;
    position: relative;
   
}
button::after{
    content: '';
    width: 96px;
    height: 35px;
    border: 3px solid #fff;
    position: absolute;
    top: 7px;
    left: 5px;
    z-index: -1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.