SDCCS: Upcoming Events

Documentation:

HTML:

<!-- Upcoming Events --> <div id="upcoming-events"> <div class="container"> <div class="row"> <div id="upcoming-events-header"> <h1>Upcoming Events</h1> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> </div> </div> <div class="row"> <div id="upcoming-events-content"> <?php $args = array('post_type' => 'tribe_events', 'posts_per_page' => 3, 'eventDisplay' => 'upcoming', 'orderby' => 'EventStartDate', 'order' => 'asc'); $query = new WP_Query($args); while($query -> have_posts()) : $query -> the_post(); ?> <div class="col-md-4"> <div class="upcoming-event-container"> <div class="upcoming-event-thumbnail" style="background-image: url(<?php echo get_the_post_thumbnail_url() ?>)"> <div class="upcoming-event-date"><p><?php echo tribe_get_start_date(null, false, 'M<\b\r>j') ?></p></div> </div> <div class="upcoming-event-info"> <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?></h4></a> <p><?php the_excerpt(); ?></p> <a class="upcoming-event-info-link" href="<?php the_permalink(); ?>">Learn More</a> </div> </div> </div> <?php endwhile; ?> </div> </div> <div class="row"> <div id="upcoming-events-footer"> <a href="/events/"><button class="rd-btn">View Full Calendar</button></a> </div> </div> </div> </div>

CSS:

/* Upcoming Events */ #upcoming-events { float: left; width: 100%; margin: 50px 0; } #upcoming-events-header { text-align: center; h1 { font-size: 55px; margin: 0; text-transform: uppercase; letter-spacing: 3px; font-weight: 400; } p { letter-spacing: 1px; margin-top: 20px; } } #upcoming-events-content { margin: 60px 0; float: left; width: 100%; h4 { color: $primary-color; font-family: $body-font-stack; font-weight: 700; margin-top: 0; } p { } a.upcoming-event-info-link { color: $tertiary-color; text-transform: uppercase; font-weight: 700; } } .upcoming-event-thumbnail { width: 170px; height: 170px; background-color: whitesmoke; float: left; background-size: cover; background-position: center center; } .upcoming-event-info { width: 190px; float: left; padding-left: 20px; } .upcoming-event-date { display: inline-block; position: absolute; left: -10px; top: -10px; background-color: $secondary-color; border-radius: 100%; padding: 10px; height: 60px; width: 60px; p { color: $secondary-color-text; text-align: center; text-transform: uppercase; font-size: 15px; margin: 0; font-weight: 700; } } #upcoming-events-footer { text-align: center; button { background-color: $secondary-color; color: $secondary-color-text; padding: 15px 25px; } }