v3

3 years ago · 2e66c3f236
--- a/src/build_rocket/get.rs
+++ b/src/build_rocket/get.rs
@ -16,35 +16,37 @@ use rocket_dyn_templates::Template;
    // if success call handler
    pub fn index() -> Template {
        let context = templates::TplIndex::new();
        Template::render("index", &context)
        Template::render("home", &context)
 }
    
    // serve other pages (html GET)
    // create routes for pages
    #[get("/experiments")]
    pub async fn experiments() -> Result<NamedFile, NotFound<String>> {
    // create routes for main pages
    #[get("/hemp")]
    pub async fn hemp() -> Result<NamedFile, NotFound<String>> {
        NamedFile::open("templates/experiments.html").await.map_err(|e|NotFound(e.to_string()))
    }
    
    #[get("/permaculture")]
    pub async fn perma() -> Option<NamedFile> {
        NamedFile::open("templates/permaculture.html").await.ok()

    #[get("/spider")]
    pub async fn spider() -> Option<NamedFile> {
        NamedFile::open("templates/spider.html").await.ok()
    }
    
    #[get("/greentech")]
    pub async fn greentech() -> Option<NamedFile> {
        NamedFile::open("templates/greentech.html").await.ok()
    #[get("/permapp")]
    pub async fn permapp() -> Option<NamedFile> {
        NamedFile::open("templates/permapp.html").await.ok()
    }
    
    #[get("/spider")]
    pub async fn spider() -> Option<NamedFile> {
        NamedFile::open("templates/spider.html").await.ok()
    #[get("/cyberpreneur")]
    pub async fn cyber() -> Option<NamedFile> {
        NamedFile::open("templates/greentech.html").await.ok()
    }
    
    #[get("/learn")]
    pub async fn learn() -> Option<NamedFile> {
    #[get("/offgrid")]
    pub async fn offgrid() -> Option<NamedFile> {
        NamedFile::open("templates/learn.html").await.ok()
    }

    // subpages
    
    #[get("/oil")]
    pub async fn oil() -> Option<NamedFile> {
@ -55,60 +57,26 @@ use rocket_dyn_templates::Template;
    pub async fn flower() -> Option<NamedFile> {
        NamedFile::open("templates/flower.html").await.ok()
    }
    
    #[get("/candy")]
    pub async fn candy() -> Option<NamedFile> {
        NamedFile::open("templates/edibles.html").await.ok()
    }
    
    #[get("/permApp")]
    pub async fn permapp() -> Option<NamedFile> {
        NamedFile::open("templates/permapp.html").await.ok()
    }
    
    #[get("/greenlab")]
    pub async fn greenlab() -> Option<NamedFile> {
        NamedFile::open("templates/greenlab.html").await.ok()
    }
    
    #[get("/about")]
    pub async fn about_perma() -> Option<NamedFile> {
        NamedFile::open("templates/whatsthat.html").await.ok()
    }
    
    #[get("/automation")]
    pub async fn automation() -> Option<NamedFile> {
        NamedFile::open("templates/automation.html").await.ok()
    }
    
    #[get("/DiY")]
    pub async fn diy() -> Option<NamedFile> {
        NamedFile::open("templates/diy.html").await.ok()
    }
    
    #[get("/IoT")]
    pub async fn iot() -> Option<NamedFile> {
        NamedFile::open("templates/iot.html").await.ok()
    }
    
    #[get("/spiderPi")]

    #[get("/spiderpi")]
    pub async fn spiderpi() -> Option<NamedFile> {
        NamedFile::open("templates/spiderpi.html").await.ok()
    }
    
    #[get("/join")]

    #[get("/kaoscube")]
    pub async fn join() -> Option<NamedFile> {
        NamedFile::open("templates/join.html").await.ok()
    }
    
    #[get("/wohnmaschine")]
    pub async fn wm() -> Option<NamedFile> {
        NamedFile::open("templates/greenlab.html").await.ok()
    }

    // footer pages
    #[get("/about")]
    pub async fn about() -> Option<NamedFile> {
        NamedFile::open("templates/whoweare.html").await.ok()
    }
    
    #[get("/partners")]
    pub async fn partners() -> Option<NamedFile> {
        NamedFile::open("templates/partners.html").await.ok()
        NamedFile::open("templates/about.html").await.ok()
    }
    
    #[get("/contact")]
@ -116,20 +84,7 @@ use rocket_dyn_templates::Template;
        NamedFile::open("templates/meet.html").await.ok()
    }
    
    #[get("/blog")]
    pub async fn blog() -> Option<NamedFile> {
        NamedFile::open("templates/blog.html").await.ok()
    }
    
    #[get("/code")]
    pub async fn code() -> Option<NamedFile> {
        NamedFile::open("templates/code.html").await.ok()
    }
    
    #[get("/")]
    pub async fn policies_info() -> Option<NamedFile> {
        NamedFile::open("templates/policies.html").await.ok()
    }
    // code link to gitea
    
    #[get("/privacy")]
    pub fn privacy() -> Template {
--- a/src/main.rs
+++ b/src/main.rs
@ -27,20 +27,14 @@ async fn main() -> Result<(), rocket::Error> {
        .mount("/",
            routes![ 
                get::index, get_static_files::fileserver, 
                get::experiments, get::perma, get::greentech, get::spider, get::learn ])
        .mount("/experiments",
            routes! [ get::oil, get::flower, get::candy ])
        .mount("/permaculture",
            routes! [ get::permapp, get::greenlab, get::about_perma ])
        .mount("/greentech",
        routes! [ get::automation, get::iot, get::diy ])
                get::hemp, get::spider, get::permapp, get::cyber, get::offgrid, get::about, get::meet, get::privacy ])
        .mount("/hemp",
            routes! [ get::oil, get::flower])
        .mount("/spider",
        routes! [ get::spiderpi, get::join ])
        .mount("/learn", 
            routes! [ get::about, get::partners, get::meet, get::blog, get::code ])
            routes! [ get::spiderpi, get::join ])

        .mount("/policies", 
        routes! [ get::policies_info, get::privacy ])
        .mount("/offgrid",
        routes! [ get::wm, ])

        // Add Tera Templating support
      .attach(Template::fairing())
--- a/templates/assets/components/footer.html
+++ b/templates/assets/components/footer.html
@ -6,7 +6,7 @@
                </a>
        </div>
        <div id="column2">
            <h6 onclick="show()">Information
            <h6 onclick="show()"> About Cannabinieri
                    <span class="show">
                            <i class="arrow down"></i>
                    </span>
--- a/templates/assets/components/main-nav.html
+++ b/templates/assets/components/main-nav.html
@ -7,6 +7,7 @@
                </picture>
        </a>
    </div>
    <!--desktop nav-->
    <nav class="main-navigation-bar">
            <ul>
            <li><a type="text/html" href="/experiments"> EXPERIMENTS </a>
@ -15,7 +16,7 @@
                        <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>

    <ul>
            <li><a type="text/html" href="/permaculture">PERMACULTURE</a>
@ -54,7 +55,9 @@

                    </ul>
    </ul>

    </nav>
    <!--mobile nav-->
    <nav class="hamburger-wrap">
            <input type="checkbox" class="ham-btn" id="ham-btn">
            <label for="ham-btn" class="hamburger" id="hamburger" onclick= "menu()" onclick="hide()">
@ -124,7 +127,6 @@
    
                                    </ul>
                    </ul>
                    </nav>
                    <a class="button" href="#">Shop</a>
            </div>
    </div>     
--- a/templates/assets/css/base.css
+++ b/templates/assets/css/base.css
@ -0,0 +1,19 @@
 * {
    margin: 0;
    padding: 0;
    height: 100%;
    /*overflow: hidden;*/
    
 }

 body .navigation {
    height: 5rem;
 }

 body .content {
    min-height: 80vh;
 }

 body .footer {
    max-height: 40vh;
 }
--- a/templates/assets/css/footer.css
+++ b/templates/assets/css/footer.css
@ -5,509 +5,44 @@
    font-weight: 100;
 }

 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
 } 

 :root{
    --top_padding:5px;
 footer .footer_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
    font-family: 'Lato', sans-serif;
    padding: 1rem 0;
 }

 html,
 body {
    width: 100%;
    height: 100%;
 .footer_container .column {
    font-family: 'Lato', sans-serif;
    font-weight:500;
    overflow-x: hidden;
    letter-spacing: .15rem;
 }

@media screen and (min-width: 1024px){

 footer {
    grid-area:footer;
 .footer_container h6 {
        font-weight: 400;
        font-size: .95rem;
        letter-spacing: .075em;
        padding: 2vh 0;
        text-transform: uppercase;
        color:#fff;
 }

 #footer-wrapper  {
    color: white !important;
    border-top: solid 3px white;
    border-bottom: solid 1px white;
    background-color: black;
    height:100%;
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    padding-bottom:1%;
    padding-top: 10vh; 
 .footer_container h6 a {
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    transition: .6s ease;
 }

    #column1 {
        background-color: black;
        display: none;
        font-family: 'Lato', sans-serif;
    }

    #column1 a h3 {
        display: flex;
        align-items: center;
    }
    
    #column2 {
        display: flex;
        flex-direction: column;
        text-align: center;
        grid-column: 1;   
    }

    #column2 ul {
        list-style: none;
        text-align: center;
    }
    
    #column2 ul li p a {
        text-decoration:none;
        color:white;
    }
    
    #column2 ul li {
        margin: 5vh 0;
    }
    
    h6 {
        font-family: 'Lato', sans-serif;
        font-weight: 350;
        font-size: 135%;
        text-transform: uppercase;
    }

    #column3 {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    
    #column2 ul li a:hover {
        color: rgb(0, 255, 170);
    }
    
    #column3 ul {
        list-style: none;
        text-align: center;
    }

    #column3 ul li p a {
        text-decoration:none;
        color:white;
    }
    
    #column3 ul li {
        margin: 5vh 0;
    }
    
    #column3 ul li a:hover {
        color: rgb(0, 255, 170);
    }

    #column4 {
        display:flex;
        flex-direction: column;
        text-align: center;
    }
    #column4 p {
        font-size: 2vh;
        line-height: 4vh;
        margin-top: 5vh;
    }

    #column5 {
       display: flex;
       flex-direction: column;
        text-align: center;
    }

    #column5 #social-media {
        margin-top: 5vh;
    }
    
    #social-media ul {
        margin-top:1%;
    }

    #social-media ul li {
        display:inline;
        list-style-type: none;
        padding-left: 9%;
    }

    #social-media ul li .youtube {
        padding-left: 0;
    }
    
    #youtube {
        height: auto;
        width: 7%;
    }
    
    #instagram {
        height:auto;
        width: 7%;
    }

    #gitea {
        height:auto;
        width: 10%;
    }
    
    #row2 {
        border-top: .1em solid white;
        color: white;
        grid-column: 1/2;
        display:flex;
        align-self: center;
        justify-self: center;
        padding-top: 1vh;
    }
    
    #row2 p {
        text-align: center;
        padding-top:2%;
        cursor: pointer;
    }

    #row3 {
        grid-column: 3/5;
        display:flex;
        align-self: center;
        justify-self: center;
    }

    #row3 .languages a {
        color: #fff;
        padding: 0 1vh !important;
        transition: all .3s;
    }

    #row3 .languages a:hover {
        color:hsl(160, 50%, 70%);
    }

    .arrow .down {
        display:none;
    }

    #dropdown {
        display:none;
    }

    .ham-btn {
        display:none;
    }

    .hamburger {
        display: none;
    }

    .hamburger-icon{
        display: none;
    }

    #mobile-dropdown-container {
        display: none;
    }

    #footer-languages {
        display:none;
    }

 .footer_container p {
    color: #fff;
    font-size: .85rem;
    letter-spacing: .075em;
 }


@media only screen and (max-width: 1023px) {

 footer {
    grid-area:footer;
    }

    #footer-wrapper {
        grid-template-columns: 50% 50%;
        grid-template-rows: .6fr 0.1fr 0.1fr 0.1fr 0.1fr;
        display: grid;
        background-color:black;
    }

        #column1 {
            grid-row: 1;
            grid-column: 1;
            display: flex;
            justify-content: center;
            min-height: 25vh;
        }
        
        #column1 a {
            color: white;
            text-decoration: none;
            text-transform: uppercase;
            margin-left: 0;
            font-size:100%;
            padding-top:5%;
            padding-bottom:5%;
            display:flex;
            padding-left: 2.5vh;
        }
        
        #column1 a:active {
            color: rgb(0, 255, 170);
        }

    #column1 a h3 {
        display:flex;
        align-items: center;
        letter-spacing: .1em;
        font-weight: 100;
        padding-left: .5em;
    }

    #column1 a h3 span {
        color:  hsl(160, 51%, 80%);
        letter-spacing: .095em;
        margin-right: .5vh;
    }

        #column2{
            grid-column:1/3;
            grid-row: 2;
            margin-top:0;
            border-top:1px solid white;
            padding-top:5%;
            padding-left: 5%;
            padding-right: 5%;
            padding-bottom: 5%;
            border-bottom:1px solid white;
            font-family: 'Lato', sans-serif;
        }

        #column2 ul {
            display:none;
            position: relative;
            width:100%; 
            overflow:auto;
            z-index: 1;
            list-style : none;
            justify-content: space-between;
            padding: 1vh 5% 0 5%;
            text-align: center;
            border-top: 1px solid rgb(62, 190, 147);
            flex-direction: column;
        }

        #column2 ul li p a {
            font-weight: 300;
            text-decoration: none;
            color:white;
            letter-spacing: .075em
        }

        #column2 ul li p a:active{
            color:  rgb(0, 255, 170);
        }
        
        #column2 ul li {
            margin-bottom: 5%;
            margin-top:5%;
        }
        
        h6 {
            font-size: 100%;
            font-weight: 400;
            letter-spacing: .075em;
            padding: 2vh 0;
            text-transform: uppercase;
            color:white;
            cursor: pointer;
            transition: .6s ease;
        }

        h6:active {
            color:  rgb(0, 255, 170);
        }

        .arrow {
            border: solid white;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            cursor: pointer;
            transition: .1s;
          }
        
        .down {
            transform: rotate(45deg);
            position: relative;
            margin-left:55%;
        
        }
        
        .down2 {
            transform: rotate(45deg);
            position: relative;
            margin-left:73%;
        
        }
        

        #column3 {
            grid-column: 1/3;
            grid-row: 3;
            margin-top:0;
            border-top:1px solid white;
            padding-top:5%;
            padding-bottom:4%;
            padding-left: 5%;
            padding-right: 1%;
            border-bottom:1px solid white;
        }

    #column3 ul {
        display:none;
        position: relative;
        width:100%; 
        overflow:auto;
        z-index: 1;
        list-style : none;
        justify-content: space-between;
        border-top: 1px solid rgb(62, 190, 147);
        padding-right: 5%;
        padding-left: 5%;
        text-align: center;
    }

    #column3 h6 {
        padding: 2vh 0;
        transition: .6s ease;
    }

    #column3 ul li {
    margin: 5vh 0 3vh 0;
    }

    #column3 ul li p a {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        text-decoration:none;
        color: #fff;
    }

    #column3 ul li p a:active {
        color:  hsl(160, 100%, 50%);

    }

    #column4 {
        grid-column: 1/3;
        grid-row:4;
        border-bottom: solid white 1px;
        font-family: 'Lato', sans-serif;
    }

    #column4 p {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 1.5vh 0;
        color:white;
        font-size: 1.75vh;
        font-weight: 400;
        text-transform: uppercase;
    }
        
        #column4 h6 {
            display:none;
        }

        #column5 {
            grid-column:2;
            grid-row: 1;
            margin-top:15%;
            padding-bottom: 10%;
            display:flex;
            align-items: center;
        }

        #social-media {
            padding-left: 5vh;
        }

        #social-media ul li {
            display:inline;
            list-style-type: none;
            padding-left: 10%;
            padding-bottom:5%;
        }
        
        #column5 h6 {
            display:none;
        }
        
        #gitea {
            width:18%;
            height:auto;
        }

        #youtube {
            height: auto;
            width: 4.5vw;
        }
        
        #instagram {
            height:auto;
            width: 6.5vw;
        }

        #row2 {
            grid-column:1;
            grid-row:5;
            display:flex;
            align-items:center;
            justify-content:center;
            margin: 2.5vh 0; 
            background-color: black;
            font-family: 'Lato', sans-serif;
            font-weight: 500;
            letter-spacing: .095em;
        }

        #row2 p {
            align-items: center;
            padding-top:0;
            font-size: .75em;
            color:white;
        }

    #row3 {
        grid-column:2/3;
        grid-row:5;
        margin: 2.5vh 0;
    }

    #row3 .languages {
        margin-left:0;
        align-self:flex-end;
    }
                
    #row3 .languages a {
        color: hsl(160, 51%, 80%);
        font-size: .75em;
        text-decoration: none;
    }

        #row3 .languages a:active {
            color:  rgb(0, 255, 170);
        }

    .desktop {
        display: none;
    }

    }     
 .footer_container h6:active {
    opacity: 50%;
 }
--- a/templates/assets/css/home.css
+++ b/templates/assets/css/home.css
@ -0,0 +1,107 @@
@font-face {
    font-family: 'Lato', sans-serif;
        src: url('fonts/Lato-Thin.ttf') format('truetype');
        font-style: normal; 
        font-weight: 100;
 }

 .content {
    height: 120vh !important;
    width: 100vw;
 }

 .content .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
    margin-top: .2rem;
    font-family: 'Lato', sans-serif;;
 }

 .container img {
    height: 100%;
    z-index: 0;
    max-width: 100vw;
    grid-column: 1/3;
    grid-row: 1/9;
    justify-self: center;
 }

 .link button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: .1rem solid hsl(300, 100%, 50%);
    background-color: hsl(300, 100%, 50%);
    transition: all .5s ease-in-out;
 }

 #hemp button:active {
    box-shadow: 0px 0px 10px hsl(300, 100%, 30%);
 }

 .link button a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
    transition: all .4s ease-in-out;
 }

 .link button a:active {
    color: #999;
 }

 .link h6 {
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .25rem;
 }

 .link p {
    font-size: .65rem;
    text-align: center;
    background-color: #333;
    color: #eee;
    line-height: 2.25vh;
 }

 #hemp {
    grid-column: 1/3;
    grid-row: 1;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr)
 }

 #hemp button {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: end;
    margin-left: 2.4rem;
    margin-bottom: .2rem;
 }


 #hemp h6 {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    display: flex;
    align-items: center;
 }

 #hemp p {
    grid-column: 1;
    grid-row: 2;
 }

@media (min-width: 768px) {
    .content {
        height: 250vh !important;
        margin-top: 5rem;
    }
    
 }
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@ -73,7 +73,7 @@
    .top-bar {
        background-color:white;
        grid-area: top-bar;
        display: flex !important;
        display: flex;
        align-items: center;   
    }

@ -1472,7 +1472,7 @@

 /* Adjust Media Queries ! */


@media (max-width: 768px) {

    body {
        background-color: white;
@ -2950,6 +2950,7 @@
    .desktop {
        display: none;
    }
 }

    
    
--- a/templates/assets/css/nav.css
+++ b/templates/assets/css/nav.css
@ -1,375 +0,0 @@
@font-face {
    font-family: 'Fira Sans Thin', sans-serif;
        src: url('fonts/FiraSans-Thin.ttf') format('truetype');
        font-style: normal; 
        font-weight: 100;
 }

@font-face {
    font-family: 'Lato', sans-serif;
        src: url('fonts/Lato-Thin.ttf') format('truetype');
        font-style: normal; 
        font-weight: 100;
 }

 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
 } 

 :root{
    --top_padding:5px;
 }

 html,
 body {
    width: 100%;
    height: 100%;
 }

@media (min-width: 1024px){

 body {
    background-color:white;
 }

 #main-nav {
    z-index:3;
 }

 .top-bar {
    background-color:white;
    grid-area: top-bar;
    display: flex;
    align-items: center;
    font-family: 'Fira Sans', sans-serif;
 }

 .languages {
  display: flex;
  align-items: center;
  margin-left: 2vh;

 }

 .languages a {
    text-decoration: none !important;
    color: #555;
    cursor: pointer;
    margin: 1vh;
    font-weight: 100;
    font-size: 1.95vh;
    transition: ease .2s;
 }

 .languages a:hover {
    color:  hsl(160, 51%, 60%);
 }

 #main-bar {
    background-color: black;
    grid-area: main-bar;
    z-index:1;
    display: flex;
    align-items: center;
    border-top: 1px solid rgb(62, 190, 147); 
    border-bottom: 3px solid rgb(62, 190, 147);
    box-sizing: border-box;
    min-width: 100vw;
    height: 80%;
    font-weight: 100;
 }

 #logo-container {
 margin-top:6em;
 }

 .logo {
    z-index:3;
    width: 30vh;
    margin-left: 7.5vh;
    margin-top: 2.5vh;
 }

 .main-navigation-bar {
    z-index: 2;
    display:flex;
    align-items:center;
    position: relative;
    margin-left: 10vw;
 }

 .main-navigation-bar ul {
    list-style:none;
    position:relative;
    align-items:center;
    padding-top: 2%;
 }

 .main-navigation-bar a {
    align-items:center;
    justify-content: center;
    height: 50px;
    font-size: 2.55vh;
    font-weight: 100;
 }

 .main-navigation-bar ul li {
    position:relative;
    width:100%;
    text-align: center;
    padding-right: 4%;
    transition: ease .2s;
 }

 .main-navigation-bar ul li a:hover {
    color:  rgb(0, 255, 170);
 } 

 .main-navigation-bar ul #learn {
    width:10em;
 }

 .main-navigation-bar ul li a {
    color:white;
    text-decoration: none;
    justify-content: space-between;
    line-height: 50px;
    font-family: 'Lato' , sans-serif;
    font-weight: 300 !important;
    padding: 2vw;
 }

 .main-navigation-bar ul li  #edit {
    padding-right:0;
 }

 .main-navigation-bar ul li .pc {

    padding-left:1.5em;
 }

 .main-navigation-bar ul ul {
    border-top: 3px solid rgb(62, 190, 147); 
    position: absolute;
    top: 90%;
    opacity: 0;
    visibility: hidden;
 }



 .main-navigation-bar ul li li {
    position: relative;
    float:left;
    display: list-item; 
    background-color: #000;
    opacity: 95%;
    padding: 1.75vh 0;
 }

 .main-navigation-bar ul li .lastItem {
    padding-bottom: 2.25vh;
 }

 .main-navigation-bar ul li li a {
    font-size: 2.65vh;
 }


 .main-navigation-bar ul li:hover > ul {
    opacity: 1;
    visibility: visible;
 }

 #name {
    display: none;
 }

 }

@media (max-width: 1023px) {

    body{
        background-color: white;
    }

    .top-bar {
        display: none;
        }

    .main-navigation-bar {
        display: none;
        }

    .button {
        display: none !important;
        }

 #main-bar {
    grid-area: main-bar;
    background-color: black;
    display:flex;
    border-bottom: 6px solid hsl(160, 51%, 49%);
    padding: 0 0;
 }
    
 .logo {
    width: auto;
    height: 17.5vh;
    padding: 1vh 0 0 .5vh;
 }
    
 #main-bar h3 {
    display:none;
    color: white;
    text-transform: uppercase;
    padding-top:0;
    font-size: 13px;
    margin-left:10%;
    margin-bottom: 10%;
    font-weight: 300;
    }
    
    .hamburger-wrap {
        align-self: center;
    }
                    
    .hamburger {
        padding: 0 0 0 55vw;
        display: flex;
        cursor:pointer;
        transition: all .2s ease;
    }
                
                .hamburger .hamburger-icon {
                    width: 7.5vw;
                    height: 2.5px;
                    background-color:white;
                    display: block;
                    position:relative;
                    }
                                
                    .hamburger .hamburger-icon::before,
                    .hamburger .hamburger-icon::after {
                        content:'';
                        width:100%;
                        height:100%;
                        background-color: white;
                        display: block;
                        position:absolute;
                        }
                
                        .hamburger .hamburger-icon::after{
                            top: -7px;
                            } 
                                        
                        .hamburger .hamburger-icon::before{
                            top: 7px;
                            } 
                
                    .ham-btn {
                        display:none;
                        }
                                 
                        .ham-btn:checked .hamburger .hamburger-icon {
                            transform: rotate(45deg); 
                            }
    
 #mobile-dropdown-container {
    background-color: black;
    position: absolute;
    margin-top: 18.5vh;
    width: 100%;
    z-index: 2;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    opacity: 90%;
 }
                        
 #mobile-dropdown {
    margin: 1em;
    display: none;
 }
                        
 #mobile-dropdown ul {
    list-style:none;
 }
                        
 #mobile-dropdown ul li {
   margin: 2vh 0 5vh 0;
    display:flex;
    flex-direction: column;
 }
                        
 #mobile-dropdown ul li a {
    color :white;
    text-decoration:none;
    font-size: 3vh;
    font-weight: 700;
    line-height: 1.8em;
    justify-self: center;
    align-self: center;
    margin-bottom: 1vh;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
 }
                        
 #mobile-dropdown ul li a:hover ,#mobile-dropdown ul li a:active{
    color: rgb(0, 255, 170);
 }
                        
 #mobile-dropdown ul li ul li a {
    color: white;
    }
                        
 .drop {
    display: flex;
    justify-content: center;
    align-self: center;
 }
                        
 #down, #down1, #down2, #down3, #down4 {
    background-color: black;
    display: none;
    border: 1px solid rgb(0, 255, 170);
    border-radius: 25px;
    margin-top: 3vh;
    padding: 1vh 5vh;
 }
                        
 #down li {
    margin: 1vh 0 2vh 0 !important;
 }
                        
 #down li a {
    margin-bottom: 0 !important;
 }
                
                        
 .drop .arrow {
    border: solid rgb(0, 255, 170);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1.25vw;
    transition: .1s ease;                   
 }

 .drop .arrow:active {
    color: #906090;
 }

 .arrow:active{
    color:pink;
 }
                                 
                                .down {
                                    transform: rotate(45deg);
                                }
 #trigger {
    background-color:pink;
 }
    
        }
--- a/templates/assets/css/navigation.css
+++ b/templates/assets/css/navigation.css
@ -0,0 +1,234 @@
@font-face {
    font-family: 'Lato', sans-serif;
        src: url('fonts/Lato-Thin.ttf') format('truetype');
        font-style: normal; 
        font-weight: 100;
 }

 .main_bar {
    background-color: #000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 5rem;
    border-bottom: .2rem solid hsl(160, 51%, 49%);
 }

 .logo {
    width: auto;
    height: 4.5rem;
    margin: .25rem  0 0 .25rem;
 }

 .hamburger_wrapper {
    display: flex;
    align-items: center;
 }

 .hamburger_wrapper #icon {
    color: #fff;
    height: 2.5rem;
    width: 2.5rem;
    cursor: pointer;
    margin-right: .5rem;
 }

 .mobile_dropdown_container {
    background-color: rgb(0, 255, 170);
    opacity: 95%;
    position: absolute;
    margin-top: 5rem;
    width: 100%;
    display: none;
    justify-content: center;
    z-index: 3;
 }

 .mobile_dropdown_container #mobile_dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
 }

 #mobile_dropdown ul {
    list-style: none;
    max-height: 16vh;
 }

 #mobile_dropdown ul li {
    display: flex;
    flex-direction: column;
    margin-top: .75rem;
    max-height: 5vh;

 }

 #mobile_dropdown ul li a {
    color:#000;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 1.15rem;
    line-height: 1.8em;
    font-weight: 300;
    margin-bottom: .25rem;
    letter-spacing: .2rem;
    display: flex;
    align-items: center;
 }

 #mobile_dropdown ul li li a {
    font-weight: 400;
 }

 #mobile_dropdown ul li a:active {
    opacity: 50%;
    color: rgb(0, 255, 170);
    transition: all ease-in-out; 
 }

 .drop {
    display: flex;
    justify-content: center;
 }

 .chevron {
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
 }

 .down {
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 200;
    position: fixed;
    background-color: hsl(300, 100%, 50%);
    max-height: 30vh;
    margin-top: 5rem;
    min-width: 80%;
    right: 10%;
    border-radius: .2rem;
    box-shadow:.1rem .1rem #888;
    opacity: 85%;
    transition: all .7 ease;
 }

 #down_5 {
    bottom: 24%;
    max-height: 40vh !important;
 }

 .desktop_navigation {
    display: none;
 }

@media (min-width:768px) {
    .main_bar {
        z-index: 1;
        display: flex;
        align-items: center;
        border-bottom: .25rem solid rgb(62, 190, 147);
        height: 7.5rem;
    }

    .main_bar #logo_container {
        margin-top: .5rem;
    }

    .logo {
        z-index:3;
        height: 10rem;
        width: auto;
        margin-left: 2.5rem;
        margin-top: .5rem;
        position: absolute;
    }

    .hamburger_wrapper {
        display: none;
    }

    .mobile_dropdown_container {
        display: none;
    }

    .desktop_navigation {
        z-index: 2;
        display:flex;
        align-items:center;
        position: relative;
        width: 100%;
        margin-left: 30%;
        padding-top: 4rem;
    }

    .desktop_navigation ul {
        list-style: none;
        position: relative;
        align-items: center;
        padding-top: 1rem;
    }

    .desktop_navigation ul li {
        position: relative;
        text-align: center;
        padding-right: 1.5rem;
        transition: ease .2s;
    }

    .desktop_navigation ul li:hover {
        opacity: 90%;
    }

    .desktop_navigation ul li a {
        color: #fff;
        text-decoration: none;
        justify-content: space-between;
        line-height: 50px;
        font-family: 'Lato' , sans-serif;
        font-weight: 300 !important;
        padding: 2vw;
    }
    
    .desktop_navigation ul ul {
        border-top: 3px solid rgb(62, 190, 147); 
        position: absolute;
        top: 50%;
        opacity: 0;
        visibility: hidden;
        max-height: 10vh;
    }

   #broader {
        min-width: 15vw;
    }

    .desktop_navigation ul li li {
        position: relative;
        display: list-item; 
        background-color: #000;
        opacity: 95%;
        padding-top: 1rem;
    }

    .desktop_navigation #fix {
        padding: 0;
    }

    .desktop_navigation ul li #fix {
        padding: 0 .6rem 0 .475rem;
    }

    .desktop_navigation ul li li a {
        font-size: 1.15rem;
    }

    .desktop_navigation ul li:hover > ul {
        opacity: 1;
        visibility: visible;
    }


 }
--- a/templates/assets/img/hero.png
+++ b/templates/assets/img/hero.png
--- a/templates/assets/js/main.js
+++ b/templates/assets/js/main.js
@ -1,3 +1,93 @@
 // show mobile menu onclick

 document.getElementById("icon").addEventListener("click", function menu() {
    var x = document.getElementById("md");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
 )

 // show experiments submenu

 document.getElementById("chevron_1").addEventListener("click", function menu() {
    var x= document.getElementById("down_1");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
 )

 // permaculture submenu

 document.getElementById("chevron_2").addEventListener("click", function menu() {
    var x= document.getElementById("down_2");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
 )

 // greentech submenu

 document.getElementById("chevron_3").addEventListener("click", function menu() {
    var x= document.getElementById("down_3");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
 )

 // spiderpi submenu

 document.getElementById("chevron_4").addEventListener("click", function menu() {
    var x= document.getElementById("down_4");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
 )

 // about submenu

 document.getElementById("chevron_5").addEventListener("click", function menu() {
    var x= document.getElementById("down_5");
    if (x.style.display === "none") {
        x.style.display = "flex";}
        else {
            x.style.display ="none";
        }
    }
 )




















  
 // this function shows an element by id
@ -19,59 +109,4 @@ function display() {
        else {
            x.style.display ="none";
        }
    }

    function menu() {
        var x= document.getElementById("mobile-dropdown");
        if (x.style.display === "none") {
            x.style.display = "block";}
            else {
                x.style.display ="none";
            }
        }
    

        function menu2() {
            var x= document.getElementById("down");
            if (x.style.display === "none") {
                x.style.display = "block";}
                else {
                    x.style.display ="none";
                }
            }

            function menu3() {
                var x= document.getElementById("down1");
                if (x.style.display === "none") {
                    x.style.display = "block";}
                    else {
                        x.style.display ="none";
                    }
                }

                function menu4() {
                    var x= document.getElementById("down2");
                    if (x.style.display === "none") {
                        x.style.display = "block";}
                        else {
                            x.style.display ="none";
                        }
                    }

                    function menu5() {
                        var x= document.getElementById("down3");
                        if (x.style.display === "none") {
                            x.style.display = "block";}
                            else {
                                x.style.display ="none";
                            }
                        }

                        function menu6() {
                            var x= document.getElementById("down4");
                            if (x.style.display === "none") {
                                x.style.display = "block";}
                                else {
                                    x.style.display ="none";
                                }
                            }
    }
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@ -1,15 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    {% block head %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type=image/svg+xml href="../img/Logo.svg">
    <title>{% block title %}Base{% endblock title %} </title>
    {% endblock head %}
 </head>
 <body>
    {% block content %}{% endblock content %}
 </body>
    <head>
        {% block head %}
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="css/base.css">
            <link rel="stylesheet" type="text/css" href="css/navigation.css" />
            <link rel="stylesheet" type="text/css" href="css/footer.css" />
            <link rel="icon" type=image/svg+xml href="../img/Logo.svg">
            <title>{% block title %}Base{% endblock title %} </title>
        {% endblock head %}
    </head>
    <body>
        <div class= "navigation">
                {%include "nav"%}
        </div>   
        <div class= "content">
                {% block content %} {% endblock content %}
        </div>
        <div class= "footer">
                {%include "footer"%}
        </div>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
 </html>
--- a/templates/footer.html.tera
+++ b/templates/footer.html.tera
@ -0,0 +1,9 @@
 <footer>
    <div class="footer_container">
            <h6><a href="/about">Über Cannabinieri</a></h6>
            <h6><a href="/meet">Kontakt</a></h6>
            <h6><a href="/privacy">Datenschutz</a></h6>
            <h6><a href="https:://code.basabuuka.org">Code</a></h6>
            <p>© Cannabinieri 2021-CC BY-NC 4.0</p>
    </div>
 </footer>
--- a/templates/home.html.tera
+++ b/templates/home.html.tera
@ -0,0 +1,20 @@
 {%extends "base"%}
 {%block title %}Cannabinieri CBD{%endblock title %}
 {%block head%}
 {{super()}}
 <link rel="stylesheet" type="text/css" href="css/home.css" />
 {%endblock head%}
 {{super()}}
 {%block content%}
 <div class="container">
    <img type="image/png" src="img/hero.png">
    <div class="link" id="hemp">
        <button>
            <a href="/hemp">i</a>
        </button>
        <h6>Hanf</h6>
            <p>We experiment with hemp <br>to understand our ecosystem <br>and produce 100% organic<br> CBD oils and flower</p>
    </div>
 </div>
 {%endblock content%}

--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@ -1,448 +0,0 @@
 {%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 %}
--- a/templates/nav.html.tera
+++ b/templates/nav.html.tera
@ -0,0 +1,103 @@
 <div class="main_bar">
    <div id="logo_container">
        <a href="/">
            <picture>
                    <source srcset="../img/Logo.svg" type="image/webp">
                    <img class="logo" type="image/svg+xml" src= "img/Logo.svg">
            </picture>
        </a>
    </div>
    <!--mobile nav-->
    <nav class="hamburger_wrapper">
        <!--add onclick animation js/css-->
        <svg id = "icon" type="image/svg+xml" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M4 6h16M4 12h16M4 18h16">
            </path>
        </svg>
    </nav>
    <div class="mobile_dropdown_container" id="md">
        <div id="mobile_dropdown">
            <ul>
                <li>
                    <a type="text/html" href="/experiments">HANF</a>
                    <span class="drop">
                            <svg type="image/svg+xml" id="chevron_1" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
                            </svg>
                    </span>
                    <ul class="down" id ="down_1">
                        <li><a type="text/html" href="/experiments/oil">Öle</a></li>
                        <li><a type="text/html" href="/experiments/flower">Blüten</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li>
                    <a type="text/html" href="/spider">SPINNE</a>
                    <span class="drop">
                            <svg type="image/svg+xml" id="chevron_2" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
                            </svg>
                    </span>
                    <ul class="down" id ="down_2">
                        <li><a type="text/html" href="/spider/spiderPi">SpiderPi</a></li>
                        <li><a href="/peramapp">PermApp</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li><a type="text/html" href=/permaculture/permApp>KAOS CUBE</a>
                </li>
            </ul>
            <ul id="drop_up">
                <li><a type="text/html" href="#">OFFGRID</a>
                        <span class="drop">
                            <svg type="image/svg+xml" id="chevron_3" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </span>
                        <ul class="down" id="down_3">
                                <li><a type="text/html" href="#">WohnMaschine</a></li>
                                <li><a type="text/html" href="#">GPUMiner</a></li>
                        </ul>
                </li>
            </ul>
             <ul>
                <li><a type="text/html" href="#">CYBERPRENEUR</a>
                </li>
            </ul>
        </div>
    </div>
 <!--desktop nav-->
    <nav class="desktop_navigation">
        <ul>
            <li><a type="text/html" href="/experiments"> HANF </a>
                    <ul id="experiments">
                        <li><a type="text/html" href="/experiments/oil">Öle</a></li>
                        <li><a type="text/html" href="/experiments/flower">Blüten</a></li>
                    </ul>
            </li>
        </ul>
        <ul>
            <li><a type="text/html" href="/spider">SPINNE</a>
                    <ul>
                            <li id="fix"><a id="fix" type="text/html" href="/permapp">PermApp</a></li>
                    </ul>
        </ul>
        <ul>
            <li><a type="text/html" href="/permaculture/permApp">KAOS CUBE</a>
        </ul>
        <ul>
            <li><a type="text/html" href="#">CYBERPRENEUR</a>
        </ul>
        <ul>
            <li><a type="text/html" href="#">OFFGRID</a>
                    <ul id="broader">
                            <li id="fix" ><a id="fix" href="#">Wohn Maschine</a></li>
                            <li id="fix"><a id="fix" href="#">GPU Miner</a></li>
                    </ul>
        </ul>
    </nav>
 </div>

--- a/templates/privacy-policy.html.tera
+++ b/templates/privacy-policy.html.tera
@ -1,10 +1,11 @@
 {%extends "base"%}

 {%block title%}{{title}}{%endblock title%}
 {%block head%}
 {{super()}}
 {%endblock head%}
 {%block content%}
    <h1>Privacy Policy</h1>
    <p>Add info how data is handled and licence of code</p>
    <div class="container" style ="display: flex;">
        <h1>Privacy Policy</h1>
        <p>Add info how data is handled and licence of code</p>
    </div>
 {%endblock content%}