<body>
  <header class="logo">
    <img src="https://i.ibb.co/CsPr8qd/kissclipart-rosas-negras-dibujos-clipart-black-rose-drawing-591259c26cd99ef7.png" alt="kissclipart-rosas-negras-dibujos-clipart-black-rose-drawing-591259c26cd99ef7" border="0">
    <p>Anarchy Code Lab</p>
  </header>
  <main>
    <nav class="breadcrumbs">
      <ul>
        <li class="first-crumb"><a href="#">Home</a></li>
        <li><a href="#">Personal Work</a></li>
        <li><a href="#">Experiments</a></li>
        <li class="last-crumb">Incremental Game</li>
      </ul>
    </nav>
    <section>
      <header>
        <h1>Incremental Game Experiment</h1>
      </header>
      <p>
        Page content goes here
      </p>
    </section>
  </main>
</body>
body {
  background-color: lightgray;
  margin: 0;
  padding-left: 20%;
  font-family: serif;
  font-size: 1em;
}

a {
  color: palevioletred;
}

.logo {
  margin-top: 25px;
  margin-left: 25px;
  margin-bottom: 0px;
}

.logo img {
  display: inline-block;
  height: 130px;
  width: 100px;
}

.logo p {
  display: inline-block;
  position: relative;
  top: -35px;
  font-size: 3em;
  color: palevioletred;
}

main {
  position: relative;
  top: -50px;
  width: 75%;
}

.breadcrumbs {
  position: relative;
  z-index: 999;
}

.breadcrumbs li {
  position: relative;
  display: inline-block;
  background-color: lightgray;
  margin: 5px 15px;
  padding: 5px 10px;
  border-top: 2px solid palevioletred;
  border-bottom: 2px solid palevioletred;
}

.breadcrumbs .first-crumb {
  border-left: 2px solid palevioletred;
  margin-right: 7px;
}

.breadcrumbs li:not(.first-crumb):not(.last-crumb)::before {
  position: absolute;
  border: 2px solid palevioletred;
  background-color: lightgray;
	content: "";
	left: -10%;
	top: -2px;
	height: 100%;
	width: 90%;
  -webkit-transform: skewX(-27deg);
	   -moz-transform: skewX(-27deg);
	    -ms-transform: skewX(-27deg);
	        transform: skewX(-27deg);
  z-index: -2;
}

.breadcrumbs li:not(.last-crumb)::after {
  position: absolute;
  border: 2px solid palevioletred;
  background-color: lightgray;
	content: "";
	right: -15%;
	top: -2px;
	height: 100%;
	width: 90%;
  -webkit-transform: skewX(-27deg);
	   -moz-transform: skewX(-27deg);
	    -ms-transform: skewX(-27deg);
	        transform: skewX(-27deg);
  z-index: -2;
}

.breadcrumbs .last-crumb {
  background-color: palevioletred;
  color: lightgray;
}

.breadcrumbs .last-crumb::before {
  position: absolute;
  border: 2px solid palevioletred;
  background-color: palevioletred;
	content: "";
	left: -9%;
	top: -2px;
	height: 100%;
	width: 90%;
  -webkit-transform: skewX(-27deg);
	   -moz-transform: skewX(-27deg);
	    -ms-transform: skewX(-27deg);
	        transform: skewX(-27deg);
  z-index: -1;
}

section {
  margin: 0px 60px;
  outline: 2px solid palevioletred;
  outline-offset: 35px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.