4 Responsive UI Component box design using Bootstrap HTML & CSS3

CSS, or Cascading Style Sheets, is a style sheet language that is used to style your web content. In this tutorial, we are going to learn about CSS basics by building a card component from scratch.

For all component I using latest version of Bootstrap Framework And Fontawesome icon

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

Component 1:

HTML Code:

<!-- START Content Box 1 -->
<section>
  <div class="container">
    <h2 class="section-title"><span>Content Box 1</span></h2>
    <div class="row">
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-1">
          <div class="content-box-1-icon-wrapper">
            <div class="content-box-1-circle">
              <div class="content-box-1-circle-bullet"></div>
            </div>
            <div class="content-box-1-circle">
              <div class="content-box-1-circle-bullet"></div>
            </div>
            <span class="content-box-1-icon">
              <i class="fa-solid fa-sliders"></i>
            </span>
          </div>
          <div class="content-box-1-content-wrapper">
            <h3 class="content-box-1-title">Business Stratagy</h3>
            <div class="content-box-1-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-1-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-1 color-2">
          <div class="content-box-1-icon-wrapper">
            <div class="content-box-1-circle">
              <div class="content-box-1-circle-bullet"></div>
            </div>
            <div class="content-box-1-circle">
              <div class="content-box-1-circle-bullet"></div>
            </div>
            <span class="content-box-1-icon">
              <i class="fa-solid fa-link"></i>
            </span>
          </div>
          <div class="content-box-1-content-wrapper">
            <h3 class="content-box-1-title">Website Development</h3>
            <div class="content-box-1-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-1-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-1 color-3">
          <div class="content-box-1-icon-wrapper">
            <div class="content-box-1-circle">
              <div class="content-box-1-circle-bullet"></div>
            </div>
            <div class="content-box-1-circle">
              <div class="content-box-1-circle-bullet"></div>
            </div>
            <span class="content-box-1-icon">
              <i class="fa-solid fa-lightbulb"></i>
            </span>
          </div>
          <div class="content-box-1-content-wrapper">
            <h3 class="content-box-1-title">Creative services</h3>
            <div class="content-box-1-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-1-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
    </div>
  </div>
</section>
<!-- END Content Box 1 -->

CSS Code:

.content-box-1 {
  background: #ffffff;
  padding: 50px 40px;
  box-shadow: 0 15px 40px rgba(69, 63, 181, 0.1);
  border-radius: 30px;
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s;
}
.content-box-1:hover {
  transform: translateY(-10px);
}
.content-box-1-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 110px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  border: 1px solid #6a4bc4;
  box-sizing: content-box;
  border-radius: 50%;
  color: #6a4bc4;
}
.content-box-1-icon-wrapper::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 10%;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 25px 0px #6a4bc4, 0px 0px 25px 0px #6a4bc4 inset;
  border-radius: 50%;
  opacity: 0.2;
}
.content-box-1-circle {
  position: absolute;
  z-index: -1;
  width: 84%;
  height: 84%;
  left: 8%;
  top: 8%;
}
.content-box-1-circle:nth-child(1) {
  transform: rotate(0deg);
  animation: content-box-1-rotation 2s infinite linear;
  animation-play-state: paused;
}
.content-box-1-circle:nth-child(2) {
  transform: rotate(180deg);
  animation: content-box-1-rotation-2 2s infinite linear;
  animation-play-state: paused;
}
.content-box-1-circle-bullet {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #6a4bc4;
}
.content-box-1:hover .content-box-1-circle:nth-child(1), .content-box-1:hover .content-box-1-circle:nth-child(2) {
  animation-play-state: running;
}
@keyframes content-box-1-rotation {
  0% {
    transform: rotate(90deg); }
  100% {
    transform: rotate(450deg); }
}

@keyframes content-box-1-rotation-2 {
  0% {
    transform: rotate(-90deg); }
  100% {
    transform: rotate(270deg); }
}
.content-box-1-icon {
  line-height: 0;
  font-size: 52px;
}
.content-box-1-content-wrapper {
  letter-spacing: 1px;
}
.content-box-1-title {
  font-size: 22px;
  margin: 0 0 20px;
  color: #343a40;
}
.content-box-1-content {
  color: #858aa7;
  font-size: 16px;
  line-height: 1.6;
}
.content-box-1-button {
  display: inline-block;
  margin-top: 26px;
  text-decoration: none;
  color: #6a4bc4;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}
.content-box-1-button:hover {
  color: #333 !important;
}

.content-box-1.color-2 .content-box-1-icon-wrapper {
  border: 1px solid #54e0c4;
  color: #54e0c4;
}
.content-box-1.color-2 .content-box-1-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #54e0c4, 0px 0px 25px 0px #54e0c4 inset;
}
.content-box-1.color-2 .content-box-1-circle-bullet {
  background-color: #54e0c4;
}
.content-box-1.color-2 .content-box-1-button {
  color: #54e0c4;
}

.content-box-1.color-3 .content-box-1-icon-wrapper {
  border: 1px solid #ffb507;
  color: #ffb507;
}
.content-box-1.color-3 .content-box-1-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #ffb507, 0px 0px 25px 0px #ffb507 inset;
}
.content-box-1.color-3 .content-box-1-circle-bullet {
  background-color: #ffb507;
}
.content-box-1.color-3 .content-box-1-button {
  color: #ffb507;
}

Component 

HTML Code:

<section>
  <div class="container">
    <h2 class="section-title"><span>Content Box 2</span></h2>
    <div class="row">
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-2">
          <div class="content-box-2-icon-wrapper">
            <div class="content-box-2-circle">
              <div class="content-box-2-circle-bullet"></div>
            </div>
            <div class="content-box-2-circle">
              <div class="content-box-2-circle-bullet"></div>
            </div>
            <span class="content-box-2-icon">
              <i class="fa-solid fa-sliders"></i>
            </span>
          </div>
          <div class="content-box-2-content-wrapper">
            <h3 class="content-box-2-title">Business Stratagy</h3>
            <div class="content-box-2-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-2-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-2 color-2">
          <div class="content-box-2-icon-wrapper">
            <div class="content-box-2-circle">
              <div class="content-box-2-circle-bullet"></div>
            </div>
            <div class="content-box-2-circle">
              <div class="content-box-2-circle-bullet"></div>
            </div>
            <span class="content-box-2-icon">
              <i class="fa-solid fa-link"></i>
            </span>
          </div>
          <div class="content-box-2-content-wrapper">
            <h3 class="content-box-2-title">Website Development</h3>
            <div class="content-box-2-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-2-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-2 color-3">
          <div class="content-box-2-icon-wrapper">
            <div class="content-box-2-circle">
              <div class="content-box-2-circle-bullet"></div>
            </div>
            <div class="content-box-2-circle">
              <div class="content-box-2-circle-bullet"></div>
            </div>
            <span class="content-box-2-icon">
              <i class="fa-solid fa-lightbulb"></i>
            </span>
          </div>
          <div class="content-box-2-content-wrapper">
            <h3 class="content-box-2-title">Creative services</h3>
            <div class="content-box-2-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-2-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
    </div>
  </div>
</section>

CSS Code:

.content-box-2 {
  background: #ffffff;
  position: relative;
  padding: 50px 40px;
  box-shadow: 0 15px 40px rgba(69, 63, 181, 0.1);
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s;
}
.content-box-2::before {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #6a4bc4;
  transition: transform 250ms ease-in;
  transform: scaleX(0);
  transform-origin: right center
}

.content-box-2:hover::before {
  transform: scaleX(1);
  transform-origin: left center
}

.content-box-2-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 110px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  border: 1px solid #6a4bc4;
  box-sizing: content-box;
  border-radius: 50%;
  color: #6a4bc4;
}
.content-box-2-icon-wrapper::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 10%;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 25px 0px #6a4bc4, 0px 0px 25px 0px #6a4bc4 inset;
  border-radius: 50%;
  opacity: 0.2;
}
.content-box-2-circle {
  position: absolute;
  z-index: -1;
  width: 84%;
  height: 84%;
  left: 8%;
  top: 8%;
}
.content-box-2-circle:nth-child(1) {
  transform: rotate(0deg);
  animation: content-box-2-rotation 2s infinite linear;
  animation-play-state: paused;
}
.content-box-2-circle:nth-child(2) {
  transform: rotate(180deg);
  animation: content-box-2-rotation-2 2s infinite linear;
  animation-play-state: paused;
}
.content-box-2-circle-bullet {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #6a4bc4;
}
.content-box-2:hover .content-box-2-circle:nth-child(1), .content-box-2:hover .content-box-2-circle:nth-child(2) {
  animation-play-state: running;
}
@keyframes content-box-2-rotation {
  0% {
    transform: rotate(90deg); }
  100% {
    transform: rotate(450deg); }
}

@keyframes content-box-2-rotation-2 {
  0% {
    transform: rotate(-90deg); }
  100% {
    transform: rotate(270deg); }
}
.content-box-2-icon {
  line-height: 0;
  font-size: 52px;
}
.content-box-2-content-wrapper {
  letter-spacing: 1px;
}
.content-box-2-title {
  font-size: 22px;
  margin: 0 0 20px;
  color: #343a40;
}
.content-box-2-content {
  color: #858aa7;
  font-size: 16px;
  line-height: 1.6;
}
.content-box-2-button {
  display: inline-block;
  margin-top: 26px;
  text-decoration: none;
  color: #6a4bc4;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}
.content-box-2-button:hover {
  color: #333 !important;
}

.content-box-2.color-2 .content-box-2-icon-wrapper {
  border: 1px solid #54e0c4;
  color: #54e0c4;
}
.content-box-2.color-2 .content-box-2-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #54e0c4, 0px 0px 25px 0px #54e0c4 inset;
}
.content-box-2.color-2 .content-box-2-circle-bullet {
  background-color: #54e0c4;
}
.content-box-2.color-2 .content-box-2-button {
  color: #54e0c4;
}
.content-box-2.color-2::before {
  background-color: #54e0c4;
}

.content-box-2.color-3 .content-box-2-icon-wrapper {
  border: 1px solid #ffb507;
  color: #ffb507;
}
.content-box-2.color-3 .content-box-2-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #ffb507, 0px 0px 25px 0px #ffb507 inset;
}
.content-box-2.color-3 .content-box-2-circle-bullet {
  background-color: #ffb507;
}
.content-box-2.color-3 .content-box-2-button {
  color: #ffb507;
}
.content-box-2.color-3::before {
  background-color: #ffb507;
}

Component 3

HTML Code:

<section class="bg-white">
  <div class="container">
    <h2 class="section-title"><span>Content Box 3</span></h2>
    <div class="row">
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-3">
          <div class="content-box-3-icon-wrapper">
            <div class="content-box-3-circle">
              <div class="content-box-3-circle-bullet"></div>
            </div>
            <div class="content-box-3-circle">
              <div class="content-box-3-circle-bullet"></div>
            </div>
            <span class="content-box-3-icon">
              <i class="fa-solid fa-sliders"></i>
            </span>
          </div>
          <div class="content-box-3-content-wrapper">
            <h3 class="content-box-3-title">Business Stratagy</h3>
            <div class="content-box-3-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-3-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-3 color-2">
          <div class="content-box-3-icon-wrapper">
            <div class="content-box-3-circle">
              <div class="content-box-3-circle-bullet"></div>
            </div>
            <div class="content-box-3-circle">
              <div class="content-box-3-circle-bullet"></div>
            </div>
            <span class="content-box-3-icon">
              <i class="fa-solid fa-link"></i>
            </span>
          </div>
          <div class="content-box-3-content-wrapper">
            <h3 class="content-box-3-title">Website Development</h3>
            <div class="content-box-3-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-3-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-3 color-3">
          <div class="content-box-3-icon-wrapper">
            <div class="content-box-3-circle">
              <div class="content-box-3-circle-bullet"></div>
            </div>
            <div class="content-box-3-circle">
              <div class="content-box-3-circle-bullet"></div>
            </div>
            <span class="content-box-3-icon">
              <i class="fa-solid fa-lightbulb"></i>
            </span>
          </div>
          <div class="content-box-3-content-wrapper">
            <h3 class="content-box-3-title">Creative services</h3>
            <div class="content-box-3-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-3-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
    </div>
  </div>
</section>

CSS Code:

.content-box-3 {
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 30px;
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s;
}
.content-box-3:hover {
  box-shadow: 0 15px 40px rgba(69, 63, 181, 0.1);
}
.content-box-3-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 110px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  border: 1px solid #6a4bc4;
  box-sizing: content-box;
  border-radius: 50%;
  color: #6a4bc4;
}
.content-box-3-icon-wrapper::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 10%;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 25px 0px #6a4bc4, 0px 0px 25px 0px #6a4bc4 inset;
  border-radius: 50%;
  opacity: 0.2;
}
.content-box-3-circle {
  position: absolute;
  z-index: -1;
  width: 84%;
  height: 84%;
  left: 8%;
  top: 8%;
}
.content-box-3-circle:nth-child(1) {
  transform: rotate(0deg);
  animation: content-box-3-rotation 2s infinite linear;
  animation-play-state: paused;
}
.content-box-3-circle:nth-child(2) {
  transform: rotate(180deg);
  animation: content-box-3-rotation-2 2s infinite linear;
  animation-play-state: paused;
}
.content-box-3-circle-bullet {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #6a4bc4;
}
.content-box-3:hover .content-box-3-circle:nth-child(1), .content-box-3:hover .content-box-3-circle:nth-child(2) {
  animation-play-state: running;
}
@keyframes content-box-3-rotation {
  0% {
    transform: rotate(90deg); }
  100% {
    transform: rotate(450deg); }
}

@keyframes content-box-3-rotation-2 {
  0% {
    transform: rotate(-90deg); }
  100% {
    transform: rotate(270deg); }
}
.content-box-3-icon {
  line-height: 0;
  font-size: 52px;
}
.content-box-3-content-wrapper {
  letter-spacing: 1px;
}
.content-box-3-title {
  font-size: 22px;
  margin: 0 0 20px;
  color: #343a40;
}
.content-box-3-content {
  color: #858aa7;
  font-size: 16px;
  line-height: 1.6;
}
.content-box-3-button {
  display: inline-block;
  margin-top: 26px;
  text-decoration: none;
  color: #6a4bc4;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}
.content-box-3-button:hover {
  color: #333 !important;
}

.content-box-3.color-2 .content-box-3-icon-wrapper {
  border: 1px solid #54e0c4;
  color: #54e0c4;
}
.content-box-3.color-2 .content-box-3-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #54e0c4, 0px 0px 25px 0px #54e0c4 inset;
}
.content-box-3.color-2 .content-box-3-circle-bullet {
  background-color: #54e0c4;
}
.content-box-3.color-2 .content-box-3-button {
  color: #54e0c4;
}

.content-box-3.color-3 .content-box-3-icon-wrapper {
  border: 1px solid #ffb507;
  color: #ffb507;
}
.content-box-3.color-3 .content-box-3-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #ffb507, 0px 0px 25px 0px #ffb507 inset;
}
.content-box-3.color-3 .content-box-3-circle-bullet {
  background-color: #ffb507;
}
.content-box-3.color-3 .content-box-3-button {
  color: #ffb507;
}

Component 4

HTML Code:

<section class="bg-white">
  <div class="container">
    <h2 class="section-title"><span>Content Box 4</span></h2>
    <div class="row">
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-4">
          <div class="content-box-4-icon-wrapper">
            <div class="content-box-4-circle">
              <div class="content-box-4-circle-bullet"></div>
            </div>
            <div class="content-box-4-circle">
              <div class="content-box-4-circle-bullet"></div>
            </div>
            <span class="content-box-4-icon">
              <i class="fa-solid fa-sliders"></i>
            </span>
          </div>
          <div class="content-box-4-content-wrapper">
            <h3 class="content-box-4-title">Business Stratagy</h3>
            <div class="content-box-4-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-4-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-4 color-2">
          <div class="content-box-4-icon-wrapper">
            <div class="content-box-4-circle">
              <div class="content-box-4-circle-bullet"></div>
            </div>
            <div class="content-box-4-circle">
              <div class="content-box-4-circle-bullet"></div>
            </div>
            <span class="content-box-4-icon">
              <i class="fa-solid fa-link"></i>
            </span>
          </div>
          <div class="content-box-4-content-wrapper">
            <h3 class="content-box-4-title">Website Development</h3>
            <div class="content-box-4-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-4-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
      <div class="col-md-4">
        <!-- Start Content Box -->
        <div class="content-box-4 color-3">
          <div class="content-box-4-icon-wrapper">
            <div class="content-box-4-circle">
              <div class="content-box-4-circle-bullet"></div>
            </div>
            <div class="content-box-4-circle">
              <div class="content-box-4-circle-bullet"></div>
            </div>
            <span class="content-box-4-icon">
              <i class="fa-solid fa-lightbulb"></i>
            </span>
          </div>
          <div class="content-box-4-content-wrapper">
            <h3 class="content-box-4-title">Creative services</h3>
            <div class="content-box-4-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
          </div>
          <a class="content-box-4-button" href="#">View Details</a>
        </div>
        <!-- End Content Box -->
      </div>
    </div>
  </div>
</section>

CSS Code:

.content-box-4 {
  background: #ffffff;
  position: relative;
  padding: 50px 40px;
  text-align: center;
  margin-bottom: 30px;
  transition: 0.3s;
}
.content-box-4:hover {
  box-shadow: 0 15px 40px rgba(69, 63, 181, 0.1);
}
.content-box-4::before {
  position: absolute;
  content: "";
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #6a4bc4;
  transition: transform 250ms ease-in;
  transform: scaleX(0);
  transform-origin: right center
}

.content-box-4:hover::before {
  transform: scaleX(1);
  transform-origin: left center
}

.content-box-4-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 110px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  border: 1px solid #6a4bc4;
  box-sizing: content-box;
  border-radius: 50%;
  color: #6a4bc4;
}
.content-box-4-icon-wrapper::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 10%;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 25px 0px #6a4bc4, 0px 0px 25px 0px #6a4bc4 inset;
  border-radius: 50%;
  opacity: 0.2;
}
.content-box-4-circle {
  position: absolute;
  z-index: -1;
  width: 84%;
  height: 84%;
  left: 8%;
  top: 8%;
}
.content-box-4-circle:nth-child(1) {
  transform: rotate(0deg);
  animation: content-box-4-rotation 2s infinite linear;
  animation-play-state: paused;
}
.content-box-4-circle:nth-child(2) {
  transform: rotate(180deg);
  animation: content-box-4-rotation-2 2s infinite linear;
  animation-play-state: paused;
}
.content-box-4-circle-bullet {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #6a4bc4;
}
.content-box-4:hover .content-box-4-circle:nth-child(1), .content-box-4:hover .content-box-4-circle:nth-child(2) {
  animation-play-state: running;
}
@keyframes content-box-4-rotation {
  0% {
    transform: rotate(90deg); }
  100% {
    transform: rotate(450deg); }
}

@keyframes content-box-4-rotation-2 {
  0% {
    transform: rotate(-90deg); }
  100% {
    transform: rotate(270deg); }
}
.content-box-4-icon {
  line-height: 0;
  font-size: 52px;
}
.content-box-4-content-wrapper {
  letter-spacing: 1px;
}
.content-box-4-title {
  font-size: 22px;
  margin: 0 0 20px;
  color: #343a40;
}
.content-box-4-content {
  color: #858aa7;
  font-size: 16px;
  line-height: 1.6;
}
.content-box-4-button {
  display: inline-block;
  margin-top: 26px;
  text-decoration: none;
  color: #6a4bc4;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}
.content-box-4-button:hover {
  color: #333 !important;
}

.content-box-4.color-2 .content-box-4-icon-wrapper {
  border: 1px solid #54e0c4;
  color: #54e0c4;
}
.content-box-4.color-2 .content-box-4-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #54e0c4, 0px 0px 25px 0px #54e0c4 inset;
}
.content-box-4.color-2 .content-box-4-circle-bullet {
  background-color: #54e0c4;
}
.content-box-4.color-2 .content-box-4-button {
  color: #54e0c4;
}
.content-box-4.color-2::before {
  background-color: #54e0c4;
}

.content-box-4.color-3 .content-box-4-icon-wrapper {
  border: 1px solid #ffb507;
  color: #ffb507;
}
.content-box-4.color-3 .content-box-4-icon-wrapper::before {
  box-shadow: 0px 0px 25px 0px #ffb507, 0px 0px 25px 0px #ffb507 inset;
}
.content-box-4.color-3 .content-box-4-circle-bullet {
  background-color: #ffb507;
}
.content-box-4.color-3 .content-box-4-button {
  color: #ffb507;
}
.content-box-4.color-3::before {
  background-color: #ffb507;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply