October 17, 2021

Counter ticket

<div class="container">
    <section class="counter">
               
                <div class="container">
                    <div class="ticket_item">
                        <div class="icon green">
                           <i class="fa fa-check"></i>
                        </div>
                        <h2>25 IOT <span>Already Set up</span></h2>
                        <p>More Than</p>
                    </div>
                    <div class="ticket_item">
                        <div class="icon pink">
                             <i class="fa fa-tag"></i>
                        </div>
                        <h2>$240.00 <span>Ultimate Plan</span></h2>
                        <p>Price</p>
                    </div>
                    <div class="ticket_item">
                        <div class="icon yellow">
                             <i class="fa fa-calendar"></i>
                        </div>
                        <h2>In 1 days<span>In your Store</span></h2>
                        <p>Set Up</p>
                    </div>
                </div>
            </section>
            </div>

 

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
.counter {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
}

.counter .ticket_shap {
  content: "";
  width: 100%;
  height: 730px;
  position: absolute;
  right: 0;
  top: 0;
  background-position: right, right !important;
  background-repeat: no-repeat !important;
}

.counter .pattern {
  position: absolute;
  right: 0;
  top: 0;
  width: 225px;
  height: 125px;
}

.counter .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ticket_item {
  background: #fff;
  padding: 30px 50px 70px;
  -webkit-box-shadow: 0px 50px 100px 0px rgba(5, 1, 64, 0.1);
  box-shadow: 0px 50px 100px 0px rgba(5, 1, 64, 0.1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: inline-block;
  width: calc(70% / 3);
  position: relative;
}

.ticket_item:before {
  content: "";
  width: 100%;
  height: 10px;
  background: url("https://tolmatol.com/uploads-images/counter-block/bg-trim.png") no-repeat scroll center bottom/cover;
  position: absolute;
  bottom: -10px;
  left: 0;
}

.ticket_item:after {
  bottom: 40px;
  content: "";
  position: absolute;
  left: -3px;
  width: 100%;
  height: 1px;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(50%, #c9c9d6));
  background-image: -webkit-linear-gradient(left, transparent 50%, #c9c9d6 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #c9c9d6 50%);
  background-image: linear-gradient(to right, transparent 50%, #c9c9d6 50%);
  background-size: 10px 94%;
}

.ticket_item .icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 80px;
  text-align: center;
  background: #edfcec;
  margin-bottom: 25px;
      line-height: 60px;
    font-size: 25px;
}

.ticket_item .icon.pink {
  background: #feecfb;
}

.ticket_item .icon.yellow {
  background: #fefaec;
}
.ticket_item .icon.green i { color:#4CAF50; }
.ticket_item .icon.pink i { color:#f774e1;  }
.ticket_item .icon.yellow i { color:#ffc107;  }

.ticket_item h2 {
  font-size: 44px;
  line-height: 35px;
  font-weight: 600;
  color: #2c2c51;
  text-transform: uppercase;
}

.ticket_item h2 span {
  font-weight: 500;
  color: #7b7b93;
  font-size: 18px;
  line-height: 30px;
  display: block;
  padding-top: 10px;
}

.ticket_item p {
  margin-bottom: 0;
  margin-top: 25px;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 4px;
  color: #aaaabb;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 500;
}

.ticket_item + .ticket_item {
  margin-left: 2%;
}
.container { width: 1200px; margin: auto;} 
    </style>

 

Leave a Reply

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