|
|
- {%extends "base"%}
-
- {%block head%}
- {{super()}}
- <link rel="stylesheet" type="text/css" href="css/index.css">
- <link rel="stylesheet" type="text/css" href="css/nav.css">
- <script type="text/javascript" defer src="fontawesome/all.js"></script>
- <script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
- {%block title%} {{title}} {%endblock title%}
- {%endblock head%}
- {%block content%}
- {{super()}}
- <div class="wrapper">
- <nav class="top-bar">
- <div class="languages">
- <a href="static/languages/deutsch.html">Deutsch</a>
- <a href="static/languages/italiano.html">Italiano |</a>
- <a href="static/languages/francais.html">Francais </a>
- </div>
- </nav>
- <div id="main-bar">
- <div id="logo-container">
- <img class="logo" type="image/webp" src="img/Logo.svg">
- </div>
- <nav class="main-navigation-bar">
- <ul>
- <!--GET method-->
- <li><a type="text/html" href="/experiments">EXPERIMENTS</a>
- <ul class="sub">
- <li><a type="text/html" href="/experiments/oil">Oils</a></li>
- <li><a type="text/html" href="/experiments/flower">Flower</a></li>
- <li class="lastItem"><a type="text/html" href="experiments/candy">Edibles</a></li>
- </ul>
- </ul>
-
- <ul>
- <li><a type="text/html" href="/permaculture">PERMACULTURE</a>
- <ul>
- <li><a type="text/html" href="permaculture/permApp">PermApp</a></li>
- <li><a type="text/html" href="permaculture/greenlab">GreenLab</a></li>
- <li class="lastItem"><a type="text/html" id="edit" href="permaculture/about">What's that ?</a></li>
- </ul>
- </ul>
-
- <ul>
- <li><a type="text/html" href="/greentech">GREENTECH</a>
- <ul>
- <li><a type="text/html" href="/greentech/automation">Automation</a></li>
- <li><a type="text/html" href="/greentech/IoT">IoT</a></li>
- <li class="lastItem"><a type="text/html" href="/greentech/DiY">DiY</a></li>
- </ul>
- </ul>
-
- <ul>
- <li><a type="text/html" href="/spider">SPIDER</a>
- <ul>
- <li><a type="text/html" href="/spider/spiderPi">SpiderPi</a></li>
- <li class="lastItem"><a type="text/html" href="/spider/join">Join</a></li>
- </ul>
- </ul>
-
- <ul>
- <li><a type="text/html" href="/learn">LEARN</a>
- <ul id="learn">
- <li><a type="text/html" href="/learn/about">About Us</a></li>
- <li><a type="text/html" href="/learn/partners">Partners</a></li>
- <li><a type="text/html" href="/learn/meet">Meet</a></li>
- <li><a type="text/html" href="/learn/blog">Blog</a></li>
- <li class="lastItem"><a type="text/html" href="/learn/code">Code</a></li>
-
- </ul>
- </ul>
- </nav>
- <nav class="hamburger-wrap">
- <input type="checkbox" class="ham-btn" id="ham-btn">
- <label for="ham-btn" class="hamburger" onclick= "menu()" onclick="hide()">
- <span class="hamburger-icon"></span>
- </label>
- </nav>
- <div id="mobile-dropdown-container">
- <div id="mobile-dropdown">
- <ul>
- <li onclick="menu2()"><a href="/experiments">EXPERIMENTS</a>
- <span class="drop">
- <i class="arrow down"></i>
- </span>
- <ul id="down">
- <li><a type="text/html" href="experiments/oil">Oils</a></li>
- <li><a type="text/html" href="experiments/flower">Flower</a></li>
- <li><a type="text/html" href="experiments/candy">Edibles</a></li>
- </ul>
- </ul>
-
- <ul>
- <li onclick="menu3()"><a type="text/html" href="/permaculture">PERMACULTURE</a>
- <span class="drop">
- <i class="arrow down"></i>
- </span>
- <ul id="down1">
- <li><a type="text/html" href="permaculture/permApp">PermApp</a></li>
- <li><a type="text/html" href="permaculture/greenlab">GreenLab</a></li>
- <li><a type="text/html" href="permaculture/about">What's that ?</a></li>
- </ul>
- </ul>
-
- <ul>
- <li onclick="menu4()"><a type="text/html" href="/greentech">GREENTECH</a>
- <span class="drop">
- <i class="arrow down"></i>
- </span>
- <ul id="down2">
- <li><a type="text/html" href="/greentech/automation">Automation</a></li>
- <li><a type="text/html" href="/greentech/IoT">IoT</a></li>
- <li><a type="text/html" href="/greentech/DiY">DiY</a></li>
- </ul>
- </ul>
-
- <ul>
- <li onclick="menu5()"><a type="text/html" href="/spider">SPIDER</a>
- <span class="drop">
- <i class="arrow down"></i>
- </span>
- <ul id="down3">
- <li><a type="text/html" href="/spider/spiderPi">SpiderPi</a></li>
- <li><a type="text/html" href="/spider/join">Join</a></li>
- </ul>
- </ul>
-
- <ul>
- <li onclick="menu6()"><a type="text/html" href="/learn">LEARN</a>
- <span class="drop">
- <i class="arrow down"></i>
- </span>
- <ul id="down4">
- <li><a type="text/html" href="/learn/about">About Us</a></li>
- <li><a type="text/html" href="/learn/partners">Partners</a></li>
- <li><a type="text/html" href="/learn/contact">Meet</a></li>
- <li><a type="text/html" href="/learn/blog">Blog</a></li>
- <li><a type="text/html" href="/learn/code">Code</a></li>
-
- </ul>
- </ul>
- </nav>
- </div>
- </div>
- </div>
- <main>
- <section id="content">
- <div class="section1">
- <div id="title">
- <h3>Cannabinieri</h3> <!--to be replaced with logo-->
- </div>
- <div id="product">
- <a>
- <img type="image/webp" src="img/sample-sauvage.svg"/>
- </a>
- </div>
- <div id="slogan">
- <a href="#experiments">
- <h2>Grow <br>further.</h2>
- <i class='fas fa-caret-down'></i>
- </a>
- </div>
- <div id="image">
- <img id="leaves" type="image/webp" src="img/bliss.JPG">
- </div>
- <div id="about">
- <a href="#experiments">Explore
- <i class='fas fa-chevron-down'></i>
- </a>
- </div>
- </div>
- <div class="pages-container">
- <div class="strip">
- <div class="section2" id="experiments">
- <div class="image-slider">
- <div class="slider-items">
- <div class="item active">
- <img type="image/webp" src="img/sample-sauvage.svg" />
- </div>
- <div class="item">
- <img id ="sample" type="image/webp" src="img/sample-flower.svg"/>
- </div>
- <div class="left-slide">
- <i class='fas fa-angle-left' id="dark"></i>
- </div>
- <div class="right-slide">
- <i class='fas fa-angle-right' id="dark"></i>
- </div>
- </div>
- </div>
- <h1>Experiments</h1>
- <p> # experiments=products=oils etc!Our Experiments explore how plants react to changes.<br>
- Environmental conditions and the relations between plants define a plants health, growth taste and effect. <br>
- <span id="desktop"> With our Experiments strive to understand our planet in order to create an organic, automated indoor garden for everyone, everywhere.</span>
- </p>
- <div class="page-button">
- <a href="/experiments">More</a>
- </div>
- </div>
- </div>
- <div class="strip2" id="black">
- <div class="section3" id="spider">
- <div class="spider-slider">
- <div class="spider-items">
- <div class="item active">
- <img id="pic1" type="image/webp" src="img/sample-spiderpi.svg" />
- </div>
- <div class="item">
- <img type="image/webp" src="img/sample-spiderpi-2.svg" alt="">
- </div>
- <div id="spider-left">
- <i class='fas fa-angle-left'></i>
- </div>
- <div id="spider-right">
- <i class='fas fa-angle-right'></i>
- </div>
- </div>
- </div>
- <h1>Spider</h1>
- <p><span id ="desktop">Learn about our project Spider Pi<br>
- Get to know our garden hexapod. <br>
- He is aimed to be a garden helper, that collects data while doing your gardening.<br></span>
- Spider Pi enables everyone to grow their own crops everywhere.<br>
- 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>
- #a dummy text
- </p>
- <div class="page-button">
- <a href="/spider">Learn</a>
- </div>
- </div>
- </div>
- <div class="strip">
- <div class="section4" id="permaculture">
- <div class="image-slider">
- <div class="slider-items">
- <div class="item active">
- <img type="image/webp" src="img/sample-perma.svg"/>
- </div>
- <div class="item">
- </div>
- <div class="left-slide">
- <i class='fas fa-angle-left'></i>
- </div>
- <div class="right-slide">
- <i class='fas fa-angle-right'></i>
- </div>
- </div>
- </div>
- <h1>PermaCulture</h1>
- <p>We utilitze and explore the principles of Permaculture.<br>
-
-
- </p>
- <div class="page-button">
- <a href="/permaculture">Learn</a>
- </div>
- </div>
- </div>
- <div class="strip" id="black">
- <div class="section5" id="greentech">
- <div class="image-slider">
- <div class="slider-items">
- <div class="item active">
- <img type="image/webp" src="img/sample-greentech.svg"/>
- </div>
- <div class="item">
- </div>
- <div class="left-slide">
- <i class='fas fa-angle-left'></i>
- </div>
- <div class="right-slide">
- <i class='fas fa-angle-right'></i>
- </div>
- </div>
- </div>
- <h1>GreenTech</h1>
- <p><span id="desktop">
- 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>
- 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>
- <br>
- 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>
- Explore our projects and get inspired.<br>
- </p>
- <div class="page-button">
- <a href="/greentech">Explore</a>
- </div>
- </div>
- </div>
- <div class="strip" id="black">
- <div class="section6" id="about">
- <div class="image-slider">
- <div class="slider-items">
- <div class="item active">
- <img type="image/webp" src="img/sample-faces.jpg" />
- </div>
- </div>
- </div>
- <h1>About Us</h1>
- <p> We are currently a collective of five people, determined to connect farming and science.<br>
- <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>
- 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>
- #dummy text
- </p>
- <div class="page-button">
- <a href="/learn">Learn</a>
- </div>
- </div>
- </div>
- <div class="strip">
- <div class="section7" id="news">
- <h1>News</h1>
- <div class="news">
- <div class="social">
- <h5>Keep in touch !</h5>
- <img id="post_1" type="image/webp" src="img/sample-post.jpg"/>
- <img class="desktop" id="post_2" type="image/webp" src="img/sample-post.jpg"/>
- <img class="desktop" id="post_3" type="image/webp" src="img/sample-post.jpg"/>
- <div class="instagram">
- <a href="#">
- <button id="insta"><img id="gram" type="image/webp" src="img/pixelfed.svg"></button>
- <h5 id="account">@Cannabinieri_Official</h5>
- </a>
- </div>
- <div class="youtube">
- <a href="#">
- <button id="you"><img id="tube" type="image/webp" src="img/peertube.svg"></button>
- <h5 id="account">@Cannabinieri_Official</h5>
- </a>
- </div>
- </div>
- </div>
- <!--add 3 blog posts with image here-->
- </div>
- </div>
- </div>
- </section>
- </main>
- <footer class="footer">
- <div id="footer-wrapper">
- <div id="column1">
- <img id="footer-logo" type="image/webp" src="img/Logo.svg">
- </a>
- </div>
- <div id="column2">
- <h6 onclick="show()">Information
- <span class="show">
- <i class="arrow down"></i>
- </span>
- </h6>
- <ul id="information">
- <li>
- <p>
- <a type="text/html" href="/learn/contact">Contact Us</a>
- </p>
- </li>
- <li>
- <p>
- <a type="text/html" href="/privacy">Privacy Policy</a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">FAQ</a>
- </p>
-
- </li>
- <li>
- <p>
- <a href="#">Certificate of Analysis</a>
- </p>
-
- </li>
-
- </ul>
- </div>
-
- <div id="column3">
- <h6 onclick="display()">links
- <span class="show">
- <i class="arrow down2"></i>
- </span>
- </h6>
- <ul id="footer-links">
- <li>
- <p>
- <a href="#">Blog</a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">Shop</a>
- </p>
-
- </li>
- <li>
- <p>
- <a class="code" href="#">Code</a>
- </p>
-
- </li>
-
- </ul>
- </div>
- <div id="column4">
- <h6>TO BE SAID</h6>
- <p> All our products contain<br>less than 0.2% THC</p>
- </div>
- <div id="column5">
- <h6 class="follow">Follow us</h6>
- <div id="social-media">
- <ul>
- <li class="youtube">
- <a href="#">
- <img id="youtube" type="image/webp" src="img/peertube_white.svg">
- </a>
- </li>
- <li>
- <a href="#">
- <img id="instagram" type="image/webp" src="img/pixelfed_white.svg">
- </a>
- </li>
- <li>
- <a href="#">
- <img id="gitea" type="image/webp" src="img/gitea.svg">
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div id="row2">
- <p id ="print">©2020 Cannabinieri</p>
- </div>
- <!--Replace with Dynamic Language Handling-->
- <div id="row3">
- <div class="languages">
- <a href="static/languages/deutsch.html">Deutsch |</a>
- <a href="../languages/italiano.html">Italiano |</a>
- <a href="../languages/francais.html">Francais </a>
- </div>
- </div>
- </div>
- </footer>
- </div>
- <script src="js/main.js" type="application/javascript"></script>
- <script src="js/pages.js" type="application/javascript"></script>
- <script src="js/slider.js" type="application/javascript"></script>
- {% endblock content %}
|
