Day 236

BONUS color collection css.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

#color-collection {
  padding: 0 0 100px;
}

#color-collection .container:after {
  content: "";
  display: table;
  clear: both;
}

#color-collection .left-side {
  width: 60%;
  /* display: inline-block; */
  float: left;
  text-align: center;
}

#color-collection .left-side img {
  width: 80%;
  /* margin: 0 auto; */
}

#color-collection .right-side {
  width: 40%;
  /* display: inline-block; */
  float: left;
}

#color-collection .right-side:after {
  content: "";
  display: table;
  clear: both;
}

#color-collection .right-side .col-1 .swatch-area {
  background: #fff;
  padding: 13px;
  border-radius: 50px;
  display: inline-block;
  margin-top: 140px;
  margin-bottom: 40px;
}

#color-collection .right-side .col-1 .swatch-area:after {
  content: "";
  display: table;
  clear: both;
}

#color-collection .right-side .col-1 .swatch-area .circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 20px;
  /* display: inline-block; */
  float: left;
}

#color-collection .right-side .col-1 .swatch-area .circle1 {
  background: #b8e298; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #b8e298 0%, #58c107 50%, #8bf785 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #b8e298 0%,#58c107 50%,#8bf785 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #b8e298 0%,#58c107 50%,#8bf785 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#color-collection .right-side .col-1 .swatch-area .circle2 {
  background: #efc5ca; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#color-collection .right-side .col-1 .swatch-area .circle3 {
  background: #d0e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #d0e4f7 0%, #73b1e7 24%, #0b3ced 50%, #539fe1 79%, #87bcea 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #d0e4f7 0%,#73b1e7 24%,#0b3ced 50%,#539fe1 79%,#87bcea 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #d0e4f7 0%,#73b1e7 24%,#0b3ced 50%,#539fe1 79%,#87bcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  margin-right: 0;
}

#color-collection .right-side .col-1 .info-box {
  max-width: 276px;
  width: 100%;
  background: #fff;
  padding: 40px 20px;
  display: inline-block;
  text-align: center;
}

#color-collection .right-side .col-1 .info-box h2 {
  font-size: 2rem;
}

#color-collection .right-side .col-1 .info-box h2 span {
  display: block;
  /* text-align: center; */
}

#color-collection .right-side .col-1 .info-box h2 span.orange {
  color: #FEA83B;
  font-weight: 100;
}

#color-collection .right-side .col-1 .info-box h2 span.blue {
  color: #6066F2;
}

#color-collection .right-side .col-1 .info-box h2 span.purple {
  color: #B286F8;
  font-weight: 100;
}

#color-collection .right-side .col-1 .info-box p {
  color: aaacaf;
  font-size: .8rem;
  margin: 40px 0;
}

#color-collection .right-side .col-1 .info-box a {
  color: #6066F2;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  margin: 40px 0 20px;
  display: block;
}

#color-collection .right-side .col-1 .info-box .line {
  height: 2px;
  width: 50px;
  background: #B286F8;
  display: inline-block;
}

#color-collection .right-side .col-2 .color-slider {
  position: relative;
  width: 20px;
  height: 600px;
  border-radius: 50px;
  background: #ff0000; /* Old browsers */
  background: -moz-linear-gradient(top, #ff0000 0%, #ff8c00 19%, #faff00 37%, #1dff00 47%, #00fffa 59%, #0015ff 72%, #ff00ff 89%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ff0000 0%,#ff8c00 19%,#faff00 37%,#1dff00 47%,#00fffa 59%,#0015ff 72%,#ff00ff 89%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ff0000 0%,#ff8c00 19%,#faff00 37%,#1dff00 47%,#00fffa 59%,#0015ff 72%,#ff00ff 89%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#color-collection .right-side .col-2 .color-slider .picker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FEA83B;
  border:10px solid #fff;
  box-sizing: content-box;
  position: absolute;
  top: 130px;
  left: -10px;
}

#color-collection .right-side .col-1 {
  float: left;
  width: 80%;
}

#color-collection .right-side .col-2 {
  float: left;
  width: 20%;
}