Old UniVate Website
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.

contact-us-slider.blade.php 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!-- <!DOCTYPE html> -->
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Slider</title>
  6. <style>
  7. .carousel-caption {
  8. font-size: 12px;
  9. font-style: italic;
  10. font-weight: bold;
  11. display: none; /*comment out to display captions*/
  12. }
  13. .carousel-control {
  14. text-shadow: 0;
  15. }
  16. .carousel-control.left {
  17. background-image: -webkit-linear-gradient(
  18. left,
  19. rgba(0, 0, 0, 0) 0,
  20. rgba(0, 0, 0, 0.0001) 100%
  21. );
  22. background-image: -o-linear-gradient(
  23. left,
  24. rgba(0, 0, 0, 0) 0,
  25. rgba(0, 0, 0, 0) 100%
  26. );
  27. background-image: -webkit-gradient(
  28. linear,
  29. left top,
  30. right top,
  31. from(rgba(0, 0, 0, 0)),
  32. to(rgba(0, 0, 0, 00001))
  33. );
  34. background-image: linear-gradient(
  35. to right,
  36. rgba(0, 0, 0, 0) 0,
  37. rgba(0, 0, 0, 0) 100%
  38. ) !important;
  39. }
  40. .carousel-control.right {
  41. background-image: -webkit-linear-gradient(
  42. left,
  43. rgba(0, 0, 0, 0) 0,
  44. rgba(0, 0, 0, 0.0001) 100%
  45. );
  46. background-image: -o-linear-gradient(
  47. left,
  48. rgba(0, 0, 0, 0) 0,
  49. rgba(0, 0, 0, 0) 100%
  50. );
  51. background-image: -webkit-gradient(
  52. linear,
  53. left top,
  54. right top,
  55. from(rgba(0, 0, 0, 0)),
  56. to(rgba(0, 0, 0, 00001))
  57. );
  58. background-image: linear-gradient(
  59. to right,
  60. rgba(0, 0, 0, 0) 0,
  61. rgba(0, 0, 0, 0) 100%
  62. ) !important;
  63. }
  64. .carousel-indicators {
  65. bottom: -40px !important;
  66. }
  67. .carousel-indicators li {
  68. border: 1px solid #d9d9d9 !important;
  69. border-radius: 10px !important;
  70. background-color: #d9d9d9 !important;
  71. width: 11px !important;
  72. height: 11px !important;
  73. margin-left: 3px !important;
  74. margin-right: 3px !important;
  75. }
  76. .carousel-indicators .active {
  77. border: 0px solid #869791 !important;
  78. border-radius: 10px !important;
  79. background-color: #869791 !important;
  80. width: 11px !important;
  81. height: 11px !important;
  82. margin-bottom: 1px !important;
  83. }
  84. </style>
  85. </head>
  86. <body>
  87. <!--Bootstrap Responsive Full-Width Slider/Carousel Non-Touch with OwlCarousel style pagination. If you like my work, please credit author: www.action360.ca @action360ca Enjoy!-->
  88. <div id="myCarousel" class="carousel slide" data-interval="2700" data-ride="carousel">
  89. <!-- Wrapper for slides -->
  90. <div class="carousel-inner" role="listbox">
  91. <div class="item active">
  92. <img src="/images/sliders/CONTACT-1.jpg" width="100%">
  93. <div class="carousel-caption">
  94. <h3>First Slide</h3>
  95. <p>Caption goes here<br></p>
  96. </div>
  97. </div>
  98. <div class="item">
  99. <img src="/images/sliders/CONTACT-2.jpg" width="100%">
  100. <div class="carousel-caption">
  101. <h3>Second slide</h3>
  102. <p>Caption goes here</p>
  103. </div>
  104. </div>
  105. <div class="item">
  106. <img src="/images/sliders/CONTACT-3.jpg" width="100%">
  107. <div class="carousel-caption">
  108. <h3>Third slide</h3>
  109. <p>Caption goes here</p>
  110. </div>
  111. </div>
  112. <div class="item">
  113. <img src="/images/sliders/CONTACT-4.jpg" width="100%">
  114. <div class="carousel-caption">
  115. <h3>Fourth slide</h3>
  116. <p>Caption goes here</p>
  117. </div>
  118. </div>
  119. <div class="item">
  120. <img src="/images/sliders/CONTACT-5.jpg" width="100%">
  121. <div class="carousel-caption">
  122. <h3>Fifth slide</h3>
  123. <p>Caption goes here</p>
  124. </div>
  125. </div>
  126. <div class="item">
  127. <img src="/images/sliders/CONTACT-6.jpg" width="100%">
  128. <div class="carousel-caption">
  129. <h3>Fifth slide</h3>
  130. <p>Caption goes here</p>
  131. </div>
  132. </div>
  133. </div>
  134. <!-- Controls -->
  135. <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  136. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  137. <span class="sr-only">Previous</span>
  138. </a>
  139. <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  140. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  141. <span class="sr-only">Next</span>
  142. </a>
  143. </div>
  144. </div>
  145. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  146. <script>
  147. </script>
  148. </body>
  149. </html>