Invested Traveler: Blog Posts

Documentation:

HTML:

<!-- Blog Posts --> <div class="blog-posts"> <div class="container"> <div class="row blog-posts-header"> <div class="col-md-12"> <h1>Featured News</h1> <p class="border-yellow-wrapper"><span class="border-yellow border-blue-top"></span></p> </div> </div> <?php $counter = 0; $args = array('post_type' => 'post', 'posts_per_page' => 3, 'orderby'=> 'date', 'order' => 'DESC'); $query = new WP_Query($args); while($query -> have_posts()) : $query -> the_post(); ?> <?php if ($counter % 3 == 0 ) { ?> <?php if ($counter !== 0 ) { ?> </div> <?php } ?> <div class="row"> <?php } ?> <div class="resource-pod col-sm-4"> <a href="<?php the_permalink(); ?>"> <div class="resource-thumbnail-wrapper"> <?php if ( has_post_thumbnail() ) { ?> <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-featured' ); ?> <div class="featured-img-blog" style="background-image: url('<?php echo $image[0]; ?>')"> <i class="fa fa-plus-square-o" aria-hidden="true"></i> </div> <?php } // end if ?> </div> </a> <div class="resource-pod-content"> <p class="post-date"><?php $date = get_the_date(); echo $date; ?></p> <h3><?php the_title(); ?></h3> <p><?php the_excerpt(); ?></p> <a href="<?php the_permalink(); ?>">Read More</a> </div> </div> <?php $counter++; endwhile; ?> <?php if ($counter % 4 !== 0 ) { ?> </div> <?php } ?> <?php wp_reset_query(); ?> </div> </div>

CSS:

/* Blog Posts */ .blog-posts { padding: 95px 0; float: left; width: 100%; } .blog-posts-header h1 { font-size: 50px; text-align: center; margin-bottom: 80px; margin-top: 0; font-family: $header-font-stack; text-transform: uppercase; letter-spacing: 5px; font-weight: 100; } .blog-posts h1 { color: #545453; margin-bottom: 0; } .blog-posts-header { margin-bottom: 80px; } .home .featured-img-blog, .resource-thumbnail-wrapper { width: 100%; } .home .featured-img-blog { transition: 0.6s; display: flex; align-items: center; justify-content: center; &:hover { transform: scale(1.1); } i { opacity: 0; transition: 0.6s; font-size: 32px; color: #fff; } &:hover i { opacity: 1; } } .resource-thumbnail-wrapper { overflow: hidden; } .home .resource-pod-content { width: 100%; text-align: left; margin-top: 20px; h3 { color: #3f3f42; font-weight: 500; font-size: 22px; } p { color: #3f3f42; } p.post-date { margin-bottom: 5px; color: #3f3f42; } a { color: #409bc8; font-size: 14px; } } .resource-thumbnail-wrapper { float: left; display: block; border-bottom: 5px solid #409bc8; } .resource-pod-content { float: left; display: block; width: 190px; } .resource-pod-content h3, .resource-pod-content a { margin-top: 0; }