{Theme} has 2 version of Event Box that you can use.
–Default version
HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<a href="#" class="ct-event-box"> <div class="ct-event-box__inner"> <div class="ct-event-box__icon"> <div class="inner"> <svg width="37px" height="32px" viewbox="0 0 37 32" class="ct-icon ct-icon--drawing"> <path></path> </svg> </div> </div> <h3 class="ct-event-box__header">Drawing Parties</h3> <div class="ct-event-box__hover"> <div class="inner"> <h5 class="ct-event-box__header">Drawing Parties</h5> <p class="ct-event-box__content">Lorem ipsum dolor sitam consectetur brevis estia nunc aeneat brevis es. </p> </div> </div> </div> </a> |
Screenshot
–Style 2 version
HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="ct-eventBox ct-eventBox--col3-left"> <div class="ct-eventBox-item ct-u-background--motive text-left"><i class="fa fa-calendar-check-o"></i> <div class="ct-section-header ct-section-header--type2"><span class="h1 big">come and see me live!</span> </div> </div> </div> <div data-autoplay="true" data-autoplaySpeed="3000" data-arrows="false" data-items-sm="1" data-items-md="2" data-items-lg="2" data-items="1" class="ct-eventBox ct-eventBox--col3-right text-center ct-slick ct-js-slick"> <div class="tablex item"> <div class="ct-eventBox-item ct-u-background--motive-5"> <div class="ct-section-header ct-section-header--type2"><span class="h1">next event starts in</span> </div> <div class="ct-js-countdown ct-countdown"></div> <div class="ct-eventBox-info"> <div class="ct-eventBox-inner"> <div class="ct-left"> <div class="inner ct-icon"><i class="fa fa-calendar"></i></div> <div class="inner ct-desc"><span class="h4">December 5, 2015</span><span class="h5 ct-subtitle">10:00 - 18:00</span></div> </div> <div class="ct-right"> <div class="inner ct-icon"><i class="fa fa-map"></i></div> <div class="inner ct-desc"><span class="h4">Sella Plaza</span><span class="h5 ct-subtitle">928 Park Ave R. New York, NY 10001, United States</span></div> </div> </div> </div> </div> </div> <div class="tablex item"> <div class="ct-eventBox-item ct-u-background--motive-10"> <div class="ct-section-header ct-section-header--type2 ct-u-margin-top-20"><span class="h1">buy your ticket now</span> </div> <div class="text-center"><span class="ct-price">$ 149</span><img src="assets/images/demo-content/etickets-logo.png" alt=""></div><a href="#" class="btn btn-default btn-lg btn-square ct-u-margin-bottom-20">buy ticket now<i class="fa fa-ticket"></i></a> </div> </div> </div> |
Screenshot