API tools faq
paste
Advertisement
vitareinforce

home.blade.html

vitareinforce
Nov 10th, 2022
42
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.20 KB | None | 0 0
raw download clone embed print report
  1. @extends('layouts.template.website')
  2.  
  3. @section('css')
  4. @endsection
  5.  
  6. @section('title')
  7. Homepage
  8. @endsection
  9.  
  10. @section('content')
  11. <div id="home" class="mt-5">
  12. <div id="home-intro">
  13. <div class="row jumbotron intro">
  14. <div class="col-lg-12">
  15. <div class="row">
  16. <div class="col-lg-12">
  17. <h1 class="display-4 intro-header">Kata Bijak<br/>Agronum Tech.</h1>
  18. <h5 class="intro-header">Kelihatannya semua itu mustahil sampai semuanya terbukti."<br/>-Nelson Mandela.</h5>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <div id="home-insights">
  25. <div class="container">
  26. <div class="row">
  27. <div class="col-lg-12 d-flex align-items-center justify-content-center text-center">
  28. <h1>Insight form Agronum Tech.</h1>
  29. </div>
  30. <div class="col-lg-12 d-flex align-items-center justify-content-center text-center">
  31. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  32. </div>
  33. <div class="col-lg-12 d-flex align-items-center justify-content-center text-center">
  34. <a href="/insight" class="btn btn-success">More Insights <i class="fa fa-arrow-circle-right"></i></a>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <div id="home-service">
  40. <div class="container">
  41. <div class="row">
  42. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  43. <h1>Services</h1>
  44. </div>
  45. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  46. <p align="center">Proof of work (PoW) describes a system that requires a not-insignificant but feasible amount of effort in order to deter frivolous or malicious uses of computing power, such as sending spam emails or launching denial of service attacks."</p>
  47. </div>
  48. </div>
  49. <div class="linear-top"></div>
  50. <div id="swiper-service" class="swiper">
  51. <div class="swiper-wrapper">
  52. <div class="swiper-slide">
  53. <div class="row">
  54. <div class="col-lg-3">
  55. <img src="/img/technological_consulting.png" class="img-fluid" />
  56. </div>
  57. <div class="col-lg-9">
  58. <h1>Technological Consulting</h1>
  59. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="swiper-slide">
  64. <div class="row">
  65. <div class="col-lg-3">
  66. <img src="/img/digital_system_development.png" class="img-fluid" />
  67. </div>
  68. <div class="col-lg-9">
  69. <h1>Digital System Development</h1>
  70. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="swiper-slide">
  75. <div class="row">
  76. <div class="col-lg-3">
  77. <img src="/img/technological_consulting.png" class="img-fluid" />
  78. </div>
  79. <div class="col-lg-9">
  80. <h1>Technological Consulting</h1>
  81. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="swiper-slide">
  86. <div class="row">
  87. <div class="col-lg-3">
  88. <img src="/img/digital_system_development.png" class="img-fluid" />
  89. </div>
  90. <div class="col-lg-9">
  91. <h1>Digital System Development</h1>
  92. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="swiper-slide">
  97. <div class="row">
  98. <div class="col-lg-3">
  99. <img src="/img/technological_consulting.png" class="img-fluid" />
  100. </div>
  101. <div class="col-lg-9">
  102. <h1>Technological Consulting</h1>
  103. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="swiper-slide">
  108. <div class="row">
  109. <div class="col-lg-3">
  110. <img src="/img/digital_system_development.png" class="img-fluid" />
  111. </div>
  112. <div class="col-lg-9">
  113. <h1>Digital System Development</h1>
  114. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="linear-bottom"></div>
  121. </div>
  122. </div>
  123. <div id="home-clients">
  124. <div class="container">
  125. <div class="row">
  126. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  127. <h1>Our Clients</h1>
  128. </div>
  129. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  130. <p align="center">Proof of work (PoW) describes a system that requires a not-insignificant but feasible amount of effort in order to deter frivolous or malicious uses of computing power, such as sending spam emails or launching denial of service attacks.</p>
  131. </div>
  132. </div>
  133. <div class="row d-flex align-items-center justify-content-center">
  134. <div id="swiper-works" class="col-lg-12 swiper">
  135. <div class="swiper-wrapper">
  136. @handheld
  137. <div class="col-lg-12 swiper-slide">
  138. <div class="row">
  139. <div class="col-4 d-flex justify-content-center">
  140. <img class="img-fluid" src="/img/patroongoods.png" />
  141. </div>
  142. <div class="col-4 d-flex justify-content-center">
  143. <img class="img-fluid" src="/img/ndhilogo.png" />
  144. </div>
  145. <div class="col-4 d-flex justify-content-center">
  146. <img class="img-fluid" src="/img/orderunlogo.png" />
  147. </div>
  148. </div>
  149. <div class="row">
  150. <div class="col-4 d-flex justify-content-center">
  151. <img class="img-fluid" src="/img/bdghealth_logo.png" />
  152. </div>
  153. <div class="col-4 d-flex justify-content-center">
  154. <img class="img-fluid" src="/img/dogindo_logo.png" />
  155. </div>
  156. <div class="col-4 d-flex justify-content-center">
  157. <img class="img-fluid" src="/img/sihijau.png" />
  158. </div>
  159. </div>
  160. <div class="row">
  161. <div class="col-4 d-flex justify-content-center">
  162. <img class="img-fluid" src="/img/varunalogo.png" />
  163. </div>
  164. <div class="col-4 d-flex justify-content-center">
  165. <img class="img-fluid" src="/img/metriclogo.png" />
  166. </div>
  167. </div>
  168. </div>
  169. @elsehandheld
  170. <div class="col-lg-12 swiper-slide">
  171. <div class="row">
  172. <div class="col-2 d-flex justify-content-center">
  173. <img class="img-fluid" src="/img/patroongoods.png" />
  174. </div>
  175. <div class="col-2 d-flex justify-content-center">
  176. <img class="img-fluid" src="/img/ndhilogo.png" />
  177. </div>
  178. <div class="col-2 d-flex justify-content-center">
  179. <img class="img-fluid" src="/img/orderunlogo.png" />
  180. </div>
  181. <div class="col-2 d-flex justify-content-center">
  182. <img class="img-fluid" src="/img/bdghealth_logo.png" />
  183. </div>
  184. <div class="col-2 d-flex justify-content-center">
  185. <img class="img-fluid" src="/img/dogindo_logo.png" />
  186. </div>
  187. <div class="col-2 d-flex justify-content-center">
  188. <img class="img-fluid" src="/img/sihijau.png" />
  189. </div>
  190. <div class="col-2 d-flex justify-content-center">
  191. <img class="img-fluid" src="/img/varunalogo.png" />
  192. </div>
  193. <div class="col-2 d-flex justify-content-center">
  194. <img class="img-fluid" src="/img/metriclogo.png" />
  195. </div>
  196. </div>
  197. </div>
  198. @endhandheld
  199. </div>
  200. <div class="swiper-pagination-works"></div>
  201. </div>
  202. <div class="col-lg-12 link d-flex align-items-center justify-content-center">
  203. <a href="/solution" class="btn btn-outline-success">Explore our Works <i class="fa fa-arrow-circle-right"></i></a>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. <div id="home-newsroom">
  209. <div class="container">
  210. <div class="header">
  211. <div class="row">
  212. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  213. <h1>Newsroom</h1>
  214. </div>
  215. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  216. <p align="center">a room in a newspaper office or television or radio station where the news is prepared before it is published or broadcast:</p>
  217. </div>
  218. </div>
  219. </div>
  220. <div class="content shadow">
  221. <div class="row">
  222. <div class="col-lg-4">
  223. <img class="img-fluid" src="/img/placeholder_img.png" />
  224. </div>
  225. <div class="col-lg-8">
  226. <h1>Latest News</h1>
  227. <label>22 July 2022</label>
  228. <p>the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare", the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare", the capacity to gain an accurate and deep intuitive understanding of a person or thing. "this paper is alive with sympathetic insight into Shakespeare"</p>
  229. </div>
  230. </div>
  231. </div>
  232. <div class="links">
  233. <div class="row">
  234. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  235. <a href="/news" class="btn btn-outline-success">Explore News <i class="fa fa-arrow-circle-right"></i></a>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. <div id="home-help">
  242. <div class="container">
  243. <div class="row">
  244. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  245. <h1>How we help You?</h1>
  246. </div>
  247. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  248. <p align="center">Empathy is the ability to emotionally understand what other people feel, see things from their point of view, and imagine yourself in their place. Essentially, it is putting yourself in someone else's position and feeling what they are feeling.</p>
  249. </div>
  250. <div class="col-lg-12 d-flex align-items-center justify-content-center">
  251. <a href="mailto:reach.us@agronum.tech" target="_tab"><i class="far fa-envelope"></i></a>
  252. <a href="https://www.instagram.com/agronumtech/" target="_tab"><i class="fab fa-instagram"></i></a>
  253. <a href="https://www.linkedin.com/company/13729019" target="_tab"><i class="fab fa-linkedin"></i></a>
  254. <a href="https://open.spotify.com/show/2V5zU2cfzAUDcS43oam5Dm" target="_tab"><i class="fab fa-spotify"></i></a>
  255. <a href="https://www.facebook.com/agronum.tech" target="_tab"><i class="fab fa-facebook"></i></a>
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. @endsection
  262.  
  263. @section('js')
  264. <script>
  265. $('.intro-header').css({"color":"black"});
  266. $('#home-intro').on("scroll", function(event) {
  267. let bodyscroll = $('html, body').scrollTop();
  268. let scroll = $('#home-intro').scrollTop();
  269. let scrollinsight = 0;
  270. // let scrollend = $('#home-intro').innerHeight();
  271. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  272. scrollinsight = $("#home-insights").offset().top;
  273. } else {
  274. scrollinsight = $("#home-insights").offset().top - 45;
  275. }
  276. // console.log(scroll + "-" + bodyscroll + "-" + scrollinsight + "-" + scrollend);
  277. $('#home').css({"background-position-y":"-" + (scroll) + "px, 0px"});
  278. console.log(scroll);
  279. if(scroll < 100) {
  280. console.log('masuk 1');
  281. $('.intro-header').css({"color":"black"});
  282. } else if(scroll >= 100 && scroll < 400) {
  283. console.log('masuk 2');
  284. $('.intro-header').css({"color":"grey"});
  285. } else if(scroll >= 400 && scroll < scrollinsight) {
  286. console.log('masuk 3');
  287. $('.intro-header').css({"color":"white"});
  288. } else if(scroll >= scrollinsight && bodyscroll == 0) {
  289. console.log('masuk 4');
  290. $('html, body').animate({
  291. scrollTop: scrollinsight
  292. }, 50);
  293. if(bodyscroll == scrollinsight) {
  294. $('#home-intro').scrollTop(scrollinsight);
  295. }
  296. }
  297. });
  298.  
  299. $(window).scroll(function(){
  300. console.log($('html, body').scrollTop());
  301. });
  302.  
  303. // const swiperIntro = new Swiper('#swiper-intro', {
  304. // slidesPerView: 1,
  305. // loop: true,
  306. // spaceBetween: 300,
  307. // allowTouchMove: true,
  308. // autoplay: {
  309. // delay: 3000,
  310. // },
  311. // pagination: {
  312. // el: '.swiper-pagination',
  313. // disabledClass: 'swiper-button-disabled',
  314. // clickable: true
  315. // },
  316. // navigation: {
  317. // nextEl: '.swiper-button-next',
  318. // prevEl: '.swiper-button-prev',
  319. // },
  320. // });
  321.  
  322. const swiperService = new Swiper('#swiper-service', {
  323. slidesPerView: 2,
  324. direction: "vertical",
  325. freeMode: {
  326. enabled: true,
  327. sticky: true,
  328. },
  329. followFinger: true,
  330. mousewheel: true,
  331. mousewheelControl: true,
  332. mousewheel: {
  333. releaseOnEdges: true,
  334. },
  335. touchReleaseOnEdges: true,
  336. spaceBetween: 1,
  337. });
  338.  
  339. const swiperWorks = new Swiper('#swiper-works', {
  340. slidesPerView: 1,
  341. loop: true,
  342. spaceBetween: 300,
  343. allowTouchMove: true,
  344. autoplay: {
  345. delay: 3000,
  346. },
  347. pagination: {
  348. el: '.swiper-pagination-works',
  349. disabledClass: 'swiper-button-disabled',
  350. clickable: true
  351. },
  352. navigation: {
  353. nextEl: '.swiper-button-next',
  354. prevEl: '.swiper-button-prev',
  355. },
  356. });
  357. swiperWorks.autoplay.stop();
  358.  
  359. var image = document.getElementsByClassName('thumbnail');
  360. </script>
  361. @endsection
  362.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!