cannabinieri 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.

453 lines
24 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
  7. <link rel="stylesheet" type="text/css" href="index.css">
  8. <link rel="stylesheet" type="text/css" href="nav.css">
  9. <link rel="icon" type="img/svg+xml" href="Logo.svg">
  10. <title>
  11. Cannabinieri CBD
  12. </title>
  13. <script defer src="fontawesome.min.css"></script>
  14. <script src="assets/jquery/jquery-3.5.1.min.js"></script>
  15. </head>
  16. <body>
  17. <div class="wrapper">
  18. <nav class="top-bar">
  19. <!--Add Askama Language Handling-->
  20. <div class="languages">
  21. <a href="static/languages/deutsch.html">Deutsch |</a>
  22. <a href="static/languages/italiano.html">Italiano |</a>
  23. <a href="static/languages/francais.html">Francais </a>
  24. </div>
  25. </nav>
  26. <div id="main-bar">
  27. <div id="logo-container">
  28. <img class="logo" type="image/webp" src="Logo.svg">
  29. </div>
  30. <nav class="main-navigation-bar">
  31. <ul>
  32. <li><a href="experiments.html">EXPERIMENTS</a>
  33. <ul class="sub">
  34. <li><a href="oils.html">Oils</a></li>
  35. <li><a href="flower.html">Flower</a></li>
  36. <li class="lastItem"><a href="edibles.html">Edibles</a></li>
  37. </ul>
  38. </ul>
  39. <ul>
  40. <li><a href="permaculture.html">PERMACULTURE</a>
  41. <ul>
  42. <li><a href="permapp.html">PermApp</a></li>
  43. <li><a href="greenlab.html">GreenLab</a></li>
  44. <li class="lastItem"><a id="edit" href="whatsthat.html">What's that ?</a></li>
  45. </ul>
  46. </ul>
  47. <ul>
  48. <li><a href="greentech.html">GREENTECH</a>
  49. <ul>
  50. <li><a href="automation.html">Automation</a></li>
  51. <li><a href="iot.html">IoT</a></li>
  52. <li class="lastItem"><a href="diy.html">DiY</a></li>
  53. </ul>
  54. </ul>
  55. <ul>
  56. <li><a href="spider.html">SPIDER</a>
  57. <ul>
  58. <li><a href="spiderpi.html">SpiderPi</a></li>
  59. <li class="lastItem"><a href="join.html">Join</a></li>
  60. </ul>
  61. </ul>
  62. <ul>
  63. <li><a href="learn.html">LEARN</a>
  64. <ul id="learn">
  65. <li><a href="whoweare.html">About Us</a></li>
  66. <li><a href="partners.html">Partners</a></li>
  67. <li><a href="meet.html">Meet</a></li>
  68. <li><a href="blog.html">Blog</a></li>
  69. <li class="lastItem"><a href="code.html">Code</a></li>
  70. </ul>
  71. </ul>
  72. </nav>
  73. <nav class="hamburger-wrap">
  74. <input type="checkbox" class="ham-btn" id="ham-btn">
  75. <label for="ham-btn" class="hamburger" onclick= "menu()" onclick="hide()">
  76. <span class="hamburger-icon"></span>
  77. </label>
  78. </nav>
  79. <div id="mobile-dropdown-container">
  80. <div id="mobile-dropdown">
  81. <ul>
  82. <li onclick="menu2()"><a href="experiments.html">EXPERIMENTS</a>
  83. <span class="drop">
  84. <i class="arrow down"></i>
  85. </span>
  86. <ul id="down">
  87. <li><a href="oils.html">Oils</a></li>
  88. <li><a href="flower.html">Flower</a></li>
  89. <li><a href="edibles.html">Edibles</a></li>
  90. </ul>
  91. </ul>
  92. <ul>
  93. <li onclick="menu3()"><a href="permaculture.html">PERMACULTURE</a>
  94. <span class="drop">
  95. <i class="arrow down"></i>
  96. </span>
  97. <ul id="down1">
  98. <li><a href="permapp.html">PermApp</a></li>
  99. <li><a href="greenlab.html">GreenLab</a></li>
  100. <li><a href="whatsthat.html">What's that ?</a></li>
  101. </ul>
  102. </ul>
  103. <ul>
  104. <li onclick="menu4()"><a href="greentech.html">GREENTECH</a>
  105. <span class="drop">
  106. <i class="arrow down"></i>
  107. </span>
  108. <ul id="down2">
  109. <li><a href="automation.html">Automation</a></li>
  110. <li><a href="iot.html">IoT</a></li>
  111. <li><a href="diy.html">DiY</a></li>
  112. </ul>
  113. </ul>
  114. <ul>
  115. <li onclick="menu5()"><a href="spider.html">SPIDER</a>
  116. <span class="drop">
  117. <i class="arrow down"></i>
  118. </span>
  119. <ul id="down3">
  120. <li><a href="spiderpi.html">SpiderPi</a></li>
  121. <li><a href="join.html">Join</a></li>
  122. </ul>
  123. </ul>
  124. <ul>
  125. <li onclick="menu6()"><a href="learn.html">LEARN</a>
  126. <span class="drop">
  127. <i class="arrow down"></i>
  128. </span>
  129. <ul id="down4">
  130. <li><a href="whoweare.html">About Us</a></li>
  131. <li><a href="partners.html">Partners</a></li>
  132. <li><a href="meet.html">Meet</a></li>
  133. <li><a href="blog.html">Blog</a></li>
  134. <li><a href="code.html">Code</a></li>
  135. </ul>
  136. </ul>
  137. </nav>
  138. </div>
  139. </div>
  140. </div>
  141. <main>
  142. <section id="content">
  143. <div class="section1">
  144. <div id="title">
  145. <h3>Cannabinieri</h3> <!--to be replaced with logo-->
  146. </div>
  147. <div id="product">
  148. <a>
  149. <img src="assets/img/sample-sauvage.svg"/>
  150. </a>
  151. </div>
  152. <div id="slogan">
  153. <a href="#experiments">
  154. <h2>Grow <br>further.</h2>
  155. <i class='fas fa-caret-down'></i>
  156. </a>
  157. </div>
  158. <div id="image">
  159. <img id="leaves" src="assets/img/bliss.jpg">
  160. </div>
  161. <div id="about">
  162. <a href="#experiments">Explore
  163. <i class='fas fa-chevron-down'></i>
  164. </a>
  165. </div>
  166. </div>
  167. <div class="pages-container">
  168. <div class="strip">
  169. <div class="section2" id="experiments">
  170. <div class="image-slider">
  171. <div class="slider-items">
  172. <div class="item active">
  173. <img src="assets/img/sample-sauvage.svg" />
  174. </div>
  175. <div class="item">
  176. <img id = "sample" src="assets/img/sample-flower.svg"/>
  177. </div>
  178. <div class="left-slide">
  179. <i class='fas fa-angle-left' id="dark"></i>
  180. </div>
  181. <div class="right-slide">
  182. <i class='fas fa-angle-right' id="dark"></i>
  183. </div>
  184. </div>
  185. </div>
  186. <h1>Experiments</h1>
  187. <p> # experiments=products=oils etc!Our Experiments explore how plants react to changes.<br>
  188. Environmental conditions and the relations between plants define a plants health, growth taste and effect. <br>
  189. <span id="desktop"> With our Experiments strive to understand our planet in order to create an organic, automated indoor garden for everyone, everywhere.</span>
  190. </p>
  191. <div class="page-button">
  192. <a href="experiments.html">More</a>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="strip2" id="black">
  197. <div class="section3" id="spider">
  198. <div class="spider-slider">
  199. <div class="spider-items">
  200. <div class="item active">
  201. <img id="pic1" src="assets/img/sample-spiderpi.svg" />
  202. </div>
  203. <div class="item">
  204. <img src="assets/img/sample-spiderpi-2.svg" alt="">
  205. </div>
  206. <div id="spider-left">
  207. <i class='fas fa-angle-left'></i>
  208. </div>
  209. <div id="spider-right">
  210. <i class='fas fa-angle-right'></i>
  211. </div>
  212. </div>
  213. </div>
  214. <h1>Spider</h1>
  215. <p><span id ="desktop">Learn about our project Spider Pi<br>
  216. Get to know our garden hexapod. <br>
  217. He is aimed to be a garden helper, that collects data while doing your gardening.<br></span>
  218. Spider Pi enables everyone to grow their own crops everywhere.<br>
  219. He is the solution for everyone who doesn't have the time for gardening but wants to grow their own local organic food and learn about plants in the meantime.<br>
  220. #a dummy text
  221. </p>
  222. <div class="page-button">
  223. <a href="spider.html">Learn</a>
  224. </div>
  225. </div>
  226. </div>
  227. <div class="strip">
  228. <div class="section4" id="permaculture">
  229. <div class="image-slider">
  230. <div class="slider-items">
  231. <div class="item active">
  232. <img src="assets/img/sample-perma.svg"/>
  233. </div>
  234. <div class="item">
  235. </div>
  236. <div class="left-slide">
  237. <i class='fas fa-angle-left'></i>
  238. </div>
  239. <div class="right-slide">
  240. <i class='fas fa-angle-right'></i>
  241. </div>
  242. </div>
  243. </div>
  244. <h1>PermaCulture</h1>
  245. <p>We utilitze and explore the principles of Permaculture.<br>
  246. </p>
  247. <div class="page-button">
  248. <a href="permaculture.html">Learn</a>
  249. </div>
  250. </div>
  251. </div>
  252. <div class="strip" id="black">
  253. <div class="section5" id="greentech">
  254. <div class="image-slider">
  255. <div class="slider-items">
  256. <div class="item active">
  257. <img src="assets/img/sample-greentech.svg"/>
  258. </div>
  259. <div class="item">
  260. </div>
  261. <div class="left-slide">
  262. <i class='fas fa-angle-left'></i>
  263. </div>
  264. <div class="right-slide">
  265. <i class='fas fa-angle-right'></i>
  266. </div>
  267. </div>
  268. </div>
  269. <h1>GreenTech</h1>
  270. <p><span id="desktop">
  271. We want you to be able to grow your own crops at home wherever that is and no matter how much time you have.<br>
  272. There are many projects that combine farming and tech in order to create a system that bears changing environmental conditons and a growing population.<br></span>
  273. <br>
  274. Long distance transportation and the exploitation of ressources can be avoided if everyone grew their own crops or even better, let them be grown by affordable and accessible IoT solutions.<br><br>
  275. Explore our projects and get inspired.<br>
  276. </p>
  277. <div class="page-button">
  278. <a href="greentech.html">Explore</a>
  279. </div>
  280. </div>
  281. </div>
  282. <div class="strip" id="black">
  283. <div class="section6" id="about">
  284. <div class="image-slider">
  285. <div class="slider-items">
  286. <div class="item active">
  287. <img src="assets/img/sample-us5.jpg" />
  288. </div>
  289. </div>
  290. </div>
  291. <h1>About Us</h1>
  292. <p> We are currently a collective of five people, determined to connect farming and science.<br>
  293. <span id="desktop">We aim to gather information about our ecosystem and utilize it to create 100% organic CBD products that all ship with a little bit more information for us and our customers. <br> </span>
  294. We strive to understand our ecosystem and to utilize our knowledge in order to create a database of products and affordable solutions for an automated organic garden for everyone, everywhere.<br>
  295. #dummy text
  296. </p>
  297. <div class="page-button">
  298. <a href="learn.html">Learn</a>
  299. </div>
  300. </div>
  301. </div>
  302. <div class="strip">
  303. <div class="section7" id="news">
  304. <h1>News</h1>
  305. <div class="news">
  306. <div class="social">
  307. <h5>Keep in touch !</h5>
  308. <img id="post_1" src="assets/img/sample-post-insta.jpg"/>
  309. <img class="desktop" id="post_2" src="assets/img/sample-post-insta.jpg"/>
  310. <img class="desktop" id="post_3" src="assets/img/sample-post-insta.jpg"/>
  311. <div class="instagram">
  312. <a href="#">
  313. <button id="insta"><img id="gram" src="assets/img/pixelfed.svg"></button>
  314. <h5 id="account">@Cannabinieri_Official</h5>
  315. </a>
  316. </div>
  317. <div class="youtube">
  318. <a href="#">
  319. <button id="you"><img id="tube" src="assets/img/peertube.svg"></button>
  320. <h5 id="account">@Cannabinieri_Official</h5>
  321. </a>
  322. </div>
  323. </div>
  324. </div>
  325. <!--add 3 blog posts with image here-->
  326. </div>
  327. </div>
  328. </div>
  329. </section>
  330. </main>
  331. <footer class="footer">
  332. <div id="footer-wrapper">
  333. <div id="column1">
  334. <a href="responsive.html">
  335. <img id="footer-logo" src="assets/img/Logo.svg">
  336. </a>
  337. </div>
  338. <div id="column2">
  339. <h6 onclick="show()">Information
  340. <span class="show">
  341. <i class="arrow down"></i>
  342. </span>
  343. </h6>
  344. <ul id="information">
  345. <li>
  346. <p>
  347. <a href="meet.html">Contact Us</a>
  348. </p>
  349. </li>
  350. <li>
  351. <p>
  352. <a href="privacy.html">Privacy Policy</a>
  353. </p>
  354. </li>
  355. <li>
  356. <p>
  357. <a href="#">FAQ</a>
  358. </p>
  359. </li>
  360. <li>
  361. <p>
  362. <a href="#">Certificate of Analysis</a>
  363. </p>
  364. </li>
  365. </ul>
  366. </div>
  367. <div id="column3">
  368. <h6 onclick="display()">links
  369. <span class="show">
  370. <i class="arrow down2"></i>
  371. </span>
  372. </h6>
  373. <ul id="footer-links">
  374. <li>
  375. <p>
  376. <a href="#">Blog</a>
  377. </p>
  378. </li>
  379. <li>
  380. <p>
  381. <a href="#">Shop</a>
  382. </p>
  383. </li>
  384. <li>
  385. <p>
  386. <a class="code" href="#">Code</a>
  387. </p>
  388. </li>
  389. </ul>
  390. </div>
  391. <div id="column4">
  392. <h6>TO BE SAID</h6>
  393. <p> All our products contain<br>less than 0.2% THC</p>
  394. </div>
  395. <div id="column5">
  396. <h6 class="follow">Follow us</h6>
  397. <div id="social-media">
  398. <ul>
  399. <li class="youtube">
  400. <a href="#">
  401. <img id="youtube" src="assets/img/peertube_white.svg">
  402. </a>
  403. </li>
  404. <li>
  405. <a href="#">
  406. <img id="instagram" src="assets/img/pixelfed_white.svg">
  407. </a>
  408. </li>
  409. <li>
  410. <a href="#">
  411. <img id="gitea" src="assets/img/gitea.svg">
  412. </a>
  413. </li>
  414. </ul>
  415. </div>
  416. </div>
  417. <div id="row2">
  418. <p id ="print">©2020 Cannabinieri</p>
  419. </div>
  420. <div id="row3">
  421. <div class="languages">
  422. <a href="static/languages/deutsch.html">Deutsch |</a>
  423. <a href="../languages/italiano.html">Italiano |</a>
  424. <a href="../languages/francais.html">Francais </a>
  425. </div>
  426. </div>
  427. </div>
  428. </footer>
  429. </div>
  430. <script src="test/main.js" type="text/javascript"></script>
  431. <script src="assets/js/pages.js"></script>
  432. <script src="assets/js/slider.js"></script>
  433. </body>
  434. </html>