CSS Circle Color Palettes

CSS Color Palettes

CSS Circle Color Palettes

HTML
<div class="circle-container">
    <div class="circle-color-box">
      <div class="like-btn">
         <i class="fas fa-heart"></i>
      </div> 
      <div class="item-1 rounded-circle">
        <div class="item-2 rounded-circle">
          <div class="item-3 rounded-circle">
            <div class="item-4 rounded-circle"></div>
          </div>
        </div>
      </div>
    </div> 
</div>
SCSS
.circle-container {
  * {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .circle-color-box {
    position: relative;
    background: #FFF; 
    float: left;
    cursor: pointer;
    border-radius: 5px;
    width: 300px;
    height: 300px;
    margin: 20px 40px; 
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.1);
    &:hover {
      box-shadow: 0 10px 50px 4px rgba(34, 34, 34, 0.32);
    }
    .like-btn{
      position: absolute;
      top: 10px;
      right: 10px;
      color: #eb7979;
      font-size: 20px;
    } 
  }
  .item-1 {
    background: #494CA2;
    width: 80%;
    height: 80%;
    .item-2 {
      background: #8186D5;
      width: 70%;
      height: 70%;
      .item-3 {
        background: #C6CBEF;
        width: 60%;
        height: 60%;
        .item-4 {
          background: #E3E7F1;
          width: 50%;
          height: 50%;
        }
      }
    }
  }
} 
CSS Circle Color Palettes
653 Views
55060cookie-checkCSS Circle Color Palettes

Leave a Reply

Your email address will not be published. Required fields are marked *