Front End timed test

1. All elements are placed onto a 20px grid. Every element is at least 20px away from its container. 2. The measurements for each block are for information pursposes only, don't include them. 3. The NINJA! text should be the last element you add, it is contained inside the light blue box and should be centered horizontally and vertically. 4. Add the gray container and black border that includes both boxes. 5. Send the JSFiddle url.

by Vince Aggrippino

HTML

<div class="container">
  <div class="box redBorder"></div>
  <div class="box blueBorder"></div>
</div>

CSS

html, body {
  height: 100%;
}

body {
  background-color: #111;
}

.container {
  background-color: silver;
  width: 400px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box;
  position: relative;
}

.box {
  width: 120px;
  height: 120px;
  box-sizing: border-box;
}

.redBorder {
  background-color: white;
  border: 1px solid red;
  border-radius: 5px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.redBorder:before {
  content: '';
  display: block;
  background-color: cyan;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 60px;
  right: 60px;
}

.redBorder:after {
  content: '';
  display: block;
  background-color: black;
  position: absolute;
  top: 20px;
  right:20px;
  width: 60px;
  height: 60px;
}

.blueBorder {
  border: 1px solid blue;
  border-left-style: dashed;
  position: absolute;
  top: 60px;
  right: 60px;
  z-index: 200;
}

.blueBorder:after {
  content: 'NINJA';
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 20px solid white;
  box-sizing: border-box;
}