v3

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 {

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())

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>

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>     

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;
+}

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%;
+}

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;
+    }
+    
+}

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;
     }
+}
 
     
     

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;
-}
-    
-        }

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;
+    }
+
+
+}

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";
-                                }
-                            }
+    }

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>

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>

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%}
+

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 %}

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>
+

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%}