You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 2.4KB

3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
3 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. {% extends "base.html" %}
  2. {% block content %}
  3. <h1>
  4. Heading
  5. </h1>
  6. <p>
  7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius, justo a iaculis porta, ipsum nibh suscipit orci, at lobortis quam orci ac orci. In non consectetur ipsum. Suspendisse sodales tempor ullamcorper. Fusce placerat magna a nulla scelerisque, cursus accumsan quam tempus. Integer ac nulla sit amet nibh pulvinar porttitor non non leo. Nam a leo erat. Aliquam erat volutpat. Vestibulum quis diam sem.
  8. </p>
  9. <!-- Carousel -->
  10. <div id="tool_carousel" class="carousel slide mt-5" data-bs-ride="carousel">
  11. <!-- Indicators/dots -->
  12. <div class="carousel-indicators">
  13. <button type="button" data-bs-target="#tool_carousel" data-bs-slide-to="0" class="active"></button>
  14. <button type="button" data-bs-target="#tool_carousel" data-bs-slide-to="1"></button>
  15. <button type="button" data-bs-target="#tool_carousel" data-bs-slide-to="2"></button>
  16. </div>
  17. <!-- The slideshow/carousel -->
  18. <div class="carousel-inner">
  19. <div class="carousel-item active text-center">
  20. <h2>Tool 1</h2>
  21. <p>
  22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius, justo a iaculis porta, ipsum nibh suscipit orci, at lobortis quam orci ac orci. In non consectetur ipsum. Suspendisse sodales tempor ullamcorper.
  23. </p>
  24. </div>
  25. <div class="carousel-item text-center">
  26. <h2>Tool 2</h2>
  27. <p>
  28. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius, justo a iaculis porta, ipsum nibh suscipit orci, at lobortis quam orci ac orci. In non consectetur ipsum. Suspendisse sodales tempor ullamcorper.
  29. </p>
  30. </div>
  31. <div class="carousel-item text-center">
  32. <h2>Tool 3</h2>
  33. <p>
  34. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius, justo a iaculis porta, ipsum nibh suscipit orci, at lobortis quam orci ac orci. In non consectetur ipsum. Suspendisse sodales tempor ullamcorper.
  35. </p>
  36. </div>
  37. </div>
  38. <!-- Left and right controls/icons -->
  39. <button class="carousel-control-prev" type="button" data-bs-target="#tool_carousel" data-bs-slide="prev">
  40. <span class="carousel-control-prev-icon"></span>
  41. </button>
  42. <button class="carousel-control-next" type="button" data-bs-target="#tool_carousel" data-bs-slide="next">
  43. <span class="carousel-control-next-icon"></span>
  44. </button>
  45. </div>
  46. {% endblock %}