diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..1a5cb7d --- /dev/null +++ b/Makefile @@ -0,0 +1,5 @@ +run_dev: + cargo-watch -x run + +build_dev: + cargo build && cargo-watch -x run \ No newline at end of file diff --git a/src/main.rs b/src/main.rs index c587776..2cd191e 100644 --- a/src/main.rs +++ b/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 => configuration // registering routes // mounting routes - // registering/ mobuildunting catchers + // registering/ catchers // manage State // attach Fairings rocket::build() // State Rocket => 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::open("templates/index.html").await.ok() -} - -// serve other pages (html GET) -// create routes for pages -#[get("/experiments")] -async fn experiments() -> Option { - NamedFile::open("templates/experiments.html").await.ok() -} - -#[get("/permaculture")] -async fn perma() -> Option { - NamedFile::open("templates/permaculture.html").await.ok() -} - -#[get("/greentech")] -async fn greentech() -> Option { - NamedFile::open("templates/greentech.html").await.ok() -} - -#[get("/spider")] -async fn spider() -> Option { - NamedFile::open("templates/spider.html").await.ok() -} - -#[get("/learn")] -async fn learn() -> Option { - NamedFile::open("templates/learn.html").await.ok() -} - -#[get("/oil")] -async fn oil() -> Option { - NamedFile::open("templates/oils.html").await.ok() -} - -#[get("/flower")] -async fn flower() -> Option { - NamedFile::open("templates/flower.html").await.ok() -} - -#[get("/candy")] -async fn candy() -> Option { - NamedFile::open("templates/edibles.html").await.ok() -} - -#[get("/permApp")] -async fn permapp() -> Option { - NamedFile::open("templates/permapp.html").await.ok() -} - -#[get("/greenlab")] -async fn greenlab() -> Option { - NamedFile::open("templates/greenlab.html").await.ok() -} - -#[get("/about")] -async fn about_perma() -> Option { - NamedFile::open("templates/whatsthat.html").await.ok() -} - -#[get("/automation")] -async fn automation() -> Option { - NamedFile::open("templates/automation.html").await.ok() -} - -#[get("/DiY")] -async fn diy() -> Option { - NamedFile::open("templates/diy.html").await.ok() -} - -#[get("/IoT")] -async fn iot() -> Option { - NamedFile::open("templates/iot.html").await.ok() -} - -#[get("/spiderPi")] -async fn spiderpi() -> Option { - NamedFile::open("templates/spiderpi.html").await.ok() -} - -#[get("/join")] -async fn join() -> Option { - NamedFile::open("templates/join.html").await.ok() -} - -#[get("/about")] -async fn about() -> Option { - NamedFile::open("templates/whoweare.html").await.ok() -} - -#[get("/partners")] -async fn partners() -> Option { - NamedFile::open("templates/partners.html").await.ok() -} - -#[get("/contact")] -async fn meet() -> Option { - NamedFile::open("templates/meet.html").await.ok() -} - -#[get("/blog")] -async fn blog() -> Option { - NamedFile::open("templates/blog.html").await.ok() -} - -#[get("/code")] -async fn code() -> Option { - NamedFile::open("templates/code.html").await.ok() -} - -#[get("/")] -async fn policies_info() -> Option { - NamedFile::open("templates/policies.html").await.ok() -} - -#[get("/privacy")] -async fn privacy() -> Option { - 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 implements Responder - // NamedFile implements Responder => generates Response -#[route(GET, uri= "/")] -async fn fileserver(path: PathBuf) -> Option { // 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() } \ No newline at end of file diff --git a/src/routes/get.rs b/src/routes/get.rs new file mode 100644 index 0000000..a7442ab --- /dev/null +++ b/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::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::open("templates/experiments.html").await.ok() + } + + #[get("/permaculture")] + pub async fn perma() -> Option { + NamedFile::open("templates/permaculture.html").await.ok() + } + + #[get("/greentech")] + pub async fn greentech() -> Option { + NamedFile::open("templates/greentech.html").await.ok() + } + + #[get("/spider")] + pub async fn spider() -> Option { + NamedFile::open("templates/spider.html").await.ok() + } + + #[get("/learn")] + pub async fn learn() -> Option { + NamedFile::open("templates/learn.html").await.ok() + } + + #[get("/oil")] + pub async fn oil() -> Option { + NamedFile::open("templates/oils.html").await.ok() + } + + #[get("/flower")] + pub async fn flower() -> Option { + NamedFile::open("templates/flower.html").await.ok() + } + + #[get("/candy")] + pub async fn candy() -> Option { + NamedFile::open("templates/edibles.html").await.ok() + } + + #[get("/permApp")] + pub async fn permapp() -> Option { + NamedFile::open("templates/permapp.html").await.ok() + } + + #[get("/greenlab")] + pub async fn greenlab() -> Option { + NamedFile::open("templates/greenlab.html").await.ok() + } + + #[get("/about")] + pub async fn about_perma() -> Option { + NamedFile::open("templates/whatsthat.html").await.ok() + } + + #[get("/automation")] + pub async fn automation() -> Option { + NamedFile::open("templates/automation.html").await.ok() + } + + #[get("/DiY")] + pub async fn diy() -> Option { + NamedFile::open("templates/diy.html").await.ok() + } + + #[get("/IoT")] + pub async fn iot() -> Option { + NamedFile::open("templates/iot.html").await.ok() + } + + #[get("/spiderPi")] + pub async fn spiderpi() -> Option { + NamedFile::open("templates/spiderpi.html").await.ok() + } + + #[get("/join")] + pub async fn join() -> Option { + NamedFile::open("templates/join.html").await.ok() + } + + #[get("/about")] + pub async fn about() -> Option { + NamedFile::open("templates/whoweare.html").await.ok() + } + + #[get("/partners")] + pub async fn partners() -> Option { + NamedFile::open("templates/partners.html").await.ok() + } + + #[get("/contact")] + pub async fn meet() -> Option { + NamedFile::open("templates/meet.html").await.ok() + } + + #[get("/blog")] + pub async fn blog() -> Option { + NamedFile::open("templates/blog.html").await.ok() + } + + #[get("/code")] + pub async fn code() -> Option { + NamedFile::open("templates/code.html").await.ok() + } + + #[get("/")] + pub async fn policies_info() -> Option { + NamedFile::open("templates/policies.html").await.ok() + } + + #[get("/privacy")] + pub async fn privacy() -> Option { + NamedFile::open("templates/privacy-policy.html").await.ok() + } + + \ No newline at end of file diff --git a/src/routes/get_static_files.rs b/src/routes/get_static_files.rs new file mode 100644 index 0000000..42ae7c0 --- /dev/null +++ b/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 implements Responder + // NamedFile implements Responder => generates Response + #[route(GET, uri= "/")] + pub async fn fileserver(path: PathBuf) -> Result> { // 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())) + } \ No newline at end of file diff --git a/src/routes/mod.rs b/src/routes/mod.rs new file mode 100644 index 0000000..5711f6e --- /dev/null +++ b/src/routes/mod.rs @@ -0,0 +1,2 @@ +pub mod get; +pub mod get_static_files; \ No newline at end of file diff --git a/templates/assets/components/automation-content.html b/templates/assets/components/automation-content.html new file mode 100644 index 0000000..f70e30b --- /dev/null +++ b/templates/assets/components/automation-content.html @@ -0,0 +1,47 @@ +
+
+

Automation

+

Automatic greenhouses
for everyone.

+

+

Learn about our projects!

+
+ +
+
+
+
+
+

Where we stand and where we'll go.

+

Our goal is to build fully automatic greenhouses for everyone.
+ We want them to be both affordable and comprehensive, we want to enable you to grow your own organic food anywhere.

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

+ Stay in touch
+ #a dummy text

+
+ +
+
+
+
+
+

Our projects

+
+
+ +
+
Mini Greenhouses
+

These Mini Greenhouses have a built in mechanism that manipulates the day-lenght to your plants needs.

+ 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.
+ Dreaming..here could be projects like this one.
+ Find out how we did it in our Blog.
+ #a dummy text
+

+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/blog-content.html b/templates/assets/components/blog-content.html new file mode 100644 index 0000000..56cdd10 --- /dev/null +++ b/templates/assets/components/blog-content.html @@ -0,0 +1,242 @@ +
+
+

Blog

+

CBD.Permaculture.Tech.More.

+

+ + + +
+
+
+
+

Company

+
+
+
+
+ + + + +
+
CBD oil Sauvage
+
+

Our first experiment Sauvage is out !
+ Read her story from seed to sale.

+
+
+ +
+
+
+
+ + + + +
+
Wild Herbs
+
+

Our first experiment Sauvage is out !
+ Read her story from seed to sale.

+
+
+ +
+
+
+
+ + + + +
+
Wild Herbs
+
+

Our first experiment Sauvage is out !
+ Read her story from seed to sale.

+
+
+ +
+
+
+
+
+
+

CBD News

+
+
+
+
+ + + + +
+
CBD against migraines
+
+

CBD helps against migraines!
+ Which cannabinoid have which effects on the brain

+
+
+ +
+
+
+
+ + + + +
+
CBD against migraines
+
+

CBD helps against migraines!
+ Which cannabinoid have which effects on the brain

+
+
+ +
+
+
+
+ + + + +
+
CBD against migraines
+
+

CBD helps against migraines!
+ Which cannabinoid have which effects on the brain

+
+
+ +
+
+
+
+
+
+

Perma
& culture News

+
+
+
+
+ + + + +
+
Aquaculture
+
+

Find out how fish and plants can profit from each other.
+ Here's what we found out.

+
+
+ +
+
+
+
+
+
+

Tech News

+
+
+
+
+ + + + +
+
Light Sensors
+
+

Read about our experiments to find out the perfect lighting conditions for our plants.
+ How light influences plants and how we manipulate it.

+
+
+ +
+
+
+
+
+
+

Tutorials

+
+
+
+
+ + + + +
+
Water Flow Automation
+
+

Learn how to build a water automation for your plants.
+ Here's how to do it.

+
+
+ +
+
+
+
+
+
+
+

Social Media

+ +
+
+
+
diff --git a/templates/assets/components/code-content.html b/templates/assets/components/code-content.html new file mode 100644 index 0000000..b85998a --- /dev/null +++ b/templates/assets/components/code-content.html @@ -0,0 +1,73 @@ +
+
+

Code

+

Get the code.

+

+ +
+
+
+
+

All code

+
+
+
+
+ + + + +
+
Detect obstacles
+
Python
+
+

Obstacle Detection Program for SpiderPi

+
+
+ +
+
+
+
+ + + + +
+
See in 3D
+
Python
+
+

3D Rendering Program for SpiderPI

+
+
+ +
+
+
+
+ + + + +
+
Waterflow Regulation
+
Python
+
+

Program to manipulate the waterflow for Raspberry Pi

+
+
+ +
+
+
+
+
+
+
+ diff --git a/templates/assets/components/diy-content.html b/templates/assets/components/diy-content.html new file mode 100644 index 0000000..b7b5bec --- /dev/null +++ b/templates/assets/components/diy-content.html @@ -0,0 +1,47 @@ +
+
+

DIY

+

Automate yourself.

+ Check out our guides!

+
+
+
+
+
+
+

We want you to automate yourself !

+

Currently many tasks that used to be done by people are done by computers.
+ In agriculture there are many interesting projects going on that will soon replace farmworkers with software-engineers.

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

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

+ So we want everyone to get aquainted with automation, in order to keep working and keep contributing to the progress.

+ For that it is important to start small automation projects yourself that are fun, that make you learn and of which you profit.

+ Start your first project now ! +
+

+
+ +
+
+
+
+
+

Projects

+
+
+ +
+
Light, Light on off
+

Learn how to build an automatic lightswitch.

+ Manipulate the light using sensors.
+ Here could be projects like this one.
+ #a dummy text
+

+
+ +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/edibles-content.html b/templates/assets/components/edibles-content.html new file mode 100644 index 0000000..cfa67a7 --- /dev/null +++ b/templates/assets/components/edibles-content.html @@ -0,0 +1,47 @@ + +
+
+

Candy

+

Learn about our CBD Edibles.

+ Coming Soon!

+
+ +
+
+
+
+
+

Currently we are brewing our gummiberry-juice !

+

All around our lab grow a variety of local flavourful crops.
+ 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.
+ 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.

+ Out soon!
+ #a dummy text

+
+ +
+
+
+
+
+

All CBD Edibles

+
+
+ +
+
Name
+

A description about this product.
+ All its ingredients and what makes it unique.
+ % CBD, % THC, flavour, effect.
+ Why people should buy it.

+

+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/flower-content.html b/templates/assets/components/flower-content.html new file mode 100644 index 0000000..fabe107 --- /dev/null +++ b/templates/assets/components/flower-content.html @@ -0,0 +1,43 @@ +
+
+

Flowers

+

Learn about our CBD Flower.
+ Coming Soon!

+
+ +
+
+
+
+
+

Soon we'll bring Flower to the people !

+

Currently we are building our imperium.
+ Our own CBD plants grow yearlong and are all set for our first experiments on them.
+ 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.
+ At our lab we organically grow wild herbs and a variety of fruit that will give our flower unique flavors.
+ Our SpiderPi will soon be collecting information about our plants.

+ Get ready for organic, robot-grown CBD flowers !
+ #a dummy text

+
+ +
+
+
+
+
+

All CBD Flower

+
+
+ +
+
Name
+

A short description about this experiment,
flavor, THC, CBD and what's unique.

+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/footer.html b/templates/assets/components/footer.html index 9c5030b..4784297 100644 --- a/templates/assets/components/footer.html +++ b/templates/assets/components/footer.html @@ -71,17 +71,26 @@ diff --git a/templates/assets/components/greenlab-content.html b/templates/assets/components/greenlab-content.html new file mode 100644 index 0000000..24aee5c --- /dev/null +++ b/templates/assets/components/greenlab-content.html @@ -0,0 +1,48 @@ + +
+
+

GreenLab

+

The power of partnerplants.

+ Discover our recipes!

+
+ +
+
+
+
+
+

We tune our plants with our plants.

+

We do not use any chemicals on our plants because nature trumps them all.
+ 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.
+ In fact each plant is a complex chemical composition of nutrients, proteins and inherits a unique communication with the environment.
+ 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.

+ Here's the ones we use!
+ #a dummy text

+
+ +
+
+
+
+
+

All products

+
+
+ +
+
Aloe
+

We use Aloe Vera as a root stimulant.
+ Aloe Vera's salysilic acid is a natural root stimulant.
+ The product is a mixture of Aloe Vera juice and water.
+ Find out more in our Blog.
+ #a dummy text
+

+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/iot-content.html b/templates/assets/components/iot-content.html new file mode 100644 index 0000000..3f4439e --- /dev/null +++ b/templates/assets/components/iot-content.html @@ -0,0 +1,46 @@ +
+
+

IoT

+

The Raspberry Pi Greenhouse.

+ Learn about what's to come!

+
+
+
+
+
+
+

Built and play.

+

Puzzle together your greenhouse with our out of the box modules or check out our tutorials, get a Pi and do it yourself.
+ Those greenhouses don't spy on you and you can repair and program them yourself. While experimenting both you and them learn.

+ They are so awesome, they record how your plants are doing and then act itelligently acording to their needs.
+ Sweet sweet nothing still but we are developing the first modules. +
+ #a dummy text

+
+ +
+
+
+
+
+

All Modules

+
+
+ +
+
Go with the flow
+

This module consists of a humidity sensor, a water pump and a tube.

+ Water is given based on your plants specific needs.
+ Dreaming..here could be projects like this one.
+ Find out how we built it on our Blog.
+ #a dummy text
+

+
+ + +
+
+
+
+
+
diff --git a/templates/assets/components/join-content.html b/templates/assets/components/join-content.html new file mode 100644 index 0000000..d83d95b --- /dev/null +++ b/templates/assets/components/join-content.html @@ -0,0 +1,80 @@ +
+
+

Join

+

Join our project .

+ Let's get in touch!

+
+ +
+
+
+
+
+

Want to join us ?

+

Feel free to get in touch, we are looking forward to meet you and your ideas.
+ SpiderPi still is in his starting shoes and we can use your help to get him up and running.

+ Are you willing to contribute, learn and create the future of gardening for everyone ?

+ We love to hear from you!
+ #a dummy text

+
+ +
+
+
+
+
+
+
+
+

Write Us

+
Adress
+

Cannabinieri Office
+ Some Adress

+

Mail
+

+ cannabinieri@info.de +

+
+
+

Call Us

+

Some Number
+

+
+ +
+
+
+

Get in touch

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/templates/assets/components/main-nav.html b/templates/assets/components/main-nav.html index a031a87..f5e972e 100644 --- a/templates/assets/components/main-nav.html +++ b/templates/assets/components/main-nav.html @@ -1,7 +1,10 @@
+ + + + diff --git a/templates/assets/components/oils-content.html b/templates/assets/components/oils-content.html new file mode 100644 index 0000000..beb6c76 --- /dev/null +++ b/templates/assets/components/oils-content.html @@ -0,0 +1,47 @@ +
+
+

Oils

+

Our full-spectrum CBD oils

+ Discover our first Experiment!

+
+ +
+
+
+
+
+

Sauvage, the wild one

+

Sauvage is french for wild.
+ 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 .
+ 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.

+ Find out all about her and order a sample!
+ #a dummy text

+
+ +
+
+
+
+
+

All CBD Oils

+
+
+ +
+
Sauvage
+

A Full Spectrum CBD oil from organic grown italian hemp.
+ The carrier oil is 100% organic hemp oil, ethanol extraction.
+ % CBD, % THC, flavour, effect.
+ Natural conditions, nothing done to influence it.

+ Available as a limited sample. +

+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/partners-content.html b/templates/assets/components/partners-content.html new file mode 100644 index 0000000..c78e85e --- /dev/null +++ b/templates/assets/components/partners-content.html @@ -0,0 +1,80 @@ +
+
+

Partners

+

Who they are and what they do
+ Find out !

+
+ +
+
+
+
+
+

The wild ones

+

Our partner Tommaso gave us the opportunity to bring out our first experiment Sauvage.
+ He grows organic cannabis outdoors in X for X years because X.

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

+ We helped him with the harvest and that was when we decided that his plants will serve our first experiment bacause X.
+ From Thommaso we can learn a lot about the region we'll be working in, about common disseases and local procedures.

+ Find out more below ! +
+ #and it goes sthn' like that +

+
+ +
+
+
+
+
+

All Partners

+
+
+ +
+
Tommaso Inc
+

Organic CBD Farm +

+ His company goal.
+ Why we work together /how we profit from each other.
+ #a dummy text #button leads to partners website/social-media etc
+

+
+ +
+
+
+
+
+
+

Links

+ +
+
+
+
+ \ No newline at end of file diff --git a/templates/assets/components/permapp-content.html b/templates/assets/components/permapp-content.html new file mode 100644 index 0000000..d69e154 --- /dev/null +++ b/templates/assets/components/permapp-content.html @@ -0,0 +1,46 @@ +
+
+

PermApp

+

A map of our ecosystem.

+ Try it now!

+
+ +
+
+
+
+
+

Let's create a database of our ecosystem!

+

Our PerMapp is an app that stores all the connections in our ecosystem.
+ Everything around us is connected, every plant affects all other plants and animals and in the end us people.
+ 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.

+ Let's Create!
+ #a dummy text

+
+ +
+
+
+
+
+

Try the App

+
+
+ +
+
PermApp
+

Add and explore the relations of our ecosystem !
+ The Webapp has already has most of its core functionalities.
+ The mobile app is currently in developement.
+ #a dummy text
+

+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/spiderpi-content.html b/templates/assets/components/spiderpi-content.html new file mode 100644 index 0000000..729e821 --- /dev/null +++ b/templates/assets/components/spiderpi-content.html @@ -0,0 +1,48 @@ +
+
+

SpiderPi

+

Our garden hexapod.

+ Learn about SpiderPi!

+
+ +
+
+
+
+
+

About a Spider

+

SpiderPi is our garden hexapod, he is aimed to be a garden helper and a walking database of our ecosystem.
+ 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.

+ Currently SpiderPi is learning to walk on uneven ground and recognize his surroundings in order to operate within them.

+ Be part of the journey !
+ #a dummy text

+
+ +

video

+
+
+
+
+
+

Time-Line

+
+
+ +
+
Eyes
+

Our first challenge is to let SpiderPi detect his surroundings and navigate through them.

+ 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.
+ We used the software X, camera X, sensors X, made X changes on the Spider.

+ Stay in touch ! + #a dummy text
+

+
+ + + +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/whatsthat-content.html b/templates/assets/components/whatsthat-content.html new file mode 100644 index 0000000..08d4150 --- /dev/null +++ b/templates/assets/components/whatsthat-content.html @@ -0,0 +1,59 @@ +
+
+

What's
that?

+

What Permaculture is
and why we care.

+ Find out!

+
+ +
+
+
+
+
+

The design of a sustainable ecosystem.

+

Permaculture is defined through
12 principles.


+
    +
  • # Observe and interact
    • +
  • # Catch and store energy
    • +
  • # Obtain a yield
    • +
  • # Apply self-regulation and accept feedback
    • +
  • # Use and value renewable services and ressources
    • +
  • # Produce no waste
    • +
  • # Design from patterns to details
    • +
  • # Integrate rather than segregate
    • +
  • # Use small and slow solutions
    • +
  • # Use and value diversity
    • +
  • # Use edges and value the marginal
    • +
  • # Creatively use and respond to change
    • +
+

+ 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.
+ + In order to build such a system a lot of information is required and this information is gained with tech,
to ultimately reach the goal of an actual automatic garden that takes care of itself by the rules of nature.
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.
When we got the demeter seal we can also mention it here or that we are working on obtaining it now.
+ 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.
+ #smthn' like that

+
+ +
+
+
+
+
+

Blog

+
+
+ +
+
Related post 1
+

Short description.
+ Might be about a specific relation or on some study or one of our experiments.
+ #a dummy text
+

+
+ +
+
+
+
+
+
\ No newline at end of file diff --git a/templates/assets/components/whoweare-content.html b/templates/assets/components/whoweare-content.html new file mode 100644 index 0000000..c8e9c5f --- /dev/null +++ b/templates/assets/components/whoweare-content.html @@ -0,0 +1,102 @@ +
+
+

About
Us

+

We grow further.

+

+ +
+
+
+
+
+

We grow our future

+

We are working actively on creating a future that is reigned by knowledge about our environment .
+ 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.
+ 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.
+ Our goal is to understand our ecosystem and the influence of every relation on a product. We want you to know all we know.

+ Collective knowledge, heath and excitement about our environment empowers us to grow further.

+ #a dummy text

+
+ +
+
+
+
+
+

Working with Nature

+

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.
+ We are currently aspiring to obtain the Demeteter label which proves that all principlels of biodynamic agriculture are approved .
+ 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.

+ #a dummy text

+
+ +
+
+ +
+
+
+

Exploring the full potential of CBD

+

The Cannabis plant consisists of more than 120 different cannabinoids which all affect our body and psyche in unique ways.
+ All our experiments are tailored to create exquisit compositions of different tastes and effects, just by manipulating environmental factors and the use of partnerplants.
+ 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.

+ We are experimenting with all available extraction methods and our products ship with a lab test.
+ #a dummy text

+
+ +
+
+ +
+
+
+

Automation for the People

+

If we talk about automation we mean people automating gardening for themselves, not people being automated.
+ 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.
+ 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.

+ #a dummy text

+
+ +
+
+ +
+
+
+

Collective Growth

+

We choose the business model of a collective for our project.
+ 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.
+ 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.

+ We want to share our data and every detail about what we are doing.
+ 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.
+ #a dummy text

+
+ +
+
+
+
+
+

Social Media

+ +
+
+
+
diff --git a/templates/assets/css/automation.css b/templates/assets/css/automation.css new file mode 100644 index 0000000..c515274 --- /dev/null +++ b/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; + } + +} + diff --git a/templates/assets/css/blog.css b/templates/assets/css/blog.css new file mode 100644 index 0000000..744f78e --- /dev/null +++ b/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); + } + + +} diff --git a/templates/assets/css/code.css b/templates/assets/css/code.css new file mode 100644 index 0000000..e5d3776 --- /dev/null +++ b/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); + } + +} diff --git a/templates/assets/css/diy.css b/templates/assets/css/diy.css new file mode 100644 index 0000000..f67c593 --- /dev/null +++ b/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; + } + + } + + \ No newline at end of file diff --git a/templates/assets/css/edibles.css b/templates/assets/css/edibles.css new file mode 100644 index 0000000..9dcb895 --- /dev/null +++ b/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; + } + +} diff --git a/templates/assets/css/flower.css b/templates/assets/css/flower.css new file mode 100644 index 0000000..46a8838 --- /dev/null +++ b/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; + } + + + +} + diff --git a/templates/assets/css/greenlab.css b/templates/assets/css/greenlab.css new file mode 100644 index 0000000..ee0eb05 --- /dev/null +++ b/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; + } + +} + diff --git a/templates/assets/css/iot.css b/templates/assets/css/iot.css new file mode 100644 index 0000000..98d0025 --- /dev/null +++ b/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; + } + +} + diff --git a/templates/assets/css/join.css b/templates/assets/css/join.css new file mode 100644 index 0000000..a1ec0b1 --- /dev/null +++ b/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; + } + +} diff --git a/templates/assets/css/meet.css b/templates/assets/css/meet.css new file mode 100644 index 0000000..d31bded --- /dev/null +++ b/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; + } + +} diff --git a/templates/assets/css/notes.txt b/templates/assets/css/notes.txt new file mode 100644 index 0000000..2de776e --- /dev/null +++ b/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 \ No newline at end of file diff --git a/templates/assets/css/oils.css b/templates/assets/css/oils.css new file mode 100644 index 0000000..c06abda --- /dev/null +++ b/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; + } + +} diff --git a/templates/assets/css/partners.css b/templates/assets/css/partners.css new file mode 100644 index 0000000..9bd8ce5 --- /dev/null +++ b/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); + } + + } + + \ No newline at end of file diff --git a/templates/assets/css/permapp.css b/templates/assets/css/permapp.css new file mode 100644 index 0000000..c4de062 --- /dev/null +++ b/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; + } + +} + diff --git a/templates/assets/css/spiderpi.css b/templates/assets/css/spiderpi.css new file mode 100644 index 0000000..3a2cd34 --- /dev/null +++ b/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; + } + + +} + diff --git a/templates/assets/css/whatsthat.css b/templates/assets/css/whatsthat.css new file mode 100644 index 0000000..88dc7fb --- /dev/null +++ b/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; + } + +} + diff --git a/templates/assets/css/whoweare.css b/templates/assets/css/whoweare.css new file mode 100644 index 0000000..8508b19 --- /dev/null +++ b/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%); + } +} diff --git a/templates/assets/img/cheers.svg b/templates/assets/img/cheers.svg new file mode 100644 index 0000000..3d3b3ff --- /dev/null +++ b/templates/assets/img/cheers.svg @@ -0,0 +1,1915 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/templates/assets/img/gitea-green.svg b/templates/assets/img/gitea-green.svg new file mode 100644 index 0000000..b5b6ce2 --- /dev/null +++ b/templates/assets/img/gitea-green.svg @@ -0,0 +1,78 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/templates/assets/img/instagram-black.png b/templates/assets/img/instagram-black.png new file mode 100644 index 0000000..ca78ba1 Binary files /dev/null and b/templates/assets/img/instagram-black.png differ diff --git a/templates/assets/img/permapp_black.svg b/templates/assets/img/permapp_black.svg new file mode 100644 index 0000000..d18b282 --- /dev/null +++ b/templates/assets/img/permapp_black.svg @@ -0,0 +1,132 @@ + + + + + + + + image/svg+xml + + + + + + + + Yin-Yang, by Adam Stanislav + 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 . + + + + + + + + + + + + + + + + + + + + diff --git a/templates/assets/img/plants-in-bags-owned.jpeg b/templates/assets/img/plants-in-bags-owned.jpeg new file mode 100644 index 0000000..25911cd Binary files /dev/null and b/templates/assets/img/plants-in-bags-owned.jpeg differ diff --git a/templates/assets/img/sample-about.svg b/templates/assets/img/sample-about.svg new file mode 100644 index 0000000..308a902 --- /dev/null +++ b/templates/assets/img/sample-about.svg @@ -0,0 +1,42763 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/assets/img/sample-app.jpg b/templates/assets/img/sample-app.jpg new file mode 100644 index 0000000..92c0659 Binary files /dev/null and b/templates/assets/img/sample-app.jpg differ diff --git a/templates/assets/img/sample-aqua.jpg b/templates/assets/img/sample-aqua.jpg new file mode 100644 index 0000000..dc650ef Binary files /dev/null and b/templates/assets/img/sample-aqua.jpg differ diff --git a/templates/assets/img/sample-biodyn.svg b/templates/assets/img/sample-biodyn.svg new file mode 100644 index 0000000..01cd041 --- /dev/null +++ b/templates/assets/img/sample-biodyn.svg @@ -0,0 +1,72180 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/templates/assets/img/sample-blog.svg b/templates/assets/img/sample-blog.svg new file mode 100644 index 0000000..3f577d0 --- /dev/null +++ b/templates/assets/img/sample-blog.svg @@ -0,0 +1,11656 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/templates/assets/img/sample-camera.jpg b/templates/assets/img/sample-camera.jpg new file mode 100644 index 0000000..470cfe3 Binary files /dev/null and b/templates/assets/img/sample-camera.jpg differ diff --git a/templates/assets/img/sample-close.jpg b/templates/assets/img/sample-close.jpg new file mode 100644 index 0000000..9f3dca6 Binary files /dev/null and b/templates/assets/img/sample-close.jpg differ diff --git a/templates/assets/img/sample-code1.jpg b/templates/assets/img/sample-code1.jpg new file mode 100644 index 0000000..630da2f Binary files /dev/null and b/templates/assets/img/sample-code1.jpg differ diff --git a/templates/assets/img/sample-coding-together.jpg b/templates/assets/img/sample-coding-together.jpg new file mode 100644 index 0000000..0232891 Binary files /dev/null and b/templates/assets/img/sample-coding-together.jpg differ diff --git a/templates/assets/img/sample-collective.jpg b/templates/assets/img/sample-collective.jpg new file mode 100644 index 0000000..2a06840 Binary files /dev/null and b/templates/assets/img/sample-collective.jpg differ diff --git a/templates/assets/img/sample-diy.jpg b/templates/assets/img/sample-diy.jpg new file mode 100644 index 0000000..0f86f09 Binary files /dev/null and b/templates/assets/img/sample-diy.jpg differ diff --git a/templates/assets/img/sample-farm.jpg b/templates/assets/img/sample-farm.jpg new file mode 100644 index 0000000..a6b83e1 Binary files /dev/null and b/templates/assets/img/sample-farm.jpg differ diff --git a/templates/assets/img/sample-fish.jpg b/templates/assets/img/sample-fish.jpg new file mode 100644 index 0000000..613e2e9 Binary files /dev/null and b/templates/assets/img/sample-fish.jpg differ diff --git a/templates/assets/img/sample-flower-closeup.svg b/templates/assets/img/sample-flower-closeup.svg new file mode 100644 index 0000000..6ff6626 --- /dev/null +++ b/templates/assets/img/sample-flower-closeup.svg @@ -0,0 +1,57275 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/templates/assets/img/sample-greenhouse.jpg b/templates/assets/img/sample-greenhouse.jpg new file mode 100644 index 0000000..a898572 Binary files /dev/null and b/templates/assets/img/sample-greenhouse.jpg differ diff --git a/templates/assets/img/sample-lab.jpg b/templates/assets/img/sample-lab.jpg new file mode 100644 index 0000000..3059f1c Binary files /dev/null and b/templates/assets/img/sample-lab.jpg differ diff --git a/templates/assets/img/sample-led.jpg b/templates/assets/img/sample-led.jpg new file mode 100644 index 0000000..92f6e8e Binary files /dev/null and b/templates/assets/img/sample-led.jpg differ diff --git a/templates/assets/img/sample-lemontree.jpg b/templates/assets/img/sample-lemontree.jpg new file mode 100644 index 0000000..d0e0dca Binary files /dev/null and b/templates/assets/img/sample-lemontree.jpg differ diff --git a/templates/assets/img/sample-migraines-art.jpg b/templates/assets/img/sample-migraines-art.jpg new file mode 100644 index 0000000..c774360 Binary files /dev/null and b/templates/assets/img/sample-migraines-art.jpg differ diff --git a/templates/assets/img/sample-mini-greenhouse.jpg b/templates/assets/img/sample-mini-greenhouse.jpg new file mode 100644 index 0000000..b898005 Binary files /dev/null and b/templates/assets/img/sample-mini-greenhouse.jpg differ diff --git a/templates/assets/img/sample-module.jpg b/templates/assets/img/sample-module.jpg new file mode 100644 index 0000000..2a0869d Binary files /dev/null and b/templates/assets/img/sample-module.jpg differ diff --git a/templates/assets/img/sample-oils-background.jpg b/templates/assets/img/sample-oils-background.jpg new file mode 100644 index 0000000..83d51a1 Binary files /dev/null and b/templates/assets/img/sample-oils-background.jpg differ diff --git a/templates/assets/img/sample-permapp-screen.png b/templates/assets/img/sample-permapp-screen.png new file mode 100644 index 0000000..b53b817 Binary files /dev/null and b/templates/assets/img/sample-permapp-screen.png differ diff --git a/templates/assets/img/sample-plants.jpg b/templates/assets/img/sample-plants.jpg new file mode 100644 index 0000000..173369e Binary files /dev/null and b/templates/assets/img/sample-plants.jpg differ diff --git a/templates/assets/img/sample-post.jpg b/templates/assets/img/sample-post.jpg index 93e56f0..8ec93a2 100644 Binary files a/templates/assets/img/sample-post.jpg and b/templates/assets/img/sample-post.jpg differ diff --git a/templates/assets/img/sample-product-candy.svg b/templates/assets/img/sample-product-candy.svg new file mode 100644 index 0000000..ef22b19 --- /dev/null +++ b/templates/assets/img/sample-product-candy.svg @@ -0,0 +1,75990 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/templates/assets/img/sample-product.svg b/templates/assets/img/sample-product.svg new file mode 100644 index 0000000..50604ef --- /dev/null +++ b/templates/assets/img/sample-product.svg @@ -0,0 +1,76086 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/templates/assets/img/sample-project.jpg b/templates/assets/img/sample-project.jpg new file mode 100644 index 0000000..ae84359 Binary files /dev/null and b/templates/assets/img/sample-project.jpg differ diff --git a/templates/assets/img/sample-spiderpi-helper.svg b/templates/assets/img/sample-spiderpi-helper.svg new file mode 100644 index 0000000..b780c42 --- /dev/null +++ b/templates/assets/img/sample-spiderpi-helper.svg @@ -0,0 +1,60385 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/templates/assets/img/sample-spiderwoman.png b/templates/assets/img/sample-spiderwoman.png new file mode 100644 index 0000000..a3863ad Binary files /dev/null and b/templates/assets/img/sample-spiderwoman.png differ diff --git a/templates/assets/img/sample-tom.jpg b/templates/assets/img/sample-tom.jpg new file mode 100644 index 0000000..b62d74a Binary files /dev/null and b/templates/assets/img/sample-tom.jpg differ diff --git a/templates/assets/img/sample-video.mp4 b/templates/assets/img/sample-video.mp4 new file mode 100644 index 0000000..567c5b5 Binary files /dev/null and b/templates/assets/img/sample-video.mp4 differ diff --git a/templates/assets/img/sample-virtual.jpg b/templates/assets/img/sample-virtual.jpg new file mode 100644 index 0000000..ce9a8d9 Binary files /dev/null and b/templates/assets/img/sample-virtual.jpg differ diff --git a/templates/assets/img/sample-waterflow.jpg b/templates/assets/img/sample-waterflow.jpg new file mode 100644 index 0000000..0ab3834 Binary files /dev/null and b/templates/assets/img/sample-waterflow.jpg differ diff --git a/templates/assets/img/sample-wild.jpg b/templates/assets/img/sample-wild.jpg new file mode 100644 index 0000000..fedbfc8 Binary files /dev/null and b/templates/assets/img/sample-wild.jpg differ diff --git a/templates/assets/js/notes.txt b/templates/assets/js/notes.txt new file mode 100644 index 0000000..ebb9e21 --- /dev/null +++ b/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 + diff --git a/templates/automation.html b/templates/automation.html index 4096ffe..30566f4 100644 --- a/templates/automation.html +++ b/templates/automation.html @@ -5,19 +5,19 @@ - - - - - + + + + + Cannabinieri - Automation - + @@ -25,25 +25,25 @@ - + diff --git a/templates/blog.html b/templates/blog.html index b5c1cc9..5bb2ebe 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -4,17 +4,17 @@ - - - - - + + + + + Cannabinieri - Blog - + @@ -22,7 +22,7 @@ @@ -30,7 +30,7 @@ @@ -38,18 +38,18 @@ - + diff --git a/templates/code.html b/templates/code.html index f23a3b3..04773b0 100644 --- a/templates/code.html +++ b/templates/code.html @@ -4,18 +4,18 @@ - - - - - + + + + + Cannabinieri - Code - + @@ -23,7 +23,7 @@ @@ -31,18 +31,18 @@ - + diff --git a/templates/diy.html b/templates/diy.html index 521a594..491f033 100644 --- a/templates/diy.html +++ b/templates/diy.html @@ -4,18 +4,18 @@ - - - - - + + + + + Cannabinieri - DiY - + @@ -23,7 +23,7 @@ @@ -31,18 +31,18 @@ - + diff --git a/templates/edibles.html b/templates/edibles.html index 6baa589..99b3984 100644 --- a/templates/edibles.html +++ b/templates/edibles.html @@ -4,17 +4,17 @@ - - - - + + + + Cannabinieri - Edibles - + @@ -22,25 +22,25 @@ - + diff --git a/templates/flower.html b/templates/flower.html index ea1dcd2..61349f3 100644 --- a/templates/flower.html +++ b/templates/flower.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,7 +22,7 @@ @@ -30,20 +30,20 @@ - + - +
@@ -51,6 +51,5 @@
- diff --git a/templates/greenlab.html b/templates/greenlab.html index bc5678d..4448c4b 100644 --- a/templates/greenlab.html +++ b/templates/greenlab.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,25 +22,25 @@ - + diff --git a/templates/iot.html b/templates/iot.html index a4ef976..9b57702 100644 --- a/templates/iot.html +++ b/templates/iot.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,25 +22,25 @@ - + diff --git a/templates/join.html b/templates/join.html index 69c199e..30a4317 100644 --- a/templates/join.html +++ b/templates/join.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,25 +22,25 @@ - + diff --git a/templates/meet.html b/templates/meet.html index 486b976..11117eb 100644 --- a/templates/meet.html +++ b/templates/meet.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,25 +22,25 @@ - + @@ -50,6 +50,8 @@
- + diff --git a/templates/oils.html b/templates/oils.html index add2001..c09de41 100644 --- a/templates/oils.html +++ b/templates/oils.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,25 +22,25 @@ - + diff --git a/templates/partners.html b/templates/partners.html index 65afa5b..ee00114 100644 --- a/templates/partners.html +++ b/templates/partners.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,7 +22,7 @@ @@ -30,18 +30,18 @@ - + diff --git a/templates/permapp.html b/templates/permapp.html index ff18995..3847e65 100644 --- a/templates/permapp.html +++ b/templates/permapp.html @@ -4,17 +4,17 @@ - - - - + + + + Cannabinieri -PerMapp - + @@ -22,25 +22,25 @@ - + diff --git a/templates/spiderpi.html b/templates/spiderpi.html index 74b346c..69b898c 100644 --- a/templates/spiderpi.html +++ b/templates/spiderpi.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,25 +22,25 @@ - + diff --git a/templates/whatsthat.html b/templates/whatsthat.html index 477fff8..2b82349 100644 --- a/templates/whatsthat.html +++ b/templates/whatsthat.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,25 +22,25 @@ - + diff --git a/templates/whoweare.html b/templates/whoweare.html index 07fd20d..9f23291 100644 --- a/templates/whoweare.html +++ b/templates/whoweare.html @@ -5,16 +5,16 @@ - - - - - - + + + + + + @@ -22,7 +22,7 @@ @@ -30,18 +30,18 @@ - +