v3
This commit is contained in:
Xsivax
parent
abf475e516
commit
2e66c3f236
18 changed files with 686 additions and 1482 deletions
|
|
@ -16,35 +16,37 @@ use rocket_dyn_templates::Template;
|
||||||
// if success call handler
|
// if success call handler
|
||||||
pub fn index() -> Template {
|
pub fn index() -> Template {
|
||||||
let context = templates::TplIndex::new();
|
let context = templates::TplIndex::new();
|
||||||
Template::render("index", &context)
|
Template::render("home", &context)
|
||||||
}
|
}
|
||||||
|
|
||||||
// serve other pages (html GET)
|
// serve other pages (html GET)
|
||||||
// create routes for pages
|
// create routes for main pages
|
||||||
#[get("/experiments")]
|
#[get("/hemp")]
|
||||||
pub async fn experiments() -> Result<NamedFile, NotFound<String>> {
|
pub async fn hemp() -> Result<NamedFile, NotFound<String>> {
|
||||||
NamedFile::open("templates/experiments.html").await.map_err(|e|NotFound(e.to_string()))
|
NamedFile::open("templates/experiments.html").await.map_err(|e|NotFound(e.to_string()))
|
||||||
}
|
}
|
||||||
|
|
||||||
#[get("/permaculture")]
|
|
||||||
pub async fn perma() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/permaculture.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/greentech")]
|
|
||||||
pub async fn greentech() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/greentech.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/spider")]
|
#[get("/spider")]
|
||||||
pub async fn spider() -> Option<NamedFile> {
|
pub async fn spider() -> Option<NamedFile> {
|
||||||
NamedFile::open("templates/spider.html").await.ok()
|
NamedFile::open("templates/spider.html").await.ok()
|
||||||
}
|
}
|
||||||
|
|
||||||
#[get("/learn")]
|
#[get("/permapp")]
|
||||||
pub async fn learn() -> Option<NamedFile> {
|
pub async fn permapp() -> Option<NamedFile> {
|
||||||
|
NamedFile::open("templates/permapp.html").await.ok()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[get("/cyberpreneur")]
|
||||||
|
pub async fn cyber() -> Option<NamedFile> {
|
||||||
|
NamedFile::open("templates/greentech.html").await.ok()
|
||||||
|
}
|
||||||
|
|
||||||
|
#[get("/offgrid")]
|
||||||
|
pub async fn offgrid() -> Option<NamedFile> {
|
||||||
NamedFile::open("templates/learn.html").await.ok()
|
NamedFile::open("templates/learn.html").await.ok()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// subpages
|
||||||
|
|
||||||
#[get("/oil")]
|
#[get("/oil")]
|
||||||
pub async fn oil() -> Option<NamedFile> {
|
pub async fn oil() -> Option<NamedFile> {
|
||||||
|
|
@ -55,60 +57,26 @@ use rocket_dyn_templates::Template;
|
||||||
pub async fn flower() -> Option<NamedFile> {
|
pub async fn flower() -> Option<NamedFile> {
|
||||||
NamedFile::open("templates/flower.html").await.ok()
|
NamedFile::open("templates/flower.html").await.ok()
|
||||||
}
|
}
|
||||||
|
|
||||||
#[get("/candy")]
|
#[get("/spiderpi")]
|
||||||
pub async fn candy() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/edibles.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/permApp")]
|
|
||||||
pub async fn permapp() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/permapp.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/greenlab")]
|
|
||||||
pub async fn greenlab() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/greenlab.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/about")]
|
|
||||||
pub async fn about_perma() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/whatsthat.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/automation")]
|
|
||||||
pub async fn automation() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/automation.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/DiY")]
|
|
||||||
pub async fn diy() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/diy.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/IoT")]
|
|
||||||
pub async fn iot() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/iot.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/spiderPi")]
|
|
||||||
pub async fn spiderpi() -> Option<NamedFile> {
|
pub async fn spiderpi() -> Option<NamedFile> {
|
||||||
NamedFile::open("templates/spiderpi.html").await.ok()
|
NamedFile::open("templates/spiderpi.html").await.ok()
|
||||||
}
|
}
|
||||||
|
|
||||||
#[get("/join")]
|
#[get("/kaoscube")]
|
||||||
pub async fn join() -> Option<NamedFile> {
|
pub async fn join() -> Option<NamedFile> {
|
||||||
NamedFile::open("templates/join.html").await.ok()
|
NamedFile::open("templates/join.html").await.ok()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[get("/wohnmaschine")]
|
||||||
|
pub async fn wm() -> Option<NamedFile> {
|
||||||
|
NamedFile::open("templates/greenlab.html").await.ok()
|
||||||
|
}
|
||||||
|
|
||||||
|
// footer pages
|
||||||
#[get("/about")]
|
#[get("/about")]
|
||||||
pub async fn about() -> Option<NamedFile> {
|
pub async fn about() -> Option<NamedFile> {
|
||||||
NamedFile::open("templates/whoweare.html").await.ok()
|
NamedFile::open("templates/about.html").await.ok()
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/partners")]
|
|
||||||
pub async fn partners() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/partners.html").await.ok()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#[get("/contact")]
|
#[get("/contact")]
|
||||||
|
|
@ -116,20 +84,7 @@ use rocket_dyn_templates::Template;
|
||||||
NamedFile::open("templates/meet.html").await.ok()
|
NamedFile::open("templates/meet.html").await.ok()
|
||||||
}
|
}
|
||||||
|
|
||||||
#[get("/blog")]
|
// code link to gitea
|
||||||
pub async fn blog() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/blog.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/code")]
|
|
||||||
pub async fn code() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/code.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/")]
|
|
||||||
pub async fn policies_info() -> Option<NamedFile> {
|
|
||||||
NamedFile::open("templates/policies.html").await.ok()
|
|
||||||
}
|
|
||||||
|
|
||||||
#[get("/privacy")]
|
#[get("/privacy")]
|
||||||
pub fn privacy() -> Template {
|
pub fn privacy() -> Template {
|
||||||
|
|
|
||||||
18
src/main.rs
18
src/main.rs
|
|
@ -27,20 +27,14 @@ async fn main() -> Result<(), rocket::Error> {
|
||||||
.mount("/",
|
.mount("/",
|
||||||
routes![
|
routes![
|
||||||
get::index, get_static_files::fileserver,
|
get::index, get_static_files::fileserver,
|
||||||
get::experiments, get::perma, get::greentech, get::spider, get::learn ])
|
get::hemp, get::spider, get::permapp, get::cyber, get::offgrid, get::about, get::meet, get::privacy ])
|
||||||
.mount("/experiments",
|
.mount("/hemp",
|
||||||
routes! [ get::oil, get::flower, get::candy ])
|
routes! [ get::oil, get::flower])
|
||||||
.mount("/permaculture",
|
|
||||||
routes! [ get::permapp, get::greenlab, get::about_perma ])
|
|
||||||
.mount("/greentech",
|
|
||||||
routes! [ get::automation, get::iot, get::diy ])
|
|
||||||
.mount("/spider",
|
.mount("/spider",
|
||||||
routes! [ get::spiderpi, get::join ])
|
routes! [ get::spiderpi, get::join ])
|
||||||
.mount("/learn",
|
|
||||||
routes! [ get::about, get::partners, get::meet, get::blog, get::code ])
|
|
||||||
|
|
||||||
.mount("/policies",
|
.mount("/offgrid",
|
||||||
routes! [ get::policies_info, get::privacy ])
|
routes! [ get::wm, ])
|
||||||
|
|
||||||
// Add Tera Templating support
|
// Add Tera Templating support
|
||||||
.attach(Template::fairing())
|
.attach(Template::fairing())
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="column2">
|
<div id="column2">
|
||||||
<h6 onclick="show()">Information
|
<h6 onclick="show()"> About Cannabinieri
|
||||||
<span class="show">
|
<span class="show">
|
||||||
<i class="arrow down"></i>
|
<i class="arrow down"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
</picture>
|
</picture>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<!--desktop nav-->
|
||||||
<nav class="main-navigation-bar">
|
<nav class="main-navigation-bar">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a type="text/html" href="/experiments"> EXPERIMENTS </a>
|
<li><a type="text/html" href="/experiments"> EXPERIMENTS </a>
|
||||||
|
|
@ -15,7 +16,7 @@
|
||||||
<li><a type="text/html" href="/experiments/flower">Flower</a></li>
|
<li><a type="text/html" href="/experiments/flower">Flower</a></li>
|
||||||
<li><a type="text/html" href="/experiments/candy">Edibles</a></li>
|
<li><a type="text/html" href="/experiments/candy">Edibles</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a type="text/html" href="/permaculture">PERMACULTURE</a>
|
<li><a type="text/html" href="/permaculture">PERMACULTURE</a>
|
||||||
|
|
@ -54,7 +55,9 @@
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
<!--mobile nav-->
|
||||||
<nav class="hamburger-wrap">
|
<nav class="hamburger-wrap">
|
||||||
<input type="checkbox" class="ham-btn" id="ham-btn">
|
<input type="checkbox" class="ham-btn" id="ham-btn">
|
||||||
<label for="ham-btn" class="hamburger" id="hamburger" onclick= "menu()" onclick="hide()">
|
<label for="ham-btn" class="hamburger" id="hamburger" onclick= "menu()" onclick="hide()">
|
||||||
|
|
@ -124,7 +127,6 @@
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
|
||||||
<a class="button" href="#">Shop</a>
|
<a class="button" href="#">Shop</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
19
templates/assets/css/base.css
Normal file
19
templates/assets/css/base.css
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
/*overflow: hidden;*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
body .navigation {
|
||||||
|
height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .content {
|
||||||
|
min-height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .footer {
|
||||||
|
max-height: 40vh;
|
||||||
|
}
|
||||||
|
|
@ -5,509 +5,44 @@
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
*{
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root{
|
footer .footer_container {
|
||||||
--top_padding:5px;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
html,
|
align-items: center;
|
||||||
body {
|
background-color: #000;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
font-weight:500;
|
padding: 1rem 0;
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1024px){
|
.footer_container .column {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
footer {
|
letter-spacing: .15rem;
|
||||||
grid-area:footer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer-wrapper {
|
.footer_container h6 {
|
||||||
color: white !important;
|
|
||||||
border-top: solid 3px white;
|
|
||||||
border-bottom: solid 1px white;
|
|
||||||
background-color: black;
|
|
||||||
height:100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 0.8fr 1fr 1fr;
|
|
||||||
grid-template-rows: 2fr 1fr;
|
|
||||||
padding-bottom:1%;
|
|
||||||
padding-top: 10vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column1 {
|
|
||||||
background-color: black;
|
|
||||||
display: none;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column1 a h3 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul {
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul li p a {
|
|
||||||
text-decoration:none;
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul li {
|
|
||||||
margin: 5vh 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
font-weight: 350;
|
|
||||||
font-size: 135%;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul li a:hover {
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul {
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul li p a {
|
|
||||||
text-decoration:none;
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul li {
|
|
||||||
margin: 5vh 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul li a:hover {
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
#column4 {
|
|
||||||
display:flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#column4 p {
|
|
||||||
font-size: 2vh;
|
|
||||||
line-height: 4vh;
|
|
||||||
margin-top: 5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column5 {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column5 #social-media {
|
|
||||||
margin-top: 5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social-media ul {
|
|
||||||
margin-top:1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social-media ul li {
|
|
||||||
display:inline;
|
|
||||||
list-style-type: none;
|
|
||||||
padding-left: 9%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social-media ul li .youtube {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#youtube {
|
|
||||||
height: auto;
|
|
||||||
width: 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#instagram {
|
|
||||||
height:auto;
|
|
||||||
width: 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gitea {
|
|
||||||
height:auto;
|
|
||||||
width: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row2 {
|
|
||||||
border-top: .1em solid white;
|
|
||||||
color: white;
|
|
||||||
grid-column: 1/2;
|
|
||||||
display:flex;
|
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
padding-top: 1vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row2 p {
|
|
||||||
text-align: center;
|
|
||||||
padding-top:2%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row3 {
|
|
||||||
grid-column: 3/5;
|
|
||||||
display:flex;
|
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row3 .languages a {
|
|
||||||
color: #fff;
|
|
||||||
padding: 0 1vh !important;
|
|
||||||
transition: all .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row3 .languages a:hover {
|
|
||||||
color:hsl(160, 50%, 70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow .down {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dropdown {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ham-btn {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-icon{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer-languages {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1023px) {
|
|
||||||
|
|
||||||
footer {
|
|
||||||
grid-area:footer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer-wrapper {
|
|
||||||
grid-template-columns: 50% 50%;
|
|
||||||
grid-template-rows: .6fr 0.1fr 0.1fr 0.1fr 0.1fr;
|
|
||||||
display: grid;
|
|
||||||
background-color:black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column1 {
|
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 25vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column1 a {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-left: 0;
|
|
||||||
font-size:100%;
|
|
||||||
padding-top:5%;
|
|
||||||
padding-bottom:5%;
|
|
||||||
display:flex;
|
|
||||||
padding-left: 2.5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column1 a:active {
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
#column1 a h3 {
|
|
||||||
display:flex;
|
|
||||||
align-items: center;
|
|
||||||
letter-spacing: .1em;
|
|
||||||
font-weight: 100;
|
|
||||||
padding-left: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column1 a h3 span {
|
|
||||||
color: hsl(160, 51%, 80%);
|
|
||||||
letter-spacing: .095em;
|
|
||||||
margin-right: .5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2{
|
|
||||||
grid-column:1/3;
|
|
||||||
grid-row: 2;
|
|
||||||
margin-top:0;
|
|
||||||
border-top:1px solid white;
|
|
||||||
padding-top:5%;
|
|
||||||
padding-left: 5%;
|
|
||||||
padding-right: 5%;
|
|
||||||
padding-bottom: 5%;
|
|
||||||
border-bottom:1px solid white;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul {
|
|
||||||
display:none;
|
|
||||||
position: relative;
|
|
||||||
width:100%;
|
|
||||||
overflow:auto;
|
|
||||||
z-index: 1;
|
|
||||||
list-style : none;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 1vh 5% 0 5%;
|
|
||||||
text-align: center;
|
|
||||||
border-top: 1px solid rgb(62, 190, 147);
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul li p a {
|
|
||||||
font-weight: 300;
|
|
||||||
text-decoration: none;
|
|
||||||
color:white;
|
|
||||||
letter-spacing: .075em
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul li p a:active{
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
#column2 ul li {
|
|
||||||
margin-bottom: 5%;
|
|
||||||
margin-top:5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 100%;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: .075em;
|
|
||||||
padding: 2vh 0;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color:white;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: .6s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6:active {
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
border: solid white;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.down {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
position: relative;
|
|
||||||
margin-left:55%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.down2 {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
position: relative;
|
|
||||||
margin-left:73%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#column3 {
|
|
||||||
grid-column: 1/3;
|
|
||||||
grid-row: 3;
|
|
||||||
margin-top:0;
|
|
||||||
border-top:1px solid white;
|
|
||||||
padding-top:5%;
|
|
||||||
padding-bottom:4%;
|
|
||||||
padding-left: 5%;
|
|
||||||
padding-right: 1%;
|
|
||||||
border-bottom:1px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul {
|
|
||||||
display:none;
|
|
||||||
position: relative;
|
|
||||||
width:100%;
|
|
||||||
overflow:auto;
|
|
||||||
z-index: 1;
|
|
||||||
list-style : none;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-top: 1px solid rgb(62, 190, 147);
|
|
||||||
padding-right: 5%;
|
|
||||||
padding-left: 5%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 h6 {
|
|
||||||
padding: 2vh 0;
|
|
||||||
transition: .6s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul li {
|
|
||||||
margin: 5vh 0 3vh 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul li p a {
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
text-decoration:none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column3 ul li p a:active {
|
|
||||||
color: hsl(160, 100%, 50%);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#column4 {
|
|
||||||
grid-column: 1/3;
|
|
||||||
grid-row:4;
|
|
||||||
border-bottom: solid white 1px;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column4 p {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
padding: 1.5vh 0;
|
|
||||||
color:white;
|
|
||||||
font-size: 1.75vh;
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
font-size: .95rem;
|
||||||
|
letter-spacing: .075em;
|
||||||
|
padding: 2vh 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
color:#fff;
|
||||||
|
}
|
||||||
#column4 h6 {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column5 {
|
.footer_container h6 a {
|
||||||
grid-column:2;
|
cursor: pointer;
|
||||||
grid-row: 1;
|
text-decoration: none;
|
||||||
margin-top:15%;
|
color: #fff;
|
||||||
padding-bottom: 10%;
|
transition: .6s ease;
|
||||||
display:flex;
|
}
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social-media {
|
.footer_container p {
|
||||||
padding-left: 5vh;
|
color: #fff;
|
||||||
}
|
font-size: .85rem;
|
||||||
|
letter-spacing: .075em;
|
||||||
|
}
|
||||||
|
|
||||||
#social-media ul li {
|
.footer_container h6:active {
|
||||||
display:inline;
|
opacity: 50%;
|
||||||
list-style-type: none;
|
}
|
||||||
padding-left: 10%;
|
|
||||||
padding-bottom:5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#column5 h6 {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gitea {
|
|
||||||
width:18%;
|
|
||||||
height:auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#youtube {
|
|
||||||
height: auto;
|
|
||||||
width: 4.5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#instagram {
|
|
||||||
height:auto;
|
|
||||||
width: 6.5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row2 {
|
|
||||||
grid-column:1;
|
|
||||||
grid-row:5;
|
|
||||||
display:flex;
|
|
||||||
align-items:center;
|
|
||||||
justify-content:center;
|
|
||||||
margin: 2.5vh 0;
|
|
||||||
background-color: black;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: .095em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row2 p {
|
|
||||||
align-items: center;
|
|
||||||
padding-top:0;
|
|
||||||
font-size: .75em;
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row3 {
|
|
||||||
grid-column:2/3;
|
|
||||||
grid-row:5;
|
|
||||||
margin: 2.5vh 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row3 .languages {
|
|
||||||
margin-left:0;
|
|
||||||
align-self:flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row3 .languages a {
|
|
||||||
color: hsl(160, 51%, 80%);
|
|
||||||
font-size: .75em;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#row3 .languages a:active {
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
.desktop {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
107
templates/assets/css/home.css
Normal file
107
templates/assets/css/home.css
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
src: url('fonts/Lato-Thin.ttf') format('truetype');
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: 120vh !important;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: repeat(8, 1fr);
|
||||||
|
margin-top: .2rem;
|
||||||
|
font-family: 'Lato', sans-serif;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container img {
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
max-width: 100vw;
|
||||||
|
grid-column: 1/3;
|
||||||
|
grid-row: 1/9;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link button {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: .1rem solid hsl(300, 100%, 50%);
|
||||||
|
background-color: hsl(300, 100%, 50%);
|
||||||
|
transition: all .5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hemp button:active {
|
||||||
|
box-shadow: 0px 0px 10px hsl(300, 100%, 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link button a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
transition: all .4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link button a:active {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link h6 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: .85rem;
|
||||||
|
letter-spacing: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link p {
|
||||||
|
font-size: .65rem;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #333;
|
||||||
|
color: #eee;
|
||||||
|
line-height: 2.25vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hemp {
|
||||||
|
grid-column: 1/3;
|
||||||
|
grid-row: 1;
|
||||||
|
z-index: 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(3, 1fr)
|
||||||
|
}
|
||||||
|
|
||||||
|
#hemp button {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
|
justify-self: start;
|
||||||
|
align-self: end;
|
||||||
|
margin-left: 2.4rem;
|
||||||
|
margin-bottom: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#hemp h6 {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
justify-self: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hemp p {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.content {
|
||||||
|
height: 250vh !important;
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
.top-bar {
|
.top-bar {
|
||||||
background-color:white;
|
background-color:white;
|
||||||
grid-area: top-bar;
|
grid-area: top-bar;
|
||||||
display: flex !important;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1472,7 +1472,7 @@
|
||||||
|
|
||||||
/* Adjust Media Queries ! */
|
/* Adjust Media Queries ! */
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -2950,6 +2950,7 @@
|
||||||
.desktop {
|
.desktop {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,375 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'Fira Sans Thin', sans-serif;
|
|
||||||
src: url('fonts/FiraSans-Thin.ttf') format('truetype');
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
src: url('fonts/Lato-Thin.ttf') format('truetype');
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
*{
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root{
|
|
||||||
--top_padding:5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px){
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-nav {
|
|
||||||
z-index:3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
background-color:white;
|
|
||||||
grid-area: top-bar;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-family: 'Fira Sans', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.languages {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 2vh;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.languages a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
color: #555;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 1vh;
|
|
||||||
font-weight: 100;
|
|
||||||
font-size: 1.95vh;
|
|
||||||
transition: ease .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.languages a:hover {
|
|
||||||
color: hsl(160, 51%, 60%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-bar {
|
|
||||||
background-color: black;
|
|
||||||
grid-area: main-bar;
|
|
||||||
z-index:1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-top: 1px solid rgb(62, 190, 147);
|
|
||||||
border-bottom: 3px solid rgb(62, 190, 147);
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-width: 100vw;
|
|
||||||
height: 80%;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo-container {
|
|
||||||
margin-top:6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
z-index:3;
|
|
||||||
width: 30vh;
|
|
||||||
margin-left: 7.5vh;
|
|
||||||
margin-top: 2.5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar {
|
|
||||||
z-index: 2;
|
|
||||||
display:flex;
|
|
||||||
align-items:center;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 10vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul {
|
|
||||||
list-style:none;
|
|
||||||
position:relative;
|
|
||||||
align-items:center;
|
|
||||||
padding-top: 2%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar a {
|
|
||||||
align-items:center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 50px;
|
|
||||||
font-size: 2.55vh;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul li {
|
|
||||||
position:relative;
|
|
||||||
width:100%;
|
|
||||||
text-align: center;
|
|
||||||
padding-right: 4%;
|
|
||||||
transition: ease .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul li a:hover {
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul #learn {
|
|
||||||
width:10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul li a {
|
|
||||||
color:white;
|
|
||||||
text-decoration: none;
|
|
||||||
justify-content: space-between;
|
|
||||||
line-height: 50px;
|
|
||||||
font-family: 'Lato' , sans-serif;
|
|
||||||
font-weight: 300 !important;
|
|
||||||
padding: 2vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul li #edit {
|
|
||||||
padding-right:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul li .pc {
|
|
||||||
|
|
||||||
padding-left:1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul ul {
|
|
||||||
border-top: 3px solid rgb(62, 190, 147);
|
|
||||||
position: absolute;
|
|
||||||
top: 90%;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.main-navigation-bar ul li li {
|
|
||||||
position: relative;
|
|
||||||
float:left;
|
|
||||||
display: list-item;
|
|
||||||
background-color: #000;
|
|
||||||
opacity: 95%;
|
|
||||||
padding: 1.75vh 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul li .lastItem {
|
|
||||||
padding-bottom: 2.25vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar ul li li a {
|
|
||||||
font-size: 2.65vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.main-navigation-bar ul li:hover > ul {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1023px) {
|
|
||||||
|
|
||||||
body{
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-navigation-bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-bar {
|
|
||||||
grid-area: main-bar;
|
|
||||||
background-color: black;
|
|
||||||
display:flex;
|
|
||||||
border-bottom: 6px solid hsl(160, 51%, 49%);
|
|
||||||
padding: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: auto;
|
|
||||||
height: 17.5vh;
|
|
||||||
padding: 1vh 0 0 .5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-bar h3 {
|
|
||||||
display:none;
|
|
||||||
color: white;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding-top:0;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-left:10%;
|
|
||||||
margin-bottom: 10%;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-wrap {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger {
|
|
||||||
padding: 0 0 0 55vw;
|
|
||||||
display: flex;
|
|
||||||
cursor:pointer;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger .hamburger-icon {
|
|
||||||
width: 7.5vw;
|
|
||||||
height: 2.5px;
|
|
||||||
background-color:white;
|
|
||||||
display: block;
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger .hamburger-icon::before,
|
|
||||||
.hamburger .hamburger-icon::after {
|
|
||||||
content:'';
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
background-color: white;
|
|
||||||
display: block;
|
|
||||||
position:absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger .hamburger-icon::after{
|
|
||||||
top: -7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger .hamburger-icon::before{
|
|
||||||
top: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ham-btn {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ham-btn:checked .hamburger .hamburger-icon {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown-container {
|
|
||||||
background-color: black;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 18.5vh;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 2;
|
|
||||||
padding-bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown {
|
|
||||||
margin: 1em;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown ul {
|
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown ul li {
|
|
||||||
margin: 2vh 0 5vh 0;
|
|
||||||
display:flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown ul li a {
|
|
||||||
color :white;
|
|
||||||
text-decoration:none;
|
|
||||||
font-size: 3vh;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.8em;
|
|
||||||
justify-self: center;
|
|
||||||
align-self: center;
|
|
||||||
margin-bottom: 1vh;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown ul li a:hover ,#mobile-dropdown ul li a:active{
|
|
||||||
color: rgb(0, 255, 170);
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-dropdown ul li ul li a {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#down, #down1, #down2, #down3, #down4 {
|
|
||||||
background-color: black;
|
|
||||||
display: none;
|
|
||||||
border: 1px solid rgb(0, 255, 170);
|
|
||||||
border-radius: 25px;
|
|
||||||
margin-top: 3vh;
|
|
||||||
padding: 1vh 5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#down li {
|
|
||||||
margin: 1vh 0 2vh 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#down li a {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.drop .arrow {
|
|
||||||
border: solid rgb(0, 255, 170);
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1.25vw;
|
|
||||||
transition: .1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop .arrow:active {
|
|
||||||
color: #906090;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow:active{
|
|
||||||
color:pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
.down {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
#trigger {
|
|
||||||
background-color:pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
234
templates/assets/css/navigation.css
Normal file
234
templates/assets/css/navigation.css
Normal file
|
|
@ -0,0 +1,234 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
src: url('fonts/Lato-Thin.ttf') format('truetype');
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main_bar {
|
||||||
|
background-color: #000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 5rem;
|
||||||
|
border-bottom: .2rem solid hsl(160, 51%, 49%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: auto;
|
||||||
|
height: 4.5rem;
|
||||||
|
margin: .25rem 0 0 .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger_wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger_wrapper #icon {
|
||||||
|
color: #fff;
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile_dropdown_container {
|
||||||
|
background-color: rgb(0, 255, 170);
|
||||||
|
opacity: 95%;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile_dropdown_container #mobile_dropdown {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mobile_dropdown ul {
|
||||||
|
list-style: none;
|
||||||
|
max-height: 16vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mobile_dropdown ul li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: .75rem;
|
||||||
|
max-height: 5vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#mobile_dropdown ul li a {
|
||||||
|
color:#000;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.8em;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
letter-spacing: .2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mobile_dropdown ul li li a {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mobile_dropdown ul li a:active {
|
||||||
|
opacity: 50%;
|
||||||
|
color: rgb(0, 255, 170);
|
||||||
|
transition: all ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron {
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 200;
|
||||||
|
position: fixed;
|
||||||
|
background-color: hsl(300, 100%, 50%);
|
||||||
|
max-height: 30vh;
|
||||||
|
margin-top: 5rem;
|
||||||
|
min-width: 80%;
|
||||||
|
right: 10%;
|
||||||
|
border-radius: .2rem;
|
||||||
|
box-shadow:.1rem .1rem #888;
|
||||||
|
opacity: 85%;
|
||||||
|
transition: all .7 ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#down_5 {
|
||||||
|
bottom: 24%;
|
||||||
|
max-height: 40vh !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:768px) {
|
||||||
|
.main_bar {
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: .25rem solid rgb(62, 190, 147);
|
||||||
|
height: 7.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main_bar #logo_container {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
z-index:3;
|
||||||
|
height: 10rem;
|
||||||
|
width: auto;
|
||||||
|
margin-left: 2.5rem;
|
||||||
|
margin-top: .5rem;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger_wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile_dropdown_container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation {
|
||||||
|
z-index: 2;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 30%;
|
||||||
|
padding-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul {
|
||||||
|
list-style: none;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul li {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
transition: ease .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul li:hover {
|
||||||
|
opacity: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul li a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 50px;
|
||||||
|
font-family: 'Lato' , sans-serif;
|
||||||
|
font-weight: 300 !important;
|
||||||
|
padding: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul ul {
|
||||||
|
border-top: 3px solid rgb(62, 190, 147);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
max-height: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#broader {
|
||||||
|
min-width: 15vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul li li {
|
||||||
|
position: relative;
|
||||||
|
display: list-item;
|
||||||
|
background-color: #000;
|
||||||
|
opacity: 95%;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation #fix {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul li #fix {
|
||||||
|
padding: 0 .6rem 0 .475rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul li li a {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop_navigation ul li:hover > ul {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
BIN
templates/assets/img/hero.png
Normal file
BIN
templates/assets/img/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
|
|
@ -1,3 +1,93 @@
|
||||||
|
// show mobile menu onclick
|
||||||
|
|
||||||
|
document.getElementById("icon").addEventListener("click", function menu() {
|
||||||
|
var x = document.getElementById("md");
|
||||||
|
if (x.style.display === "none") {
|
||||||
|
x.style.display = "flex";}
|
||||||
|
else {
|
||||||
|
x.style.display ="none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// show experiments submenu
|
||||||
|
|
||||||
|
document.getElementById("chevron_1").addEventListener("click", function menu() {
|
||||||
|
var x= document.getElementById("down_1");
|
||||||
|
if (x.style.display === "none") {
|
||||||
|
x.style.display = "flex";}
|
||||||
|
else {
|
||||||
|
x.style.display ="none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// permaculture submenu
|
||||||
|
|
||||||
|
document.getElementById("chevron_2").addEventListener("click", function menu() {
|
||||||
|
var x= document.getElementById("down_2");
|
||||||
|
if (x.style.display === "none") {
|
||||||
|
x.style.display = "flex";}
|
||||||
|
else {
|
||||||
|
x.style.display ="none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// greentech submenu
|
||||||
|
|
||||||
|
document.getElementById("chevron_3").addEventListener("click", function menu() {
|
||||||
|
var x= document.getElementById("down_3");
|
||||||
|
if (x.style.display === "none") {
|
||||||
|
x.style.display = "flex";}
|
||||||
|
else {
|
||||||
|
x.style.display ="none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// spiderpi submenu
|
||||||
|
|
||||||
|
document.getElementById("chevron_4").addEventListener("click", function menu() {
|
||||||
|
var x= document.getElementById("down_4");
|
||||||
|
if (x.style.display === "none") {
|
||||||
|
x.style.display = "flex";}
|
||||||
|
else {
|
||||||
|
x.style.display ="none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// about submenu
|
||||||
|
|
||||||
|
document.getElementById("chevron_5").addEventListener("click", function menu() {
|
||||||
|
var x= document.getElementById("down_5");
|
||||||
|
if (x.style.display === "none") {
|
||||||
|
x.style.display = "flex";}
|
||||||
|
else {
|
||||||
|
x.style.display ="none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// this function shows an element by id
|
// this function shows an element by id
|
||||||
|
|
@ -19,59 +109,4 @@ function display() {
|
||||||
else {
|
else {
|
||||||
x.style.display ="none";
|
x.style.display ="none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function menu() {
|
|
||||||
var x= document.getElementById("mobile-dropdown");
|
|
||||||
if (x.style.display === "none") {
|
|
||||||
x.style.display = "block";}
|
|
||||||
else {
|
|
||||||
x.style.display ="none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function menu2() {
|
|
||||||
var x= document.getElementById("down");
|
|
||||||
if (x.style.display === "none") {
|
|
||||||
x.style.display = "block";}
|
|
||||||
else {
|
|
||||||
x.style.display ="none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function menu3() {
|
|
||||||
var x= document.getElementById("down1");
|
|
||||||
if (x.style.display === "none") {
|
|
||||||
x.style.display = "block";}
|
|
||||||
else {
|
|
||||||
x.style.display ="none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function menu4() {
|
|
||||||
var x= document.getElementById("down2");
|
|
||||||
if (x.style.display === "none") {
|
|
||||||
x.style.display = "block";}
|
|
||||||
else {
|
|
||||||
x.style.display ="none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function menu5() {
|
|
||||||
var x= document.getElementById("down3");
|
|
||||||
if (x.style.display === "none") {
|
|
||||||
x.style.display = "block";}
|
|
||||||
else {
|
|
||||||
x.style.display ="none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function menu6() {
|
|
||||||
var x= document.getElementById("down4");
|
|
||||||
if (x.style.display === "none") {
|
|
||||||
x.style.display = "block";}
|
|
||||||
else {
|
|
||||||
x.style.display ="none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +1,27 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="icon" type=image/svg+xml href="../img/Logo.svg">
|
<link rel="stylesheet" type="text/css" href="css/base.css">
|
||||||
<title>{% block title %}Base{% endblock title %} </title>
|
<link rel="stylesheet" type="text/css" href="css/navigation.css" />
|
||||||
{% endblock head %}
|
<link rel="stylesheet" type="text/css" href="css/footer.css" />
|
||||||
</head>
|
<link rel="icon" type=image/svg+xml href="../img/Logo.svg">
|
||||||
<body>
|
<title>{% block title %}Base{% endblock title %} </title>
|
||||||
{% block content %}{% endblock content %}
|
{% endblock head %}
|
||||||
</body>
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class= "navigation">
|
||||||
|
{%include "nav"%}
|
||||||
|
</div>
|
||||||
|
<div class= "content">
|
||||||
|
{% block content %} {% endblock content %}
|
||||||
|
</div>
|
||||||
|
<div class= "footer">
|
||||||
|
{%include "footer"%}
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
9
templates/footer.html.tera
Normal file
9
templates/footer.html.tera
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<footer>
|
||||||
|
<div class="footer_container">
|
||||||
|
<h6><a href="/about">Über Cannabinieri</a></h6>
|
||||||
|
<h6><a href="/meet">Kontakt</a></h6>
|
||||||
|
<h6><a href="/privacy">Datenschutz</a></h6>
|
||||||
|
<h6><a href="https:://code.basabuuka.org">Code</a></h6>
|
||||||
|
<p>© Cannabinieri 2021-CC BY-NC 4.0</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
20
templates/home.html.tera
Normal file
20
templates/home.html.tera
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{%extends "base"%}
|
||||||
|
{%block title %}Cannabinieri CBD{%endblock title %}
|
||||||
|
{%block head%}
|
||||||
|
{{super()}}
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/home.css" />
|
||||||
|
{%endblock head%}
|
||||||
|
{{super()}}
|
||||||
|
{%block content%}
|
||||||
|
<div class="container">
|
||||||
|
<img type="image/png" src="img/hero.png">
|
||||||
|
<div class="link" id="hemp">
|
||||||
|
<button>
|
||||||
|
<a href="/hemp">i</a>
|
||||||
|
</button>
|
||||||
|
<h6>Hanf</h6>
|
||||||
|
<p>We experiment with hemp <br>to understand our ecosystem <br>and produce 100% organic<br> CBD oils and flower</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{%endblock content%}
|
||||||
|
|
||||||
|
|
@ -1,448 +0,0 @@
|
||||||
{%extends "base"%}
|
|
||||||
|
|
||||||
{%block head%}
|
|
||||||
{{super()}}
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/index.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/nav.css">
|
|
||||||
<script type="text/javascript" defer src="fontawesome/all.js"></script>
|
|
||||||
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
|
|
||||||
{%block title%} {{title}} {%endblock title%}
|
|
||||||
{%endblock head%}
|
|
||||||
{%block content%}
|
|
||||||
{{super()}}
|
|
||||||
<div class="wrapper">
|
|
||||||
<nav class="top-bar">
|
|
||||||
<div class="languages">
|
|
||||||
<a href="static/languages/deutsch.html">Deutsch</a>
|
|
||||||
<a href="static/languages/italiano.html">Italiano |</a>
|
|
||||||
<a href="static/languages/francais.html">Francais </a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div id="main-bar">
|
|
||||||
<div id="logo-container">
|
|
||||||
<img class="logo" type="image/webp" src="img/Logo.svg">
|
|
||||||
</div>
|
|
||||||
<nav class="main-navigation-bar">
|
|
||||||
<ul>
|
|
||||||
<!--GET method-->
|
|
||||||
<li><a type="text/html" href="/experiments">EXPERIMENTS</a>
|
|
||||||
<ul class="sub">
|
|
||||||
<li><a type="text/html" href="/experiments/oil">Oils</a></li>
|
|
||||||
<li><a type="text/html" href="/experiments/flower">Flower</a></li>
|
|
||||||
<li class="lastItem"><a type="text/html" href="experiments/candy">Edibles</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a type="text/html" href="/permaculture">PERMACULTURE</a>
|
|
||||||
<ul>
|
|
||||||
<li><a type="text/html" href="permaculture/permApp">PermApp</a></li>
|
|
||||||
<li><a type="text/html" href="permaculture/greenlab">GreenLab</a></li>
|
|
||||||
<li class="lastItem"><a type="text/html" id="edit" href="permaculture/about">What's that ?</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a type="text/html" href="/greentech">GREENTECH</a>
|
|
||||||
<ul>
|
|
||||||
<li><a type="text/html" href="/greentech/automation">Automation</a></li>
|
|
||||||
<li><a type="text/html" href="/greentech/IoT">IoT</a></li>
|
|
||||||
<li class="lastItem"><a type="text/html" href="/greentech/DiY">DiY</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a type="text/html" href="/spider">SPIDER</a>
|
|
||||||
<ul>
|
|
||||||
<li><a type="text/html" href="/spider/spiderPi">SpiderPi</a></li>
|
|
||||||
<li class="lastItem"><a type="text/html" href="/spider/join">Join</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a type="text/html" href="/learn">LEARN</a>
|
|
||||||
<ul id="learn">
|
|
||||||
<li><a type="text/html" href="/learn/about">About Us</a></li>
|
|
||||||
<li><a type="text/html" href="/learn/partners">Partners</a></li>
|
|
||||||
<li><a type="text/html" href="/learn/meet">Meet</a></li>
|
|
||||||
<li><a type="text/html" href="/learn/blog">Blog</a></li>
|
|
||||||
<li class="lastItem"><a type="text/html" href="/learn/code">Code</a></li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<nav class="hamburger-wrap">
|
|
||||||
<input type="checkbox" class="ham-btn" id="ham-btn">
|
|
||||||
<label for="ham-btn" class="hamburger" onclick= "menu()" onclick="hide()">
|
|
||||||
<span class="hamburger-icon"></span>
|
|
||||||
</label>
|
|
||||||
</nav>
|
|
||||||
<div id="mobile-dropdown-container">
|
|
||||||
<div id="mobile-dropdown">
|
|
||||||
<ul>
|
|
||||||
<li onclick="menu2()"><a href="/experiments">EXPERIMENTS</a>
|
|
||||||
<span class="drop">
|
|
||||||
<i class="arrow down"></i>
|
|
||||||
</span>
|
|
||||||
<ul id="down">
|
|
||||||
<li><a type="text/html" href="experiments/oil">Oils</a></li>
|
|
||||||
<li><a type="text/html" href="experiments/flower">Flower</a></li>
|
|
||||||
<li><a type="text/html" href="experiments/candy">Edibles</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li onclick="menu3()"><a type="text/html" href="/permaculture">PERMACULTURE</a>
|
|
||||||
<span class="drop">
|
|
||||||
<i class="arrow down"></i>
|
|
||||||
</span>
|
|
||||||
<ul id="down1">
|
|
||||||
<li><a type="text/html" href="permaculture/permApp">PermApp</a></li>
|
|
||||||
<li><a type="text/html" href="permaculture/greenlab">GreenLab</a></li>
|
|
||||||
<li><a type="text/html" href="permaculture/about">What's that ?</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li onclick="menu4()"><a type="text/html" href="/greentech">GREENTECH</a>
|
|
||||||
<span class="drop">
|
|
||||||
<i class="arrow down"></i>
|
|
||||||
</span>
|
|
||||||
<ul id="down2">
|
|
||||||
<li><a type="text/html" href="/greentech/automation">Automation</a></li>
|
|
||||||
<li><a type="text/html" href="/greentech/IoT">IoT</a></li>
|
|
||||||
<li><a type="text/html" href="/greentech/DiY">DiY</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li onclick="menu5()"><a type="text/html" href="/spider">SPIDER</a>
|
|
||||||
<span class="drop">
|
|
||||||
<i class="arrow down"></i>
|
|
||||||
</span>
|
|
||||||
<ul id="down3">
|
|
||||||
<li><a type="text/html" href="/spider/spiderPi">SpiderPi</a></li>
|
|
||||||
<li><a type="text/html" href="/spider/join">Join</a></li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li onclick="menu6()"><a type="text/html" href="/learn">LEARN</a>
|
|
||||||
<span class="drop">
|
|
||||||
<i class="arrow down"></i>
|
|
||||||
</span>
|
|
||||||
<ul id="down4">
|
|
||||||
<li><a type="text/html" href="/learn/about">About Us</a></li>
|
|
||||||
<li><a type="text/html" href="/learn/partners">Partners</a></li>
|
|
||||||
<li><a type="text/html" href="/learn/contact">Meet</a></li>
|
|
||||||
<li><a type="text/html" href="/learn/blog">Blog</a></li>
|
|
||||||
<li><a type="text/html" href="/learn/code">Code</a></li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<main>
|
|
||||||
<section id="content">
|
|
||||||
<div class="section1">
|
|
||||||
<div id="title">
|
|
||||||
<h3>Cannabinieri</h3> <!--to be replaced with logo-->
|
|
||||||
</div>
|
|
||||||
<div id="product">
|
|
||||||
<a>
|
|
||||||
<img type="image/webp" src="img/sample-sauvage.svg"/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="slogan">
|
|
||||||
<a href="#experiments">
|
|
||||||
<h2>Grow <br>further.</h2>
|
|
||||||
<i class='fas fa-caret-down'></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="image">
|
|
||||||
<img id="leaves" type="image/webp" src="img/bliss.JPG">
|
|
||||||
</div>
|
|
||||||
<div id="about">
|
|
||||||
<a href="#experiments">Explore
|
|
||||||
<i class='fas fa-chevron-down'></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pages-container">
|
|
||||||
<div class="strip">
|
|
||||||
<div class="section2" id="experiments">
|
|
||||||
<div class="image-slider">
|
|
||||||
<div class="slider-items">
|
|
||||||
<div class="item active">
|
|
||||||
<img type="image/webp" src="img/sample-sauvage.svg" />
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<img id ="sample" type="image/webp" src="img/sample-flower.svg"/>
|
|
||||||
</div>
|
|
||||||
<div class="left-slide">
|
|
||||||
<i class='fas fa-angle-left' id="dark"></i>
|
|
||||||
</div>
|
|
||||||
<div class="right-slide">
|
|
||||||
<i class='fas fa-angle-right' id="dark"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1>Experiments</h1>
|
|
||||||
<p> # experiments=products=oils etc!Our Experiments explore how plants react to changes.<br>
|
|
||||||
Environmental conditions and the relations between plants define a plants health, growth taste and effect. <br>
|
|
||||||
<span id="desktop"> With our Experiments strive to understand our planet in order to create an organic, automated indoor garden for everyone, everywhere.</span>
|
|
||||||
</p>
|
|
||||||
<div class="page-button">
|
|
||||||
<a href="/experiments">More</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="strip2" id="black">
|
|
||||||
<div class="section3" id="spider">
|
|
||||||
<div class="spider-slider">
|
|
||||||
<div class="spider-items">
|
|
||||||
<div class="item active">
|
|
||||||
<img id="pic1" type="image/webp" src="img/sample-spiderpi.svg" />
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<img type="image/webp" src="img/sample-spiderpi-2.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<div id="spider-left">
|
|
||||||
<i class='fas fa-angle-left'></i>
|
|
||||||
</div>
|
|
||||||
<div id="spider-right">
|
|
||||||
<i class='fas fa-angle-right'></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1>Spider</h1>
|
|
||||||
<p><span id ="desktop">Learn about our project Spider Pi<br>
|
|
||||||
Get to know our garden hexapod. <br>
|
|
||||||
He is aimed to be a garden helper, that collects data while doing your gardening.<br></span>
|
|
||||||
Spider Pi enables everyone to grow their own crops everywhere.<br>
|
|
||||||
He is the solution for everyone who doesn't have the time for gardening but wants to grow their own local organic food and learn about plants in the meantime.<br>
|
|
||||||
#a dummy text
|
|
||||||
</p>
|
|
||||||
<div class="page-button">
|
|
||||||
<a href="/spider">Learn</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="strip">
|
|
||||||
<div class="section4" id="permaculture">
|
|
||||||
<div class="image-slider">
|
|
||||||
<div class="slider-items">
|
|
||||||
<div class="item active">
|
|
||||||
<img type="image/webp" src="img/sample-perma.svg"/>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
</div>
|
|
||||||
<div class="left-slide">
|
|
||||||
<i class='fas fa-angle-left'></i>
|
|
||||||
</div>
|
|
||||||
<div class="right-slide">
|
|
||||||
<i class='fas fa-angle-right'></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1>PermaCulture</h1>
|
|
||||||
<p>We utilitze and explore the principles of Permaculture.<br>
|
|
||||||
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<div class="page-button">
|
|
||||||
<a href="/permaculture">Learn</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="strip" id="black">
|
|
||||||
<div class="section5" id="greentech">
|
|
||||||
<div class="image-slider">
|
|
||||||
<div class="slider-items">
|
|
||||||
<div class="item active">
|
|
||||||
<img type="image/webp" src="img/sample-greentech.svg"/>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
</div>
|
|
||||||
<div class="left-slide">
|
|
||||||
<i class='fas fa-angle-left'></i>
|
|
||||||
</div>
|
|
||||||
<div class="right-slide">
|
|
||||||
<i class='fas fa-angle-right'></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1>GreenTech</h1>
|
|
||||||
<p><span id="desktop">
|
|
||||||
We want you to be able to grow your own crops at home wherever that is and no matter how much time you have.<br>
|
|
||||||
There are many projects that combine farming and tech in order to create a system that bears changing environmental conditons and a growing population.<br></span>
|
|
||||||
<br>
|
|
||||||
Long distance transportation and the exploitation of ressources can be avoided if everyone grew their own crops or even better, let them be grown by affordable and accessible IoT solutions.<br><br>
|
|
||||||
Explore our projects and get inspired.<br>
|
|
||||||
</p>
|
|
||||||
<div class="page-button">
|
|
||||||
<a href="/greentech">Explore</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="strip" id="black">
|
|
||||||
<div class="section6" id="about">
|
|
||||||
<div class="image-slider">
|
|
||||||
<div class="slider-items">
|
|
||||||
<div class="item active">
|
|
||||||
<img type="image/webp" src="img/sample-faces.jpg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1>About Us</h1>
|
|
||||||
<p> We are currently a collective of five people, determined to connect farming and science.<br>
|
|
||||||
<span id="desktop">We aim to gather information about our ecosystem and utilize it to create 100% organic CBD products that all ship with a little bit more information for us and our customers. <br> </span>
|
|
||||||
We strive to understand our ecosystem and to utilize our knowledge in order to create a database of products and affordable solutions for an automated organic garden for everyone, everywhere.<br>
|
|
||||||
#dummy text
|
|
||||||
</p>
|
|
||||||
<div class="page-button">
|
|
||||||
<a href="/learn">Learn</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="strip">
|
|
||||||
<div class="section7" id="news">
|
|
||||||
<h1>News</h1>
|
|
||||||
<div class="news">
|
|
||||||
<div class="social">
|
|
||||||
<h5>Keep in touch !</h5>
|
|
||||||
<img id="post_1" type="image/webp" src="img/sample-post.jpg"/>
|
|
||||||
<img class="desktop" id="post_2" type="image/webp" src="img/sample-post.jpg"/>
|
|
||||||
<img class="desktop" id="post_3" type="image/webp" src="img/sample-post.jpg"/>
|
|
||||||
<div class="instagram">
|
|
||||||
<a href="#">
|
|
||||||
<button id="insta"><img id="gram" type="image/webp" src="img/pixelfed.svg"></button>
|
|
||||||
<h5 id="account">@Cannabinieri_Official</h5>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="youtube">
|
|
||||||
<a href="#">
|
|
||||||
<button id="you"><img id="tube" type="image/webp" src="img/peertube.svg"></button>
|
|
||||||
<h5 id="account">@Cannabinieri_Official</h5>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--add 3 blog posts with image here-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<footer class="footer">
|
|
||||||
<div id="footer-wrapper">
|
|
||||||
<div id="column1">
|
|
||||||
<img id="footer-logo" type="image/webp" src="img/Logo.svg">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="column2">
|
|
||||||
<h6 onclick="show()">Information
|
|
||||||
<span class="show">
|
|
||||||
<i class="arrow down"></i>
|
|
||||||
</span>
|
|
||||||
</h6>
|
|
||||||
<ul id="information">
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
<a type="text/html" href="/learn/contact">Contact Us</a>
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
<a type="text/html" href="/privacy">Privacy Policy</a>
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
<a href="#">FAQ</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
<a href="#">Certificate of Analysis</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="column3">
|
|
||||||
<h6 onclick="display()">links
|
|
||||||
<span class="show">
|
|
||||||
<i class="arrow down2"></i>
|
|
||||||
</span>
|
|
||||||
</h6>
|
|
||||||
<ul id="footer-links">
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
<a href="#">Blog</a>
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
<a href="#">Shop</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<p>
|
|
||||||
<a class="code" href="#">Code</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="column4">
|
|
||||||
<h6>TO BE SAID</h6>
|
|
||||||
<p> All our products contain<br>less than 0.2% THC</p>
|
|
||||||
</div>
|
|
||||||
<div id="column5">
|
|
||||||
<h6 class="follow">Follow us</h6>
|
|
||||||
<div id="social-media">
|
|
||||||
<ul>
|
|
||||||
<li class="youtube">
|
|
||||||
<a href="#">
|
|
||||||
<img id="youtube" type="image/webp" src="img/peertube_white.svg">
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<img id="instagram" type="image/webp" src="img/pixelfed_white.svg">
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<img id="gitea" type="image/webp" src="img/gitea.svg">
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="row2">
|
|
||||||
<p id ="print">©2020 Cannabinieri</p>
|
|
||||||
</div>
|
|
||||||
<!--Replace with Dynamic Language Handling-->
|
|
||||||
<div id="row3">
|
|
||||||
<div class="languages">
|
|
||||||
<a href="static/languages/deutsch.html">Deutsch |</a>
|
|
||||||
<a href="../languages/italiano.html">Italiano |</a>
|
|
||||||
<a href="../languages/francais.html">Francais </a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<script src="js/main.js" type="application/javascript"></script>
|
|
||||||
<script src="js/pages.js" type="application/javascript"></script>
|
|
||||||
<script src="js/slider.js" type="application/javascript"></script>
|
|
||||||
{% endblock content %}
|
|
||||||
103
templates/nav.html.tera
Normal file
103
templates/nav.html.tera
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<div class="main_bar">
|
||||||
|
<div id="logo_container">
|
||||||
|
<a href="/">
|
||||||
|
<picture>
|
||||||
|
<source srcset="../img/Logo.svg" type="image/webp">
|
||||||
|
<img class="logo" type="image/svg+xml" src= "img/Logo.svg">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!--mobile nav-->
|
||||||
|
<nav class="hamburger_wrapper">
|
||||||
|
<!--add onclick animation js/css-->
|
||||||
|
<svg id = "icon" type="image/svg+xml" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M4 6h16M4 12h16M4 18h16">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</nav>
|
||||||
|
<div class="mobile_dropdown_container" id="md">
|
||||||
|
<div id="mobile_dropdown">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a type="text/html" href="/experiments">HANF</a>
|
||||||
|
<span class="drop">
|
||||||
|
<svg type="image/svg+xml" id="chevron_1" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<ul class="down" id ="down_1">
|
||||||
|
<li><a type="text/html" href="/experiments/oil">Öle</a></li>
|
||||||
|
<li><a type="text/html" href="/experiments/flower">Blüten</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a type="text/html" href="/spider">SPINNE</a>
|
||||||
|
<span class="drop">
|
||||||
|
<svg type="image/svg+xml" id="chevron_2" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<ul class="down" id ="down_2">
|
||||||
|
<li><a type="text/html" href="/spider/spiderPi">SpiderPi</a></li>
|
||||||
|
<li><a href="/peramapp">PermApp</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a type="text/html" href=/permaculture/permApp>KAOS CUBE</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul id="drop_up">
|
||||||
|
<li><a type="text/html" href="#">OFFGRID</a>
|
||||||
|
<span class="drop">
|
||||||
|
<svg type="image/svg+xml" id="chevron_3" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<ul class="down" id="down_3">
|
||||||
|
<li><a type="text/html" href="#">WohnMaschine</a></li>
|
||||||
|
<li><a type="text/html" href="#">GPUMiner</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a type="text/html" href="#">CYBERPRENEUR</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--desktop nav-->
|
||||||
|
<nav class="desktop_navigation">
|
||||||
|
<ul>
|
||||||
|
<li><a type="text/html" href="/experiments"> HANF </a>
|
||||||
|
<ul id="experiments">
|
||||||
|
<li><a type="text/html" href="/experiments/oil">Öle</a></li>
|
||||||
|
<li><a type="text/html" href="/experiments/flower">Blüten</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a type="text/html" href="/spider">SPINNE</a>
|
||||||
|
<ul>
|
||||||
|
<li id="fix"><a id="fix" type="text/html" href="/permapp">PermApp</a></li>
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a type="text/html" href="/permaculture/permApp">KAOS CUBE</a>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a type="text/html" href="#">CYBERPRENEUR</a>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a type="text/html" href="#">OFFGRID</a>
|
||||||
|
<ul id="broader">
|
||||||
|
<li id="fix" ><a id="fix" href="#">Wohn Maschine</a></li>
|
||||||
|
<li id="fix"><a id="fix" href="#">GPU Miner</a></li>
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
{%extends "base"%}
|
{%extends "base"%}
|
||||||
|
|
||||||
{%block title%}{{title}}{%endblock title%}
|
{%block title%}{{title}}{%endblock title%}
|
||||||
{%block head%}
|
{%block head%}
|
||||||
{{super()}}
|
{{super()}}
|
||||||
{%endblock head%}
|
{%endblock head%}
|
||||||
{%block content%}
|
{%block content%}
|
||||||
<h1>Privacy Policy</h1>
|
<div class="container" style ="display: flex;">
|
||||||
<p>Add info how data is handled and licence of code</p>
|
<h1>Privacy Policy</h1>
|
||||||
|
<p>Add info how data is handled and licence of code</p>
|
||||||
|
</div>
|
||||||
{%endblock content%}
|
{%endblock content%}
|
||||||
Loading…
Reference in a new issue