landing-pages.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. ---
  2. layout: default
  3. title: Bootstrap Landing Page Templates
  4. description: Free Bootstrap 4 landing page templates and page headers that can help you get started on your next Bootstrap based landing page project
  5. permalink: /templates/landing-pages/
  6. meta-title: Free Bootstrap Landing Page Templates
  7. type: template
  8. ---
  9. {% include masthead/masthead-page.html %}
  10. <div class="container">
  11. <!-- Show paginated posts for the specificed collection -->
  12. <div class="row">
  13. {% assign sorted = site.templates | sort: "rank" %}
  14. {% for template in sorted %}
  15. {% if template.categories contains 'landing-page' %}
  16. <div class="col-md-4">
  17. <div class="item-preview mb-5">
  18. <a class="item-preview-img box-shadow-lg d-block mb-3" href="{{ template.src }}">
  19. <img class="img-fluid" src="{{ template.img-thumbnail }}" alt="{{ template.img-desc }}">
  20. </a>
  21. <div class="item-preview-title d-flex align-items-center">
  22. {{ template.title }}
  23. {% if template.pro %}
  24. <span class='badge badge-warning ml-auto small badge-pill'>Pro</span>
  25. {% else %}
  26. <span class='badge badge-success ml-auto small badge-pill'>Free</span>
  27. {% endif %}
  28. </div>
  29. <div class="item-preview-description">{{ template.bump }}</div>
  30. </div>
  31. </div>
  32. {% endif %}
  33. {% endfor %}
  34. {% include survey.html %}
  35. </div>
  36. <!-- /.row -->
  37. </div>
  38. <!-- /.container -->
  39. <section class="after-loop">
  40. <div class="container">
  41. <div class="row">
  42. <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
  43. <a href="/themes/" class="after-loop-item card border-0 card-themes shadow-lg">
  44. <div class="card-body d-flex align-items-end flex-column text-right">
  45. <h4>Themes</h4>
  46. <p class="w-75">Fully designed and ready to modify and publish!</p>
  47. <i class="fal fa-paint-brush-alt"></i>
  48. </div>
  49. </a>
  50. </div>
  51. <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
  52. <a href="/snippets/" class="after-loop-item card border-0 card-snippets shadow-lg">
  53. <div class="card-body d-flex align-items-end flex-column text-right">
  54. <h4>Snippets</h4>
  55. <p class="w-75">Code snippets ready to copy and paste!</p>
  56. <i class="fal fa-code"></i>
  57. </div>
  58. </a>
  59. </div>
  60. <div class="col-lg-4 col-md-8 mx-auto">
  61. <a href="/guides/" class="after-loop-item card border-0 card-guides shadow-lg">
  62. <div class="card-body d-flex align-items-end flex-column text-right">
  63. <h4>Guides</h4>
  64. <p class="w-75">Guides and tutorials to help you learn Bootstrap!</p>
  65. <i class="fal fa-books"></i>
  66. </div>
  67. </a>
  68. </div>
  69. </div>
  70. </div>
  71. </section>