productos.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4. <title>Agro Insumos Raké SPR de RL de CV - Líder en insumos agrícolas en Chihuahua</title>
  5. <meta charset="utf-8">
  6. <meta content='Rake.' name='DC.Title' xml:lang='ES'>
  7. <meta content='Agroinsumos Rake.' name='DC.Subject' xml:lang='ES'>
  8. <meta content='Agroinsumos Rake.' name='DC.Description' xml:lang='ES'>
  9. <meta content='ES' name='DC.Language' scheme='dcterms:RFC1766'>
  10. <meta content='Agroinsumos' name='DC.Contributor'>
  11. <meta content='text/html' name='DC.Type'>
  12. <meta content='https://rake.mx/' name='DC.Identifier'>
  13. <meta content='Copyright 2019, Rake Inc. All rights reserved.' name='DC.Rights'>
  14. <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
  15. <meta content='Agroinsumos Rake' property='og:title'>
  16. <meta content='website' property='og:type'>
  17. <meta content='https://rake.mx/' property='og:url'>
  18. <meta content='Agroinsumos Rake, empresa líder en la venta de insumos para la producción agrícola, que ofrece gran calidad en los productos agrícolas'>
  19. <link href='marcas.html' hreflang='es' rel='alternate'>
  20. <meta content='width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1' id='viewport' name='viewport'>
  21. <!-- Favicons -->
  22. <link href="assets/favicon.ico" rel="icon">
  23. <link href="img/apple-touch-icon.png" rel="apple-touch-icon">
  24. <!-- Google Fonts -->
  25. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,400i,500,500i,700,800,900" rel="stylesheet">
  26. <!-- Bootstrap CSS File -->
  27. <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  28. <!-- Libraries CSS Files -->
  29. <link href="lib/nivo-slider/css/nivo-slider.css" rel="stylesheet">
  30. <link href="lib/owlcarousel/owl.carousel.css" rel="stylesheet">
  31. <link href="lib/owlcarousel/owl.transitions.css" rel="stylesheet">
  32. <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  33. <link href="lib/animate/animate.min.css" rel="stylesheet">
  34. <link href="lib/venobox/venobox.css" rel="stylesheet">
  35. <!-- Nivo Slider Theme -->
  36. <link href="css/nivo-slider-theme.css" rel="stylesheet">
  37. <!-- Main Stylesheet File -->
  38. <link href="css/style.css" rel="stylesheet">
  39. <link href="css/styleAsesoria.css" rel="stylesheet">
  40. <!-- Responsive Stylesheet File -->
  41. <link href="css/responsive.css" rel="stylesheet">
  42. <!-- Vuejs -->
  43. <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  44. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  45. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  46. </head>
  47. <body data-spy="scroll" data-target="#navbar-example">
  48. <!-- <div id="preloader"></div> -->
  49. <!-- header Start -->
  50. <header></header>
  51. <!-- header end -->
  52. <!-- Start Bottom Header -->
  53. <!-- <div class="header-bg page-area" id="productos">
  54. <div class="home-overly"></div>
  55. <div class="container">
  56. <div class="row">
  57. <div class="col-md-12 col-sm-12 col-xs-12">
  58. <div class="text-center">
  59. <div class="header-bottom">
  60. <div class="layer2 wow zoomIn" data-wow-duration="1s" data-wow-delay=".4s">
  61. <h1 class="title2">MARCAS</h1>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div> -->
  69. <div id="home" class="slider-area">
  70. <div class="bend niceties preview-2">
  71. <div id="" class="">
  72. <img src="img/banners/banner-productos.png" alt="" title="#slider-direction-1" />
  73. </div>
  74. </div>
  75. </div>
  76. <!-- END Header -->
  77. <!-- Start Products Area -->
  78. <div class="container" style="margin-top: 1%">
  79. <ol class="breadcrumb">
  80. <li><a href="index">Inicio</a></li>
  81. <li class="active">Productos</li>
  82. </ol>
  83. <div class="row" id="marcas">
  84. <div class="col-lg-3 col-sm-3">
  85. <div id="filtro" class="panel panel-default">
  86. <div id="filtroText">
  87. <h5><b>FILTRO</b></h5>
  88. </div>
  89. <article class="card-group-item">
  90. <li class="list-group-item">
  91. <input type="text" placeholder="Buscar Marca" class="form-control" v-model="search">
  92. </li>
  93. </article>
  94. <!-- card-group-item.// -->
  95. </div>
  96. <!-- card.// -->
  97. </div>
  98. <!-- /.col-lg-3 -->
  99. <div class="col-lg-9 col-sm-9 col-12">
  100. <div class="row">
  101. <!-- Loading -->
  102. <!-- <div class="col-sm-12" v-show='marcasData.length === 0'>
  103. <center>
  104. <h3>Cargando Marcas...</h3>
  105. <div class="loader loader--style1" title="0">
  106. <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  107. <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
  108. s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
  109. c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
  110. <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
  111. C22.32,8.481,24.301,9.057,26.013,10.047z">
  112. <animateTransform attributeType="xml"
  113. attributeName="transform"
  114. type="rotate"
  115. from="0 20 20"
  116. to="360 20 20"
  117. dur="0.5s"
  118. repeatCount="indefinite"/>
  119. </path>
  120. </svg>
  121. </div>
  122. </center>
  123. </div> -->
  124. <!-- termina loading -->
  125. <marcas-component v-for="item in filtro " :key="item.fecha" v-bind:item="item">
  126. </marcas-component>
  127. <label v-if="filtro.length === 0 "></label>
  128. </div>
  129. </div>
  130. <!-- /.row -->
  131. </div>
  132. <!-- /.col-lg-9 -->
  133. <!-- Botón contact -->
  134. <br><br>
  135. <div class="text-center">
  136. <a href="index#contact">
  137. <button class="button-con button-con1">¿NO ENCONTRASTE TU PRODUCTO? QUIZÁ SI LO TENEMOS ¡CONTÁCTANOS!</button><br><br>
  138. </a>
  139. </div>
  140. </div>
  141. <!-- /boton contact -->
  142. </div>
  143. <!-- /.row -->
  144. </div>
  145. <!-- End Products Area -->
  146. <div class="clearfix"></div>
  147. <!-- Start Footer bottom Area -->
  148. <div class="footer">
  149. <div class="container">
  150. <div class="row">
  151. <div class="col-md-6 text-left pad-re">
  152. <p id="fecha">
  153. </p>
  154. </div>
  155. <div class="col-md-3"></div>
  156. <div class="col-md-6 text-right pad">
  157. <p>
  158. Desarrollado y administrado por
  159. <a href="http://ittec.mx/">
  160. <img src="img/ittec.png" width="80px">
  161. </a>
  162. </p>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. <script type="text/javascript">
  168. var dt = new Date();
  169. var anio = dt.getFullYear();
  170. document.getElementById('fecha').innerHTML = '@' + anio + ' <strong>Agro Insumos Raké</strong> SPR de RL de CV. Todos los derechos reservados';
  171. </script>
  172. <!-- End Footer bottom Area -->
  173. <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
  174. <style>
  175. .title2 {
  176. padding-top: 7%;
  177. }
  178. .title2,
  179. .title3 {
  180. font-family: "Open Sans" !important;
  181. }
  182. #filtro {
  183. background: #f2f2f2;
  184. }
  185. #filtroText {
  186. text-align: center;
  187. padding: 8px 1px 5px 0px;
  188. background: #0e8a51 !important;
  189. box-shadow: 0px 5px 10px 0px #c6c6c6;
  190. }
  191. #filtroText h5 {
  192. color: white;
  193. }
  194. .card {
  195. position: relative;
  196. display: -ms-flexbox;
  197. display: flex;
  198. -ms-flex-direction: column;
  199. flex-direction: column;
  200. min-width: 0;
  201. word-wrap: break-word;
  202. background-color: rgba(255, 255, 255, 0.93);
  203. background-clip: border-box;
  204. border: 1px solid rgba(0, 0, 0, .125);
  205. border-radius: .25rem;
  206. margin-bottom: 5%;
  207. transition: box-shadow 0.3s ease-in-out
  208. }
  209. .card:hover {
  210. box-shadow: 2px 9px 14px 0px #d8cccc;
  211. }
  212. .card-img-top {
  213. width: 100%;
  214. border-top-left-radius: calc(.25rem - 1px);
  215. border-top-right-radius: calc(.25rem - 1px);
  216. }
  217. .card-footer {
  218. text-decoration: none;
  219. padding: .75rem 1.25rem;
  220. background-color: #00713b;
  221. border-top: 1px solid rgba(0, 0, 0, .125);
  222. text-align: center;
  223. color: #fff;
  224. padding: 10px;
  225. }
  226. </style>
  227. <script>
  228. Vue.component('marcas-component', {
  229. props: ['item'],
  230. template: `
  231. <div class='col-lg-4 col-md-6 col-sm-6 col-xs-6'>
  232. <div class='card h-100'>
  233. <a :href='item.url'>
  234. <img class='card-img-top' :src='item.img' style="padding:2px">
  235. <div class='card-footer text-center text-white'> Ver productos
  236. </div>
  237. </a>
  238. </div>
  239. </div>
  240. `
  241. });
  242. var marcasVue1 = new Vue({
  243. el: '#marcas',
  244. data: {
  245. marcasData: [],
  246. search: ''
  247. },
  248. mounted() {
  249. axios.get("./shared/data/marcas.json")
  250. .then(response => {
  251. this.marcasData = response.data
  252. })
  253. },
  254. computed: {
  255. filtro: function() {
  256. return this.marcasData.filter((item) => {
  257. return item.titulo.toLowerCase().match(this.search.toLowerCase());
  258. });
  259. }
  260. }
  261. });
  262. </script>
  263. <!-- JavaScript Libraries -->
  264. <script src="lib/jquery/jquery.min.js"></script>
  265. <script src="lib/bootstrap/js/bootstrap.js"></script>
  266. <script src="lib/owlcarousel/owl.carousel.min.js"></script>
  267. <script src="lib/venobox/venobox.min.js"></script>
  268. <script src="lib/knob/jquery.knob.js"></script>
  269. <script src="lib/wow/wow.min.js"></script>
  270. <script src="lib/parallax/parallax.js"></script>
  271. <script src="lib/easing/easing.min.js"></script>
  272. <script src="lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
  273. <script src="lib/appear/jquery.appear.js"></script>
  274. <script src="lib/isotope/isotope.pkgd.min.js"></script>
  275. <!-- Contact Form JavaScript File -->
  276. <script src="contactform/contactform.js"></script>
  277. <script src="js/main.js"></script>
  278. <!-- All Round Gothic -->
  279. </body>
  280. </html>