404

by Andrey Izman

HTML

<div class="Page404Cover-logo">
  <div class="Page404Cover-title" title="Error 404"><svg class="shape shape-rock-1" width="71" height="70" viewBox="0 0 71 70" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.5 26L11.5 46.5L33.5001 57L49.3246 57.8977L62.5 44.0001L62 28.5001L51.2115 15.2668L41.5 16.5L26.5 9.50002L11.5 26Z" fill="#4C4C4C"></path>
      <path d="M20.5 24L22 41L36 52.5L49.3246 57.8977L62.5001 44L62 28.5L51.2115 15.2668L41.5 16.5L26.5 9.50001L20.5 24Z" fill="#A4A4A5"></path>
    </svg><svg class="shape shape-four-1" width="124" height="142" viewBox="0 0 124 142" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M89.0471 141.322L95.3623 117.754L111.01 121.947L118.827 92.7756L103.179 88.5828L123.574 12.4678L77.4023 0.0962432L7.25156 66.3991L0.315214 92.2859L61.9413 108.799L55.6261 132.367L89.0471 141.322ZM69.7576 79.6276L40.3935 71.7595L82.388 32.4904L69.7576 79.6276Z" fill="url(#paint0_linear)"></path>
      <defs>
        <linearGradient id="paint0_linear" x1="67" y1="57" x2="101" y2="168" gradientUnits="userSpaceOnUse">
          <stop stop-color="white"></stop>
          <stop offset="1" stop-color="white" stop-opacity="0"></stop>
        </linearGradient>
      </defs>
    </svg><svg class="shape shape-zero" width="104" height="121" viewBox="0 0 104 121" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M66.017 119.444C99.347 111.482 108 78.88 100.814 48.7976C93.6278 18.7151 71.2141 -6.28433 37.8841 1.67783C4.55407 9.63998 -4.14024 42.0707 3.04612 72.1532C10.2325 102.236 32.687 127.406 66.017 119.444ZM59.8106 93.4635C46.1368 96.7301 37.6049 85.2175 32.7867 65.0485C27.9686 44.8796 30.4166 30.9247 44.0905 27.6581C57.7643 24.3916 66.2554 35.7333 71.0735 55.9023C75.8916 76.0712 73.4845 90.197 59.8106 93.4635Z" fill="url(#paint0_linear)"></path>
      <defs>
        <linearGradient id="paint0_linear" x1="80.0001" y1="53" x2="132" y2="15" gradientUnits="userSpaceOnUse">
          <stop...

CSS

.Page404Cover-logo {
  text-align: center;
  position: relative;
  max-width: 626px;
  margin: 92px 15px 105px 15px;
}

.Page404Cover-title {
  position: relative;
  display: inline-block;
  width: 460px;
  height: 190px;
}
.Page404Cover-title .shape-rock-1 {
  left: -2px;
  top: 116px;
}
.Page404Cover-title .shape {
  position: absolute;
}
.Page404Cover-title .shape-four-1 {
  left: 76px;
  top: 12px;
}
.Page404Cover-title .shape-zero {
  left: 184px;
  top: 61px;
}


.Page404Cover-title .shape-rock-2 {
  left: 235px;
  top: 6px;
}
.Page404Cover-title .shape-four-2 {
  left: 295px;
  top: 39px;
}
.Page404Cover-title .shape-rock-3 {
  left: 430px;
  top: 155px;
}


.Page404Cover-description {
  margin-top: 26px;
  font-weight: 600;
  font-size: 24px;
  line-height: 140%;
  text-align: center;
  font-size: 20px;
}
h1, h2, h3, h4, h5, h6 {
  color: #eff1f4;
}


body {
  width: 100%;
  background: #252629 url(https://s.imgur.com/desktop-assets/desktop-assets/page404bg.baa57b8c302e82cda343.svg) top center/100% auto no-repeat;
}