<!-- 1. flip Card -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="cb-flip-card">
  <div class="cb-flip-card-inner">
    <div class="cb-flip-card-front">
      <!-- Kamu bisa buat dibawah ini semaumu -->
      <img src="https://source.unsplash.com/640x480?cat" alt="avatar" />
    </div>
    <div class="cb-flip-card-back">
      <br />
      <br />
      <!-- Kamu bisa buat dibawah ini semaumu -->
      <h1>Here Your Title</h1>
      <p style="margin-left: 2.5px; margin-right: 2.5px">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
        eius, ipsam excepturi quibusdam deserunt nihil ipsa officiis
        deleniti! Commodi aperiam eum ex ea illo nemo.
      </p>
 
      <br />
      <div class="social-icons">
        <a href="#" class="fa fa-facebook" aria-hidden="true"></a>
        <a href="#" class="fa fa-twitter" aria-hidden="true"></a>
        <a href="#" class="fa fa-google-plus" aria-hidden="true"></a>
        <a href="#" class="fa fa-linkedin" aria-hidden="true"></a>
        <a href="#" class="fa fa-instagram" aria-hidden="true"></a>
      </div>
    </div>
  </div>
  <style>
    /* Kreasikan CSS anda sendiri */    
    * {
      font-family: "Raleway", sans-serif;
    }
    .cb-flip-card-back {
      background-color: #fff;
      color:#000;
    }
    .cb-flip-card-back a {
      color: #000;
    }
    .cb-flip-card-back a:hover {
      background-color: #000;
      color: #fff;
    }
  </style>
</div>
<br />
<br />

      <!-- 2. Simple Product Card-->
            <div class="cb-product-card">
              <div class="imgBx">
                <img src="image/product-card.png" />
              </div>
              <div class="contentBx">
                <h2>Here Your Title</h2>
                <br />
                <div class="size">
                  <h3>Size :</h3>
                  <span>7</span>
                  <span>8</span>
                  <span>9</span>
                  <span>10</span>
                </div>
                <br />
                <div class="color">
                  <h3>Color :</h3>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
       
                <a href="#" style="margin-top: 15px">Buy Now</a>
              </div>
              <style>
                /* Kreasikan CSS anda sendiri */
                .cb-product-card .contentBx .color span:nth-child(2) {
                  background: #9bdc28;
                }
       
                .cb-product-card .contentBx .color span:nth-child(3) {
                  background: #03a9f4;
                }
       
                .cb-product-card .contentBx .color span:nth-child(4) {
                  background: #e91e63;
                }
       
                .cb-product-card .contentBx .size span:hover {
                  background: #9bdc28;
                }
                .cb-product-card:before {
                  background-color: #9bdc28;
                  clip-path: circle(150px at 80% 20%);
                }
                .cb-product-card:hover:before {
                  clip-path: circle(300px at 80% -20%);
                }
       
                .cb-product-card:after {
                  content: "Nike";
                }
                @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
       
                * {
                  font-family: "Poppins", sans-serif;
                }
              </style>
            </div>

<!-- 3. Up down Card -->
        <div class="cb-up-container">
          <div class="cb-up-card">
            <div class="box">
              <div class="content">
                <h2>01</h2>
                <h3>Here Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore,
                  totam velit? Iure nemo labore inventore?
                </p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>
          <style>
            /* Kreasikan CSS anda sendiri */
            .cb-up-container .cb-up-card:nth-child(1) .box .content a {
              background: #2196f3;
            }
          </style>
        </div>

   <!-- 4. Gradient Card -->
            <div class="cb-gd-body">
              <div class="cb-gd-container">
                  <div class="cb-gd-box">
                    <span></span>
                    <div class="cb-gd-content">
                      <h2>Here Your Title</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                      <a href="#">Read More</a>
                    </div>
                  </div>
                </div>
                <style>
                     /* Kreasikan CSS anda sendiri */
                    .cb-gd-container .cb-gd-box .cb-gd-content a
        {
          background: #ece7e748;
          text-shadow: 0 1px 1px rgb(65, 64, 64);
          /* border: 1px solid rgba(255, 0, 170, 0.4); */
          box-shadow: 0 1px 10px rgba(1, 1, 1, 0.2);
          color:#fff;
        }
                    .cb-gd-container .cb-gd-box .cb-gd-content a:hover
        {
          text-shadow: 0 0.5px 0px rgba(68, 66, 66, 0.747);
          background: #ddd9d91f;
          /* border: 1px solid rgba(255, 0, 170, 0.4); */
          box-shadow: 0 1px 20px rgba(1, 1, 1, 0.2);
          color:#fff;
        }
        .cb-gd-container .cb-gd-box:nth-child(1):before,
        .cb-gd-container .cb-gd-box:nth-child(1):after
        {
          background: linear-gradient(315deg, #18d26e, #2196f3);
        }
                </style>
              </div>

 <div class="cb-ac-container">
              <div class="cb-ac-cards">
                <div class="cb-ac-card cb-ac-cards__item">
                  <div class="cb-ac-card__frame">
                    <div class="cb-ac-card__picture">
                      <img src="https://cdn-icons.flaticon.com/png/512/2022/premium/2022301.png?token=exp=1647337873~hmac=2c1bef03b72975b2dee0aded0bb78736" alt="" width="120">
                    </div>
                    <h2 class="cb-ac-card__title">Here Your Title</h2>
                  </div>
                  <div class="cb-ac-card__overlay"></div>
                  <div class="cb-ac-card__content">
                    <h2>Here Your Title</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque ipsum veritatis id quia cupiditate sed architecto aliquam nostrum unde nam minima voluptas dicta, beatae sint reprehenderit sit ducimus officiis ratione?</p>
                  </div>
              </div>
          </div>
            </div>
            <style>
              .cb-ac-container{
            font-family: 'Poppins', sans-serif;
            color: #ffffff;
              }
              .cb-ac-card:nth-child(1) {
            background-image: url('https://source.unsplash.com/640x480?surgeon');
          }
          .cb-ac-card:nth-child(1) .cb-ac-card__overlay {
            background-color: #0000009a;
          }
          .cb-ac-card__overlay{
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          }
          .cb-ac-card__overlay::before {
            content: "Read More";
            font-size: 12px;
            text-transform: capitalize;
            font-weight: 400;
            color: #ffffff;
            letter-spacing: 0.02em;
            font-family: 'Poppins', sans-serif;
            text-align: center;
          }
          </style>