In {Theme} we have 4 types of blog posts you can created using this markups:
Blog Image
HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<article class="ct-blog-post ct-blog-post--image ct-u-paddingTop40 ct-u-paddingBottom80"> <div class="ct-blog-post--media"> <img src="assets/images/blog_img1.jpg" alt=""> </div> <div class="ct-blog-post--body"> <div class="ct-blog-post--description"><h6>Posted by Richard on February 15, 2015 in Images, 4 comments</h6> </div> <div class="ct-blog-post--title"><h1><a href=""></a><a href="blog-post.html">Car hacks to instantly improve every drive</a></h1></div> <div class="ct-blog-post--content"><p>Aliquam dui magna, viverra sit amet lobortis id, fermentum dictum nisi. Nam maximus ullamcorper posuere mollis. Aliquam pharetra ante et velit commodo, et bibendum ante venenatis. Phasellus commodo velit nisl, non tempus lacus faucibus. In neque elit, mattis non purus eu, accumsan at massa id tincidunt. Morbi in varius mi, nec ullamcorper erat.</p> </div> </div> <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a> </article> |
Screenshot
Blog Simple
HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<article class="ct-blog-post ct-u-paddingTop40 ct-u-paddingBottom80"> <div class="ct-blog-post--media"> </div> <div class="ct-blog-post--body"> <div class="ct-blog-post--description"><h6>Posted by Richard on February 12, 2015 in News and updates, Leave a comment</h6> </div> <div class="ct-blog-post--title"><h1><a href="blog-post.html">Spring is right around the corner: how to get your vehicle ready for warmer weather</a></h1> </div> <div class="ct-blog-post--content"><p>Aliquam interdum dolor et sapien semper scelerisque. Suspendisse neque turpis, venenatis eget porta cursus, cursus at justo. Nullam id ipsum vitae turpis pellentesque faucibus. Nulla consequat arcu vel iaculis ultricies. Cras bibendum maximus libero eget malesuada. Mauris pretium tellus in neque pharetra, vitae fermentum mi dignissim. Vivamus nulla sem, commodo at consequat nec.</p> </div> </div> <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a> </article> |
Screenshot
Blog Gallery
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 |
<article class="ct-blog-post ct-blog-post--gallery ct-u-paddingTop40 ct-u-paddingBottom80"> <div class="ct-blog-post--media"> <div class="row"> <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img2.jpg" alt=""></div> <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img3.jpg" alt=""></div> <div class="col-lg-4 text-center ct-u-paddingBottom30"> <img src="assets/images/blog_img4.jpg" alt=""></div> </div> <div class="row"> <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img5.jpg" alt=""></div> <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img6.jpg" alt=""></div> <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img7.jpg" alt=""></div> </div> </div> <div class="ct-blog-post--body"> <div class="ct-blog-post--description"><h6>Posted by Richard on February 7, 2015 in Gallery, Images, 2 comments</h6> </div> <div class="ct-blog-post--title"><h1><a href="blog-post.html">Buying a used vehicle? What to look for</a></h1> </div> <div class="ct-blog-post--content"><p>Fusce vel tristique nunc. Aenean tempus, diam quis laoreet gravida, lectus sem lobortis orci, id ultricies turpis metus in arcu. Proin ullamcorper diam fringilla mi volutpat convallis. Sed tortor orci, lacinia ut leo quis, congue varius est. In hac habitasse platea dictumst. Etiam pulvinar pellentesque lorem, vel tempus purus vestibulum vitae. Maecenas lorem convallis consectetur.</p> </div> </div> <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a> </article> |
Screenshot
Blog Video
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 |
<article class="ct-blog-post ct-blog-post--video ct-u-paddingTop40 ct-u-paddingBottom80"> <div class="ct-blog-post--media"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> </div> </div> <div class="ct-blog-post--body"> <div class="ct-blog-post--description"><h6>Posted by Richard on February 3, 2015 in Videos, 1 comment</h6> </div> <div class="ct-blog-post--title"><h1><a href="blog-post.html">What is a Car Inspection?</a></h1> </div> <div class="ct-blog-post--content"><p>Aliquam dui magna, viverra sit amet lobortis id, fermentum dictum nisi. Nam maximus ullamcorper posuere mollis. Aliquam pharetra ante et velit commodo, et bibendum ante venenatis. Phasellus commodo velit nisl, non tempus lacus faucibus. In neque elit, mattis non purus eu, accumsan at massa id tincidunt. Morbi in varius mi, nec ullamcorper erat.</p> </div> </div> <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a> </article> |
Screenshot