category-blog.blade.php 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. @component('home.layouts.component', ['title' => 'صفحه دسته‌بندی مقاله'])
  2. @slot('style')
  3. @endslot
  4. @slot('content_top')
  5. @endslot
  6. @slot('content')
  7. <section class="container my-5">
  8. <div class="row">
  9. <div class="col-lg-9">
  10. <h1 class="article-category-title-holder">
  11. لیست مقالات
  12. </h1>
  13. <div class="article-category-content-holder">
  14. @for($i=0; $i<6; $i++)
  15. <div class="article-content">
  16. <div class="sub-title">
  17. <div class="d-flex">
  18. <div class="published-at">
  19. <i class="fa fa-calendar"></i>
  20. <span>
  21. ۱۴۰۰/۰۵/۰۳
  22. </span>
  23. </div>
  24. <div class="comments">
  25. <i class="fa fa-comment-o"></i>
  26. <span>
  27. ۴
  28. </span>
  29. </div>
  30. </div>
  31. <div class="duration-of-study">
  32. <i class="fa fa-clock-o"></i>
  33. <span>
  34. مدت زمان مطالعه ۲۴ دقیقه
  35. </span>
  36. </div>
  37. </div>
  38. <div class="title">
  39. <a href="">
  40. عنوان مقاله اول متون بلکه روزنامه و مجله در ستون
  41. </a>
  42. </div>
  43. <div class="lead-text">
  44. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته
  45. </div>
  46. <div class="category">
  47. <span class="fs-8">
  48. دسته‌بندی:
  49. </span>
  50. <a href="" class="badge bg-info text-dark">
  51. جاوا
  52. </a>
  53. <a href="" class="badge bg-info text-dark">
  54. کدنویسی
  55. </a>
  56. <a href="#" class="badge bg-info text-dark">
  57. برنامه‌نویسی
  58. </a>
  59. <a href="#" class="badge bg-info text-dark">
  60. مهندسی معکوس
  61. </a>
  62. </div>
  63. <div class="article-footer">
  64. <div class="author-published-holder">
  65. <div class="author-avatar-holder">
  66. <img class="author-avatar" src="https://beyondco.de/img/marcel.jpg" alt="avater">
  67. </div>
  68. <div class="author-name">
  69. مشخصات نویسنده
  70. </div>
  71. </div>
  72. <div class="learn-more">
  73. <a href="" class="btn btn-outline-primary">
  74. ادامه مطلب
  75. <i class="fa fa-arrow-left align-middle"></i>
  76. </a>
  77. </div>
  78. </div>
  79. </div>
  80. @endfor
  81. </div>
  82. </div>
  83. <div class="col-lg-3">
  84. <div class="my-3 text-center">
  85. <img src="{{ asset('images/home/banner/g6.gif') }}" alt="image">
  86. </div>
  87. <div class="my-3 text-center">
  88. <img src="{{ asset('images/home/banner/g5.gif') }}" alt="image">
  89. </div>
  90. </div>
  91. <div class="col-lg-12">
  92. <div class="pagination-holder d-flex justify-content-center">
  93. <nav>
  94. <ul class="pagination pagination">
  95. <li class="page-item active" aria-current="page">
  96. <span class="page-link">1</span>
  97. </li>
  98. <li class="page-item"><a class="page-link" href="#">2</a></li>
  99. <li class="page-item"><a class="page-link" href="#">3</a></li>
  100. </ul>
  101. </nav>
  102. </div>
  103. </div>
  104. </div>
  105. </section>
  106. @endslot
  107. @slot('script')
  108. <script>
  109. </script>
  110. @endslot
  111. @endcomponent