aug30

Makefile

@@ -0,0 +1,5 @@
+run_dev:
+	cargo-watch -x run 
+
+build_dev: 
+	cargo build && cargo-watch -x run

src/main.rs

@@ -1,12 +1,8 @@
 #[macro_use] extern crate rocket;
 
-// push strings to path
-// generate path from strings
-use std::path::{ PathBuf, Path };
+mod routes;
+use crate::routes::{ get, get_static_files };
 
-// Responder Type NamedFile
-// serve file with Content-Type based on name
-use rocket::fs::{ NamedFile, relative };
 
 // Equivalent to main()
 #[rocket::main] // enable async main()
@@ -15,20 +11,29 @@ async fn main() -> Result<(), rocket::Error> {
     // State Rocket<Build> => configuration
         // registering routes
         // mounting routes
-        // registering/ mobuildunting catchers
+        // registering/ catchers
         // manage State
         // attach Fairings
         rocket::build()
         // State Rocket<Ignite> => Finalized App ready to launch
             // check before launching
             // catch errors
-        .mount("/", routes![ index, fileserver, experiments, perma, greentech, spider, learn ])
-        .mount("/experiments", routes! [ oil, flower, candy ])
-        .mount("/permaculture", routes! [ permapp, greenlab, about_perma ])
-        .mount("/greentech", routes! [ automation, iot, diy ])
-        .mount("/spider", routes! [ spiderpi, join ])
-        .mount("/learn", routes! [ about, partners, meet, blog, code ])
-        .mount("/policies", routes! [ policies_info, privacy ])
+        .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 ])
+        .mount("/spider",
+        routes! [ get::spiderpi, get::join ])
+        .mount("/learn", 
+        routes! [ get::about, get::partners, get::meet, get::blog, get::code ])
+        .mount("/policies", 
+        routes! [ get::policies_info, get::privacy ])
 
 
         .ignite().await?
@@ -36,148 +41,4 @@ async fn main() -> Result<(), rocket::Error> {
             // State after launch() is called
             // launch() starts server
         .launch().await
-}
-
-// Configure requests
-// generate routes, set attributes
-    // set http method
-    // set uri
-#[route(GET, uri = "/")]
-// if success call handler
-async fn index() -> Option<NamedFile> {
-   NamedFile::open("templates/index.html").await.ok()
-}
-
-// serve other pages (html GET)
-// create routes for pages
-#[get("/experiments")]
-async fn experiments() -> Option<NamedFile> {
-    NamedFile::open("templates/experiments.html").await.ok()
-}
-
-#[get("/permaculture")]
-async fn perma() -> Option<NamedFile> {
-    NamedFile::open("templates/permaculture.html").await.ok()
-}
-
-#[get("/greentech")]
-async fn greentech() -> Option<NamedFile> {
-    NamedFile::open("templates/greentech.html").await.ok()
-}
-
-#[get("/spider")]
-async fn spider() -> Option<NamedFile> {
-    NamedFile::open("templates/spider.html").await.ok()
-}
-
-#[get("/learn")]
-async fn learn() -> Option<NamedFile> {
-    NamedFile::open("templates/learn.html").await.ok()
-}
-
-#[get("/oil")]
-async fn oil() -> Option<NamedFile> {
-    NamedFile::open("templates/oils.html").await.ok()
-}
-
-#[get("/flower")]
-async fn flower() -> Option<NamedFile> {
-    NamedFile::open("templates/flower.html").await.ok()
-}
-
-#[get("/candy")]
-async fn candy() -> Option<NamedFile> {
-    NamedFile::open("templates/edibles.html").await.ok()
-}
-
-#[get("/permApp")]
-async fn permapp() -> Option<NamedFile> {
-    NamedFile::open("templates/permapp.html").await.ok()
-}
-
-#[get("/greenlab")]
-async fn greenlab() -> Option<NamedFile> {
-    NamedFile::open("templates/greenlab.html").await.ok()
-}
-
-#[get("/about")]
-async fn about_perma() -> Option<NamedFile> {
-    NamedFile::open("templates/whatsthat.html").await.ok()
-}
-
-#[get("/automation")]
-async fn automation() -> Option<NamedFile> {
-    NamedFile::open("templates/automation.html").await.ok()
-}
-
-#[get("/DiY")]
-async fn diy() -> Option<NamedFile> {
-    NamedFile::open("templates/diy.html").await.ok()
-}
-
-#[get("/IoT")]
-async fn iot() -> Option<NamedFile> {
-    NamedFile::open("templates/iot.html").await.ok()
-}
-
-#[get("/spiderPi")]
-async fn spiderpi() -> Option<NamedFile> {
-    NamedFile::open("templates/spiderpi.html").await.ok()
-}
-
-#[get("/join")]
-async fn join() -> Option<NamedFile> {
-    NamedFile::open("templates/join.html").await.ok()
-}
-
-#[get("/about")]
-async fn about() -> Option<NamedFile> {
-    NamedFile::open("templates/whoweare.html").await.ok()
-}
-
-#[get("/partners")]
-async fn partners() -> Option<NamedFile> {
-    NamedFile::open("templates/partners.html").await.ok()
-}
-
-#[get("/contact")]
-async fn meet() -> Option<NamedFile> {
-    NamedFile::open("templates/meet.html").await.ok()
-}
-
-#[get("/blog")]
-async fn blog() -> Option<NamedFile> {
-    NamedFile::open("templates/blog.html").await.ok()
-}
-
-#[get("/code")]
-async fn code() -> Option<NamedFile> {
-    NamedFile::open("templates/code.html").await.ok()
-}
-
-#[get("/")]
-async fn policies_info() -> Option<NamedFile> {
-    NamedFile::open("templates/policies.html").await.ok()
-}
-
-#[get("/privacy")]
-async fn privacy() -> Option<NamedFile> {
-    NamedFile::open("templates/privacy-policy.html").await.ok()
-}
-
-
-// Serve static files from /
-    // Match against multiple segments
-    // parameters need to implement FromSegments
-    // PathBuf implements FromSegments
-    // push all segments to path
-    // Option<Some, Err> implements Responder
-    // NamedFile implements Responder => generates Response
-#[route(GET, uri= "/<path..>")]
-async fn fileserver(path: PathBuf) -> Option<NamedFile> { // PathBuf =  Heapstring, growable
-    // set path to static files
-    let path = Path::new(relative!("templates/assets")).join(path); // Path = stack string, fixed size
-    // path accessible from /
-    // Open file at path 
-        NamedFile::open(path).await.ok()
 }

src/routes/get.rs

@@ -0,0 +1,134 @@
+// Responder Type NamedFile
+// serve file with Content-Type based on name
+use rocket::fs::NamedFile;
+// Error type 404
+use rocket::response::status::NotFound;
+
+// Configure requests
+// generate routes, set attributes
+    // set http method
+    // set uri
+    #[route(GET, uri = "/")]
+    // if success call handler
+    pub async fn index() -> Result<NamedFile, NotFound<String>> {
+       NamedFile::open("templates/index.html").await.map_err(|e|NotFound(e.to_string()))
+    }
+    
+    // serve other pages (html GET)
+    // create routes for pages
+    #[get("/experiments")]
+    pub async fn experiments() -> Option<NamedFile> {
+        NamedFile::open("templates/experiments.html").await.ok()
+    }
+    
+    #[get("/permaculture")]
+    pub async fn perma() -> Option<NamedFile> {
+        NamedFile::open("templates/permaculture.html").await.ok()
+    }
+    
+    #[get("/greentech")]
+    pub async fn greentech() -> Option<NamedFile> {
+        NamedFile::open("templates/greentech.html").await.ok()
+    }
+    
+    #[get("/spider")]
+    pub async fn spider() -> Option<NamedFile> {
+        NamedFile::open("templates/spider.html").await.ok()
+    }
+    
+    #[get("/learn")]
+    pub async fn learn() -> Option<NamedFile> {
+        NamedFile::open("templates/learn.html").await.ok()
+    }
+    
+    #[get("/oil")]
+    pub async fn oil() -> Option<NamedFile> {
+        NamedFile::open("templates/oils.html").await.ok()
+    }
+    
+    #[get("/flower")]
+    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")]
+    pub async fn spiderpi() -> Option<NamedFile> {
+        NamedFile::open("templates/spiderpi.html").await.ok()
+    }
+    
+    #[get("/join")]
+    pub async fn join() -> Option<NamedFile> {
+        NamedFile::open("templates/join.html").await.ok()
+    }
+    
+    #[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()
+    }
+    
+    #[get("/contact")]
+    pub async fn meet() -> Option<NamedFile> {
+        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()
+    }
+    
+    #[get("/privacy")]
+    pub async fn privacy() -> Option<NamedFile> {
+        NamedFile::open("templates/privacy-policy.html").await.ok()
+    }
+    
+    

src/routes/get_static_files.rs

@@ -0,0 +1,25 @@
+// push strings to path
+// generate path from strings
+use std::path::{ Path, PathBuf };
+
+//responder type 
+use rocket::fs::{ NamedFile, relative };
+// responder Error type 404
+use rocket::response::status::NotFound;
+
+
+// Serve static files from /
+    // Match against multiple segments
+    // parameters need to implement FromSegments
+    // PathBuf implements FromSegments
+    // push all segments to path
+    // Option<Some, Err> implements Responder
+    // NamedFile implements Responder => generates Response
+    #[route(GET, uri= "/<path..>")]
+    pub async fn fileserver(path: PathBuf) -> Result<NamedFile, NotFound<String>> { // PathBuf =  Heapstring, growable
+        // set path to static files
+        let path = Path::new(relative!("templates/assets")).join(path); // Path = stack string, fixed size
+        // path accessible from /
+        // Open file at path 
+            NamedFile::open(&path).await.map_err(|e| NotFound(e.to_string()))
+    }

src/routes/mod.rs

@@ -0,0 +1,2 @@
+pub mod get;
+pub mod get_static_files;

templates/assets/components/automation-content.html

@@ -0,0 +1,47 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Automation</h1>
+        <p>Automatic greenhouses<br class="mobile"> for everyone.<br><br>
+       </p>
+       <p id="color">Learn about our projects!</p>
+        <div class="image">
+            <!--add an imaage of a greenhouse-automation project-->
+        </div>
+        </div>
+    <div class="auto-container">
+        <div class="strip">
+        <div class="about">
+            <h3>Where we stand and where we'll go.</h3>
+            <p>Our goal is to build fully automatic greenhouses for everyone.<br>
+            We want them to be both affordable and comprehensive, we want to enable you to grow your own organic food anywhere.<br><br>
+          	Currently we are at the very beginning of our journey and we are rennovating the greenhouse that will be our first fully automized prototype that also serves as the natural habitat of SpiderPi.<br><br>
+            <span>Stay in touch</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-greenhouse.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>Our projects</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-mini-greenhouse.jpg"/>
+                </div>
+                <h5>Mini Greenhouses</h5>
+                <p>These Mini Greenhouses have a built in mechanism that manipulates the day-lenght to your plants needs.<br><br>
+                    The curtains close and the light comes up based on data transmitted by sensors and a program that knows plants exact light needs that can apply them and improve the data.<br>
+					Dreaming..here could be projects like this one.<br>
+					Find out how we did it in our <a id= "blog-link" href="../learn/blog">Blog</a>.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">More</a></button>
+                    <button id="app"><a href="#">DIY</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/blog-content.html

@@ -0,0 +1,242 @@
+<div class="page-wrapper">
+	<div class="info">
+		<h1>Blog</h1>
+			<p>CBD.Permaculture.Tech.More.<br><br>
+		<div class="image">
+			<picture>
+				<img type="image/svg+xml" src="../img/sample-blog.svg" />
+			</picture>
+		</div>
+		</div>
+	<div class="blog-container">
+		<div class="strip">
+			<h3>Company</h3>
+			<div class="grid">
+			<figure>
+			<div class="theme" id="post1">
+			<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-oils-background.jpg"/>
+			</picture>
+			</div>
+			<h5>CBD oil Sauvage</h5>
+			<div class="description">
+				<p>Our first experiment Sauvage is out !<br>
+				Read her story from seed to sale.</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">Read</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post2">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" type="image/jpeg" src="../img/sample-oils-background.jpg"/>
+				</picture>
+			</div>
+			<h5>Wild Herbs</h5>
+			<div class="description">
+				<p>Our first experiment Sauvage is out !<br>
+				Read her story from seed to sale.</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">Read</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post3">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" type="image/jpeg" src="../img/sample-oils-background.jpg"/>
+				</picture>
+			</div>
+			<h5>Wild Herbs</h5>
+			<div class="description">
+				<p>Our first experiment Sauvage is out !<br>
+				Read her story from seed to sale.</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">Read</a>
+			</button>
+		</div>
+		</div>
+	</figure>
+	</div>
+</div>
+	<div class="strip">
+		<h3>CBD News</h3>
+		<div class="grid">
+		<figure>
+		<div class="theme" id="post1">
+		<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-migraines-art.jpg"/>
+			</picture>
+		</div>
+		<h5 class= "downsize">CBD against migraines</h5>
+		<div class="description">
+			<p>CBD helps against migraines!<br>
+			Which cannabinoid have which effects on the brain</p>
+		</div>
+		<div class="click">
+		<button class="read">
+			<a href="#">Read</a>
+		</button>
+	</div>
+	</div>
+	<div class="theme" id="post2">
+		<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-migraines-art.jpg"/>
+			</picture>
+		</div>
+		<h5 class= "downsize">CBD against migraines</h5>
+		<div class="description">
+			<p>CBD helps against migraines!<br>
+			Which cannabinoid have which effects on the brain</p>
+		</div>
+		<div class="click">
+		<button class="read">
+			<a href="#">Read</a>
+		</button>
+	</div>
+	</div>
+	<div class="theme" id="post3">
+		<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-migraines-art.jpg"/>
+			</picture>
+		</div>
+		<h5 class= "downsize">CBD against migraines</h5>
+		<div class="description">
+			<p>CBD helps against migraines!<br>
+			Which cannabinoid have which effects on the brain</p>
+		</div>
+		<div class="click">
+		<button class="read">
+			<a href="#">Read</a>
+		</button>
+	</div>
+	</div>
+</figure>
+</div>
+</div>
+<div class="strip">
+	<h3 id="smaller">Perma<br>& culture News</h3>
+	<div class="grid">
+	<figure class ="single">
+	<div class="theme" id="shorter">
+	<div class="image">
+		<picture>
+			<source type="image/webp">
+			<img id="closeup" type="image/jpeg" src="../img/sample-aqua.jpg"/>
+		</picture>
+	</div>
+	<h5>Aquaculture</h5>
+	<div class="description">
+		<p>Find out how fish and plants can profit from each other.<br>
+		Here's what we found out.</p>
+	</div>
+	<div class="click">
+	<button class="read">
+		<a href="#">Read</a>
+	</button>
+</div>
+</div>
+</figure>
+</div>
+</div>
+<div class="strip">
+	<h3>Tech News</h3>
+	<div class="grid">
+	<figure class= "single">
+	<div class="theme" id= "tech">
+	<div class="image">
+		<picture>
+			<source type="image/webp">
+			<img id="closeup" type="image/jpeg" src="../img/sample-led.jpg"/>
+		</picture>
+	</div>
+	<h5>Light Sensors</h5>
+	<div class="description">
+		<p>Read about our experiments to find out the perfect lighting conditions for our plants.<br>
+		How light influences plants and how we manipulate it.</p>
+	</div>
+	<div class="click">
+	<button class="read">
+		<a href="#">Read</a>
+	</button>
+</div>
+</div>
+</figure>
+</div>
+</div>
+<div class="strip">
+	<h3>Tutorials</h3>
+	<div class="grid">
+	<figure class="single">
+	<div class="theme" id= "tutorials">
+	<div class="image">
+		<picture>
+			<source type="image/webp">
+			<img id="closeup" type="image/jpeg" src="../img/sample-diy.jpg"/>
+		</picture>
+	</div>
+	<h5 id="small">Water Flow Automation</h5>
+	<div class="description">
+		<p>Learn how to build a water automation for your plants.<br>
+		Here's how to do it.</p>
+	</div>
+	<div class="click">
+	<button class="read">
+		<a href="#">Read</a>
+	</button>
+</div>
+</div>
+</figure>
+</div>
+</div>
+		<div class="strip2">
+		  <div class="products">
+				<h3>Social Media</h3>
+				<div class="social">
+				<h5>Keep in touch !</h5>
+				<figure>
+					<picture>
+						<source type="image/webp">
+						<img id="post_1" src="../img/sample-post.jpg"/>
+					</picture>
+
+					<picture>
+						<source type="image/webp">
+						<img id="post_2" src="../img/sample-post.jpg"/>
+					</picture>
+
+					<picture>
+						<source type="image/webp">
+						<img class="desktop" id="post_3" src="../img/sample-post.jpg"/>
+					</picture>
+				</figure>
+				  <div class="instagram">
+					  <button id="insta"><a href="#"><img id="gram" type="image/svg+xml" src="../img/pixelfed.svg"></a></button>
+					  <h5 id="account">@Cannabinieri_Official</h5>
+				  </div>
+				  <div class="youtube">
+					  <button id="you"><a href="#"><img id="tube" type="image/svg+xml" src="../img/peertube.svg"></a></button>
+					  <h5 id="account">@Cannabinieri_Official</h5>
+				  </div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

templates/assets/components/code-content.html

@@ -0,0 +1,73 @@
+<div class="page-wrapper">
+	<div class="info">
+		<h1>Code</h1>
+			<p>Get the code.<br><br>
+		<div class="image">
+			<img type="image/svg+xml" src="../img/gitea-green.svg" />
+		</div>
+		</div>
+	<div class="code-container">
+		<div class="strip">
+			<h3>All code</h3>
+			<div class="grid">
+			<figure>
+			<div class="theme" id="post1">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" src="../img/sample-code1.jpg"/>
+				</picture>
+			</div>
+			<h5>Detect obstacles</h5>
+			<h6>Python</h6>
+			<div class="description">
+				<p>Obstacle Detection Program for SpiderPi<br></p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">GET</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post2">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" src="../img/sample-virtual.jpg"/>
+				</picture>
+			</div>
+			<h5>See in 3D</h5>
+			<h6>Python</h6>
+			<div class="description">
+				<p>3D Rendering Program for SpiderPI<br></p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">GET</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post3">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" src="../img/sample-waterflow.jpg"/>
+				</picture>
+			</div>
+			<h5 id= "downsize">Waterflow Regulation</h5>
+			<h6>Python</h6>
+			<div class="description">
+				<p>Program to manipulate the waterflow for Raspberry Pi</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">GET</a>
+			</button>
+		</div>
+		</div>
+	</figure>
+	</div>
+</div>
+</div>
+</div>
+

templates/assets/components/diy-content.html

@@ -0,0 +1,47 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>DIY</h1>
+        <p>Automate yourself.<br><br>
+        <span>Check out our guides!</span></p>
+        <div class="image">
+        </div>
+        </div>
+    <div class="things-container">
+        <div class="strip">
+        <div class="about">
+            <h3>We want you to automate yourself !</h3>
+            <p>Currently many tasks that used to be done by people are done by computers.<br>
+             In agriculture there are  many interesting projects going on that will soon replace farmworkers with software-engineers.<br><br>
+              Automation is an amazing opportunity to get tasks done more efficiently and to collect data in order to get a better understanding on how things work.<br><br>
+              Even though there are many people loosing their jobs while not being able to find a new job with their skillset that used to be valuable.<br><br>
+               So we want everyone to get aquainted with automation, in order to keep working and keep contributing to the progress.<br><br>
+              For that it is important to start small automation projects yourself that are fun, that make you learn and of which you profit.<br><br>
+              <span>Start your first project now !</span>
+            <br>
+            </p>
+            <div class="image">
+              <!--add a video of a working iot module-->
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>Projects</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp"src="../img/sample-project.jpg"/>
+                </div>
+                <h5>Light, Light on off</h5>
+                <p>Learn how to build an automatic lightswitch.<br><br>
+                    Manipulate the light using sensors.<br>
+					Here could be projects like this one.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">Start</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/edibles-content.html

@@ -0,0 +1,47 @@
+
+	<div class="page-wrapper">
+        <div class="info">
+            <h1>Candy</h1>
+            <p>Learn about our CBD Edibles.<br><br>
+            <span>Coming Soon!</span></p>
+            <div class="image">
+                <img type=" image/webp" src="../img/sample-lemon.png"/>
+            </div>
+            </div>
+        <div class="oil-container">
+            <div class="strip">
+            <div class="about">
+                <h3>Currently we are brewing our gummiberry-juice !</h3>
+                <p>All around our lab grow a variety of local flavourful crops.<br>
+               There are lemon trees, orange trees, a variety of herbs such as salvia, thyme and rosemary, there is the sea with its algae and there are flowers all around.<br>
+               All the ingredients for 100% organic CBD candy are growing wildly around us.
+               Now our job is to find the perfect recipe to create vegan CBD edibles with the oil we produce and all the flavour that grows around us.<br><br>
+                <span>Out soon!</span><br>
+                #a dummy text</p>
+                <div class="image">
+                <img type=" image/webp" src="../img/sample-lemontree.jpg"/>
+                </div>
+            </div>
+        </div>
+        <div class="strip2">
+            <div class="products">
+                <h3>All CBD Edibles</h3>
+                <div class="product">
+                    <div class="image">
+                        <img type=" image/webp" src="../img/sample-product-candy.svg" />
+                    </div>
+                    <h5>Name</h5>
+                    <p>A description about this product.<br>
+                        All its ingredients and what makes it unique.<br>
+                        % CBD, % THC, flavour, effect.<br>
+                        Why people should buy it.<br><br>
+                    </p>
+                    <div class="click">
+                        <button><a href="#">About</a></button>
+                        <button id="shop"><a href="#">Try</a></button>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>

templates/assets/components/flower-content.html

@@ -0,0 +1,43 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Flowers</h1>
+		<p>Learn about our CBD Flower.<br>
+        <span>Coming Soon!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../img/sample-flower-closeup.svg"/>
+        </div>
+        </div>
+    <div class="flower-container">
+        <div class="strip">
+        <div class="about">
+            <h3>Soon we'll bring Flower to the people !</h3>
+            <p>Currently we are building our imperium.<br>
+            Our own CBD plants grow yearlong and are all set for our first experiments on them.<br>
+            We want to know which effects changes to environmental entities have and how the taste and composition of our CBD flowers is influenced by that.<br>
+            At our lab we organically grow wild herbs and a variety of fruit that will give our flower unique flavors. <br>
+            Our SpiderPi will soon be collecting information about our plants.<br><br>
+            <span>Get ready for organic, robot-grown CBD flowers !</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-plants.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All CBD Flower</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-product.svg" />
+                </div>
+                <h5>Name</h5>
+                <p>A short description about this experiment,<br> flavor, THC, CBD and what's unique.</p>
+                <div class="click">
+                    <button>About</button>
+                    <button id="shop">Buy</button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/footer.html

@@ -71,17 +71,26 @@
                         <ul>
                             <li class="youtube">
                                     <a href="#">
-                                            <img id="youtube" type="image/webp" src= "img/peertube.svg">
+                                        <picture>
+                                                <source srcset="../img/peertube_white.svg" type="image/webp">
+                                                <img id="youtube" type="image/webp" src= "img/peertube_white.svg">
+                                        </picture>
                                     </a>
                             </li>
                             <li>
                                     <a href="#">
-                                            <img id="instagram" type="image/webp" src="img/pixelfed.svg">
+                                        <picture>
+                                                <source srcset="../img/pixelfed.svg" type="image/webp">
+                                                <img id="instagram" type="image/webp" src="img/pixelfed.svg">
+                                        </picture>
                                     </a>
                             </li>
                             <li>
                                 <a href="#">
-                                        <img id="gitea" type="image/webp" src="img/gitea.svg">
+                                        <picture>
+                                                <source srcset="../img/gitea.svg" type="image/webp">
+                                                <img id="gitea" type="image/webp" src="img/gitea.svg">
+                                        </picture>
                                 </a>
                         </li>
                     </ul>

templates/assets/components/greenlab-content.html

@@ -0,0 +1,48 @@
+
+	<div class="page-wrapper">
+    <div class="info">
+        <h1><span>Green</span>Lab</h1>
+        <p>The power of partnerplants.<br><br>
+        <span>Discover our recipes!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../img/sample-fertilizer.svg"/>
+        </div>
+        </div>
+    <div class="green-container">
+        <div class="strip">
+        <div class="about">
+            <h3> We tune our plants with our plants.</h3>
+            <p>We do not use any chemicals on our plants because nature trumps them all.<br>
+            There is no dissease or pest that can not be cured by changes within the environment or by utilizing the force of plants and animals.<br>
+          	In fact each plant is a complex chemical composition of nutrients, proteins and inherits a unique communication with the environment.<br>
+         	Different plants attract different insects and bacteria and leave nutrients in the soil, if we understand each plants potential, we have access to an endless toolbox for the composition of organic ferilizer and - pesticide recipes.<br><br>
+            <span>Here's the ones we use!</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-fish.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All products</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-fertilizer.svg" />
+                </div>
+                <h5>Aloe</h5>
+                <p>We use Aloe Vera  as a root stimulant.<br>
+                    Aloe Vera's salysilic acid is a natural root stimulant.<br>
+					The product is a mixture of Aloe Vera juice and water.<br>
+					Find out more in our <a type="text/html" href="../learn/blog">Blog</a>.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">More</a></button>
+                    <button id="app"><a href="#">DIY</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/iot-content.html

@@ -0,0 +1,46 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>IoT</h1>
+        <p>The Raspberry Pi Greenhouse.<br><br>
+        <span>Learn about what's to come!</span></p>
+        <div class="image">
+        </div>
+        </div>
+    <div class="things-container">
+        <div class="strip">
+        <div class="about">
+            <h3>Built and play.</h3>
+            <p>Puzzle together your greenhouse with our out of the box modules or check out our tutorials, get a Pi and do it yourself.<br>
+            Those greenhouses don't spy on you and you can repair and program them yourself. While experimenting both you and them learn.<br><br>
+              They are so awesome, they record how your plants are doing and then act itelligently acording to their needs.<br>
+              Sweet sweet nothing still but we are developing the first modules.
+            <br>
+            #a dummy text</p>
+            <div class="image">
+              <!--add a video of a working iot module-->
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All Modules</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-module.jpg"/>
+                </div>
+                <h5>Go with the flow</h5>
+                <p>This module consists of a humidity sensor, a water pump and a tube.<br><br>
+                   Water is given based on your plants specific needs.<br>
+					Dreaming..here could be projects like this one.<br>
+					Find out how we built it on our <a href="../learn/blog">Blog</a>.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">More</a></button>
+                    <button id="app"><a href="#">DIY</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/join-content.html

@@ -0,0 +1,80 @@
+<div class="page-wrapper">
+	<div class="info">
+		<h1>Join</h1>
+		<p>Join our project .<br><br>
+		<span>Let's get in touch!</span></p>
+		<div class="image">
+			<img type=" image/webp" src="../img/sample-coding-together.jpg">
+		</div>
+		</div>
+	<div class="join-container">
+		<div class="strip">
+		<div class="about">
+			<h3>Want to join us ?</h3>
+			<p>Feel free to get in touch, we are looking forward to meet you and your ideas.<br>
+				  SpiderPi still is in his starting shoes and we can use your help to get him up and running.<br><br>
+				  Are you willing to contribute, learn and create the future of gardening for everyone ?<br><br>
+			<span>We love to hear from you!</span><br>
+			#a dummy text</p>
+			<div class="image">
+					<img type=" image/webp" src="../img/sample-spiderwoman.png">
+			</div>
+		</div>
+	</div>
+	<div class="strip2">
+			<div class="contact-container">
+					<div class="form">
+			<div class="contact-info">
+				<div class="adress-info">
+				<h3>Write Us</h3>
+				<h5>Adress</h5>
+				<p>Cannabinieri Office <br>
+				Some Adress <br><br>
+				<h5>Mail</h5>
+				<p>
+				cannabinieri@info.de
+				 </p>
+				</div>
+				<div class="phone-info">
+					<h3>Call Us</h3>
+					<p>Some Number<br>
+					 </p>
+					</div>
+				<div class="social-info">
+					<h3>Follow Us</h3>
+					<figure>
+					<h5 id="pixelfed">Pixelfed</h5>
+					<a id= "pixelfed-adress" href="#">Cannabinieri_Official</a>
+					<h5 id="peertube">Youtube</h5>
+					<a  id="peertube-adress" href="#">Cannabinieri_Channel</a>
+					</figure>
+				</div>
+			</div>
+				<div class="contact-form">
+					<form>
+						<h3 class="title"> Get in touch</h3>
+						<div class="input-container">
+							<input type="text" name="name" class="input" placeholder="Name" id="username"/>
+						</div>
+						<div class="input-container">
+							<input type="email" name="email" class="input" placeholder="EMail"required id="mail"/>
+						</div>
+						<div class="input-container">
+							<input type="tel" name="phone" class="input" placeholder="Phone Number(optional)" id="phone"/>
+						</div>
+						<div class="input-container">
+							<input type="subject" name="subject" class="input" placeholder="Subject" id="subject" />
+						</div>
+						<div class="input-container textarea">
+							<textarea name="message" class="input" placeholder="Message" id="message" ></textarea>
+						</div>
+						<button class="btn" id="sub_btn">Submit</button>
+					</form>
+				</div>
+				</div>
+				</div>
+			</div>
+		</div>
+		</div>
+	</div>
+</div>

templates/assets/components/main-nav.html

@@ -1,7 +1,10 @@
 <div id="main-bar">
     <div id="logo-container">
-            <a href="/">
-            <img class="logo" type="image/webp" src= "img/Logo.svg">
+        <a href="/">
+                <picture>
+                        <source srcset="../img/Logo.svg" type="image/webp">
+                        <img class="logo" type="image/webp" src= "img/Logo.svg">
+                </picture>
         </a>
     </div>
     <nav class="main-navigation-bar">

templates/assets/components/meet-content.html

@@ -0,0 +1,68 @@
+<div class="page-wrapper">
+		<div class="info">
+        <h1>Meet Us</h1>
+		<p>Do you have questions, comments, thoughts about us and our experiments ?<br><br>
+		<span>Drop us a line or two, we love to hear from you !</span></p>
+		<img  type=" image/webp" src="../img/cheers.svg"/>
+		</div>
+		<div class="contact-container">
+			<div class="form">
+				<div class="contact-info">
+					<div class="adress-info">
+					<h3>Write Us</h3>
+					<h5>Adress</h5>
+					<p>Cannabinieri Office <br>
+					Some Adress <br><br>
+					<h5>Mail</h5>
+					<p>
+					cannabinieri@info.de
+					 </p>
+					</div>
+					<div class="phone-info">
+						<h3>Call Us</h3>
+						<p>Some Number<br>
+						 </p>
+						</div>
+					<div class="social-info">
+						<h3>Follow Us</h3>
+						<figure>
+						<h5 id="pixelfed">Pixelfed</h5>
+						<a id="pixelfed-adress" href="#">Cannabinieri_Official</a>
+						<h5 id="peertube">Youtube</h5>
+						<a id ="peertube-adress"href="#">Cannabinieri_Channel</a>
+					 	</p>
+					</figure>
+					</div>
+				</div>
+					<div class="contact-form">
+						<form>
+							<h3 class="title">Meet Us</h3>
+							<div class="input-container">
+								<input type="text" name="name" class="input" placeholder="Name" id="username"/>
+							</div>
+							<div class="input-container">
+								<input type="email" name="email" class="input" placeholder="EMail"required id="mail"/>
+							</div>
+							<div class="input-container">
+								<input type="tel" name="phone" class="input" placeholder="Phone Number(optional)" id="phone"/>
+							</div>
+							<div class="input-container">
+								<input type="subject" name="subject" class="input" placeholder="Subject" id="subject" />
+							</div>
+							<div class="input-container textarea">
+								<textarea name="message" class="input" placeholder="Message" id="message" ></textarea>
+							</div>
+							<button class="btn" id="sub_btn">Submit</button>
+						</form>
+					</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!--Handle Form Data with Rocket !
+	<script defer src="../js/form.js"></script>
+	<script defer type="text/javascript" src= "../js/axios.min.js"></script>
+	-->
+
+

templates/assets/components/oils-content.html

@@ -0,0 +1,47 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Oils</h1>
+		<p>Our full-spectrum CBD oils<br><br>
+        <span>Discover our first Experiment!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../../img/sample-sauvage.svg"/>
+        </div>
+        </div>
+    <div class="oil-container">
+        <div class="strip">
+        <div class="about">
+            <h3><span>Sauvage</span>, the wild one</h3>
+            <p>Sauvage is french for wild.<br>
+            Our first Experiment is a full-spectrum CBD oil made out of a local strain, grown outdoors under normal consitions and obtained through ethanol extraction .<br>
+           Since our project is about exploring how environmental factors and partnerplants influence a products taste and effect,
+           we found that a product grown organically and manually outdoors by one of our partners would be the perfect base to our journey of exploration.<br><br>
+            <span>Find out all about her and order a sample!</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../../img/sample-oils-background.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All CBD Oils</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../../img/sample-sauvage.svg" />
+                </div>
+                <h5>Sauvage</h5>
+                <p>A Full Spectrum CBD oil from organic grown italian hemp.<br>
+                    The carrier oil is 100% organic hemp oil, ethanol extraction.<br>
+                    % CBD, % THC, flavour, effect.<br>
+                    Natural conditions, nothing done to influence it.<br><br>
+                    <span>Available as a limited sample.</span>
+                </p>
+                <div class="click">
+                    <button><a href=experiments/sauvage.html>About</a></button>
+                    <button id="shop"><a href="#">Try</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/partners-content.html

@@ -0,0 +1,80 @@
+<div class="page-wrapper">
+        <div class="info">
+            <h1>Partners</h1>
+            <p>Who they are and what they do <br>
+            <span> Find out !</span></p>
+            <div class="image">
+               <img type=" image/webp" src="../img/sample-partners.jpg"/>     
+            </div>
+            </div>
+        <div class="post-container">
+            <div class="strip">
+            <div class="about">
+                <h3>The wild ones</h3>
+                <p>Our partner Tommaso gave us the opportunity to bring out our first experiment Sauvage.<br>
+                 He grows organic cannabis outdoors in X for X years because X.<br><br>
+                  This year we arrived in Italy in June, we didn't believe that we'd be able to bring out a product within that first year, Thommaso made it possible.<br><br>
+                  We helped him with the harvest and that was when we decided that his plants will serve our first experiment bacause X.<br>
+                  From Thommaso we can learn a lot about the region we'll be working in, about common disseases and local procedures.<br><br>
+                  <span>Find out more below !</span>
+                <br>
+                #and it goes sthn' like that
+                </p>
+                <div class="image">
+                        <img type=" image/webp" src="../img/sample-tom.jpg"/>
+                </div>
+            </div>
+        </div>
+        <div class="strip2">
+            <div class="products">
+                <h3>All Partners</h3>
+                <div class="partner">
+                    <div class="image">
+                        <img type=" image/webp" src="../img/sample-farm.jpg"/>
+                    </div>
+                    <h5>Tommaso Inc</h5>
+                    <p><span>Organic CBD Farm</span>
+                    <br><br>
+                        His company goal.<br>
+                        Why we work together /how we profit from each other.<br>
+                        #a dummy text #button leads to partners website/social-media etc<br>
+                    </p>
+                    <div class="click">
+                        <button><a href="#">More</a></button>
+                    </div>
+                </div>
+            </div>
+            </div>
+            <div class="strip2">
+                <div class="products">
+                      <h3>Links</h3>
+                      <div class="social">
+                          <div class="tommaso">
+                                  <h5 class="name">Tommaso</h5>
+                        <div class="instagram">
+                            <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/instagram-black.png"></a></button>
+                            <h5 id="account">@Tommaso_Official</h5>
+                        </div>
+                        </div>
+                        <div class="techdude">
+                                <h5 class="name">Tech Dude</h5>
+                        <div class="instagram">
+                                <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/instagram-black.png"></a></button>
+                                <h5 id="account">@TechDude_Official</h5>
+                            </div>
+                        <div class="blog">
+                            <a href="#">TechDude.com</a>
+                        </div>
+                        </div>
+                        <div class="cbdStore">
+                                <h5 class="name" id="name2">Organic CBD Shop</h5>
+                        <div class="blog">
+                                <a href="#">OnlineStore.com</a>
+                            </div>
+                      </div>
+                </div>
+                  </div>
+              </div>
+        </div>
+    </div>
+    

templates/assets/components/permapp-content.html

@@ -0,0 +1,46 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Perm<span>App</span></h1>
+        <p>A map of our ecosystem.<br><br>
+        <span>Try it now!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../img/sample-permapp-screen.png"/>
+        </div>
+        </div>
+    <div class="app-container">
+        <div class="strip">
+        <div class="about">
+            <h3> Let's create a database of our ecosystem!</h3>
+            <p>Our PerMapp is an app that stores all the connections in our ecosystem.<br>
+            Everything around us is connected, every plant affects all other plants and animals and in the end us people.<br>
+          In order to keep utilizing our planets ressources, we need to understand the complex system that definines life and decay .
+          Add relations you found out about, keep experimenting with the ones that are already known, so in the end we got the data neccessary for a sustainable and automated future of farming.<br><br>
+            <span>Let's Create!</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-app.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>Try the App</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/permapp_black.svg" />
+                </div>
+                <h5>Perm<span>App</span></h5>
+                <p>Add and explore the relations of our ecosystem !<br>
+                    The Webapp has already has most of its core functionalities.<br>
+                    The mobile app is currently in developement.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">Web</a></button>
+                    <button id="app"><a href="#">App</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/spiderpi-content.html

@@ -0,0 +1,48 @@
+<div class="page-wrapper">
+       <div class="info">
+           <h1><span>Spider</span>Pi</h1>
+           <p>Our garden hexapod.<br><br>
+           <span>Learn about SpiderPi!</span></p>
+           <div class="image">
+               <img type=" image/webp" src="../img/sample-spiderpi.svg">
+           </div>
+           </div>
+       <div class="spider-container">
+           <div class="strip">
+           <div class="about">
+               <h3>About a Spider</h3>
+               <p>SpiderPi is our garden hexapod, he is aimed to be a garden helper and a walking database of our ecosystem.<br>
+                     Through object detection he will recognize what is happening around him and check a plant for pests and disseases and then execute measures of biodynamic pest- and dissease management.<br><br>
+                     Currently SpiderPi is learning to walk on uneven ground and recognize his surroundings in order to operate within them.<br><br>
+               <span>Be part of the journey !</span><br>
+               #a dummy text</p>
+               <div class="image">
+               <video type="video/mp4" src="../img/sample-video.mp4"></video>
+               <p>video</p>
+               </div>
+           </div>
+       </div>
+       <div class="strip2">
+           <div class="products">
+               <h3>Time-Line</h3>
+               <div class="product">
+                   <div class="image">
+                       <img type=" image/webp" src="../img/sample-camera.jpg"/>
+                   </div>
+                   <h5>Eyes</h5>
+                   <p>Our first challenge is to let SpiderPi detect his surroundings and navigate through them.<br><br>
+                      We replaced his built in camera with a 360 and wrote an object detection program that enables him to navigate through his surroundings and respond to obstacles.<br>
+                       We used the software X, camera X, sensors X, made X changes on the Spider.<br><br>
+                       <span>Stay in touch !</span>
+                       #a dummy text<br>
+                   </p>
+                   <div class="click">
+                       <button><a href="#">Blog</a></button>
+                       <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/pixelfed.svg"></a></button>
+                       <button id="you"><a href="#"><img id="tube" type=" image/webp" src="../img/peertube.svg"></a></button>
+                   </div>
+               </div>
+           </div>
+           </div>
+       </div>
+   </div>

templates/assets/components/whatsthat-content.html

@@ -0,0 +1,59 @@
+<div class="page-wrapper">
+        <div class="info">
+            <h1>What's<br>that<span>?</span></h1>
+            <p>What <span> Permaculture </span> is <br class="mobile">and why we care.<br><br>
+            <span class="mobile">Find out!</span></p>
+            <div class="image">
+                <img type=" image/webp" src="../img/sample-wild.jpg"/>
+            </div>
+            </div>
+        <div class="culture-container">
+            <div class="strip">
+            <div class="about">
+                <h3> The design of a sustainable ecosystem.</h3>
+                <p id="first"> Permaculture is defined through<span id="twelve"><br>12 principles</span>.</p><br>
+                        <ul>
+                                <li><span># </span>Observe and interact</li>
+                                <li><span># </span>Catch and store energy</li>
+                                <li><span># </span>Obtain a yield</li>
+                                <li><span># </span>Apply self-regulation and accept    feedback</li>
+                                <li><span># </span>Use and value renewable services and ressources</li>
+                                <li><span># </span>Produce no waste</li>
+                                <li><span># </span>Design from patterns to details</li>
+                                <li><span># </span>Integrate rather than segregate</li>
+                                <li><span># </span>Use small and slow solutions</li>
+                                <li><span># </span>Use and value diversity</li>
+                                <li><span># </span>Use edges and value the marginal</li>
+                                <li><span># </span>Creatively use and respond to change</li>
+                        </ul>
+                <p id="second">
+                        All those principles are about a optimized use of our limited ressources while creating a sustaining value - a self-sufficient system that takes care of itself. <br>
+
+                        In order to build such a system a lot of information is required and this information is gained with tech, <br> to ultimately reach the goal of an actual automatic garden that takes care of itself by the rules of nature.<br> This can be a longer text. It should include all info we want to share about no waste, renewable energy, fish, herbs and our experiments.<br> When we got the demeter seal we can also mention it here or that we are working on obtaining it now.<br>
+                         This text is about what permaculture is, why it is useful, why and how we use it and how the definition can include robots, maybe no robots here and just what people need to know about us not using plastic, creating a biodynamic farm, working on renewable energy solutions and utilizing partnerplants for our experiments.<br>
+                #smthn' like that</p>
+                <div class="image">
+                <img type=" image/webp" src="../img/plants-in-bags-owned.jpeg"/>
+                </div>
+            </div>
+        </div>
+        <div class="strip2">
+            <div class="products">
+                <h3>Blog</h3>
+                <div class="product">
+                    <div class="image">
+                        <img type=" image/webp" src="../img/sample-post.jpg" />
+                    </div>
+                    <h5>Related post 1</h5>
+                    <p>Short description.<br>
+                        Might be about a specific relation or on some study or one of our experiments.<br>
+                        #a dummy text<br>
+                    </p>
+                    <div class="click">
+                        <button><a href="#">Read</a></button>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>

templates/assets/components/whoweare-content.html

@@ -0,0 +1,102 @@
+<div class="page-wrapper">
+      <div class="info">
+          <h1>About<br><span>Us</span></h1>
+              <p>We grow further.<br><br>
+          <div class="image">
+              <img type=" image/webp" src="../img/sample-about.svg" />
+          </div>
+          </div>
+      <div class="about-container">
+          <div class="strip">
+          <div class="philo">
+              <h3><span>We grow our future</h3>
+              <p>We are working actively on creating a future that is reigned by knowledge about our environment .<br>
+             It is a future that enables us to make use of the full potential of our planet and grow our crops by the principles of nature and with the help of modern technology.<br>
+            We want our projects and products to be seen as packages of knowledge - as an ability to understand how complex and exiting the system around us is.<br>
+             Our goal is to understand our ecosystem and the influence of every relation on a product. We want you to know all we know.<br><br>
+             Collective knowledge, heath and excitement about our environment empowers us to grow further.<br><br>
+              #a dummy text</p>
+              <div class="image">
+              <img id="closeup" type=" image/webp" src="../img/sample-close.jpg"/>
+              </div>
+          </div>
+      </div>
+      <div class="strip2">
+            <div class="philo">
+                  <h3 id="heading2">Working with Nature</h3>
+                  <p>We want to utilize all of natures powers and explore organic and biodynamic solutions for pest and dissease management. By that we aim to obtain the highest quality and quantity of yields by only playing with natures entities.<br>
+                 We are currently aspiring to obtain the Demeteter label which proves that all principlels of biodynamic agriculture are approved .<br>
+                We want to build a self-sufficient system where each plant and each environmental factor profit from each other.
+                All products we use on our plants are products made out of our plants.<br><br>
+                  #a dummy text</p>
+                  <div class="image">
+                  <img id="partners" type=" image/webp" src="../img/sample-biodyn.svg"/>
+                  </div>
+              </div>
+         
+          </div>
+          <div class="strip2">
+            <div class="philo">
+                  <h3>Exploring the full potential of CBD</h3>
+                  <p>The Cannabis plant consisists of more than 120 different cannabinoids which all affect our body and psyche in unique ways.<br>
+                All our experiments are tailored to create exquisit compositions of different tastes and effects, just by manipulating environmental factors and the use of partnerplants.<br>
+                We evaluate the results through advanced technology lab tests, that precicely determine the quantity of different cannabinoids in our experiments. 
+                By lab testing we also find out more about pests and disseases affecting our plants.Through constant reasearch and the collection of data we find organic solutions for their prevention.<br><br>
+                We are experimenting with all available extraction methods and our products ship with a lab test.<br>
+                  #a dummy text</p>
+                  <div class="image">
+                  <img type=" image/webp" src="../img/sample-lab.jpg"/>
+                  </div>
+              </div>
+         
+          </div>
+          <div class="strip2">
+            <div class="philo">
+                  <h3>Automation for the People</h3>
+                  <p>If we talk about automation we mean people automating gardening for themselves, not people being automated.<br>
+                 One of the main engines of this project is to find affordable and comprehensible solutions that enable everyone to have their own organic automated garden everywhere.<br>
+                We believe that many people utilizing our products, growing different plants under different conditions, enables us, all people, to create a huge net of data about our ecosystem that we can use and share and over which we have total control.
+                We want everyone to have access to our projects that is why all of them are documented to be imitated and improved.<br><br>
+                  #a dummy text</p>
+                  <div class="image">
+                  <img id= "helper" type=" image/webp" src="../img/sample-spiderpi-helper.svg"/>
+                  </div>
+              </div>
+         
+          </div>
+          <div class="strip2">
+            <div class="philo">
+                  <h3>Collective Growth</h3>
+                  <p>We choose the business model of a collective for our project.<br>
+                    We did start this business in X 2020, our idea was to start small in order not to have large expenses at the beginning, which enables us to make all busines decisions ourselves.<br>
+                 We want to have total control over what we are doing and make collective decisions without an investor interfering and forcing us to compromise our values.
+                 So our definition of growth is a slow but consitent growth, that lets us step by step realize each of our ideas.<br><br>
+                 We want to share our data and every detail about what we are doing.<br>
+                 We desire to know more, and so do you, so we are taking the first step by deciding to share all we do and doing it all ourselves.<br>
+                  #a dummy text</p>
+                  <div class="image">
+                  <img type=" image/webp" src="../img/sample-collective.jpg"/>
+                  </div>
+              </div>
+          </div>
+          <div class="strip2">
+            <div class="products">
+                  <h3>Social Media</h3>
+                  <div class="social">
+                      <h5>Keep in touch !</h5>
+                    <div class="instagram">
+                        <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/pixelfed.svg"></a></button>
+                        <h5 id="account">@Cannabinieri_Official</h5>
+                    </div>
+                    <div class="youtube">
+                        <button id="you"><a href="#"><img id="tube" type=" image/webp" src="../img/peertube.svg"></a></button>
+                        <h5 id="account">@Cannabinieri_Official</h5>
+                    </div>
+                    <div class="blog">
+                        <button id="blog"><a href="#">Blog</a></button>
+                    </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>

templates/assets/css/automation.css

@@ -0,0 +1,538 @@
+:root {
+    --gradient: linear-gradient(
+        45deg,
+        hsl(160, 51%, 49%), 
+        hsl(160, 51%, 59%), 
+        hsl(160, 51%, 79%),
+        hsl(160, 51%, 89%),
+        #fff
+    );
+}
+
+body {
+    overflow-x: hidden;
+}
+
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+    font-family: 'Lato', sans-serif;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 {
+    color: rgb(0, 255, 170);
+}
+.info p {
+    color: #333;
+}
+
+.info #color {
+    color: rgb(0, 255, 170);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+.about p span {
+    color:rgb(0, 255, 170);
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+.product h5 {
+    color: #333;
+
+}
+
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 65vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 10vh 0 1vh;
+}
+
+.info p {
+    text-align: center;
+    font-family: 'Lato', sans-serif;
+    font-size: 1.25rem;
+    margin-top: 6vh;
+}
+
+.info #color {
+    font-size: 1.5rem;
+    margin-top: 5.5vh
+}
+
+.info h1 {
+    font-size: 2.25rem;
+    padding-top: 10vh;
+    margin-bottom: .5rem;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    width: 37.5vh;
+    height: auto;
+    align-self: center;
+    margin-top: 0;
+}
+
+
+.auto-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: rgb(0, 255, 170);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+}
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.about h3 {
+    font-size: 2rem;
+    line-height: 3.5rem;
+    color:rgb(0, 255, 170);
+    margin: 1rem 0;
+    letter-spacing: .02rem;
+    font-weight: 400;
+}
+
+.about p {
+    margin: 1rem 0;
+    line-height: 4vh;
+}
+
+.about img {
+    width:50vh;
+    height: auto;
+    padding: 1rem .5rem 2rem .5rem;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.5rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 0 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 450;
+    line-height: 4rem;
+    letter-spacing: .05rem;
+}
+
+.products img {
+    width: 30vh;
+    margin: 1rem;
+}
+
+.products h5 {
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    line-height: 3rem;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+    text-align: center;
+}
+
+.products p {
+    text-align: center;
+    margin: .75rem .75rem 4.5vh .75rem;
+    line-height: 3.5vh;
+}
+
+.product p a {
+    color: rgb(62, 190, 147);
+    text-decoration: none;
+}
+
+.product p a:active {
+    opacity: 50%;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem 1rem 5vh 1rem;
+}
+
+.product .image {
+    margin: 1rem 0;
+}
+
+.product .click button {
+    padding: .5rem 1.25rem;
+    background-image: var(--gradient);
+    background-size: 300%;
+    background-position: left;
+    border: none;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    -webkit-text-stroke-width: .01em;
+    -webkit-text-stroke-color: #fff;
+    transition: .6s;
+}
+
+.product .click button a {
+    text-decoration: none;
+    color: white;
+}
+
+.product .click button a:active,
+.product .click button a:focus {
+
+    -webkit-text-stroke-width: .05em;
+    -webkit-text-stroke-color: #eee;
+    filter: blur(.015em) 
+}
+
+#app {
+    margin-left: 6.5vh;
+    text-decoration: none;
+    color: white;
+}
+
+#desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 62.5vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+    }
+
+    .info h1 {
+        grid-column: 1/3;
+        grid-row: 1;
+        font-size: 6rem;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: flex-start;
+        margin-left: 10rem;
+        
+    }
+
+    .info p {
+        grid-column: 1/3;
+        grid-row: 2;
+        font-size: 3.5vh;
+        margin: 0 1rem 1rem 5rem;
+        text-align: left;
+        line-height: 2.25rem;
+        letter-spacing: .5px;
+        justify-self: center;
+        font-weight: 300;
+    }
+
+    .info #color {
+        grid-row: 2;
+        margin: 17.5vh 0 0 15rem;
+        font-size: 4.5vh;
+    }
+
+    .info img {
+        width: 60vh;
+        height: auto;
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        margin-top: 3vh;
+        margin-left: 1vh;
+    }
+
+
+    .auto-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:rgb(0, 255, 170);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding:2.5rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 100vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+    }
+
+    .about h3 {
+        font-size: 2.5rem;
+        line-height: 3rem;
+        color:rgb(0, 255, 170);
+        margin: 5rem 0 2rem 1rem;
+    }
+
+    .about span {
+        color: rgb(0, 255, 170);
+    }
+    
+    .about p {
+        margin: 1rem 0 0 1rem;
+        float: left;
+        font-size: 1.5rem;
+        font-weight: 300;
+        line-height: 4.5vh;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    
+    .about img {
+        max-width: 40vw;
+        height: auto;
+        margin-top: 10vh;
+    }
+
+    .strip2 {
+        padding: 2rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 3rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        font-weight: 400;
+        letter-spacing: .07em;
+        padding-left: 1.5rem;
+    
+    }
+    
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+        font-size: 2rem;
+        font-family:'IBM Plex Sans', sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        line-height: 10vh;
+        letter-spacing: .1em;
+        margin-bottom: .5rem;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .5fr 1fr .5fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        max-height: 100vh;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row:1/3;
+        padding: 3vh;
+        margin: 1rem 0;
+        display: flex;
+        align-items: center;
+        margin: 4rem 0 0 4rem;
+    }
+
+    .product .image  img {
+        width: 50vh;
+    }
+
+    .product h5 span{
+        color: #999;
+    } 
+
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 5rem;
+        font-size: 1.15rem;
+        font-weight: 300;
+        line-height: 4.5vh;;
+    }
+
+    .product #blog-link {
+        color: #999;
+        text-decoration: none;
+    }
+
+    .product #blog-link:hover {
+        color: hsl(160, 100%, 59%);
+        opacity: 50%;
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding: 0 0 2.5rem 0;
+    }
+    
+    .product .click button  {
+        padding: .85rem 2.5rem;
+        background-image: var(--gradient);
+        background-size: 300%;
+        background-position: left;
+        border: none;
+        font-size: 1.5rem;
+        color: white;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        -webkit-text-stroke-width: .01em;
+        -webkit-text-stroke-color: #fff;
+        border-radius: 25px;
+        font-weight: 400;
+        cursor: pointer;
+        transition: .3s;
+        margin-top: 1rem;
+        margin-left: .25rem;
+    }
+
+    .product .click button a {
+        color: white;
+        text-decoration: none;
+    }
+    
+    .product .click button:hover {
+        opacity: 50%;
+        background-color: rgb(0, 255, 170);
+        -webkit-text-stroke-width: .02em;
+        -webkit-text-stroke-color: #333;
+    }
+    
+    #app {
+        margin-left: 12.5vh;
+    }
+
+    #app:hover {
+        opacity: 50%;
+        background-color: red !important;
+    }
+    
+}
+

templates/assets/css/blog.css

@@ -0,0 +1,783 @@
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 span {
+    color: rgb(0, 255, 170);
+}
+
+.info p {
+    color: black;
+    text-align: center;
+
+}
+
+.info p span {
+    color: rgb(0, 255, 170);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+}
+
+.strip h3 {
+    color: #333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+}
+
+.theme h5 {
+  color: black;
+  text-transform: uppercase;
+  align-self: center;
+}
+
+.product .click button  {
+    margin: 0 1rem 0 0 !important;
+
+}
+
+#insta {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#gram {
+    width: 5vh;
+    margin: 0;
+}
+
+#you {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#tube {
+    width: 5vh;
+    margin: 0;
+}
+
+@media (max-width: 1023px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 77.5vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 0 1vh;
+}
+
+.info p {
+    font-size: 3vh;
+    margin: 1rem;
+    text-align: center;
+    font-weight: 300;
+}
+
+.info h1 {
+    font-size: 2.5rem;
+    padding-top: 3rem;
+}
+
+.info h1 span {
+    margin-left: 7vh;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    width: 30vh;
+    height: auto;
+    align-self: center;
+}
+
+
+.blog-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: #333;
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding:2rem 1rem;
+    background-color: white;
+    border-radius: 25px;
+    margin-top: 5vh;
+}
+
+.strip h3 {
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 3rem;
+    color: #333;
+    margin-bottom: 5vh;
+}
+
+.strip #smaller {
+    font-size: 1.7rem;
+}
+
+.grid figure {
+    width: 100%;
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    justify-items: center;
+}
+
+.grid .single {
+    grid-template-rows: repeat(1, 1fr);
+}
+
+.theme {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    min-height: 75vh;
+    box-shadow: 1px 1px 5px 3px #333;
+    margin-bottom: 5vh;
+}
+
+.theme h5 {
+    font-size: 3.5vh;
+}
+
+.theme .downsize {
+    font-size: 3.15vh;
+}
+
+.theme #small {
+    font-size: 1.2rem;
+}
+
+.theme .description {
+    margin: 1rem;
+}
+
+.description p {
+    font-weight: 300;
+    line-height: 4vh;
+    text-align: center;
+}
+
+.theme .click {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 1rem 1rem 1rem;
+}
+
+.theme img {
+    width:40vh;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+}
+
+.theme button {
+    padding: .5rem 1.25rem;
+    border: .02em solid #000;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: ease-in .7s;
+}
+
+.theme button a {
+    text-decoration: none;
+    color: #000;
+}
+
+.theme button:active {
+    background-color: hsl(160, 50%, 80%);
+    }
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.5rem;
+    font-weight: 400;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 1.25rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    width: 25vh;
+    margin: 0 0 1rem 3rem;
+}
+
+.products h5 {
+    color: black;
+    text-shadow: 1.5px 3px rgb(62, 190, 147);
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+}
+
+.products p {
+    text-align: center;
+    margin: .75rem;
+}
+
+.social {
+    display: grid;
+    grid-template-columns: 40% 60%;
+    grid-template-rows: .75fr .5fr .75fr .75fr;
+    align-items: center;
+    box-shadow: 1px 1px 5px 3px #999;
+    padding: 1rem;
+    min-height: 80vh;
+}
+
+.social h5 {
+    grid-column: 1/3;
+    grid-row: 1;
+    justify-self: center;
+    font-weight: 100;
+}
+
+.social .blog {
+    grid-column: 1/3;
+    grid-row: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.social .blog #blog {
+    margin: 0;
+}
+
+.social .instagram {
+    grid-column: 1/3;
+    grid-row: 3;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#gram {
+    width: 13.5vw;
+}
+
+.social .instagram #account {
+    font-size: 2.25vh;
+    cursor: pointer;
+    align-self: center;
+    text-shadow: none;
+    
+}
+
+.social .youtube {
+    grid-column: 1/3;
+    grid-row: 4;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#tube {
+    width: 12.5vw;
+}
+
+
+.social .youtube #account {
+    font-size: 2.25vh;
+    align-self: center;
+    text-shadow: none;
+    cursor: pointer;
+    transition: all ease .7s;
+}
+
+.social .youtube #account:active {
+    filter: blur(.02em);
+}
+
+
+.social button {
+    padding: .5rem 1.25rem;
+    background-color: black;
+    border: none;
+    font-size: 1.25rem;
+    font-family:'Fira Sans', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+}
+
+.social button a {
+    text-decoration: none;
+    color: white;
+}
+
+.social button:active {
+    opacity: 50%;
+    color: rgb(0, 255, 170);
+}
+
+.social #post {
+    width: 40vh;
+}
+
+
+
+
+.desktop {
+    display:none;
+}
+
+#helper {
+    width: 45vh;
+}
+}
+
+@media (min-width:1024px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 63vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6rem;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: flex-start;
+        margin-left: 10rem;
+        
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        font-size: 1.5rem;
+        margin: 0 1rem 1rem 12rem;
+        text-align: left;
+        line-height: 2.25rem;
+        letter-spacing: .5px;
+        font-weight: 300;
+    }
+
+    .info .image {
+        margin-left: 5vh;
+    }
+
+    .info img {
+        width: 45vh;
+        height: auto;
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+    }
+
+
+    .blog-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color: #333;
+        display:flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .strip {
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 90vh;
+        width: 100%;
+        margin-top: 5vh;
+        padding: 2vh 5vw 7.5vh 5vw;
+    }
+
+    .strip h3 {
+        font-size: 3rem;
+        line-height: 3rem;
+        color: #333;
+        margin: 5vh 0;
+        padding-left: 5vh;
+    }
+
+    .strip .grid {
+        display:grid;
+        grid-template-columns: repeat(3,1fr);
+        grid-gap: 5vh;
+        width: 100%;
+    }
+
+    .grid figure {
+        grid-column: 1/5;
+        grid-row: 2;
+        display: grid;
+        grid-template-columns: repeat(3,1fr);
+        justify-content: center;
+        padding: 0 1.5vw;
+    }
+
+    figure .theme {
+        max-width: 80%;
+        margin: 0 .5vw;
+    }
+
+    #shorter {
+        height: 60vh;
+        max-width: 90%;
+    }
+
+    #tech {
+        max-width: 100%;
+    }
+
+    #tutorials {
+        max-width: 100%;
+    }
+
+    .theme {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        box-shadow: 1px 1px 5px 3px #333;
+        width: 40vh;
+        height: 70vh;
+    }
+
+    .theme h5 {
+        font-size: 2.25rem;
+        text-align: center;
+    }
+
+    .theme .description {
+        display: flex;
+        justify-content: center;
+        margin: 1rem;
+    }
+
+    .theme .description p {
+        line-height: 4vh;
+        text-align: center;
+    }
+    
+    .theme .click {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 1rem 1rem 1rem;
+    }
+
+    .theme .image {
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .theme img {
+        max-width: 90%;
+        height: auto;
+        padding: 1rem 0 2rem 0;
+    }
+    
+    .theme button {
+        padding: .55rem 1.25rem;
+        background-color: black;
+        border: none;
+        font-size: 1.25rem;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: .7s;
+    }
+    
+    .theme button a {
+        text-decoration: none;
+        color: white;
+    }
+    
+    .theme button:hover {
+        opacity: 50%;
+        background-color: rgb(62, 190, 147);
+    }
+    
+    .theme h3 {
+        font-size: 2.5rem;
+        line-height: 3rem;
+        color: #333 ;
+        margin: 5rem 0 2rem 1rem;
+    }
+
+    .theme span {
+        color: rgb(0, 255, 170);
+    }
+
+
+    .strip2 {
+        padding: 2rem 2rem 5rem 2rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 2.5rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        padding-left: 5vw;
+    }
+    
+    .products img {
+        width: 45vh;
+        margin-bottom: 3vh;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .social {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr ;
+        grid-template-rows: .5fr .5fr .5fr .5fr;
+        align-items: center;
+        box-shadow: 1px 1px 3px 5px #999;
+        padding-left: 2vw;
+        min-height: 80vh;
+        grid-gap: 2.5vh;
+        justify-items: center;
+    }
+
+   .social figure {
+       grid-column: 1/5;
+       grid-row: 2;
+       display: grid;
+       grid-template-columns: repeat(3,1fr);
+       justify-content: center;
+       padding: 0 1.5vw;
+   }
+
+   .social figure img {
+       display: flex;
+       justify-self: center;
+       max-width: 90%;
+       margin: 0 .5vw;
+   }
+    
+    .social h5 {
+        grid-column: 1/3;
+        grid-row: 1;
+        justify-self: flex-start;
+        font-size: 5vh;
+        font-family:'IBM Plex Sans', sans-serif;
+        font-weight: 200;
+        text-transform: uppercase;
+        padding-left: 5vw;
+    }
+    
+    .social .blog {
+        grid-column: 1/3;
+        grid-row: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .social .blog #blog {
+        margin: 0;
+        width: 20vh;
+        height: 5vh;
+        font-size: 1.75rem;
+    }
+    
+    .social .instagram {
+        grid-column: 1/3;
+        grid-row: 3;
+        display: flex;
+        padding-left: 2vh;
+    }
+    
+    #gram {
+        width: 10vh;
+        margin-right: 5vh;
+        transition: all ease .7s;
+    }
+
+    #gram:hover {
+        filter: opacity(.5);
+    }
+    
+    .social .instagram #account {
+        font-size: 1.75rem;
+        align-self: center;
+        text-shadow: none;
+        cursor: pointer;
+        transition: all ease .7s;
+    }
+
+    .social .instagram #account:hover {
+        filter: blur(.75px);
+        color: hsl(350, 100%, 90%);
+    }
+    
+    .social .youtube {
+        grid-column: 1/3;
+        grid-row: 4;
+        display: flex;
+        padding-left: 2vh;
+    }
+    
+    #tube {
+        width: 10vh;
+        margin-right: 5vh;
+        transition: all ease .7s;
+    }
+
+    #tube:hover {
+        filter: opacity(.5);
+    }
+    
+    
+    .social .youtube #account {
+        font-size: 1.75rem;
+        align-self: center;
+        text-shadow: none;
+        cursor: pointer;
+        transition: all ease .7s;
+    }
+
+    .social .youtube #account:hover {
+        filter: blur(.75px);
+        color: hsl(160, 50%, 70%);
+
+    }
+    
+    
+    .social button {
+        padding: .5rem 1.25rem;
+        background-color: black;
+        border: none;
+        font-size: 1.25rem;
+        font-family:'Fira Sans', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: .3s;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: .5s;
+    }
+    
+    .social button a {
+        text-decoration: none;
+        color: white;
+    }
+    
+    .social button a:active {
+    opacity: 50%;
+    color: rgb(0, 255, 170);
+    }
+    
+    
+}

templates/assets/css/code.css

@@ -0,0 +1,427 @@
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color: rgb(191, 255, 0);
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+
+.info p {
+    color: black;
+    text-align: center;
+
+}
+
+.info p span {
+    color: rgb(191, 255, 0);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+}
+
+.strip h3 {
+    color:rgb(62, 190, 147);
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+}
+
+.theme h5 {
+  color: black;
+  text-transform: uppercase;
+  align-self: center;
+}
+
+.product .click button  {
+    margin: 0 1rem 0 0 !important;
+
+}
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 72.5vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 0 1vh;
+}
+
+.info p {
+    font-size: .95rem;
+    margin: 1rem;
+    text-align: center;
+}
+
+.info h1 {
+    font-size: 2.5rem;
+    padding-top: 12.5vh;
+}
+
+.info h1 span {
+    margin-left: 7vh;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    padding-right: 2vh;
+}
+
+
+.code-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color:rgb(191, 255, 0);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding:2rem 1rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 1vh;
+}
+
+.strip h3 {
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 3rem;
+    margin: 1rem 0;
+}
+
+.strip #smaller {
+    font-size: 1.7rem;
+}
+
+.theme {
+    display: flex;
+    flex-direction: column;
+    min-height: 65vh;
+    box-shadow: 1px 1px 5px 3px #333;
+    margin-bottom: 5vh;
+}
+
+.grid {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+    padding-top: 3vh;
+}
+
+.grid figure {
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+}
+
+.theme h5 {
+    font-size: 1.5rem;
+    margin: 2vh 0;
+}
+
+.theme #downsize {
+    font-size: 1.25rem;
+}
+
+.theme h6 {
+color: rgb(191, 255, 0);
+text-align: center;
+padding: 1vh 0 0 0;
+}
+
+.theme #small {
+    font-size: 1.2rem;
+}
+
+.theme .description {
+    margin: 1rem;
+}
+
+.theme .description {
+    font-weight: 300;
+    line-height: 4vh;
+    text-align: center;
+}
+
+.theme .click {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 1rem 2rem 1rem;
+}
+
+.theme img {
+    max-width: 65vw;
+    height: auto;
+    padding: 1.5rem 0 2rem 0;
+}
+
+.theme button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .02em solid hsl(75, 100%, 50%);
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+}
+
+.theme button a {
+    text-decoration: none;
+    color: #333;
+}
+
+.theme button a:active {
+    opacity: 50%;
+    color: rgb(191, 255, 0);
+    }
+
+.desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 63vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 7rem;
+        display: flex;
+        justify-self: flex-start;
+        margin: 3rem 0 2.5rem 10rem;
+        
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        font-size: 1.5rem;
+        margin: 1rem 1rem 1rem 12rem;
+        text-align: left;
+        line-height: 2.25rem;
+        letter-spacing: .5px;
+    }
+
+    .info .image {
+        margin: 5vh 0 0 5vh;
+    }
+
+    .info img {
+        width: 45vh;
+        height: auto;
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+    }
+
+
+    .code-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color: rgb(191, 255, 0);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 90vh;
+        margin-top: 5vh;
+    }
+
+    .strip h3 {
+        font-size: 3rem;
+        line-height: 3rem;
+        color: #333;
+        margin: 5vh 0;
+        padding-left: 5vh;
+    }
+
+    .strip .grid {
+        display:grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-gap: 5vh;
+        justify-items: center;
+        align-items: center;
+
+    }
+
+    figure {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 1vw;
+        justify-items: center;
+        width: 100%;
+    }
+
+    #shorter {
+        height: 60vh;
+    }
+
+    .theme {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        box-shadow: 1px 1px 5px 3px #333;
+        width: 90%;
+        min-height: 70vh;
+    }
+
+    .theme h5 {
+        font-size: 2.25rem;
+        text-align: center;
+        padding: 3vh 0 .5rem 0;
+    }
+
+    .theme h6 {
+        color: rgb(191, 255, 0);
+        text-align: center;
+        }
+
+    .theme .description {
+        margin: 1rem;
+    }
+    
+    .description p {
+        padding-bottom: 5vh;
+        line-height: 4vh;
+        text-align: center;
+    }
+
+    .theme .click {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 1rem 1rem 1rem;
+    }
+
+    .theme .image {
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .theme img {
+        width: 35vh;
+        height: auto;
+        padding: 1rem 0 0 0;
+    }
+    
+    .theme button {
+        padding: .5rem 1.25rem;
+        border: .02em solid hsl(75, 100%, 50%);
+        font-size: 1.25rem;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        transition: .3s;
+        margin: 1rem 0 1rem .25rem;
+        transition: .5s;
+        width: 12vh;
+        height: 5vh;
+        color: hsl(75, 100%, 50%);
+        background-color: #fff;
+    }
+    
+    .theme button a {
+        text-decoration: none;
+        color: hsl(75, 100%, 50%);
+    }
+    .theme button a:hover {
+        color: #fff;
+    }
+    
+    .theme button:hover {
+        opacity: 50%;
+        color: #fff;
+        background-color: hsl(75, 100%, 50%);
+    }
+    
+
+    .theme h3 {
+        font-size: 2.5rem;
+        line-height: 3rem;
+        color: #333 ;
+        margin: 5rem 0 2rem 1rem;
+    }
+
+    .theme span {
+        color: rgb(0, 255, 170);
+    }
+    
+}

templates/assets/css/diy.css

@@ -0,0 +1,507 @@
+body {
+    overflow-x: hidden;
+ 
+ }
+ .global-wrapper {
+    width: 100%;
+ }
+ 
+ .page-wrapper {
+    display:grid;
+    width: 100%;
+ }
+ 
+ .info h1 {
+    color:magenta;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+ }
+ 
+ .info h1 span{
+    color:magenta;
+ }
+ .info p {
+    color: black;
+ 
+ }
+ 
+ .info p span {
+    color:magenta;
+    font-weight: 600;
+ }
+ 
+ .info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+ }
+ 
+ .about p span {
+    color:magenta;
+    font-weight: 400;
+ }
+ 
+ .product p span{
+    color:rgb(62, 190, 147);
+ } 
+ 
+ .product h5 {
+    color: #333;
+ 
+ }
+ 
+ .product p a {
+    text-decoration: none;
+    color:magenta;
+ }
+ 
+ .product p a:hover {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+ }
+ 
+ .product p a:active {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+ }
+ 
+ 
+ @media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+ 
+   .info {
+    width:100%;
+    height: 62.5vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 10vh 0 1vh;
+ }
+ 
+ .info p {
+    font-size: 3vh;
+    font-weight: 300;
+    margin: 1rem;
+    text-align: center;
+ }
+
+ .info p span {
+    margin-top: 5vh;
+ }
+ 
+ .info h1 {
+    font-size: 15vh;
+ }
+ 
+ .image {
+    display:flex;
+    justify-content: center;
+ }
+ 
+ .info img {
+    width: 35vh;
+    height: auto;
+    align-self: center;
+    margin-top: 0;
+ }
+ 
+ 
+ .things-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color:magenta;
+    display:flex;
+   flex-direction: column;
+ }
+ 
+ .strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding: 1.75rem;
+    background-color: white;
+    border-radius: 25px;
+ }
+ .strip .about {
+    grid-column: 1;
+    grid-row: 1;
+ }
+ 
+ .about h3 {
+    font-size: 1.85rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: magenta;
+    margin: 1rem 0;
+ }
+ 
+ 
+ .about p {
+    font-size: 2.5vh;
+    font-weight: 300;
+    line-height: 4.5vh;
+    margin: 1rem 0;
+ }
+ 
+ .about img {
+    width:40vh;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+ }
+ 
+ .strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+ }
+ 
+ .products h3 {
+    font-size: 1.5rem;
+    font-weight: 400;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 0 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+ }
+ 
+ .product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem .5rem;
+ }
+ 
+ .product .image {
+    margin: 1rem 0;
+ }
+ 
+ .product img {
+   max-width: 60vw;
+}
+
+.product h5 {
+   font-size: 1.25rem;
+   font-family:'IBM Plex Sans', sans-serif;
+   text-transform: uppercase;
+   margin: .5rem 0;
+}
+
+.product p {
+   font-weight: 300;
+   line-height: 4vh;
+   text-align: center;
+   margin: .75rem;
+}
+
+ .product .click {
+    margin: 1rem;
+ }
+ 
+ .product .click button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .02em solid hsl(300, 100%, 50%);
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+ }
+ 
+ .product .click button a {
+    text-decoration: none;
+    color: #333;
+ }
+ 
+ .product .click button:active {
+   opacity: 50%;
+   background-color: magenta;
+ }
+ 
+ #app {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+ }
+ 
+ 
+ #desktop {
+    display:none;
+ }
+ }
+ 
+ @media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+ 
+    .info {
+        width:100%;
+        height: 60vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+    }
+ 
+    .info h1 {
+        grid-column: 1/3;
+        grid-row: 1;
+        font-size: 6.5rem;
+        display: flex;
+        justify-self: flex-start;
+        margin: 0 0 0 25rem;
+        
+    }
+ 
+    .info p {
+        grid-column: 1/3;
+        grid-row: 2;
+        font-size: 1.35rem;
+        margin: 0 1rem 1rem 1rem;
+        text-align: left;
+        line-height: 2.25rem;
+        letter-spacing: .5px;
+        justify-self: center;
+    }
+ 
+    .info p span {
+       margin-left: 6rem;
+    }
+ 
+    .info img {
+        width: 50vh;
+        height: auto;
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        margin-top: 8vh;
+        margin-left: 4vh;
+    }
+ 
+ 
+    .things-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:magenta;
+        display:flex;
+        flex-direction: column;
+    }
+ 
+    .strip {
+        padding:2.5rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        min-height: 80vh;
+        width: 90vh;
+        align-self: center;
+    }
+ 
+    .about {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: .2fr 1fr;
+    }
+ 
+    .about h3 {
+        font-size: 2.5rem;
+        line-height: 3rem;
+        color:magenta;
+        margin: 2rem 0 0 5rem;
+        grid-column: 1/3;
+        display: flex;
+        justify-self: flex-start;
+    }
+ 
+    .about span {
+        color: magenta
+        ;
+    }
+    
+    .about p {
+        margin: 1rem 0 0 1rem;
+        float: left;
+        font-size: 1.35rem;
+        grid-column: 1/2;
+        padding: 2rem 4rem;
+    }
+ 
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+ 
+    
+    .about img {
+        width:55vh;
+        height: auto;
+        margin-top: 10vh;
+    }
+ 
+    .strip2 {
+        padding: 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+        padding-bottom: 8vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 3rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        padding-left: 1.5rem;
+    }
+    
+    
+    .product h5 {
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: 1.5rem 1rem;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .25fr .5fr .25fr;
+        grid-gap: 2rem;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        padding: 4rem 1.5rem;
+    }
+ 
+    .product .image {
+        grid-column: 1;
+        grid-row: 1/4;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .product img {
+      max-width: 40vw;
+  }
+ 
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 4.75vh;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+ 
+    .product h5 span{
+        color: #999;
+    } 
+ 
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 2.5rem;
+        font-size: 1.15rem;
+        line-height: 5vh;
+    }
+ 
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding: 0 0 2.5rem 0;
+    }
+    
+    .product .click button  {
+        padding: .75rem 1.5rem;
+        background-color: #fff;
+        border: .02em solid hsl(300, 100%, 50%);
+        font-size: 1.5rem;
+        color: white;
+        font-family:'Fira Sans', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        transition: .3s;
+        margin-top: 1rem;
+        margin-left: .25rem;
+    }
+ 
+    .product .click button a {
+        color: #333;
+        text-decoration: none;
+        text-transform: uppercase;
+    }
+    
+    .product .click button:hover {
+        opacity: 50%;
+        background-color: magenta;
+    }
+    
+    #app {
+        margin-left: 10vh;
+    }
+    
+ }
+ 
+ 

templates/assets/css/edibles.css

@@ -0,0 +1,501 @@
+body {
+    overflow-x: hidden;
+
+}
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:rgb(191, 255, 0);
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color: rgb(191, 255, 0);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+.about p span {
+    color:rgb(191, 255, 0);
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+.product h5 {
+    color: black;
+    text-shadow: 1.5px 3px rgb(191, 255, 0);
+
+}
+
+@media (max-width:480px) {
+
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 0 1vh;
+    padding-top: 4vh;
+}
+
+.info p {
+    font-size: 2.5vh;
+    font-weight: 300;
+    padding-top: 5vh;
+    text-align: center;
+}
+
+.info h1 {
+    font-size: 8vh;
+    padding-bottom: .5rem;
+    margin: 0;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+    min-height: 45vh;
+}
+
+.info img {
+    min-width: 67.5vw;
+    height: auto;
+    align-self: center;
+    margin-top: 0;
+    transform: rotate(45deg);
+    padding-right: 10vw;
+}
+
+
+.oil-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color:rgb(191, 255, 0);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    display: grid;
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+}
+
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+    grid-template-rows: .5fr 1fr .5fr;
+    align-items: center;
+    justify-items: center;
+}
+
+.about h3 {
+    font-size: 2rem;
+    font-weight: 400;
+    line-height: 3rem;
+    color:rgb(191, 255, 0);
+    text-align: left;
+    padding: 2vh 5vw;
+}
+
+.about p {
+   display:flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   padding: 2vh 2vw;
+   text-align: left;
+   line-height: 4vh;
+   font-weight: 300;
+}
+
+.about p span {
+    padding-top: 2vh;
+    font-size: 3vh;
+}
+
+.about img {
+    width:40vh;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.5rem;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 1.25rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 400;
+}
+
+.products img {
+    max-width: 35vw;;
+    margin: 1rem 0;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 0 1rem 3rem 1rem;
+}
+
+.product h5 {
+    font-size: 2rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 300;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+}
+
+.product p {
+    text-align: center;
+    margin: .75rem;
+    line-height: 4vh;
+    font-weight: 300;
+}
+
+.product .click button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .01em solid hsl(75, 100%, 50%);
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+}
+
+.product .click button a {
+    text-decoration: none;
+    color: #333;
+}
+
+.product .click button a:active {
+opacity: 50%;
+color: hsl(75, 100%, 40%);
+}
+
+#shop {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+}
+
+
+#shop a:active {
+    opacity: 50%;
+}
+
+
+
+#desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6rem;
+        font-weight: 300;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: center;
+        padding-left: 2vw;
+        
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 1.25rem;
+        text-align: left;
+        line-height: 2.25rem;
+        letter-spacing: .5px;
+    }
+
+    .info p span {
+        font-size: 3.5vh;
+        padding-top: 5vh;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+    }
+
+    .info img {
+        min-width: 55vw;
+        height: auto;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        margin-left: 2vw;
+        padding-right: 22.5vw;
+        transform: rotate(10deg);
+    }
+
+
+    .oil-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:rgb(191, 255, 0);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding:2.5rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 90vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+    }
+
+    .about h3 {
+        font-size: 2.5rem;
+        font-weight: 400;
+        line-height: 3rem;
+        color:rgb(191, 255, 0);
+        margin: 5rem 0 2rem 1rem;
+    }
+
+    .about span {
+        color: rgb(191, 255, 0);
+    }
+    
+    .about p {
+        margin: 1rem 0 3rem 1rem;
+        float: left;
+        font-size: 1.5rem;
+        line-height: 5vh;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .about img {
+        max-width: 35vw;
+        height: auto;
+        padding-top: 5.5vh;
+    }
+
+    .strip2 {
+        padding:.75rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 2.5rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        font-weight: 300;
+    }
+    
+    .product h5 {
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .25fr .5fr .25fr;
+        min-height: 60vh;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        margin: 1rem;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row: 1/4;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        padding-left: 3vh;
+        padding-top: 1vh;
+    }
+
+    .product img {
+        max-width: 20vw;
+        margin: 3vh 0 3vh 5vw;
+    }
+
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3rem;
+        font-weight: 300;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 2.5rem;
+        font-size: 1.15rem;
+        line-height: 4.5vh;
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding: 0 0 2.5rem 0;
+    }
+    
+    .product .click button  {
+        padding: .75rem 1.5rem;
+        background-color: #fff;
+        border: .03em solid hsl(75, 100%, 50%);
+        font-size: 1.5rem;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: .3s;
+    }
+
+    .product .click button a {
+        color: #333;
+        text-decoration: none;
+    }
+    
+    .product .click button:hover {
+        opacity: 50%;
+        background-color: rgb(191, 255, 0);
+    }
+    
+    #shop {
+        margin-left: 10vh;
+    }
+    
+}

templates/assets/css/flower.css

@@ -0,0 +1,443 @@
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:magenta;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color: magenta;
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+.about p span {
+    color: magenta;
+    font-weight: 400;
+}
+
+@media (max-width:480px) {
+
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 0 1vh;
+    padding-top: 10vh;
+}
+
+.info p {
+    font-size: 1.1rem;
+    font-weight: 300;
+    line-height: 5.5vh;
+    margin: 1rem;
+    text-align: center;
+}
+
+.info p span {
+    font-size: 1.2rem;
+}
+
+.info h1 {
+    font-size: 3.2rem;
+    font-weight: 300;
+    padding: 0;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+    margin-top: 4vh;
+}
+
+.info img {
+    min-width: 25vh;
+    height: auto;
+    align-self: center;
+    margin: 0;
+}
+
+
+.flower-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: magenta;
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding:.75rem 1rem 2rem 1rem;
+    background-color: white;
+    border-radius: 25px;
+}
+
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.about h3 {
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: magenta;
+    margin: 2rem 0 1.75rem 0;
+}
+
+.about p {
+    font-weight: 300;
+    font-size: 2.5vh;
+    line-height: 4vh;
+    margin: 1rem 0;
+}
+
+.about img {
+    width:30vh;
+    height: auto;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.65rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 0 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    max-height: 30vh;
+    margin-bottom: 3vh;
+}
+
+.products h5 {
+    color: black;
+    font-size: 2rem;
+    font-weight: 300;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    padding-top: 2vh;
+}
+
+.products p {
+    text-align: center;
+    font-size: 1.1rem;
+    font-weight: 300;
+    line-height: 4vh;
+    margin: 1.5rem 1.25rem 1.25rem 1.25rem;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.product .click {
+    margin-top: 1vh;
+}
+
+.product .click button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .01em solid #000;
+    font-size: 1.25rem;
+    color: #333;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .3s;
+}
+
+.product .click button:active {
+    color: rgb(62, 190, 147);
+}
+
+#shop {
+    margin-left: 5vh;
+}
+
+
+#desktop {
+    display:none;
+}
+}
+
+@media(min-width:768px) {
+
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 5rem;
+        font-weight: 300;
+        margin-bottom: 0;
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        font-size: 2.75vh;
+        text-align: center;
+        line-height: 2.25rem;
+        letter-spacing: .5px;
+    }
+
+    .info p span {
+        line-height: 5;
+    }
+
+    .info img {
+        width: 50vh;
+        height: auto;
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        margin-left: 4.5rem;
+    }
+
+
+    .flower-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color: magenta;
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding:2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 90vh;
+        padding-right: 0;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+    }
+
+    .about h3 {
+        font-size: 2.5rem;
+        font-weight: 400;
+        line-height: 3rem;
+        color: magenta;
+        margin: 5rem 0 2rem 1rem;
+    }
+    
+    .about p {
+        margin: 1rem 0;
+        float: left;
+        font-size: 1.5rem;
+        font-weight: 300;
+        line-height: 5vh;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    
+    .about img {
+        width:50vh;
+        height: auto;
+        margin-top: 5vh;
+    }
+
+    .strip2 {
+        padding:.75rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 2.5rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+    }
+    
+    .products img {
+        width: 40vh;
+        margin-bottom: 3vh;
+    }
+    
+    .products h5 {
+        color: black;
+        font-size: 1rem;
+        font-family:'IBM Plex Sans', sans-serif;
+        text-transform: uppercase;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .25fr .5fr .25fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        margin: 1rem;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row:1/3;
+    }
+
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3.25rem;
+        font-weight: 300;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+
+    .product p {
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        font-size: 2.5vh;
+        line-height: 5vh;
+        padding: 0 4rem;
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: flex-start;
+        justify-content: space-between;
+    }
+    
+    .product .click button {
+        padding: .75rem 1.5rem;
+        background-color: #fff;
+        border: .01em solid #000;
+        font-size: 1.5rem;
+        color: #333;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: .3s;
+    }
+    
+    .product .click button:hover {
+        color: rgb(62, 190, 147);
+    }
+    
+    #shop {
+        margin-left: 10vh;
+    }
+    
+    
+
+}
+

templates/assets/css/greenlab.css

@@ -0,0 +1,529 @@
+body {
+    overflow-x: hidden;
+
+}
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 span{
+    color:rgb(191, 255, 0);
+}
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color:rgb(191, 255, 0);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+.about p span {
+    color:rgb(191, 255, 0);
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+.product h5 {
+    color: #333;
+
+}
+
+.product p a {
+    text-decoration: none;
+    color: rgb(191, 255, 0);
+}
+
+.product p a:hover {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+}
+
+.product p a:active {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+}
+
+
+@media (max-width:480px) {
+
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 0 1vh;
+    padding-top: 10vh;
+}
+
+.info p {
+    font-size: 1.1rem;
+    font-weight: 300;
+    margin: 1rem;
+    text-align: center;
+    line-height: 4vh;
+}
+
+.info p span {
+    font-size: 1.2rem;
+}
+
+.info h1 {
+    font-size: 2.8rem;
+    font-weight: 400;
+    padding: 0;
+    margin-bottom: 1.25rem;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+    min-height: 35vh;
+}
+
+.info img {
+    max-width: 70vw;
+    height: auto;
+    align-self: center;
+    margin-top: 0;
+}
+
+
+.green-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color:rgb(191, 255, 0);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding: 2rem .75rem 2rem .75rem;
+    background-color: white;
+    border-radius: 25px;
+}
+
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.about h3 {
+    font-size: 2rem;
+    font-weight: 400;
+    line-height: 3rem;
+    text-align: center;
+    color: rgb(191, 255, 0);
+}
+
+.about p {
+    text-align: center;
+    font-weight: 300;
+    line-height: 4.5vh;
+    margin: 1rem .75rem;
+}
+
+.about p span {
+    font-size: 1.2rem;
+}
+
+.about img {
+    width:40vh;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.75rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 .75rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    max-width: 45vw;
+    margin: 1rem;
+}
+
+.products h5 {
+    font-size: 2rem;
+    font-weight: 300;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+}
+
+.products p {
+    display: flex;
+    flex-direction: column;
+    line-height: 4vh;
+    font-weight: 300;
+    text-align: center;
+    margin: .75rem;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem;
+}
+
+.product .click {
+    margin: 1rem;
+}
+
+.product .click button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .01em solid #000;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+}
+
+.product .click button a {
+    text-decoration: none;
+    color: #333;
+}
+
+.product .click button a:active {
+opacity: 50%;
+color: rgb(0, 255, 170);
+}
+
+#app {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+}
+
+
+#desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: 60% 40%;
+        grid-template-rows: repeat(2, 50%);
+        padding-top: 1.5vh;
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6rem;
+        font-weight: 300;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: center;
+        align-self: center;
+        
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: flex-start;
+        font-size: 1.5rem;
+        text-align: center;
+        line-height: 5rem;
+        letter-spacing: .5px;
+    }
+
+    .info p span {
+        font-size: 1.65rem;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+    }
+
+    .info img {
+        width: 50vh;
+        height: auto;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        margin-top: 8vh;
+    }
+
+
+    .green-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:rgb(191, 255, 0);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding:2.5rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        min-height: 90vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+        padding-bottom: 5vh;
+    }
+
+    .about h3 {
+        font-size: 2.5rem;
+        font-weight: 400;
+        line-height: 3rem;
+        color:rgb(191, 255, 0);
+        margin: 2rem 0 2rem 1rem;
+    }
+
+    .about span {
+        color: rgb(191, 255, 0)
+        ;
+    }
+    
+    .about p {
+        margin: 1rem 0 0 1rem;
+        float: left;
+        font-size: 1.5rem;
+        line-height: 5.25vh;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    
+    .about img {
+        max-width: 35vw;
+        height: auto;
+        margin-top: 10vh;
+    }
+
+    .strip2 {
+        padding: 2rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+        padding-bottom: 8vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        letter-spacing: .1em;
+        color: rgb(62, 190, 147);
+        margin: 3rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        padding-left: 1.5rem;
+    }
+    
+    .products img {
+        width: 50vh;
+    }
+    
+    .product h5 {
+        font-size: 1.5rem;
+        font-family:'IBM Plex Sans', sans-serif;
+        text-transform: uppercase;
+        margin-bottom: .5rem;
+        padding-top: 4.5vh;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .25fr .5fr .25fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        padding: 2vh 1vw 5vh 1vw;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row:1/4;
+        padding: 3vh 3vw;
+        margin: 1rem 0;
+        display: flex;
+        align-items: center;
+        border-right: .1em solid #999;
+    }
+
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3rem;
+        font-weight: 300;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+
+    .product h5 span{
+        color: #999;
+    } 
+
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        line-height: 4vh;
+        padding: 0 2.5rem;
+        font-size: 1.15rem;
+    }
+
+    .product p a {
+        color: #999;
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding: 0 0 2.5rem 0;
+    }
+    
+    .product .click button  {
+        padding: .75rem 1.5rem;
+        background-color: #fff;
+        border: .01em solid #000;
+        font-size: 1.5rem;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: .3s;
+    }
+
+    .product .click button a {
+        color: #333;
+        text-decoration: none;
+    }
+    
+    .product .click button:hover {
+        opacity: 50%;
+        background-color: rgb(0, 255, 170);
+    }
+    
+    #app {
+        margin-left: 10vh;
+    }
+
+    #app:hover {
+        opacity: 50%;
+        background-color: red !important;
+    }
+    
+}
+

templates/assets/css/iot.css

@@ -0,0 +1,526 @@
+body {
+   overflow-x: hidden;
+
+}
+.global-wrapper {
+   width: 100%;
+}
+
+.page-wrapper {
+   display:grid;
+   width: 100%;
+}
+
+.info h1 {
+   color:rgb(191, 255, 0);
+   font-family:'IBM Plex Sans', sans-serif;
+   text-transform: uppercase;
+   justify-self: center;
+   align-self: center;
+   padding-top: 2.5rem;
+   margin-bottom: 1.5rem;
+}
+
+.info h1 span{
+   color:rgb(191, 255, 0);
+}
+.info p {
+   color: black;
+
+}
+
+.info p span {
+   color:rgb(191, 255, 0);
+   font-weight: 600;
+}
+
+.info img {
+   width: 25vh;
+   height: auto;
+   align-self: center;
+   margin-top: 5vh;
+}
+
+.about p span {
+   color:rgb(191, 255, 0);
+   font-weight: 400;
+}
+
+.product p span{
+   color:rgb(62, 190, 147);
+} 
+
+.product h5 {
+   color: #333;
+
+}
+
+.product p a {
+   text-decoration: none;
+   color: rgb(191, 255, 0);
+}
+
+.product p a:hover {
+   opacity: 50%;
+   color:rgb(62, 190, 147)
+}
+
+.product p a:active {
+   opacity: 50%;
+   color:rgb(62, 190, 147)
+}
+
+
+@media (max-width:480px) {
+
+  .page-wrapper {
+   grid-template-columns: 100%;
+   grid-template-rows: auto auto;
+   grid-template-areas:
+   "info"
+   "page-content";
+   width: 100%;
+  }
+
+  .info {
+   width:100%;
+   height: 75vh;
+   grid-area: info;
+   display: flex;
+   flex-direction: column;
+   padding-top: 13.5vh;
+}
+
+.info p {
+   font-size: .95rem;
+   font-weight: 300;
+   line-height: 5.5vh;
+   margin: 1rem;
+   text-align: center;
+}
+
+.info p span {
+   font-size: 1.15rem;
+}
+
+.info h1 {
+   font-size: 4rem;
+   font-weight: 300;
+   padding: 0;
+}
+
+.image {
+   display:flex;
+   justify-content: center;
+}
+
+.info img {
+   width: 35vh;
+   height: auto;
+   align-self: center;
+   margin-top: 0;
+}
+
+
+.things-container {
+   width: 100%;
+   grid-area: page-content;
+   padding: 1rem;
+   padding-top: 1.5rem;
+   position: relative;
+   width: 100%;
+   min-height: 100vh;
+   overflow: hidden;
+   background-color:rgb(191, 255, 0);
+   display:flex;
+  flex-direction: column;
+}
+
+.strip {
+   display: grid;
+   height: auto;
+   grid-template-columns: 1fr;
+   grid-template-rows: 1fr;
+   justify-items: center;
+   padding:1rem;
+   background-color: white;
+   border-radius: 25px;
+}
+.strip .about {
+   grid-column: 1;
+   grid-row: 1;
+}
+
+.about h3 {
+   font-size: 2rem;
+   font-weight: 300;
+   text-align: center;
+   line-height: 3rem;
+   color: rgb(191, 255, 0);
+   margin: 2rem 1rem;
+}
+
+
+.about p {
+   font-weight: 300;
+   line-height: 5vh;
+   text-align: center;
+   margin: 1rem .7rem;
+}
+
+.about img {
+   width:40vh;
+   height: auto;
+   padding: 1rem 0 2rem 0;
+}
+
+.strip2 {
+   padding:.75rem;
+   background-color: white;
+   border-radius: 25px;
+   z-index: 10000;
+   margin-top: 3vh;
+   min-height: 90vh;
+}
+
+.products h3 {
+   font-size: 1.5rem;
+   font-weight: 300;
+   line-height: 3rem;
+   color: rgb(62, 190, 147);
+   margin: 1rem 0 0 1.5rem;
+   text-transform: uppercase;
+   font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+   max-width: 60vw;
+   margin: 1rem;
+}
+
+.products h5 {
+   font-size: 1.5rem;
+   font-family:'IBM Plex Sans', sans-serif;
+   font-weight: 300;
+   text-transform: uppercase;
+   margin-bottom: .5rem;
+}
+
+.products p {
+   font-weight: 300;
+   line-height: 3.5vh;
+   text-align: center;
+   margin: .75rem;
+}
+
+.products p a {
+   color: #999;
+}
+
+.products p a:active {
+   color: hsl(75, 100%, 60%);
+}
+
+.product {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   box-shadow: 1px 1px 1px 1px #999;
+   border-radius: 25px;
+   padding: 1rem;
+}
+
+.product .image {
+   margin: 1rem 0;
+}
+
+.product .click {
+   margin: 1rem;
+}
+
+.product .click button {
+   padding: .5rem 1.25rem;
+   background-color: #fff;
+   border: .01em solid #000;
+   font-size: 1.25rem;
+   font-family:'Lato', sans-serif;
+   line-height: 1rem;
+   border-radius: 25px;
+   font-weight:300;
+   cursor: pointer;
+   margin-top: 1rem;
+   margin-left: .25rem;
+   transition: .5s;
+}
+
+.product .click button a {
+   text-decoration: none;
+   color: #333;
+}
+
+.product .click button:active {
+   opacity: 50%;
+   background-color: rgb(191, 255, 0);
+}
+
+#app {
+   margin-left: 5vh;
+   text-decoration: none;
+   color: white;
+}
+
+
+#desktop {
+   display:none;
+}
+}
+
+@media (min-width:768px){
+ 
+   .page-wrapper {
+       grid-template-columns: 100%;
+       grid-template-rows: auto auto;
+       grid-template-areas:
+       "info"
+       "page-content";
+       width: 100%;
+   }
+
+   .info {
+       width:100%;
+       height: 60vh;
+       grid-area: info;
+       display: grid;
+       grid-template-columns: repeat(2, 50%);
+       grid-template-rows: repeat(2, 50%);
+       padding-top: 1.5vh;
+   }
+
+   .info h1 {
+       grid-column: 1/2;
+       grid-row: 1;
+       font-size: 6.5rem;
+       font-weight: 300;
+       display: flex;
+       justify-self: center;
+       margin: 0;
+       padding-top: 5vh;
+   }
+
+   .info p {
+       grid-column: 1/3;
+       grid-row: 2;
+       display: flex;
+       flex-direction: column;
+       justify-content: flex-start;
+       align-items: center;
+       font-size: 1.35rem;
+       margin: 0 1rem 1rem 1rem;
+       text-align: left;
+       line-height: 6rem;
+       letter-spacing: .5px;
+       justify-self: center;
+       padding-right: 20vw;
+   }
+
+   .info p span {
+      font-size: 1.5rem;
+      margin-left: 15vw;
+   }
+
+   .info img {
+       width: 50vh;
+       height: auto;
+       grid-column: 2;
+       grid-row: 1/3;
+       display:flex;
+       justify-self: center;
+       align-self: center;
+       margin-top: 8vh;
+       margin-left: 4vh;
+   }
+
+   .things-container {
+       width: 100%;
+       grid-area: page-content;
+       padding:2rem;
+       overflow: hidden;
+       background-color:rgb(191, 255, 0);
+       display:flex;
+       flex-direction: column;
+   }
+
+   .strip {
+       padding:2.5rem 0 0 2.5rem;
+       background-color: white;
+       border-radius: 25px;
+       min-height: 80vh;
+       width: 90vh;
+       align-self: center;
+   }
+
+   .about {
+       display: grid;
+       grid-template-columns: 1fr;
+       grid-template-rows: .2fr 1fr;
+       padding-bottom: 2vh;
+   }
+
+   .about h3 {
+       font-size: 2.5rem;
+       font-weight: 400;
+       line-height: 3rem;
+       color:rgb(191, 255, 0);
+       margin: 2rem 0 0 5rem;
+       grid-column: 1/3;
+       display: flex;
+       justify-self: flex-start;
+   }
+
+   .about span {
+       color: rgb(191, 255, 0)
+       ;
+   }
+   
+   .about p {
+       margin: 1rem 0 0 1rem;
+       float: left;
+       font-size: 1.5rem;
+       grid-column: 1/2;
+       line-height: 5vh;
+       padding: 2rem 4rem;
+   }
+
+   .about .image {
+       grid-column: 2;
+       grid-row:1/3;
+       display:flex;
+       justify-content: center;
+       align-items: center;
+   }
+
+   
+   .about img {
+       width:55vh;
+       height: auto;
+       margin-top: 10vh;
+   }
+
+   .strip2 {
+       padding: 2rem;
+       background-color: white;
+       border-radius: 25px;
+       z-index: 10000;
+       margin-top: 3vh;
+       min-height: 90vh;
+       padding-bottom: 8vh;
+   }
+   
+   .products h3 {
+       font-size: 2.5rem;
+       font-weight: 300;
+       line-height: 3rem;
+       color: rgb(62, 190, 147);
+       margin: 3rem 0 3rem 1.5rem;
+       text-transform: uppercase;
+       font-family:'IBM Plex Sans', sans-serif;
+       padding-left: 1.5rem;
+   }
+   
+   .products img {
+       width: 50vh;
+   }
+   
+   .product h5 {
+   font-size: 1.5rem;
+   font-family:'IBM Plex Sans', sans-serif;
+   text-transform: uppercase;
+   margin-bottom: 1.5rem 1rem;
+   }
+   
+   .products p {
+       text-align: center;
+       margin: 1rem;
+   }
+   
+   .product {
+       display: grid;
+       grid-template-columns: .25fr 1fr;
+       grid-template-rows: .25fr .5fr .25fr;
+       box-shadow: 3px 3px 3px 3px #eee;
+       border-radius: 25px;
+       padding: 4rem .5rem;
+   }
+
+   .product .image {
+       grid-column: 1;
+       grid-row: 1/4;
+       padding: 3vh 2vw;
+       display: flex;
+       align-items: center;
+   }
+
+   .product h5 {
+       grid-column: 2;
+       grid-row: 1;
+       font-size: 2.65rem;
+       font-weight: 300;
+       text-align: center;
+   }
+
+   .product h5 span{
+       color: #999;
+   } 
+
+   .product p {
+       display:flex;
+       flex-direction: column;
+       justify-self: center;
+       align-self: center;
+       grid-column: 2;
+       grid-row: 2;
+       padding: 0 2.5rem;
+       font-size: 1.15rem;
+       line-height: 5vh;
+   }
+
+   .product .click {
+       grid-column: 2;
+       grid-row: 3;
+       display:flex;
+       justify-self: center;
+       align-self: center;
+       justify-content: space-between;
+   }
+   
+   .product .click button  {
+       padding: .75rem 1.5rem;
+       background-color: #fff;
+       border: .01em solid #000;
+       font-size: 1.5rem;
+       font-family:'Lato', sans-serif;
+       line-height: 1rem;
+       border-radius: 25px;
+       font-weight: 300;
+       cursor: pointer;
+       margin-top: 1rem;
+       margin-left: .25rem;
+       transition: .3s;
+   }
+
+   .product .click button a {
+       color: #333;
+       text-decoration: none;
+   }
+   
+   .product .click button:hover {
+       opacity: 50%;
+       background-color: rgb(191, 255, 0);
+   }
+   
+   #app {
+       margin-left: 10vh;
+   }
+   
+}
+

templates/assets/css/join.css

@@ -0,0 +1,724 @@
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+} 
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 span {
+    color:rgb(0, 255, 170);
+}
+
+
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color: rgb(62, 190, 147);
+    font-weight: 400;
+}
+
+
+.about p span {
+    color:rgb(62, 190, 147);
+    font-weight: 400;
+}
+
+.contact-container {
+    position: relative;
+    width: 100%;
+    min-height: 90vh;
+    padding:2rem;
+    overflow: hidden;
+    background-color: transparent;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    margin: 0 1vh;
+    padding-top: 6vh;
+}
+
+.info p {
+    font-size: 1.35rem;
+    font-weight: 300;
+    color: #333;
+    margin: 1rem;
+    text-align: center;
+    margin-top: .5rem;
+}
+
+.info h1 {
+    font-size: 3rem;
+    font-weight: 300;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    width: 40vh;
+    height: auto;
+    align-self: center;
+    margin-top: 2rem;
+}  
+
+.join-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: rgb(62, 190, 147);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+}
+
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.about h3 {
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 3rem;
+    text-align: center;
+    color:rgb(62, 190, 147);
+    margin: 2rem 0 1rem 0;
+}
+
+
+.about p {
+    font-weight: 300;
+    line-height: 4vh;
+    text-align: center;
+    margin: 1.5rem 0 1rem 0;
+}
+
+.about img {
+    width: 45vh;
+    height: auto;
+    padding: 1rem .5rem 2rem .5rem;
+    border: none;
+    box-shadow: none;
+}
+
+.strip2 {
+    padding: 0;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+form .btn {
+    padding: .75rem 1.5rem;
+    background-color: #000;
+    border: none;
+    font-size: 1.5rem;
+    color: white;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: ease.5s;
+}
+
+.btn:active{
+    color:rgb(0, 255, 170);
+    opacity: 50%;
+}
+
+.adress-info {
+    color: white;
+    margin-bottom: 2rem;
+}
+
+
+.adress-info h3 {
+    color: rgb(62, 190, 147);
+    font-size: 1.5rem;
+    font-weight: 300;
+    padding: 2vh 0 3vh 0;
+}
+
+.phone-info {
+    color: white;
+    margin-bottom: 2rem;
+}
+
+.phone-info h3 {
+    color: rgb(62, 190, 147);
+    font-size: 1.5rem;
+}
+
+.social-info {
+    color: white;
+    margin-bottom: 2rem;
+}
+
+.social-info h3 {
+    color: rgb(62, 190, 147);
+    font-size: 1.5rem;
+}
+
+.social-info h5 {
+    color: white;
+    font-size: 1rem;
+    margin: 2rem 0 .5rem 0 ;
+}
+
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 66vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+        padding-top: 6vh;
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6rem;
+        font-weight: 300;
+        font-family:'IBM Plex Sans', sans-serif;
+        text-transform: uppercase;
+        color:rgb(62, 190, 147);
+        margin-bottom: 0;
+        display: flex;
+        justify-self: center;
+        align-self: center;
+        margin-left: 0;
+        padding-top: 0;
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        font-size: 1.45rem;
+        margin: 0;
+        text-align: left;
+        line-height: 2.5rem;
+        letter-spacing: .5px;
+        justify-self: center;
+    }
+
+    .info p span {
+        color: rgb(62, 190, 147);
+        font-weight: 600;
+        font-size: 1.5rem;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+        display: flex;
+        justify-content: center;
+        padding-right: 7.5vw
+    }
+
+    .info img {
+        max-width: 35vw;
+        height: auto;
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+    }
+
+    .join-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:rgb(62, 190, 147);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding:2.5rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        min-height: 90vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+        padding: 3vh .5vw 1vh .5vw;
+    }
+
+    .about h3 {
+        display: flex;
+        align-items: center;
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color:rgb(62, 190, 147);
+    }
+
+    .about p span {
+        font-size: 1.65rem;
+        color: rgb(62, 190, 147);
+    }
+
+    .about p {
+        margin: 1rem 0 0 1rem;
+        float: left;
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .about img {
+        max-width:35vw;
+        height: auto;
+        margin-top: 30vh;
+    }
+
+    .strip2 {
+        padding: 0;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+
+    .contact-container {
+        width: 100%;
+        height: 100vh;
+        grid-area: page-content;
+        padding:2rem;
+        background-color:transparent;
+        overflow: hidden;
+    }
+    
+    form .btn {
+        padding: .75rem 1.5rem;
+        background-color: #000;
+        border: none;
+        font-size: 1.5rem;
+        color: white;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: ease.5s;
+    }
+    
+    .btn:hover{
+        opacity: 50%;
+    }
+    .btn:active{
+        background-color:rgb(0, 255, 170);
+        opacity: 50%;
+    }
+    
+    .adress-info {
+        color: white;
+        margin-bottom: 2rem;
+    }
+
+    .adress-info h3 {
+        color: hsl(160, 49%, 60%);
+        font-size: 1.5rem;
+        font-weight: 300;
+        padding: 1vh 1vw 4vh 1vw;
+    }
+    
+    .adress-info h5 {
+        color: #eee;
+        font-size: 1.15rem;
+        font-weight: 300;
+        letter-spacing: .115em;
+        text-transform: uppercase;
+        padding: 1vh 0 1vh 1.5vh;
+    }
+
+    .adress-info p {
+        font-size: 1.15rem;
+        line-height: 4vh;
+        padding: 1vh 0 1vh 1vw;
+    }
+
+    .phone-info {
+        color: white;
+        margin-bottom: 2rem;
+    }
+    
+    .phone-info h3 {
+        color: hsl(160, 49%, 60%);
+        font-size: 1.5rem;
+        font-weight: 300;
+        padding: 1vh 1vw 4vh 1vw;
+    }
+
+    .phone-info p {
+        font-size: 1.15rem;
+        line-height: 4vh;
+        padding: 1vh 0 1vh 1vw;
+    }
+    
+    .social-info {
+        color: white;
+        margin-bottom: 2rem;
+    }
+    
+    .social-info h3 {
+        color: hsl(160, 49%, 60%);
+        font-size: 1.5rem;
+        font-weight: 300;
+        padding: 1vh 1vw 4vh 1vw;
+    }
+
+    .social-info figure {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+    }
+
+    figure #pixelfed {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    figure #pixelfed-adress {
+        grid-column: 1;
+        grid-row: 2;
+    }
+
+    figure #peertube {
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    figure #peertube-adress {
+        grid-column: 2;
+        grid-row: 2;
+    }
+    
+    .social-info h5 {
+        color: #eee;
+        font-size: 1.05rem;
+        font-weight: 300;
+        letter-spacing: .115em;
+        text-transform: uppercase;
+        padding: 1vh 0 1vh 1.5vh;
+    }
+
+    .social-info a {
+        text-decoration: none;
+        color: #eee;
+        padding-top: 1vh;
+        transition: .5s;
+    }
+    
+    .social-info a:hover {
+        color: hsl(160, 50%, 70%);
+    }
+}
+
+.contact-container .form {
+    width: 100%;
+    background-color: white;
+    border-radius: 15px;
+    box-shadow:  0 0 20px 1px grey;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    z-index: 10000;
+    overflow: hidden;
+    min-height: 95vh;
+}
+
+.contact-info {
+    background-color:black;
+}
+
+.contact-form {
+    background-color: white;
+    position: relative;
+}
+
+form{
+    padding: 2.25rem;
+    z-index:10;
+    overflow: hidden;
+    position: relative;
+}
+
+form h3 {
+    color: rgb(62, 190, 147);
+    font-weight: 200;
+    font-size: 2.5rem;
+    line-height: 5rem;
+    margin-bottom: 1rem;
+}
+
+form .input-container {
+    position: relative;
+    margin: 1rem 0;
+}
+
+.input-container .input {
+    width: 100%;
+    outline: none;
+    border: .01em solid rgb(62, 190, 147);
+    box-shadow: .1em .1em .1em .01em hsl(160, 50%, 70%);
+    background-color: hsl(160, 50%, 50%);
+    padding: 1rem 1rem;
+    color: #333;
+    font-weight: 400;
+    font-family:'Lato', sans-serif;
+    font-size: 1.5rem;
+    letter-spacing: .1em;
+    transition: .5s;
+}
+
+.input-container.textarea .input {
+   padding: 2rem 2rem;
+   resize: none;
+   overflow-y: auto;
+}
+
+::placeholder {
+    top: 50%;
+    font-size: 1.5rem;
+    color:white;
+    font-weight: 600;
+    pointer-events: none;
+    transition: .5s;
+    opacity: 90%;
+}
+
+
+
+.contact-info {
+    padding: 2.5rem 2.5rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.info p {
+    color: black;
+
+}
+
+
+@media (max-width: 480px){
+
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+
+    .contact-container {
+        width: 100%;
+        grid-area: page-content;
+        padding: 1rem;
+        padding-top: 1.5rem;
+    }
+
+    .contact-container .form {
+        height: auto;
+        grid-template-columns: 1fr;
+        grid-template-rows: .6fr 1fr;
+    }
+    .contact-info {
+        grid-row: 2;
+    }
+
+    .adress-info h5 {
+        color: #eee;
+        font-size: 1.15rem;
+        font-weight: 300;
+        letter-spacing: .115em;
+        text-transform: uppercase;
+        padding: 5vh 0 0 0;
+    }
+
+    .adress-info p {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 1.05rem;
+        font-weight: 300;
+        line-height: 5vh;
+        letter-spacing: 0.02em;
+        padding: 2vh 0 1vh 1vw;
+    }
+
+
+.phone-info h3 {
+    color: rgb(62, 190, 147);
+    font-size: 1.5rem;
+    font-weight: 300;
+    padding: 2vh 0 3vh 0;
+}
+
+.phone-info p {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 1.05rem;
+    font-weight: 300;
+    line-height: 5vh;
+    letter-spacing: 0.02em;
+    padding: 0 0 1vh 0;
+}
+
+.social-info h3 {
+    color: rgb(62, 190, 147);
+    font-size: 1.5rem;
+    font-weight: 300;
+    padding: 1.5vh 0 0 0;
+}
+
+.social-info figure {
+    display: flex;
+    flex-direction: column;
+    
+}
+
+figure h5 {
+    color: #eee;
+    font-size: 1.15rem;
+    font-weight: 300;
+    letter-spacing: .115em;
+    text-transform: uppercase;
+    padding: 5vh 0 0 0;
+    margin: 1vh 0;
+}
+
+figure a {
+    color: #eee;
+    font-size: 1.05rem;
+    font-weight: 300;
+    text-decoration: none;
+    margin: 1vh 0;
+    transition: .5s all ease;
+}
+
+figure a:active {
+    color: hsl(160, 49%, 80%);
+    filter: blur(.05em);
+}
+    .contact-form {
+        grid-row: 1;
+        margin-top: 2rem;
+    }
+    form {
+        padding: .75rem .65rem 1.5rem .75rem;
+    }
+
+    form h3 {
+        font-size: 2rem;
+        line-height: 4rem;
+    }
+
+    form .input-container {
+        margin: 1.2rem 0;
+    }
+
+    .input-container .input{
+        padding: .5rem .5rem;
+        font-size: 1.25rem;
+    }
+
+    #phone {
+        display: none;
+    }
+
+}

templates/assets/css/meet.css

@@ -0,0 +1,474 @@
+:root {
+    --space : 5px;
+}
+
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.contact-container {
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    padding:2rem;
+    overflow: hidden;
+    background-color: rgb(0, 255, 170);
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.contact-container .form {
+    width: 100%;
+    background-color: white;
+    border-radius: 15px;
+    box-shadow:  0 0 20px 1px grey;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    overflow: hidden;
+    min-height: 95vh;
+}
+
+.contact-info {
+    background-color:black;
+}
+
+.contact-form {
+    background-color: white;
+    position: relative;
+}
+
+form{
+    padding: 2.25rem;
+    overflow: hidden;
+    position: relative;
+}
+
+form h3{
+    color: rgb(62, 190, 147);
+    font-weight: 200;
+    font-size: 3rem;
+    line-height: 5rem;
+    margin: 1rem 0 2rem 0;
+}
+
+form .input-container {
+    position: relative;
+    margin: 1rem 0;
+}
+
+.input-container .input {
+    width: 100%;
+    outline: none;
+    border: .01em solid rgb(62, 190, 147);
+    box-shadow: .1em .1em .1em .01em hsl(160, 50%, 70%);
+    background-color: hsl(160, 50%, 50%);
+    padding: 1rem 1rem;
+    color: #333;
+    font-weight: 400;
+    font-family:'Lato', sans-serif;
+    font-size: 1.5rem;
+    letter-spacing: .1em;
+    transition: .5s;
+}
+
+.input-container.textarea .input {
+   padding: 2rem 2rem;
+   resize: none;
+   overflow-y: auto;
+}
+
+::placeholder {
+    top: 50%;
+    font-size: 1.5rem;
+    color:white;
+    font-weight: 600;
+    pointer-events: none;
+    transition: .5s;
+    opacity: 90%;
+}
+
+form .btn {
+    padding: .75rem 1.5rem;
+    background-color: #000;
+    border: none;
+    font-size: 1.5rem;
+    color: white;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: ease.5s;
+}
+
+ form .btn:hover, .btn:active{
+    background-color: hsl(160, 49%, 60%);
+}
+
+.contact-info {
+    padding: 2.5rem 5rem 3rem 5rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.adress-info {
+    color: white;
+    margin-bottom: 2rem;
+
+}
+
+.adress-info h3 {
+    color: hsl(160, 49%, 60%);
+    font-size: 2rem;
+    font-weight: 300;
+    padding: 1vh 1vw 4vh 1vw;
+}
+
+.adress-info h5 {
+    color: #eee;
+    font-size: 1.15rem;
+    font-weight: 300;
+    letter-spacing: .115em;
+    text-transform: uppercase;
+    padding: 1vh 0 1vh 1.5vh;
+}
+
+.adress-info p {
+    font-size: 1.15rem;
+    line-height: 4vh;
+    padding: 1vh 0 1vh 1vw;
+}
+
+.phone-info {
+    color:white;
+}
+
+.phone-info h3 {
+    color: hsl(160, 49%, 60%);
+    font-size: 2rem;
+    font-weight: 300;
+    padding: 4vh 1vw 2vh 1vw;
+}
+
+.phone-info p {
+    font-size: 1.15rem;
+    line-height: 4vh;
+    padding: 1vh 0 1vh 1vw;
+}
+
+.social-info {
+    color: white;
+}
+
+.social-info figure {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-gap: 0 5vw;
+}
+
+figure #pixelfed {
+    grid-column: 1;
+    grid-row: 1;
+    display: flex;
+    align-self: center;
+}
+
+figure #pixelfed-adress {
+    grid-column: 1;
+    grid-row: 2;
+    display: flex;
+    align-self: flex-end;
+}
+
+figure #peertube {
+    grid-column: 2;
+    grid-row: 1;
+    display: flex;
+    align-self: center;
+}
+
+figure #peertube-adress {
+    grid-column: 2;
+    grid-row: 2;
+    display: flex;
+    align-self: flex-end;
+}
+
+.social-info h3 {
+    color: hsl(160, 49%, 60%);
+    font-size: 2rem;
+    font-weight: 300;
+    padding: 4vh 1vw 2vh 1vw;
+}
+
+.social-info h5 {
+    color: #eee;
+    font-size: 1.05rem;
+    font-weight: 300;
+    letter-spacing: .115em;
+    text-transform: uppercase;
+    padding: 1vh 0 1vh 1.5vh;
+}
+
+.social-info a {
+    text-decoration: none;
+    color: #eee;
+    padding-top: 1vh;
+    transition: .5s;
+}
+
+.social-info a:hover {
+    color: hsl(160, 49%, 60%);
+}
+
+.info h1 {
+    color:rgb(62, 190, 147);
+    font-size: 3rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 300;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    margin-bottom: 1.5rem;
+}
+
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color: rgb(62, 190, 147);
+    font-weight: 500;
+}
+
+@media screen and (min-width:769px) {
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: 45% 55%;
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 5rem;
+        font-weight: 300;
+        margin-bottom: 0;
+        padding-top: 7.5vh;
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        font-size: 1.25rem;
+        line-height: 4rem;
+        padding: .5vh 7.5vw 0 7.5vw;
+    }
+
+    .info p span {
+        font-size: 1.35rem;
+        padding-top: 2vh;
+    }
+
+    .info img {
+        max-height: 50vh;
+        width: auto;
+        grid-column: 2;
+        grid-row: 1/4;
+        display:flex;
+        justify-self: flex-start;
+        align-self: flex-end;
+        margin: 0 0 5vh 5vw;
+    }
+
+
+    .contact-container {
+        width: 100%;
+        height: 100vh;
+        grid-area: page-content;
+        padding:2rem;
+        background-color:rgb(0, 255, 170);
+        overflow: hidden;
+    }
+
+}
+
+@media (max-width: 480px){
+
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 80vh;
+        grid-area: info;
+        display: flex;
+        flex-direction: column;
+        padding-top: 10vh;
+    }
+
+    .info h1 {
+        margin: 0 0 1rem 0;
+    }
+
+    .info p {
+        font-size: 1rem;
+        font-weight: 300;
+        line-height: 4.5vh;
+        text-align: center;
+        padding: 3vh 7.5vw;
+    }
+
+    .info p span {
+        font-weight: 400;
+        font-size: 1.05rem;
+    }
+
+    .info img {
+        max-height: 25vh;
+        height: auto;
+        align-self: center;
+    }
+
+    .contact-container {
+        width: 100%;
+        grid-area: page-content;
+        padding: 1rem;
+        padding-top: 1.5rem;
+    }
+
+    .contact-container .form {
+        height: auto;
+        grid-template-columns: 1fr;
+        grid-template-rows: .65fr 1fr;
+    }
+    .contact-info {
+        grid-row: 2;
+        align-items: flex-start;
+        padding: 7.5vh 5vw;
+    }
+
+    .adress-info h3 {
+        font-size: 1.8rem;
+    }
+
+    .adress-info p {
+        font-weight: 300;
+        font-size: 1.05rem;
+        letter-spacing: 0.03em;
+        padding: 1vh 0 1vh 2vw;
+    }
+
+    .phone-info h3 {
+        font-size: 1.8rem;
+        padding: 3vh 1vw 2vh 1vw;
+    }
+
+    .phone-info p {
+        font-weight: 300;
+        font-size: 1.05rem;
+        padding: 0 0 1vh 2vw;
+        letter-spacing: 0.03em;
+    }
+
+    .social-info h3 {
+        font-size: 1.75rem;
+    }
+
+    .social-info figure {
+        display: flex;
+        flex-direction: column;
+    }
+
+    figure h5 {
+        display: flex;
+        align-self: flex-start !important;
+        color: #eee;
+        font-size: 1.15rem;
+        font-weight: 300;
+        letter-spacing: .115em;
+        text-transform: uppercase;
+        padding: 5vh 0 0 0;
+        margin: 1vh 0 0 0;
+    }
+
+    figure #peertube {
+        padding-top: 3vh;
+    }
+    
+    figure a {
+        display: flex;
+        align-self: flex-start !important;
+        color: #eee;
+        font-size: 1.05rem;
+        font-weight: 300;
+        text-decoration: none;
+        margin: 1vh 0 ;
+        padding-left: 2vw;
+        transition: .5s all ease;
+    }
+
+    .contact-form {
+        grid-row: 1;
+        max-width: 90vw;
+        margin-top: 2rem;
+    }
+    form {
+        padding: .75rem .65rem 1.5rem .75rem;
+    }
+
+    form h3 {
+        font-size: 2rem;
+        line-height: 4rem;
+        margin-top: 0;
+    }
+
+    form .input-container {
+        margin: 1.5rem 0;
+    }
+
+    .input-container .input{
+        padding: .5rem .5rem;
+        font-size: 1.25rem;
+    }
+
+    #phone {
+        display: none;
+    }
+
+}

templates/assets/css/notes.txt

@@ -0,0 +1,5 @@
+Fix Media Queries 
+Fix Footer 
+Fix Z Indexes
+New Design, simple, remove childish shit
+Add Css Animations 

templates/assets/css/oils.css

@@ -0,0 +1,533 @@
+:root {
+    --gradient: linear-gradient(
+        45deg,
+        hsl(160, 51%, 49%), 
+        hsl(160, 51%, 59%), 
+        hsl(160, 51%, 79%),
+        hsl(160, 51%, 89%),
+        #fff
+    );
+}
+
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:rgb(0, 255, 170);
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color: rgb(0, 255, 170);
+    font-weight: 600;
+}
+
+.about p span {
+    color: rgb(0, 255, 170);
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10vh;
+}
+
+.info p {
+    font-size: 1.1rem;
+    font-weight: 300;
+    margin: 2rem 1rem 1rem 1rem;
+    text-align: center;
+}
+
+.info h1 {
+    font-size: 4.5rem;
+    font-weight: 300;
+    padding-top: 0;
+    margin-bottom: 0;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    width: 20vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+
+.oil-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: rgb(0, 255, 170);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    display: grid;
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    padding: 1rem 1.25rem;
+    background-color: white;
+    border-radius: 25px;
+}
+
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+    padding-top: 6.5vh;
+}
+
+.about h3 {
+    font-size: 1.85rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: #333;
+    letter-spacing: .01em;
+    padding: 1vh 2vw;
+}
+
+.about h3 span {
+    color: rgb(0, 255, 170);
+}
+
+.about p {
+    font-weight: 300;
+    font-size: 1em;
+    line-height: 4vh;
+    text-align: center;
+    margin: 1.5rem 0;
+}
+
+.about p span {
+    font-weight: 300;
+    font-size: 1.1rem;
+    letter-spacing: .02em
+}
+
+.about img {
+    width:40vh;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.75rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1.25rem 0 .75rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    max-height: 30vh;
+    margin: 1.25rem 0 2rem 0;
+}
+
+.products h5 {
+    color: black;
+    text-shadow: .05em .025em hsl(160, 49%, 40%);
+    font-size: 1.85rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 200;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+    padding-top: 1vh;
+}
+
+.products p {
+    font-weight: 300;
+    line-height: 4vh;
+    text-align: center;
+    margin: .75rem;
+    padding-top: 2vh;
+}
+
+.products p span {
+    font-weight: 400;
+    font-size: 1.1rem;
+    letter-spacing: 0.02em;
+} 
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem 1rem 2rem 1rem;
+}
+
+.product .click {
+    padding-top: 1vh;
+}
+
+.product .click button {
+    padding: .5rem 1.25rem;
+    background-image: var(--gradient);
+    background-size: 300%;
+    border: none;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+}
+
+.product .click button a {
+    text-decoration: none;
+    color: white;
+    transition: .5s;
+}
+
+.product .click button a:active {
+    -webkit-text-stroke-width: .05em;
+        -webkit-text-stroke-color: hsl(300, 100%, 95% );
+        filter: blur(.015em) 
+}
+
+#shop {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+}
+
+
+#shop a:active {
+    opacity: 50%;
+}
+
+
+
+#desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+        padding-left: 2vw;
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 7rem;
+        font-weight: 300;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: center; 
+        padding-top: 5vh;
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: flex-start;
+        font-size: 1.5rem;
+        text-align: center;
+        line-height: 5rem;
+        letter-spacing: .05em;
+    }
+
+    .info p span {
+        font-weight: 400;
+        font-size: 1.6rem;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: flex-start;
+        align-self: center;
+        padding-left: 5vw;
+    }
+
+    .info img {
+       max-height: 45vh;
+    }
+
+
+    .oil-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color: rgb(0, 255, 170);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding: 2.5rem 2.5rem 2.5rem 3rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 90vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+    }
+
+    .about h3 {
+        grid-column: 1/3;
+        grid-row: 1;
+        font-size: 3.5rem;
+        font-weight: 300;
+        line-height: 4rem;
+        letter-spacing: .05em;
+        color: #333 ;
+        margin: 5rem 0 2rem  0;
+    }
+
+    .about span {
+        color: rgb(0, 255, 170);
+    }
+    
+    .about p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        line-height: 5vh;
+        margin: 1rem 0 0 0;
+        float: left;
+        text-align: center;
+        font-size: 1.55rem;
+    }
+
+    .about p span {
+        color: rgb(0, 255, 170);
+        font-weight: 400;
+        padding-top: 4vh;
+        letter-spacing: .03em;
+        font-size: 1.6rem
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 10vh;
+    }
+
+    
+    .about img {
+        max-width: 35vw;
+        height: auto;
+    }
+
+    .strip2 {
+        padding:.75rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.75rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 2.5rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+    }
+    
+    .products img {
+        max-width: 45vh;
+    }
+    
+    .product h5 {
+    color: black;
+    text-shadow: .05em .025em hsl(160, 49%, 40%);
+    font-size: 1.65rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 200;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+    }
+    
+    .products p {
+        text-align: center;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .5fr 1fr;
+        grid-template-rows: .25fr .5fr .25fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        margin: 1rem;
+        min-height: 70vh;
+        padding-left: 5vw;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row:1/4;
+        display: flex;
+        align-items: center;
+        border-right: .1em solid #eee;
+    }
+
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3rem;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 2.5rem;
+        font-size: 1.15rem;
+        line-height: 5vh;
+        margin-top: .5vh;
+    }
+
+    .product p span {
+        font-weight: 400;
+        letter-spacing: .03em;
+        padding-top: 2vh;
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding: 0 0 2.5rem 0;
+    }
+    
+    .product .click button  {
+        padding: .75rem 1.5rem;
+        background-image: var(--gradient);
+        background-size: 300%;
+        border: none;
+        font-size: 1.5rem;
+        color: white;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: .3s;
+        margin-top: 1rem;
+        margin-left: .25rem;
+    }
+
+    .product .click button a {
+        color: white;
+        text-decoration: none;
+    }
+    
+    .product .click button a:active,
+    .product .click button a:focus, 
+    .product .click button a:hover {
+        -webkit-text-stroke-width: .05em;
+        -webkit-text-stroke-color: hsl(300, 100%, 90% );
+        filter: blur(.015em) 
+    }
+    
+    #shop {
+        margin-left: 10vh;
+    }
+    
+}

templates/assets/css/partners.css

@@ -0,0 +1,810 @@
+body {
+    overflow-x: hidden;
+ 
+ }
+ .global-wrapper {
+    width: 100%;
+ }
+ 
+ .page-wrapper {
+    display:grid;
+    width: 100%;
+ }
+ 
+ .info h1 {
+    color:black;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    margin-bottom: .75rem;
+ }
+ 
+ .info h1 span{
+    color:magenta;
+ }
+ .info p {
+    color: black;
+    line-height: 2rem;
+ 
+ }
+ 
+ .info p span {
+    color:magenta;
+    font-weight: 600;
+ }
+ 
+ .info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+ }
+ 
+ .about p span {
+    color:magenta;
+    font-weight: 400;
+ }
+ 
+ .product p span{
+    color:rgb(62, 190, 147);
+ } 
+ 
+ .product h5 {
+    color: #333;
+ 
+ }
+ 
+ .product p a {
+    text-decoration: none;
+    color:magenta;
+ }
+ 
+ .product p a:hover {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+ }
+ 
+ .product p a:active {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+ }
+
+ #insta {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#gram {
+    width: 5vh;
+    margin: 0;
+}
+
+#you {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#tube {
+    width: 5vh;
+    margin: 0;
+}
+ 
+ 
+ @media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+ 
+   .info {
+    width:100%;
+    height: 77.5vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10vh;
+ }
+ 
+ .info p {
+    font-size: 1.15rem;
+    font-weight: 300;
+    line-height: 6vh;
+    margin: 1rem;
+    text-align: center;
+ }
+
+ .info p span {
+    font-weight: 400;
+    font-size: 1.25rem;
+    letter-spacing: .05em;
+ }
+
+ .info h1 {
+    font-size: 3rem;
+    font-weight: 300;
+    color:hsl(300, 100%, 50%);
+ }
+ 
+ .image {
+    display:flex;
+    justify-content: center;
+    padding-top: 3.5vh;
+ }
+ 
+ .info img {
+    max-height: 50vh;
+    align-self: center;
+    margin-top: 0;
+ }
+ 
+ 
+ .post-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color:magenta;
+    display:flex;
+   flex-direction: column;
+ }
+ 
+ .strip {
+    display: grid;
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    padding: 1rem 1.75rem 1.75rem 2rem;
+    background-color: white;
+    border-radius: 25px;
+ }
+
+ .strip .about {
+    grid-column: 1;
+    grid-row: 1;
+    padding-top: 3vh;
+ }
+ 
+ .about h3 {
+    font-size: 2rem;
+    font-weight: 300;
+    text-align: center;
+    line-height: 3rem;
+    color: magenta;
+    margin: .65rem 0 1rem 0;
+ }
+ 
+ 
+ .about p {
+     font-weight: 300;
+     line-height: 4vh;
+     text-align: center;
+     margin: 1rem 0;
+ }
+
+ .about p span {
+     font-size: 1.15rem;
+     letter-spacing: .03em;
+ }
+ 
+ .about img {
+    max-width: 70vw;
+    height: auto;
+ }
+ 
+ .strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+ }
+ 
+ .products h3 {
+    font-size: 1.5rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 0 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+    padding-bottom: 1.5vh;
+ }
+ 
+ .products img {
+    width: 25vh;
+    margin: 1rem;
+ }
+ 
+ .products h5 {
+    font-size: 1.35rem;
+    font-weight: 300;
+    font-family:'IBM Plex Sans', sans-serif;
+    letter-spacing: .02em;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    padding-top: 3vh;
+ }
+ 
+ .products p {
+    font-weight: 300;
+    line-height: 4vh;
+    text-align: center;
+    margin: .75rem;
+ }
+ 
+ .partner{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem;
+ }
+ 
+ .partner.image {
+    margin: 1rem 0;
+ }
+
+ .partner p span {
+     color:rgb(62, 190, 147);
+     font-weight: 400;
+     font-size: 1.05rem;
+     letter-spacing: .03em
+ }
+ 
+ .partner .click {
+    margin: 1rem;
+ }
+ 
+ .partner .click button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .01em solid #000;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+ }
+ 
+ .partner .click button a {
+    text-decoration: none;
+    color: #333;
+ }
+ 
+ .partner .click button:active {
+ opacity: 50%;
+ background-color: magenta;
+ }
+ 
+ #app {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+ }
+ 
+ 
+ #desktop {
+    display:none;
+ }
+
+ .social {
+    display: grid;
+    grid-template-columns: 40% 60%;
+    grid-template-rows: 1fr .5fr 1fr;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem;
+    min-height: 80vh;
+}
+
+.social .tommaso {
+    grid-column: 1/3;
+    grid-row: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.name {
+    color:#333;
+    opacity: 90%;
+}
+
+.social .blog a {
+    font-weight: 300;
+    margin: 0;
+    text-decoration: none;
+    color: #333;
+}
+
+.social .techdude {
+    grid-column: 1/3;
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+}
+
+#gram {
+    width: 5vh;
+    transition: .6s;
+}
+
+#gram:active {
+    opacity: 50%;
+    background-color: rgb(62, 190, 147);
+    border-radius: 25px;
+}
+
+.social .instagram #account {
+    font-size: .75rem;
+    align-self: center;
+    text-shadow: none;
+}
+
+.social .cbdStore {
+    grid-column: 1/3;
+    grid-row: 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.blog a:active {
+    opacity: 50%;
+    color: rgb(62, 190, 147);
+
+}
+.social .youtube #account {
+    font-size: .75rem;
+    align-self: center;
+    text-shadow: none;
+}
+
+
+.social button {
+    padding: .5rem 1.25rem;
+    background-color: black;
+    border: none;
+    font-size: 1.25rem;
+    font-family:'Fira Sans', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+}
+
+.social button a {
+    text-decoration: none;
+    color: white;
+}
+
+.social button a:active {
+opacity: 50%;
+color: rgb(0, 255, 170);
+}
+
+ }
+ 
+ @media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+ 
+    .info {
+        width:100%;
+        height: 66vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: 60% 40%;
+        grid-template-rows: repeat(2, 50%);
+        padding-top: 7.5vh;
+    }
+ 
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6rem;
+        font-weight: 300;
+        color: hsl(300, 100%, 50%);
+        display: flex;
+        justify-self: center;
+    }
+ 
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        font-size: 1.45rem;
+        text-align: center;
+        line-height: 4rem;
+        letter-spacing: .5px;
+        justify-self: center;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+        display: flex;
+        justify-content: flex-start;
+        padding-bottom: 5vh;
+    }
+ 
+    .info img {
+        min-width: 21.5vw;
+        height: auto;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+    }
+ 
+    .post-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:magenta;
+        display:flex;
+        flex-direction: column;
+    }
+ 
+    .strip {
+        padding:2rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 80vh;
+        align-self: center;
+    }
+ 
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+        padding: 7.5vh 2vw 5vh 2vw;
+    }
+ 
+    .about h3 {
+        font-size: 2.75rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color:magenta;
+        letter-spacing: .03em;
+        grid-column: 1/2;
+        grid-row: 1;
+        display: flex;
+        justify-self: center;
+        align-items: center;
+    }
+ 
+    .about span {
+        color: magenta;
+    }
+    
+    .about p {
+        font-size: 1.35rem;
+        text-align: center;
+        line-height: 4vh;
+        grid-column: 1/2;
+        padding: 1rem 2rem 2rem 4rem;
+    }
+
+    .about p span {
+        font-size: 1.5rem;
+        letter-spacing: .05em;
+    }
+ 
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+ 
+    
+    .about img {
+        width:55vh;
+        height: auto;
+        margin-top: 10vh;
+    }
+ 
+    .strip2 {
+        padding: 1rem 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+        padding-bottom: 8vh;
+        display: flex;
+        justify-content: center;
+    }
+    
+    .products h3 {
+        font-size: 2.75rem;
+        font-weight: 300;
+        line-height: 3rem;
+        letter-spacing: .05em;
+        color: rgb(62, 190, 147);
+        margin: 3rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        padding-left: 1.5rem;
+    }
+    
+    .products img {
+        width: 50vh;
+    }
+    
+    .product h5 {
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: 1.5rem 1rem;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .partner {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .25fr .5fr .25fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        padding: 4rem 2rem 3rem 2rem;
+        min-height: 60vh;
+    }
+ 
+    .partner .image {
+        grid-column: 1;
+        grid-row:1/3;
+        padding: 3vh;
+        margin: 1rem 0;
+        display: flex;
+        align-items: center;
+        margin: 4rem 0 0 0;
+    }
+ 
+    .partner h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3rem;
+        font-weight: 300;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+ 
+    .partner h5 span{
+        color: #999;
+    } 
+ 
+    .partner p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 2.5rem;
+        font-size: 1.15rem;
+        line-height: 4vh;
+    }
+
+    .partner p span {
+        color: rgb(62, 190, 147);
+        font-weight: 600;
+        padding: 1vh 0 2vh 0;
+    }
+ 
+    .partner .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding:0;
+    }
+    
+    .partner .click button  {
+        padding: .75rem 1.5rem;
+        background-color: #fff;
+        border: .01em solid #000;
+        font-size: 1.5rem;
+        color: white;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: .6s;
+    }
+ 
+    .partner .click button a {
+        color: #000;
+        text-decoration: none;
+    }
+    
+    .partner .click button:hover {
+        opacity: 50%;
+        background-color: magenta;
+    }
+
+    .social {
+        display: grid;
+        grid-template-columns: 50% 50%;
+        grid-template-rows: 1fr  1fr;
+        align-items: center;
+        box-shadow: 1px 1px 1px 1px #999;
+        border-radius: 25px;
+        padding: 1rem;
+        min-height: 80vh;
+        width: 80vw;
+    }
+    
+    .social .tommaso {
+        grid-column: 1;
+        grid-row: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 5vh 2vw;
+    }
+    
+    .name {
+        color:#333;
+        opacity: 90%;
+        font-family:'IBM Plex Sans', sans-serif;
+        font-size: 2.5rem;
+        font-weight: 300;
+        letter-spacing: .05em;
+        text-transform: uppercase;
+    }
+
+    #name2 {
+        margin-bottom: 5vh;
+    }
+    
+    .instagram {
+        margin: 5vh 0;
+    }
+
+
+    .social .blog a {
+        margin: 0;
+        text-decoration: none;
+        color: #333;
+        transition: .6s;
+    }
+    
+    .social .blog a:hover {
+        opacity: 50%;
+        color: rgb(62, 190, 147);
+    }
+    
+    .social .techdude {
+        grid-column: 2;
+        grid-row: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding-top: 4vh;
+    }
+    
+    #gram {
+        width: 10vh;
+        transition: .6s;
+    }
+    
+    #gram:hover {
+        opacity: 50%;
+        background-color: rgb(62, 190, 147);
+        border-radius: 25px;
+    }
+    
+    .social .instagram #account {
+        font-size: 1.5rem;
+        font-weight: 200;
+        align-self: center;
+        text-shadow: none;
+        margin-top: 3vh;
+    }
+    
+    .social .cbdStore {
+        grid-column: 1/3;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .social .blog a {
+        font-size: 1.5rem;
+        font-weight: 300;
+        margin: 5vh 0;
+    }
+    
+    .blog a:active {
+        opacity: 50%;
+        color: rgb(62, 190, 147);
+    
+    }
+ 
+    
+    
+    .social button {
+        padding: .5rem 1.25rem;
+        background-color: black;
+        border: none;
+        font-size: 1.25rem;
+        font-family:'Fira Sans', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: .3s;
+        margin-top: 1rem;
+        margin-left: .25rem;
+        transition: .5s;
+    }
+    
+    .social button a {
+        text-decoration: none;
+        color: white;
+    }
+    
+    .social button a:active {
+    opacity: 50%;
+    color: rgb(0, 255, 170);
+    }
+    
+ }
+ 
+ 

templates/assets/css/permapp.css

@@ -0,0 +1,532 @@
+body {
+    overflow-x: hidden;
+
+}
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 span{
+    color: rgb(0, 255, 170);
+}
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color: rgb(0, 255, 170);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+.about p span {
+    color:rgb(0, 255, 170);
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+.product h5 {
+    color: #333;
+
+}
+
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10vh;
+}
+
+.info p {
+    font-size: 1.05rem;
+    font-weight: 300;
+    line-height: 3.5vh;
+    margin: 1rem;
+    text-align: center;
+}
+
+.info p span {
+    font-size: 1.15rem;
+    font-weight: 400;
+    letter-spacing: .04em;
+}
+
+.info h1 {
+    font-size: 2.75rem;
+    font-weight: 300;
+    letter-spacing: 0.4rem;
+    padding-top: 2vh;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    min-width: 60vw;
+    height: auto;
+    align-self: center;
+    margin-top: 0;
+}
+
+
+.app-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: rgb(0, 255, 170);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding: .75rem .95rem;
+    background-color: white;
+    border-radius: 25px;
+}
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.about h3 {
+    font-size: 2rem;
+    font-weight: 300;
+    text-align: center;
+    line-height: 3rem;
+    color:rgb(0, 255, 170);
+    margin: 1rem .5rem;
+}
+
+.about p {
+    font-weight: 300;
+    font-size: .95rem;
+    line-height: 5vh;
+    text-align: center;
+    margin: 1rem .5rem;
+}
+
+.about p span {
+    font-size: 1.1rem;
+    letter-spacing: .03em;
+}
+
+.about img {
+    width:30vh;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.65rem;
+    font-weight: 300;
+    letter-spacing: .04em;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 1rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    width: 20vh;
+    margin: 1rem;
+    opacity: 0;
+}
+
+.products h5 {
+    font-size: 1.65rem;
+    font-weight: 200;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: .01em;
+    margin-bottom: .5rem;
+    padding-top: 2vh;
+}
+
+.products p {
+    font-weight: 300;
+    font-size: .95rem;
+    line-height: 5vh;
+    text-align: center;
+    margin: .75rem;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem;
+}
+
+.product .image {
+    border: 1px solid #eee;
+    border-radius: 25px;
+    margin: 1rem 0;
+}
+
+.product .click {
+    padding: 2vh 0;
+}
+
+.product .click button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .01em solid #000;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+}
+
+.product .click button a {
+    text-decoration: none;
+    color: #333;
+}
+
+.product .click button a:active {
+opacity: 50%;
+color: rgb(0, 255, 170);
+}
+
+#app {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+}
+
+
+
+
+
+#desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+        padding-left: 5vw;
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6.25rem;
+        font-weight: 300;
+        letter-spacing: .04em;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: center;
+        padding-top: 7.5vh;
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 1.35rem;
+        margin: 0 1rem 1rem 1rem;
+        text-align: center;
+        line-height: 4rem;
+        letter-spacing: .03em;
+    }
+
+    .info p span {
+        font-size: 1.45rem;
+        font-weight: 400;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: flex-start;
+        align-self: center;
+    }
+
+    .info img {
+        min-width: 35vw;
+        margin: 0;
+    }
+
+    .app-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:rgb(0, 255, 170);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding:2.5rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 90vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+    }
+
+    .about h3 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color:rgb(0, 255, 170);
+        margin: 5rem 0 2rem 1rem;
+    }
+
+    .about span {
+        color: rgb(0, 255, 170);
+    }
+    
+    .about p {
+        margin: 1rem 1rem 0 1rem;
+        text-align: left;
+        font-size: 1.35rem;
+        font-weight: 300;
+        line-height: 5vh;
+    }
+
+    .about p span {
+        font-size: 1.5rem;
+        letter-spacing: .04em;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    
+    .about img {
+        width:55vh;
+        height: auto;
+        margin-top: 10vh;
+    }
+
+    .strip2 {
+        padding:.75rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 3rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        padding-left: 1.5rem;
+    }
+    
+    .products img {
+        width: 35vh;
+        opacity: 0;
+    }
+    
+    .product h5 {
+        font-size: 1.5rem;
+        font-weight: 300;
+        font-family:'IBM Plex Sans', sans-serif;
+        letter-spacing: .04em;
+        text-transform: uppercase;
+        margin-bottom: .5rem;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .5fr 1fr .5fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row:1/3;
+        padding: 3vh;
+        border: 1px solid #eee;
+        border-radius: 25px;
+        margin: 1rem 0;
+        display: flex;
+        align-items: center;
+        margin: 4rem 0 0 4rem;
+    }
+
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3rem;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+
+    .product h5 span{
+        color: #999;
+    } 
+
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 2.5rem;
+        font-size: 1.15rem;
+        font-weight: 300;
+        line-height: 5vh;
+        letter-spacing: .02em;
+
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding: 0 0 2.5rem 0;
+    }
+    
+    .product .click button  {
+        padding: .75rem 1.5rem;
+        background-color: #fff;
+        border: .01em solid #000;
+        font-size: 1.5rem;
+        color: white;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        transition: .3s;
+        margin-top: 1rem;
+        margin-left: .25rem;
+    }
+
+    .product .click button a {
+        color: #333;
+        text-decoration: none;
+    }
+    
+    .product .click button:hover {
+        opacity: 50%;
+        background-color: rgb(0, 255, 170);
+    }
+    
+    #app {
+        margin-left: 10vh;
+    }
+
+    #app:hover {
+        opacity: 50%;
+        background-color: red !important;
+    }
+    
+}
+

templates/assets/css/spiderpi.css

@@ -0,0 +1,631 @@
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+} 
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 span {
+    color:rgb(0, 255, 170);
+}
+
+
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color: rgb(0, 255, 170);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+.about p span {
+    color:rgb(0, 255, 170);
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+.product h5 {
+    color: #333;
+
+}
+
+.product .click {
+    display: flex;
+    margin: 1rem 0;
+    padding-left: 1rem;
+}
+
+.product .click button  {
+    margin: 0 1rem 0 0 !important;
+
+}
+
+.product .click button:active {
+    opacity: 50%;
+    color: rgb(0, 255, 170);
+}
+
+#insta {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#gram {
+    width: 5vh;
+    margin: 0;
+}
+
+#you {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#tube {
+    width: 5vh;
+    margin: 0;
+}
+
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10vh;
+}
+
+.info h1 {
+    font-size: 2.75rem;
+    font-weight: 300;
+    letter-spacing: .05em;
+    padding: 0;
+}
+
+.info h1 span {
+    margin-right: .1em;
+}
+
+.info p {
+    font-size: 1.05rem;
+    font-weight: 300;
+    line-height: 4vh;
+    letter-spacing: .04em;
+    margin: 1rem;
+    text-align: center;
+    margin-top: .5rem;
+}
+
+.info p span {
+    font-weight: 400;
+    letter-spacing: .05em;
+    color:hsl(160, 90%, 50%);
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    min-width: 90vw;
+    height: auto;
+    align-self: center;
+    margin-top: 0;
+}  
+
+.spider-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: rgb(0, 255, 170);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    display: grid;
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+}
+
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+    display: grid;
+    grid-template-rows: 15% 60% 25%;
+    padding-top: 2vh;
+}
+
+.about h3 {
+    grid-row: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.35rem;
+    font-weight: 300;
+    letter-spacing: .05em;
+    line-height: 3rem;
+    color: hsl(160, 90%, 50%);
+    text-align: center;
+}
+
+
+.about p {
+    grid-row: 2;
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    font-weight: 300;
+    letter-spacing: .03em;
+    line-height: 4vh;
+    padding: 1vh 2vw;
+}
+
+.about .image {
+    grid-row: 3;
+    display: flex;
+    flex-direction: column;
+}
+.about video {
+    min-width: 35vw;
+    height: auto;
+    border: none;
+    box-shadow: none;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    margin-top: 3vh;
+}
+
+.products h3 {
+    font-size: 1.5rem;
+    font-weight: 200;
+    letter-spacing: .05em;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 1rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    width: 30vh;
+    margin: 1rem;
+}
+
+.products h5 {
+    font-size: 1.65rem;
+    font-weight: 200;
+    letter-spacing: .06em;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin: .5rem 0;
+    text-align: center;
+}
+
+.products p {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    line-height: 4vh;
+    font-weight: 300;
+    letter-spacing: .02em;
+    margin: .75rem;
+}
+
+.product p a {
+    color: rgb(62, 190, 147);
+    text-decoration: none;
+}
+
+.product p a:active {
+    opacity: 50%;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem;
+}
+
+.product .image {
+    margin: 1rem 0;
+}
+
+.product .click {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 10vh;
+    align-items: center;
+    justify-items: center;
+}
+
+.product .click button {
+    height: 5vh;
+    padding: 0 1.25rem;
+    background-color: #fff;
+    border: .01em solid #000;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    margin-top: 1rem;
+    transition: .5s;
+}
+
+.product .click button a {
+    text-decoration: none;
+    color: #333;
+}
+
+.product .click button:active {
+opacity: 50%;
+color: rgb(0, 255, 170);
+}
+
+#app {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+}
+
+#desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 66vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+        padding-left: 1vw;
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6rem;
+        font-weight: 300;
+        letter-spacing: .05em;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: center;
+        align-self: flex-end;
+        padding: 0 0 3vh 0;
+        
+    }
+
+    .info h1 span {
+        margin-right: .05em;
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        font-size: 1.75rem;
+        margin: 0;
+        text-align: left;
+        line-height: 5rem;
+        letter-spacing: .04em;
+        justify-self: center;
+        align-self: flex-start;
+        padding-top: 2vh;
+    }
+
+    .info p span {
+        font-weight: 400;
+        letter-spacing: .06em;
+        font-size: 1.65rem;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: flex-start;
+        align-self: center;
+    }
+
+    .info img {
+        min-width: 45vw;
+        height: auto;
+        margin: 0;
+    }
+
+
+    .spider-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:rgb(0, 255, 170);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding: 2.5rem 0 2.5rem 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        min-height: 90vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+    }
+
+    .about h3 {
+        font-size: 3rem;
+        font-weight: 300;
+        letter-spacing: .05em;
+        line-height: 3rem;
+        color: hsl(160, 90%, 50%);
+        margin: 3rem 0 2rem 1rem;
+    }
+
+    .about span {
+        color: rgb(0, 255, 170);
+    }
+    
+    .about p {
+        margin: 1rem 0 0 1rem;
+        float: left;
+        font-size: 1.45rem;
+        line-height: 2.75rem;
+        text-align: left;
+    }
+
+    .about p span {
+        color: hsl(160, 90%, 50%);
+        font-size: 1.5rem;
+        letter-spacing: .03em;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    
+    .about video {
+        max-width:70vw;
+        height: auto;
+        margin-top: 40vh;
+        border: .02em solid #333;
+    }
+
+    .strip2 {
+        padding: 4rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 200;
+        letter-spacing: .05em;
+        line-height: 3rem;
+        color: hsl(160, 49%, 50%);
+        margin: 1.5rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        padding-left: 1.5rem;
+    }
+    
+    
+    .product h5 {
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem 1rem 1.5rem 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: 40% 60%;
+        grid-template-rows: .5fr 1fr .5fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        max-height: 100vh;
+        padding-top: 3rem;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row:1/4;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 5vh;
+    }
+
+    .product .image  img {
+        max-width: 30vw;
+    }
+
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3rem;
+        font-weight: 200;
+        letter-spacing: .06em;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+
+    .product h5 span{
+        color: #999;
+    } 
+
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 5rem;
+        font-size: 1.15rem;
+        line-height: 5.5vh;
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+    }
+    
+    .product .click button  {
+        padding: .75rem 1.5rem;
+        background-color:#fff;
+        border: .01em solid #000;
+        font-size: 1.5rem;
+        font-family:'lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+    }
+
+    .product .click button a {
+        color: #333;
+        text-decoration: none;
+    }
+    
+    .product .click button:hover {
+        opacity: 50%;
+        background-color: rgb(0, 255, 170);
+    }
+
+    .product .click button {
+        margin: 2rem !important;
+    }
+
+    #gram {
+        min-width: 4vw;
+    }
+
+    #tube {
+        min-width: 3vw;
+    }
+    
+    #gram:hover {
+      opacity: 50%;
+      background-color: rgb(0, 255, 170);
+      border-radius: 25px;
+    }
+
+    #tube:hover {
+        opacity: 50%;
+        background-color: rgb(0, 255, 170);
+        border-radius: 25px;
+      }
+
+  
+}
+

templates/assets/css/whatsthat.css

@@ -0,0 +1,615 @@
+body {
+    overflow-x: hidden;
+
+}
+.global-wrapper {
+    width: 100%;
+    overflow-x: hidden;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 span{
+    color:magenta;
+}
+.info p {
+    color: black;
+
+}
+
+.info p span {
+    color:magenta;
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+    margin-top: 5vh;
+}
+
+.about p span {
+    color:magenta;
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+.product h5 {
+    color: #333;
+
+}
+
+.product p a {
+    text-decoration: none;
+    color: magenta;
+}
+
+.product p a:hover {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+}
+
+.product p a:active {
+    opacity: 50%;
+    color:rgb(62, 190, 147)
+}
+
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    padding-top: 7.5vh;
+}
+
+.info h1 {
+    font-size: 2.5rem;
+    font-weight: 300;
+    letter-spacing: .04em;
+    padding: 0;
+}
+
+.info h1 span {
+    margin: 0 1em; 
+    color: hsl(160, 51%, 50%);
+}
+
+.info p {
+    font-size: 1.15rem;
+    font-weight: 300;
+    line-height: 4.5vh;
+    margin: .75rem 1rem 1rem 1rem;
+    text-align: center;
+    letter-spacing: .03em;
+    padding: 0 2vw;
+}
+
+.info p span {
+    color: hsl(160, 51%, 50%);
+    font-weight: 300;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+    padding-top: 2vh;
+}
+
+.info img {
+    min-width: 60vw;
+    height: auto;
+    align-self: center;
+    margin-top: 0;
+}
+
+.culture-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: hsl(160, 51%, 50%);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding: 1rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+}
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.about h3 {
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 3rem;
+    color: hsl(160, 51%, 50%);
+    text-align: center;
+    margin: 2rem 0 1rem 0;
+}
+
+.about p {
+    font-weight: 300;
+    font-size: 1.05rem;
+    letter-spacing: .02em;
+    line-height: 2.75rem;
+    text-align: center;
+    margin: 2rem 0 1rem 0;
+}
+
+#twelve {
+    color: rgb(62, 190, 147);
+}
+
+.about ul {
+    list-style:none;
+    padding: 0 2.5rem;
+}
+
+.about ul li {
+    font-weight: 300;
+    line-height: 2.75rem;
+}
+
+.about ul li span {
+    color: rgb(62, 190, 147);
+}
+
+#second {
+    box-shadow: .1em .1em .75em hsl(160, 51%, 50%);
+    line-height: 2.25rem;
+    padding: 1rem .75rem;
+}
+
+.about img {
+    max-width: 65vw;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.5rem;
+    font-weight: 300;
+    letter-spacing: .02em;
+    line-height: 3rem;
+    color: #333;
+    margin: 1rem 0 1rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    max-height: 25vh;
+    margin-bottom: 1rem;
+}
+
+.products h5 {
+    font-size: 1.5rem;
+    font-weight: 200;
+    letter-spacing: .05em;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+}
+
+.products p {
+    font-weight: 300;
+    line-height: 4vh;
+    text-align: center;
+    margin: .75rem;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem;
+}
+
+.product .image {
+    margin: 1rem 0;
+}
+
+.product .click {
+    margin: 1rem;
+}
+
+.product .click button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .01em solid #333;
+    font-size: 1.25rem;
+    font-family: 'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    transition: .5s;
+}
+
+.product .click button a {
+    text-decoration: none;
+    color: #333;
+}
+
+.product .click button:active {
+opacity: 50%;
+border-color: hsl(160, 51%, 80%);
+}
+
+#app {
+    margin-left: 5vh;
+    text-decoration: none;
+    color: white;
+}
+
+
+#desktop {
+    display:none;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: 55% 45%;
+        grid-template-rows: 65% 35%;
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 5rem;
+        margin-bottom: 0;
+        display: flex;
+        justify-self: center;
+        font-weight: 300;
+    }
+
+    .info h1 span {
+        padding-top: 10vh;
+        padding-right: 6vw;
+        color: rgb(62, 190, 147);
+        font-size: 6.25rem;
+    }
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        font-size: 1.5rem;
+        text-align: center;
+        line-height: 2.25rem;
+        letter-spacing: .05em;
+        padding-top: 1rem;
+    }
+
+    .info p span {
+        color: rgb(62, 190, 147);
+        font-weight: 300;
+        margin: 0 .3em;
+    }
+
+    .info .image {
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: flex-start;
+        align-self: center;
+    }
+
+    .info img {
+        min-width: 35vw;
+        height: auto;
+    }
+
+    .mobile {
+        display:none;
+    }
+
+
+    .culture-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color:rgb(62, 190, 147);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding:2.5rem 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        min-height: 90vh;
+    }
+
+    .about {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 20% 10% 70%;
+        padding: 5vh 0 5vh 0;
+    }
+
+    .about h3 {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        text-align: left;
+        font-size: 2.65rem;
+        font-weight: 300;
+        line-height: 4rem;
+        color: rgb(62, 190, 147);
+        grid-column: 1;
+        grid-row: 1;
+        margin: 2vh 0;
+    }
+
+    .about #first {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        letter-spacing: .04em;
+        font-weight: 300;
+        line-height: 1.5rem;
+        margin: 5vh 0 4vh 0;
+    }
+
+    #twelve {
+        color: rgb(62, 190, 147);
+        font-weight: 400;
+    }
+    
+    .about ul {
+        list-style:none;
+        grid-column: 1;
+        grid-row: 3;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-start;
+        padding-left: 2vh;
+    }
+
+    .about #second {
+        display: flex;
+        align-items: flex-end;
+        grid-column: 2;
+        grid-row: 1/4;
+        font-size: 1.25rem;
+        text-align: left;
+        line-height: 3.5vh;
+        box-shadow:  1em 1em 2em .75em hsl(160, 51%, 50%);
+        padding: 25rem 1.5rem 1rem 1rem;
+    }
+    
+    .about ul li {
+        line-height: 3.5rem;
+        font-size: 1.35rem;
+        letter-spacing: .04em;
+    }
+    
+    .about ul li span {
+        color: rgb(62, 190, 147);
+    }
+
+    .about span {
+        color: rgb(62, 190, 147);
+    }
+    
+    .about p {
+        margin: 1rem 0 0 1rem;
+        float: left;
+        font-size: 1.5rem;
+    }
+
+    .about .image {
+        grid-column: 2;
+        grid-row: 1/4;
+        display:flex;
+        justify-content: center;
+        align-items: flex-start;
+        padding: 15vh 2vw 0 2vw;
+    }
+
+    .about img {
+        max-width: 32.5vw;
+    }
+
+    .strip2 {
+        padding: 2rem 4rem 8vh 4rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color: #333;
+        margin: 3rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+        padding-left: 1.5rem;
+    }
+    
+    
+    .product h5 {
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+    }
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .product {
+        display: grid;
+        grid-template-columns: .25fr 1fr;
+        grid-template-rows: .25fr .5fr .25fr;
+        box-shadow: 3px 3px 3px 3px #eee;
+        border-radius: 25px;
+        min-height: 60vh;
+    }
+
+    .product .image {
+        grid-column: 1;
+        grid-row:1/4;
+        padding: 3vh;
+        margin: 1rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 4rem;
+    }
+
+    .product .image img {
+        max-height: 30vh;
+    }
+
+    .product h5 {
+        grid-column: 2;
+        grid-row: 1;
+        font-size: 3rem;
+        font-weight: 200;
+        letter-spacing: .05em;
+        display:flex;
+        justify-self: center;
+        align-self: flex-end;
+    }
+
+    .product h5 span{
+        color: #999;
+    } 
+
+    .product p {
+        display:flex;
+        flex-direction: column;
+        justify-self: center;
+        align-self: center;
+        grid-column: 2;
+        grid-row: 2;
+        padding: 0 2.5rem;
+        font-size: 1.15rem;
+        line-height: 5vh;
+    }
+
+    .product .click {
+        grid-column: 2;
+        grid-row: 3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        justify-content: space-between;
+        padding: 0 0 2.5rem 0;
+    }
+    
+    .product .click button  {
+        padding: .75rem 1.5rem;
+        background-color: #fff;
+        border: .01em solid #333;
+        font-size: 1.5rem;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        transition: .3s;
+    }
+
+    .product .click button a {
+        color: #333;
+        text-decoration: none;
+    }
+    
+    .product .click button:hover {
+        opacity: 50%;
+        background-color: hsl(160, 51%, 50%);
+    }
+    
+    #app {
+        margin-left: 10vh;
+    }
+
+    #app:hover {
+        opacity: 50%;
+        background-color: red !important;
+    }
+    
+}
+

templates/assets/css/whoweare.css

@@ -0,0 +1,612 @@
+.global-wrapper {
+    width: 100%;
+}
+
+.page-wrapper {
+    display:grid;
+    width: 100%;
+}
+
+.info h1 {
+    color:#333;
+    font-family:'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    justify-self: center;
+    align-self: center;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info h1 span {
+    color: rgb(0, 255, 170);
+}
+
+.info p {
+    color: black;
+    text-align: center;
+
+}
+
+.info p span {
+    color: rgb(0, 255, 170);
+    font-weight: 600;
+}
+
+.info img {
+    width: 25vh;
+    height: auto;
+    align-self: center;
+}
+
+.about p span {
+    color: rgb(0, 255, 170);
+    font-weight: 400;
+}
+
+.product p span{
+    color:rgb(62, 190, 147);
+} 
+
+.product .click button  {
+    margin: 0 1rem 0 0 !important;
+
+}
+
+#insta {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#gram {
+    width: 5vh;
+    margin: 0;
+}
+
+#you {
+    padding: 0;
+    background-color:transparent;
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: .3s;
+    margin-top: 0;
+    margin-left: 0;
+    transition: .5s;
+}
+
+#tube {
+    width: 5vh;
+    margin: 0;
+}
+
+@media (max-width:480px) {
+   .page-wrapper {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "info"
+    "page-content";
+    width: 100%;
+   }
+
+   .info {
+    width:100%;
+    height: 75vh;
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10vh;
+}
+
+.info p {
+    font-size: 1.25rem;
+    font-weight: 300;
+    line-height: 2rem;
+    margin: 1rem;
+    text-align: center;
+}
+
+.info h1 {
+    font-size: 2.75rem;
+    font-weight: 300;
+    line-height: 4rem;
+    padding: 0;
+    margin-bottom: 1rem;
+}
+
+.info h1 span {
+    margin-left: 7vh;
+}
+
+.image {
+    display:flex;
+    justify-content: center;
+}
+
+.info img {
+    min-width: 80vw ;
+    height: auto;
+    align-self: center;
+}
+
+
+.about-container {
+    width: 100%;
+    grid-area: page-content;
+    padding: 1rem;
+    padding-top: 1.5rem;
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: rgb(0, 255, 170);
+    display:flex;
+   flex-direction: column;
+}
+
+.strip {
+    height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: .95fr 1fr;
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+}
+.strip .about {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.philo h3 {
+    font-size: 2rem;
+    font-weight: 300;
+    letter-spacing: .05em;
+    text-align: center;
+    line-height: 3rem;
+    color: #333;
+    margin: 2rem 0 1rem 0;
+}
+
+.philo h3 span {
+    color: hsl(160, 90%, 50%);
+}
+
+.philo p {
+    line-height: 3.5vh;
+    font-weight: 300;
+    letter-spacing: .02em;
+    margin: 1.75rem .75rem 1rem .75rem;
+}
+
+.philo img {
+    max-width:70vw;
+    height: auto;
+    padding: 1rem 0 2rem 0;
+}
+
+.strip2 {
+    padding:.75rem;
+    background-color: white;
+    border-radius: 25px;
+    z-index: 10000;
+    margin-top: 3vh;
+    min-height: 90vh;
+}
+
+.products h3 {
+    font-size: 1.5rem;
+    font-weight: 200;
+    letter-spacing: .05em;
+    line-height: 3rem;
+    color: rgb(62, 190, 147);
+    margin: 1rem 0 1rem 1.5rem;
+    text-transform: uppercase;
+    font-family:'IBM Plex Sans', sans-serif;
+}
+
+.products img {
+    width: 25vh;
+    margin-bottom: 1rem;
+}
+
+.products h5 {
+    color: black;
+    text-shadow: 1.5px 3px rgb(62, 190, 147);
+    font-size: 1.5rem;
+    font-family:'IBM Plex Sans', sans-serif;
+    font-weight: 100;
+    letter-spacing: .04em;
+    text-transform: uppercase;
+    margin-bottom: .5rem;
+}
+
+.products p {
+    text-align: center;
+    margin: .75rem;
+}
+
+.social {
+    display: grid;
+    grid-template-columns: 40% 60%;
+    grid-template-rows: 1fr .5fr 1fr 1fr;
+    align-items: center;
+    box-shadow: 1px 1px 1px 1px #999;
+    border-radius: 25px;
+    padding: 1rem;
+    min-height: 80vh;
+}
+
+.social h5 {
+    grid-column: 1/3;
+    grid-row: 1;
+    justify-self: center;
+}
+
+.social .blog {
+    grid-column: 1/3;
+    grid-row: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.social .blog #blog {
+    margin: 0;
+}
+
+.social .instagram {
+    grid-column: 1/3;
+    grid-row: 3;
+    display: flex;
+    justify-content: space-around;
+}
+
+#gram {
+    min-width: 15vw;
+}
+
+.social .instagram #account {
+    font-size: .75rem;
+    align-self: center;
+    text-shadow: none;
+}
+
+.social .youtube {
+    grid-column: 1/3;
+    grid-row: 4;
+    display: flex;
+    justify-content: space-around;
+}
+
+#tube {
+    min-width: 10vw;
+}
+
+
+.social .youtube #account {
+    font-size: .75rem;
+    align-self: center;
+    text-shadow: none;
+}
+
+
+.social button {
+    padding: .5rem 1.25rem;
+    background-color: #fff;
+    border: .01em solid #000;
+    font-size: 1.25rem;
+    font-family:'Lato', sans-serif;
+    line-height: 1rem;
+    border-radius: 25px;
+    font-weight: 300;
+    cursor: pointer;
+    margin-top: 1rem;
+    margin-left: .25rem;
+    transition: .5s;
+}
+
+.social button a {
+    text-decoration: none;
+    color: #000;
+}
+
+.social button:active {
+opacity: 50%;
+background-color: hsl(160, 100%, 80%);
+}
+
+
+
+
+#desktop {
+    display:none;
+}
+
+#helper {
+    width: 45vh;
+}
+}
+
+@media (min-width:768px){
+  
+    .page-wrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+        "info"
+        "page-content";
+        width: 100%;
+    }
+
+    .info {
+        width:100%;
+        height: 65vh;
+        grid-area: info;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2, 50%);
+    }
+
+    .info h1 {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 6rem;
+        font-weight: 200;
+        letter-spacing: .04em;
+        margin-bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-self: flex-end;
+        padding-bottom: 1rem;
+        
+    }
+
+    .info h1 span {
+        margin: 0 .095em;
+    }
+
+    .info p {
+        grid-column: 1;
+        grid-row: 2;
+        display: flex;
+        justify-content: center;
+        font-size: 1.75rem;
+        font-weight: 300;
+        text-align: left;
+        line-height: 2.25rem;
+        letter-spacing: .03em;
+        padding-top: 5vh;
+    }
+
+    .info img {
+        width: 60vh;
+        height: auto;
+        grid-column: 2;
+        grid-row: 1/3;
+        display:flex;
+        justify-self: center;
+        align-self: center;
+        margin-left: 4.5rem;
+        margin-top: 20vh;
+    }
+
+
+    .about-container {
+        width: 100%;
+        grid-area: page-content;
+        padding:2rem;
+        overflow: hidden;
+        background-color: rgb(0, 255, 170);
+        display:flex;
+        flex-direction: column;
+    }
+
+    .strip {
+        padding: 0 0 0 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        min-height: 90vh;
+    }
+
+    .philo {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: .2fr 1fr;
+        padding: 0 0 5vh 0;
+    }
+
+    .philo h3 {
+        display: flex;
+        align-items: center;
+        font-size: 2.5rem;
+        font-weight: 300;
+        line-height: 3rem;
+        color: #333;
+        letter-spacing: 0.4rem;
+        margin: 5rem 0 2rem 0;
+        padding-left: 2vw;
+    }
+
+    .philo span {
+        color: hsl(160, 90%, 50%);
+    }
+    
+    .philo p {
+        display: flex;
+        margin: 1rem 0 0 0;
+        font-size: 1.5rem;
+        font-weight: 300;
+        line-height: 5vh;
+        text-align: center;
+    }
+
+    .philo .image {
+        grid-column: 2;
+        grid-row:1/3;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    
+    .philo img {
+        max-width: 35vw;
+        height: auto;
+        margin-top: 15vh;
+    }
+
+   #partners {
+       width: 65vh;
+   }
+
+   #helper {
+    width: 65vh;
+   }
+
+    .strip2 {
+        padding:.75rem .75rem 5rem 2.5rem;
+        background-color: white;
+        border-radius: 25px;
+        z-index: 10000;
+        margin-top: 3vh;
+        min-height: 90vh;
+    }
+
+    #heading2 {
+        color: #333;
+        grid-row: 1;
+        grid-column: 1/3;
+        padding-left: 2vw;
+    }
+    
+    .products h3 {
+        font-size: 2.5rem;
+        font-weight: 200;
+        letter-spacing: .05em;
+        line-height: 3rem;
+        color: rgb(62, 190, 147);
+        margin: 2.5rem 0 3rem 1.5rem;
+        text-transform: uppercase;
+        font-family:'IBM Plex Sans', sans-serif;
+    }
+    
+    .products img {
+        width: 45vh;
+        margin-bottom: 3vh;
+    }
+    
+    
+    .products p {
+        text-align: center;
+        margin: 1rem;
+    }
+    
+    .social {
+        display: grid;
+        grid-template-columns: 40% 60%;
+        grid-template-rows: 1fr .5fr 1fr 1fr;
+        align-items: center;
+        box-shadow: 1px 1px 1px 1px #999;
+        border-radius: 25px;
+        padding: 1rem;
+        min-height: 80vh;
+    }
+    
+    .social h5 {
+        grid-column: 1/3;
+        grid-row: 1;
+        justify-self: center;
+        font-size: 5vh;
+        font-weight: 300;
+        letter-spacing: .04em;
+        font-family:'IBM Plex Sans', sans-serif;
+        text-transform: uppercase;
+
+    }
+    
+    .social .blog {
+        grid-column: 1/3;
+        grid-row: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .social .blog #blog {
+        margin: 0;
+        width: 13.5vw;
+        height: 5.5vh;
+        font-size: 1.75rem;
+        font-weight: 300;
+    }
+    
+    .social .instagram {
+        grid-column: 1/3;
+        grid-row: 3;
+        display: flex;
+        justify-content: center;
+    }
+    
+    #gram {
+        min-width: 6.5vw;
+        margin-right: 5vw;
+    }
+    
+    .social .instagram #account {
+        font-size: 1.75rem;
+        align-self: center;
+        text-shadow: none;
+    }
+    
+    .social .youtube {
+        grid-column: 1/3;
+        grid-row: 4;
+        display: flex;
+        justify-content: center;
+    }
+    
+    #tube {
+        min-width: 5.5vw;
+        margin-right: 5vw;
+    }
+    
+    
+    .social .youtube #account {
+        font-size: 1.75rem;
+        align-self: center;
+        text-shadow: none;
+    }
+    
+    
+    .social button {
+        padding: .5rem 1.25rem;
+        background-color: #fff;
+        border: .01em solid #000;
+        font-size: 1.25rem;
+        font-family:'Lato', sans-serif;
+        line-height: 1rem;
+        border-radius: 25px;
+        font-weight: 300;
+        cursor: pointer;
+        margin-top: 1rem;
+        transition: .5s;
+    }
+    
+    .social button a {
+        text-decoration: none;
+        color: #000;
+    }
+    
+    .social button:hover {
+    opacity: 50%;
+    background-color: hsl(160, 100%, 80%);
+    }
+}

templates/assets/img/permapp_black.svg

@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800"
+   height="800"
+   viewBox="0 0 211.66667 211.66667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.1 (0767f8302a, 2020-10-17)"
+   sodipodi:docname="permapp_black.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.46689326"
+     inkscape:cx="410.9915"
+     inkscape:cy="480.93833"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1368"
+     inkscape:window-height="836"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="YinYang"
+       fill="#000000"
+       stroke="none"
+       stroke-width="0"
+       fill-rule="evenodd"
+       transform="matrix(0.25588408,0,0,0.25588408,4.4908977,3.8141213)"
+       style="fill:#000000">
+      <title
+         id="title893">Yin-Yang, by Adam Stanislav</title>
+      <desc
+         id="desc895">The entire graphic is drawn as a single path filled with black (or any other color you change the value of “fill” in line 4). The other half, usually shown in white is created here as a hole in the path. That means it is completely transparent, and has whatever color its background has. To achieve this, not just with SVG but with other vector formats, any black portion of the path is drawn counterclockwise, any “white” portion clockwise. Also, this graphic is taking advantage of the kappa constant described in my e-book Bézier Circles and other shapes, freely downloadable from https://www.smashwords.com/books/view/483578 .</desc>
+      <!-- Note to self: Relative Bézier differences (“c”) are differences of a point from the STARTING point of the curve segment, not from the most recent point. -->
+      <path
+         d="M 400,0 C 179.086,0 0,179.086 0,400 0,620.914 179.086,800 400,800 620.914,800 800,620.914 800,400 800,179.086 620.914,0 400,0 Z m 0,10 C 184.609,10 10,184.609 10,400 10,615.391 184.609,790 400,790 292.304,790 205,682.304 205,600 205,492.3 292.304,400 400,400 507.7,400 600,292.304 600,200 600,92.304 507.7,10 400,10 Z m 0,655 c 35.895,0 65,-29.105 65,-65 0,-35.895 -29.105,-65 -65,-65 -35.895,0 -65,29.105 -65,65 0,35.895 29.105,65 65,65 z m 0,-533 c -37.555,0 -68,30.445 -68,68 0,37.555 30.445,68 68,68 37.555,0 68,-30.445 68,-68 0,-37.555 -30.445,-68 -68,-68 z"
+         id="path897"
+         style="fill:#000000" />
+    </g>
+    <path
+       style="fill:#00ffff;stroke:#000000;stroke-width:8.2867;stroke-linecap:round;stroke-linejoin:bevel;paint-order:stroke fill markers"
+       d=""
+       id="path1070" />
+    <g
+       id="layer1-4"
+       transform="matrix(0.18413703,0,0,0.18413703,33.807122,-51.497763)"
+       fill-rule="evenodd"
+       style="fill:#3ebe93;fill-opacity:1">
+      <path
+         id="path2395"
+         d="m 368.9,527.34 c -9.44,-62.95 -61.54,-87.74 -82.47,-96.95 -18.6,-8.17 -22.66,-23.29 -22.66,-23.29 0,0 -5.04,17 -5.04,25.18 0,8.19 -1.89,46.59 13.22,78.69 15.11,32.11 61.07,43.44 74.29,59.18 13.22,15.74 8.18,43.44 8.18,43.44 0,0 -0.63,-22.04 -15.74,-35.26 -15.11,-13.22 -52.25,-13.22 -73.02,-50.99 -20.78,-37.77 -22.54,-108.23 -4.41,-134.72 8.89,-12.98 0.69,6.86 14.48,19.52 12.79,11.74 51.52,23.4 74.28,46.58 25.96,26.44 19.52,69.88 18.89,68.62 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path3199"
+         d="m 339.99,553.06 c 5.43,-24.98 5.27,-36.33 -9.84,-52.07 -15.41,-16.06 -30.43,-10.7 -47.54,-39.12 8.9,34.53 30.97,31.92 43.28,50.92 12.02,18.56 12.87,39.59 14.1,40.27 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path3201"
+         d="m 388.32,524.74 c 24.35,-7.79 34.1,-13.6 40.18,-34.56 6.2,-21.37 -5.95,-31.7 10.11,-60.73 -25.46,24.98 -12.16,42.78 -22.46,62.94 -10.06,19.69 -27.85,30.94 -27.83,32.35 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path3203"
+         d="m 438.33,550.91 c 18.91,17.19 28.82,22.72 50.01,17.51 21.61,-5.32 24.48,-21.01 57.65,-21.61 -34.36,-9.56 -43.13,10.86 -65.74,12.02 -22.09,1.13 -40.72,-8.65 -41.92,-7.92 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path3205"
+         d="m 441.81,611.35 c -5.43,24.98 -5.27,36.33 9.84,52.07 15.41,16.06 30.43,10.7 47.54,39.12 -8.9,-34.54 -30.97,-31.92 -43.28,-50.92 -12.02,-18.56 -12.87,-39.59 -14.1,-40.27 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path3207"
+         d="m 397.25,640.3 c -24.35,7.78 -34.09,13.6 -40.17,34.55 -6.2,21.38 5.95,31.71 -10.11,60.74 25.46,-24.98 12.15,-42.79 22.45,-62.94 10.07,-19.7 27.86,-30.94 27.83,-32.35 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path3209"
+         d="m 351.66,614.13 c -18.92,-17.19 -28.83,-22.73 -50.01,-17.51 -21.62,5.31 -24.49,21 -57.66,21.61 34.36,9.56 43.13,-10.87 65.74,-12.02 22.09,-1.13 40.72,8.65 41.93,7.92 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path2391"
+         d="m 427.47,533.1 c 49.8,-39.65 45.23,-97.16 42.73,-119.89 -2.22,-20.2 8.84,-31.27 8.84,-31.27 0,0 -17.24,4.13 -24.33,8.23 -7.08,4.09 -41.28,21.65 -61.53,50.79 -20.25,29.14 -7.09,74.6 -14.11,93.92 -7.02,19.32 -33.52,28.8 -33.52,28.8 0,0 18.76,-11.56 22.66,-31.25 3.89,-19.7 -14.68,-51.86 7.64,-88.74 22.33,-36.88 82.47,-73.63 114.47,-71.17 15.69,1.2 -5.59,4.02 -9.66,22.29 -3.78,16.95 5.5,56.32 -3.2,87.63 -9.92,35.7 -50.76,51.84 -49.99,50.66 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path2393"
+         d="m 452.6,584.82 c 59.24,23.3 106.76,-9.42 125.19,-22.94 16.38,-12.02 31.5,-7.98 31.5,-7.98 0,0 -12.2,-12.86 -19.29,-16.96 -7.09,-4.09 -39.4,-24.92 -74.76,-27.89 -35.35,-2.97 -68.14,31.16 -88.38,34.74 -20.24,3.58 -41.71,-14.63 -41.71,-14.63 0,0 19.39,10.47 38.4,4 19,-6.48 37.57,-38.64 80.67,-37.75 43.1,0.9 105,34.6 118.87,63.55 6.8,14.19 -6.29,-2.83 -24.14,2.78 -16.57,5.2 -46.02,32.92 -77.49,41.04 -35.87,9.26 -70.27,-18.04 -68.86,-17.96 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path2396"
+         d="m 416.88,630.92 c 9.44,62.95 61.53,87.74 82.46,96.94 18.61,8.18 22.67,23.3 22.67,23.3 0,0 5.03,-17 5.03,-25.18 0,-8.19 1.89,-46.59 -13.22,-78.7 -15.11,-32.1 -61.06,-43.43 -74.28,-59.17 -13.22,-15.74 -8.19,-43.44 -8.19,-43.44 0,0 0.63,22.04 15.74,35.26 15.11,13.22 52.25,13.22 73.03,50.99 20.77,37.77 22.54,108.23 4.4,134.71 -8.89,12.99 -0.69,-6.85 -14.48,-19.51 -12.79,-11.74 -51.52,-23.4 -74.28,-46.58 -25.96,-26.44 -19.51,-69.88 -18.88,-68.62 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path2398"
+         d="m 359.84,624.4 c -49.8,39.65 -45.22,97.17 -42.72,119.89 2.21,20.2 -8.84,31.27 -8.84,31.27 0,0 17.23,-4.13 24.32,-8.22 7.09,-4.1 41.29,-21.66 61.54,-50.8 20.25,-29.14 7.08,-74.6 14.1,-93.92 7.02,-19.31 33.53,-28.8 33.53,-28.8 0,0 -18.77,11.56 -22.66,31.25 -3.9,19.7 14.67,51.86 -7.65,88.74 -22.32,36.88 -82.46,73.64 -114.46,71.17 -15.7,-1.2 5.59,-4.02 9.66,-22.29 3.77,-16.95 -5.5,-56.32 3.2,-87.63 9.92,-35.69 50.76,-51.83 49.98,-50.66 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+      <path
+         id="path2400"
+         d="m 335.39,573.35 c -59.24,-23.3 -106.76,9.42 -125.2,22.95 -16.38,12.02 -31.5,7.98 -31.5,7.98 0,0 12.2,12.86 19.29,16.95 7.09,4.09 39.4,24.93 74.76,27.89 35.36,2.97 68.15,-31.16 88.39,-34.74 20.24,-3.58 41.71,14.63 41.71,14.63 0,0 -19.4,-10.47 -38.4,-4 -19.01,6.48 -37.58,38.64 -80.68,37.75 -43.09,-0.9 -105,-34.6 -118.87,-63.54 -6.8,-14.2 6.29,2.83 24.14,-2.78 16.57,-5.21 46.03,-32.92 77.49,-41.04 35.87,-9.26 70.27,18.03 68.87,17.95 z"
+         style="fill:#3ebe93;fill-opacity:1" />
+    </g>
+  </g>
+</svg>

templates/assets/js/notes.txt

@@ -0,0 +1,10 @@
+Imporove Navbar JS 
+    - scroll animation 
+    - increase clickable area
+    - open and close animaton 
+        --> do animations with CSS
+Handle Form Data with Rocket 
+Add Animations
+Improve sliders
+Add Threeejs Support
+

templates/automation.html

@@ -5,19 +5,19 @@
 			<meta charset="UTF-8" />
 			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 			<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-			<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-			<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/automation.css">
-		<link rel="icon" href="global_img/Logo.svg">
+			<link rel="stylesheet" type="text/css" href="../css/nav.css">
+			<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/automation.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
 		<title>Cannabinieri - Automation</title>
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		
 		
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 		</script>
@@ -25,25 +25,25 @@
 		<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 		</script>
 		<script>
 				$(document).ready(function(){
 
-				$('#footer').load("global/footer.html");
+				$('#footer').load("../components/footer.html");
 
 				});
 		</script>
 		<script>
 				$(document).ready(function(){
 
-				$('#content').load("global/content/automation-content.html");
+				$('#content').load("../components/automation-content.html");
 
 				});
 			</script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/blog.html

@@ -4,17 +4,17 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/blog.css">
-		<link rel="icon" href="global/img/Logo.svg">
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/blog.css">
+		<link rel="icon" type="image/svg+xml" href="../img/Logo.svg">
 		<title>Cannabinieri - Blog</title>
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 		$(document).ready(function(){
    
-   		$('#top-nav').load("global/top-nav.html");
+   		$('#top-nav').load("../components/top-nav.html");
 
 		});
 		</script>
@@ -22,7 +22,7 @@
 		<script>
 		$(document).ready(function(){
 
-	   	$('#main-nav').load("global/main-nav.html");
+	   	$('#main-nav').load("../components/main-nav.html");
 
 		});
 		</script>
@@ -30,7 +30,7 @@
 		<script>
 		$(document).ready(function(){
 
-	   	$('#content').load("global/content/blog-content.html");
+	   	$('#content').load("../components/blog-content.html");
 
 		});
 		</script>
@@ -38,18 +38,18 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#content').load("global/content/blog-content.html");
+			   $('#content').load("../components/blog-content.html");
 	
 			});
 			</script>
 		<script>
 		$(document).ready(function(){
 
-	   	$('#footer').load("global/footer.html");
+	   	$('#footer').load("../components/footer.html");
 
 		});
 		</script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/code.html

@@ -4,18 +4,18 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/code.css">
-		<link rel="icon" href="global_img/Logo.svg">
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/code.css">
+		<link rel="icon" type="image/svg+xml" href="../img/Logo.svg">
 		<title>Cannabinieri - Code</title>
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -23,7 +23,7 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
@@ -31,18 +31,18 @@
 <script>
 	$(document).ready(function(){
 
-	   $('#content').load("global/content/code-content.html");
+	   $('#content').load("../components/code-content.html");
 
 	});
 </script>
 <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/diy.html

@@ -4,18 +4,18 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/diy.css">
-		<link rel="icon" href="global_img/Logo.svg">
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/diy.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
 		<title>Cannabinieri - DiY</title>
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -23,7 +23,7 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
@@ -31,18 +31,18 @@
 <script>
 	$(document).ready(function(){
 
-	   $('#content').load("global/content/diy-content.html");
+	   $('#content').load("../components/diy-content.html");
 
 	});
 </script>
 <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/edibles.html

@@ -4,17 +4,17 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/edibles.css">
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/edibles.css">
 		<link rel="icon" href="global/img/Logo.svg">
 		<title>Cannabinieri - Edibles</title>
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 	<script>
 		$(document).ready(function(){
 	
-		   $('#content').load("global/content/edibles-content.html");
+		   $('#content').load("../components/edibles-content.html");
 	
 		});
 	</script>
 	<script>
 		$(document).ready(function(){
 
-		$('#footer').load("global/footer.html");
+		$('#footer').load("../components/footer.html");
 
 		});
 	</script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/flower.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/flower.css">
-		<link rel="icon" href="global_img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/flower.css">
+		<link rel="icon" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,7 +22,7 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
@@ -30,20 +30,20 @@
 	<script>
 	$(document).ready(function(){
 
-	   $('#content').load("global/content/flower-content.html");
+	   $('#content').load("../components/flower-content.html");
 
 	});
 	</script>
 	<script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 	</script>
-<script src="global_js/main.js"></script>
+<script src="../js/main.js" defer></script>
 
-		</head>
+</head>
 	<body>
 	<div class="global-wrapper">
 		<div id="top-nav"></div>
@@ -51,6 +51,5 @@
 		<div id="content"></div>
 		<div id="footer"></div>
 	</div>
-	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
 	</body>
 </html>

templates/greenlab.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/greenlab.css">
-		<link rel="icon" href="global_img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/greenlab.css">
+		<link rel="icon" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 		<script>
 			$(document).ready(function(){
 		
-			   $('#content').load("global/content/greenlab-content.html");
+			   $('#content').load("../components/greenlab-content.html");
 		
 			});
 		</script>
 		<script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/iot.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/iot.css">
-		<link rel="icon" href="global/img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/iot.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
     <script>
 		$(document).ready(function(){
 	
-		   $('#content').load("global/content/iot-content.html");
+		   $('#content').load("../components/iot-content.html");
 	
 		});
 	</script>
     <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/join.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/join.css">
-		<link rel="icon" href="global_img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/join.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 		<script>
 			$(document).ready(function(){
 		
-			   $('#content').load("global/content/join-content.html");
+			   $('#content').load("../components/join-content.html");
 		
 			});
 		</script>
 		<script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/meet.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/meet.css">
-		<link rel="icon" href="global_img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/meet.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 	<script>
 		$(document).ready(function(){
 	
-		   $('#content').load("global/content/meet-content.html");
+		   $('#content').load("../components/meet-content.html");
 	
 		});
 	</script>
 	<script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>
@@ -50,6 +50,8 @@
 		<div id="content"></div>
 		<div id="footer"></div>
 	</div>
-	<script defer src="js/contact.js"></script>
+	<!--Handle Form with Rocket !
+	<script defer src="../js/contact.js"></script>
+	-->
 	</body>
 </html>

templates/oils.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/oils.css">
-		<link rel="icon" href="global/img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/oils.css">
+		<link rel="icon" type="image/webp" href="../../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 	<script>
 		$(document).ready(function(){
 	
-		   $('#content').load("global/content/oils-content.html");
+		   $('#content').load("../components/oils-content.html");
 	
 		});
 	</script>
 	<script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 	</script>
-<script src="global/js/main.js"></script>
+<script src="../js/main.js" defer ></script>
 
 		</head>
 	<body>

templates/partners.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/partners.css">
-		<link rel="icon" href="global_img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/partners.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,7 +22,7 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
@@ -30,18 +30,18 @@
 	<script>
 		$(document).ready(function(){
 
-		$('#content').load("global/content/partners-content.html");
+		$('#content').load("../components/partners-content.html");
 
 		});
 	</script>
 <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/permapp.html

@@ -4,17 +4,17 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/permapp.css">
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/permapp.css">
 		<link rel="icon" href="global_img/Logo.svg">
 		<title>Cannabinieri -PerMapp</title>
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 	</script>
 	<script>
 		$(document).ready(function(){
 	
-		   $('#content').load("global/content/permapp-content.html");
+		   $('#content').load("../components/permapp-content.html");
 	
 		});
 	</script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/spiderpi.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/spiderpi.css">
-		<link rel="icon" href="global/img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/spiderpi.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 	<script>
 		$(document).ready(function(){
 	
-		   $('#content').load("global/content/spiderpi-content.html");
+		   $('#content').load("../components/spiderpi-content.html");
 	
 		});
 	</script>
 <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/whatsthat.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/whatsthat.css">
-		<link rel="icon" href="global/img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/whatsthat.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,25 +22,25 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
 	<script>
 		$(document).ready(function(){
 	
-		   $('#content').load("global/content/whatsthat-content.html");
+		   $('#content').load("../components/whatsthat-content.html");
 	
 		});
 	</script>
 <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>

templates/whoweare.html

@@ -5,16 +5,16 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
-		<link rel="stylesheet" type="text/css" href="global/css/nav.css">
-		<link rel="stylesheet" type="text/css" href="global/css/footer.css">
-		<link rel="stylesheet" type="text/css" href="global/css/global.css">
-		<link rel="stylesheet" type="text/css" href="css/whoweare.css">
-		<link rel="icon" href="global/img/Logo.svg">
-		<script src="../../static/js/jquery-3.5.1.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="../css/nav.css">
+		<link rel="stylesheet" type="text/css" href="../css/footer.css">
+		<link rel="stylesheet" type="text/css" href="../css/global.css">
+		<link rel="stylesheet" type="text/css" href="../css/whoweare.css">
+		<link rel="icon" type=" image/webp" href="../img/Logo.svg">
+		<script src="../jquery/jquery-3.5.1.min.js"></script>
 		<script>
 			$(document).ready(function(){
 	   
-			   $('#top-nav').load("global/top-nav.html");
+			   $('#top-nav').load("../components/top-nav.html");
 	
 			});
 			</script>
@@ -22,7 +22,7 @@
 			<script>
 			$(document).ready(function(){
 	
-			   $('#main-nav').load("global/main-nav.html");
+			   $('#main-nav').load("../components/main-nav.html");
 	
 			});
 			</script>
@@ -30,18 +30,18 @@
 	<script>
 		$(document).ready(function(){
 
-		$('#content').load("global/content/whoweare-content.html");
+		$('#content').load("../components/whoweare-content.html");
 
 		});
 	</script>
 <script>
 	$(document).ready(function(){
 
-	   $('#footer').load("global/footer.html");
+	   $('#footer').load("../components/footer.html");
 
 	});
 </script>
-<script src="global/js/main.js"></script>
+<script defer src="../js/main.js"></script>
 
 		</head>
 	<body>