A Pen by Felix De Montis.

index.haml

- (1...8).each do    
  .bush
    .mt
    .lt
    .rt
    .lb
    .rb

.sunlounger1
.sunlounger2
.sunlounger3

.poolwhite-b
.grey-b
.blue-b
.poolwhite-s
.grey-s
.blue-s
.springboard
.lifesaver

Pool.markdown

Pool

Dribbble Shot by Linn Fritz remade in css and html.

Best viewed in Fullscreen.

Original Shot:

A Pen by Felix De Montis on CodePen.

License.

script.js

//
//
// Dribbble Shot by Linn Fritz remade in css and html.
//
// Best viewed in Fullscreen.
//
//

style.css

html {
  background-color: #49bf9f;
  height: 100%;
  width: 100%;
  font-size: 0.625em;
  overflow: hidden;
}

body {
  width: 467px;
  height: 479px;
  position: absolute;
  zoom: 1.25;
  top: 50%;
  left: 50%;
  margin-left: -233.5px;
  margin-top: -239.5px;
}

.bush {
  position: absolute;
}

.bush:nth-child(1) {
  font-size: 67%;
  left: 2px;
  top: 34px;
}

.bush:nth-child(2) {
  left: 386px;
  top: 0;
}

.bush:nth-child(3) {
  font-size: 3.4pt;
  left: 0;
  top: 333px;
}

.bush:nth-child(4) {
  font-size: 67%;
  left: 383px;
  top: 292px;
}

.bush:nth-child(5) {
  font-size: 3.4pt;
  left: 420px;
  top: 328px;
}

.bush:nth-child(6) {
  font-size: 3.4pt;
  left: 420px;
  top: 280px;
}

.bush:nth-child(7) {
  top: 396px;
}

.mt {
  position: absolute;
  left: 1.1em;
  height: 3.1em;
  width: 3.1em;
  border-radius: 2em;
  background-color: #239374;
  z-index: 2;
}

.mt::after {
  content: "";
  height: 2.5em;
  width: 2.5em;
  border-radius: 2em;
  background-color: #47b79b;
  position: absolute;
  margin-top: 2.9em;
  margin-left: 2.9em;
  z-index: 1;
}

.lt {
  position: absolute;
  top: 1.4em;
  left: 0;
  height: 3.1em;
  width: 3.1em;
  border-radius: 2.0em;
  background-color: #239374;
  z-index: 2;
}

.lt::after {
  content: "";
  height: 2.5em;
  width: 2.5em;
  border-radius: 2.0em;
  background-color: #47b79b;
  position: absolute;
  margin-top: 2.8em;
  margin-left: 3.1em;
  z-index: 1;
}

.rt {
  position: absolute;
  left: 2.5em;
  top: 1.3em;
  height: 3.1em;
  width: 3.1em;
  border-radius: 2.0em;
  background-color: #239374;  
  z-index: 2;
}

.rt::after {
  content: "";
  height: 2.5em;
  width: 2.5em;
  border-radius: 2.0em;
  background-color: #47b79b;
  position: absolute;
  margin-top: 2.8em;
  margin-left: 2.7em;
  z-index: 1;
}

.lb {
  position: absolute;
  left: 1.1em;
  top: 3.2em;
  height: 3.1em;
  width: 3.1em;
  border-radius: 2.0em;
  background-color: #239374;
  
  z-index: 2;
}

.lb::after {
  content: "";
  height: 2.5em;
  width: 2.5em;
  border-radius: 2.0em;
  background-color: #47b79b;
  position: absolute;
  margin-top: 2.4em;
  margin-left: 3.2em;
  z-index: 1;
}

.rb {
  position: absolute;
  left: 2.9em;
  top: 2.9em;
  height: 3.1em;
  width: 3.1em;
  border-radius: 2.0em;
  background-color: #239374;
  
  z-index: 2;
}

.rb::after {
  content: "";
  height: 2.5em;
  width: 2.5em;
  border-radius: 2.0em;
  background-color: #47b79b;
  position: absolute;
  margin-top: 2.4em;
  margin-left: 2.8em;
  z-index: 1;
}

.sunlounger1,
.sunlounger2,
.sunlounger3 {
  width: 20px;
  height: 54px;
  background: linear-gradient(to right, #ffbc45 20%, #fffefe 20%, #fffefe 40%, #ffbc45 40%, #ffbc45 60%, #fffefe 60%, #ffffff 80%, #ffbc45 80%, #ffbc45 80%);
  position: absolute;
  box-shadow: 5px 5px 0px 0px #44b69c;
}

.sunlounger1::before,
.sunlounger2::before,
.sunlounger3::before {
  content: "";
  height: 25px;
  width: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
}

.sunlounger1 {
  top: 106px;
  left: 68px;
}

.sunlounger2 {
  top: 71px;
  left: 127px;
}

.sunlounger3 {
  transform: rotate(90deg);
  transform-origin: 0% 100%;
  top: 317px;
  left: 309px;
  box-shadow: 5px -5px 0px 0px #44b69c;
}

.poolwhite-b {
  height: 250px;
  width: 250px;
  background-color: #ffffff;
  border-radius: 150px;
  position: absolute;
  left: 71px;
  top: 140px;
  z-index: 2;
}

.poolwhite-s {
  height: 190px;
  width: 190px;
  background-color: #ffffff;
  border-radius: 150px;
  position: absolute;
  left: 174px;
  top: 73px;
  z-index: 2;
}

.grey-b {
  height: 220px;
  width: 220px;
  margin-top: 15px;
  margin-left: 15px;
  background-color: #dcdce4;
  border-radius: 150px;
  position: absolute;
  left: 71px;
  top: 140px;
  z-index: 3;
}

.grey-s {
  height: 160px;
  width: 160px;
  margin-top: 15px;
  margin-left: 15px;
  background-color: #dcdce4;
  border-radius: 150px;
  position: absolute;
  left: 174px;
  top: 73px;
  z-index: 3;
}
.blue-b {
  height: 206px;
  width: 206px;
  margin-top: 22px;
  margin-left: 22px;
  background-color: #22c3f4;
  border-radius: 150px;
  position: absolute;
  left: 71px;
  top: 140px;
  z-index: 4;
}

.blue-s {
  height: 146px;
  width: 146px;
  margin-top: 22px;
  margin-left: 22px;
  background-color: #22c3f4;
  border-radius: 150px;
  position: absolute;
  left: 174px;
  top: 73px;
  z-index: 4;
}

.springboard {
  width: 24px;
  height: 90px;
  background-color: #ffffff;
  position: absolute;
  top: 289px;
  left: 184px;
  z-index: 5;
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.1);
}

.springboard::after {
  content: "";
  height: 250px;
  width: 250px;
  box-sizing: border-box;
  border: 15px solid #ffffff;
  border-radius: 150px;
  position: absolute;
  left: -113px;
  bottom: -11px;
  clip: rect(230px, 250px, 250px, 0px);
}

.lifesaver {
  /* need to be done */
}