aug25
This commit is contained in:
siva
parent
cfd615e807
commit
c61099379d
23 changed files with 2240 additions and 72 deletions
55
src/main.rs
55
src/main.rs
|
|
@ -1,4 +1,3 @@
|
|||
// use rocket macros globally
|
||||
#[macro_use] extern crate rocket;
|
||||
|
||||
// push strings to path
|
||||
|
|
@ -10,10 +9,11 @@ use std::path::{ PathBuf, Path };
|
|||
use rocket::fs::{ NamedFile, relative };
|
||||
|
||||
// Set MIME-Types, Accept Header for Response
|
||||
use rocket::http::{ Accept, QMediaType, MediaType };
|
||||
use rocket::http::{ Accept, MediaType };
|
||||
use rocket::http::ContentType;
|
||||
|
||||
// Equivalent to main()
|
||||
#[rocket::main] // enable asyn main()
|
||||
#[rocket::main] // enable async main()
|
||||
async fn main() -> Result<(), rocket::Error> {
|
||||
|
||||
// State Rocket<Build> => configuration
|
||||
|
|
@ -26,11 +26,7 @@ async fn main() -> Result<(), rocket::Error> {
|
|||
// State Rocket<Ignite> => Finalized App ready to launch
|
||||
// check before launching
|
||||
// catch errors
|
||||
// constructs FileServer with Path
|
||||
.mount("/", routes![index, fileserver])
|
||||
|
||||
//FileServer unable to set Mime-Types
|
||||
// .mount("/", FileServer::from(relative!("templates/assets")))
|
||||
.mount("/", routes![ index, fileserver, experiments, perma, greentech ])
|
||||
|
||||
.ignite().await?
|
||||
// State Rocket<Orbit> => Running App
|
||||
|
|
@ -46,33 +42,44 @@ async fn main() -> Result<(), rocket::Error> {
|
|||
#[route(GET, uri = "/")]
|
||||
// if success call handler
|
||||
async fn index() -> Option<NamedFile> {
|
||||
|
||||
NamedFile::open("templates/index.html").await.ok()
|
||||
}
|
||||
|
||||
// Serve static files from Index.html
|
||||
// serve other pages (html GET)
|
||||
// create routes for pages
|
||||
#[get("/experiments")]
|
||||
async fn experiments() -> Option<NamedFile> {
|
||||
NamedFile::open("templates/experiments.html").await.ok()
|
||||
}
|
||||
|
||||
#[get("/permaculture")]
|
||||
async fn perma() -> Option<NamedFile> {
|
||||
NamedFile::open("templates/permaculture.html").await.ok()
|
||||
}
|
||||
|
||||
#[get("/greentech")]
|
||||
async fn greentech() -> Option<NamedFile> {
|
||||
NamedFile::open("templates/greentech.html").await.ok()
|
||||
}
|
||||
|
||||
|
||||
// Serve static files from /
|
||||
// Match against multiple segments
|
||||
// parameters need to implement FromSegments
|
||||
// PathBuf implements FromSegments
|
||||
// push all segments to path
|
||||
// Option<Some, Err> implements Responder
|
||||
// NamedFile implements Responder=> generates Response
|
||||
// NamedFile implements Responder => generates Response
|
||||
#[route(GET, uri= "/<path..>")]
|
||||
async fn fileserver(path: PathBuf) -> Option<NamedFile> {
|
||||
async fn fileserver(path: PathBuf) -> Option<NamedFile> { // PathBuf = Heapstring, growable
|
||||
// set path to static files
|
||||
let mut path = Path::new(relative!("templates/assets")).join(path);
|
||||
// if path exists add path to index.html ?
|
||||
let accept = vec![
|
||||
MediaType::CSS.into(), MediaType::JavaScript.into(),
|
||||
];
|
||||
let mut path = Path::new(relative!("templates/assets")).join(path); // Path = stack string, fixed size
|
||||
// path accessible from /
|
||||
|
||||
if path.is_dir() {
|
||||
path.push("templates/index.html");
|
||||
Accept::new(accept);
|
||||
// Note: How to serve fontawesome ?
|
||||
if path.ends_with("all.css") {
|
||||
println!("Can not load fontawesome icons at: {:?}", path);
|
||||
}
|
||||
|
||||
// open file readonly
|
||||
// NamedFile = Response
|
||||
println!("{:?}", path);
|
||||
// Open file at path
|
||||
NamedFile::open(path).await.ok()
|
||||
}
|
||||
112
templates/assets/components/experiments-content.html
Normal file
112
templates/assets/components/experiments-content.html
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
|
||||
<div class="page-wrapper">
|
||||
<section class="title">
|
||||
<h1>Experiments</h1>
|
||||
<p class="short">Each of our CBD products helps you and us understand our planet.</p>
|
||||
<div class="image">
|
||||
<img id="mobile" src="global/img/sample-closeup-oil.png">
|
||||
<img id="desktop" src="global/img/sample-closeup-oil.png">
|
||||
</div>
|
||||
</section>
|
||||
<section id="about">
|
||||
<p> #oils&soon flower&edibles 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>
|
||||
With our Experiments strive to understand our planet in order to create an organic, automated indoor garden for everyone, everywhere.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="links">
|
||||
<div id="oils-link">
|
||||
<div class="image" id="gallery">
|
||||
<div class="main-img">
|
||||
<a href="oils.html">
|
||||
<img id="current" src="global/img/sample-sauvage.svg"><!--replace with sauvage-->
|
||||
</a>
|
||||
</div>
|
||||
<div class="imgs">
|
||||
<img src="global/img/sample-sauvage.svg">
|
||||
<img src="global/img/img1.jpg">
|
||||
<img src="global/img/img2.jpg">
|
||||
<img src="global/img/img3.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3 class="heading">CBD Oils</h3>
|
||||
<p class="text">
|
||||
Explore all our full-spectrum CBD oils
|
||||
All oils are of 100% organic grown italian hemp. <br>The experiments vary in extraction methods, strain selection and carrier oil. Each experiment is distinguished through the selection of environmental conditions and partnerplants.<br>
|
||||
Explore everything from salvia flavoured - to robot grown CBD.
|
||||
</p>
|
||||
<ul>
|
||||
<li> hemp grown in italy</li>
|
||||
<li> lab tested</li>
|
||||
<li> available in strenghts X</li>
|
||||
<li> all oils contain less than .2% THC</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-button">
|
||||
<a href="oils.html">Explore</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flower-link">
|
||||
<div class="image">
|
||||
<div class="main-img">
|
||||
<a href="flower.html">
|
||||
<img id="flower" src="global/img/sample-plant-flower.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flowers">
|
||||
<img src="global/img/sample-flower.svg">
|
||||
<img src="global/img/sample-light.jpg">
|
||||
<img src="global/img/sample-girl.jpg">
|
||||
<img src="global/img/sample-plant-flower.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3>CBD Flower</h3>
|
||||
<p class="text">
|
||||
<span>Coming Soon : CBD Flower </span><br>Explore our current & future experiments..<br>
|
||||
Learn about Flower flavoured with homegrown fruit, sun-flower, b-flower and more.. that are currently experimented on #dummy text.</p>
|
||||
<ul>
|
||||
<li> hemp grown in italy</li>
|
||||
<li> lab tested</li>
|
||||
<li> all flowers contain less than .2% THC</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-button">
|
||||
<a href="flower.html">Learn</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="edibles-link">
|
||||
<div class="image">
|
||||
<div class="main-img">
|
||||
<a href="edibles.html">
|
||||
<img id="fruit" src="global/img/sample-lemon.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="fruits">
|
||||
<img src="global/img/sample-jelly.jpg">
|
||||
<img src="global/img/sample-herbs.jpg">
|
||||
<img src="global/img/sample-mate.jpg">
|
||||
<img src="global/img/sample-lemon.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3>Candy</h3>
|
||||
<p class="text" class="additional"><span>Coming Soon : CBD Edibles</span><br>Explore future experiments.<br>
|
||||
Learn about organic CBD gummies,<br> homemade CBD lemonade, CBD cookies and more.#dummy text</p>
|
||||
<ul>
|
||||
<li> hemp grown in italy</li>
|
||||
<li> organic fruit and herbs</li>
|
||||
<li> all edibles contain less than .2% THC</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-button">
|
||||
<a href="edibles.html">Learn</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script src="global/js/image.js"></script>
|
||||
102
templates/assets/components/footer.html
Normal file
102
templates/assets/components/footer.html
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
|
||||
<footer class="footer" style="font-family: 'Fira Sans', sans-serif;">
|
||||
<div id="footer-wrapper">
|
||||
<div id="column1">
|
||||
<a href="../../../responsive.html">
|
||||
<h3><span>Cannabinieri</span>@</h3>
|
||||
</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 href="meet.html">Contact Us</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 class ="desktop">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" src= "global/img/peertube.svg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img id="instagram" src="global/img/pixelfed.svg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img id="gitea" src="global/img/gitea.svg">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="row2">
|
||||
<p id ="print">©2021 Cannabinieri</p>
|
||||
</div>
|
||||
<div id="row3">
|
||||
<div class="languages" id ="footer-languages">
|
||||
<a href="../languages/deutsch.html">Deutsch |</a>
|
||||
<a href="../languages/italiano.html">Italiano |</a>
|
||||
<a href="../languages/francais.html">Francais </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
128
templates/assets/components/main-nav.html
Normal file
128
templates/assets/components/main-nav.html
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<div id="main-bar">
|
||||
<div id="logo-container">
|
||||
<a href="/">
|
||||
<img class="logo" src= "img/Logo.svg">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-navigation-bar">
|
||||
<ul>
|
||||
<li><a href="experiments.html">EXPERIMENTS</a>
|
||||
<ul id="experiments">
|
||||
<li><a href="oils.html">Oils</a></li>
|
||||
<li><a href="flower.html">Flower</a></li>
|
||||
<li><a href="edibles.html">Edibles</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="permaculture.html">PERMACULTURE</a>
|
||||
<ul>
|
||||
<li><a class="pc" href="permapp.html">PermApp</a></li>
|
||||
<li><a class="pc" href="greenlab.html">GreenLab</a></li>
|
||||
<li><a class="pc"id="edit" href="whatsthat.html">What's that ?</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="greentech.html">GREENTECH</a>
|
||||
<ul>
|
||||
<li><a href="automation.html">Automation</a></li>
|
||||
<li><a href="iot.html">IoT</a></li>
|
||||
<li><a href="diy.html">DiY</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="spider.html">SPIDER</a>
|
||||
<ul>
|
||||
<li><a href="spiderpi.html">SpiderPi</a></li>
|
||||
<li><a href="join.html">Join</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="learn.html">LEARN</a>
|
||||
<ul id="learn">
|
||||
<li id="broad" ><a href="whoweare.html">About Us</a></li>
|
||||
<li><a href="partners.html">Partners</a></li>
|
||||
<li><a href="meet.html">Meet</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="code.html">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" id="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.html">EXPERIMENTS</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
<ul id="down">
|
||||
<li><a href="oils.html">Oils</a></li>
|
||||
<li><a href="flower.html">Flower</a></li>
|
||||
<li><a href="edibles.html">Edibles</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li onclick="menu3()"><a href="permaculture.html">PERMACULTURE</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
<ul id="down1">
|
||||
<li><a href="permapp.html">PermApp</a></li>
|
||||
<li><a href="greenlab.html">GreenLab</a></li>
|
||||
<li><a href="whatsthat.html">What's that ?</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li onclick="menu4()"><a href="greentech.html">GREENTECH</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
<ul id="down2">
|
||||
<li><a href="automation.html">Automation</a></li>
|
||||
<li><a href="iot.html">IoT</a></li>
|
||||
<li><a href="diy.html">DiY</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li onclick="menu5()"><a href="spider.html">SPIDER</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
<ul id="down3">
|
||||
<li><a href="spiderpi.html">SpiderPi</a></li>
|
||||
<li><a href="join.html">Join</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li onclick="menu6()"><a href="learn.html">LEARN</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
<ul id="down4">
|
||||
<li><a href="whoweare.html">About Us</a></li>
|
||||
<li><a href="partners.html">Partners</a></li>
|
||||
<li><a href="meet.html">Meet</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="code.html">Code</a></li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="button" href="#">Shop</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
8
templates/assets/components/top-nav.html
Normal file
8
templates/assets/components/top-nav.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<!--Add dynamic language handling here-->
|
||||
<nav class="top-bar">
|
||||
<div class="languages">
|
||||
<a href="../languages/deutsch.html">Deutsch |</a>
|
||||
<a href="static/languages/italiano.html">Italiano |</a>
|
||||
<a href="static/languages/francais.html">Francais </a>
|
||||
</div>
|
||||
</nav>
|
||||
901
templates/assets/css/experiments.css
Normal file
901
templates/assets/css/experiments.css
Normal file
|
|
@ -0,0 +1,901 @@
|
|||
:root {
|
||||
--space : 5vh;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
}
|
||||
|
||||
.title{
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#about {
|
||||
margin-top: var(--space);
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#about p {
|
||||
color:black;
|
||||
}
|
||||
|
||||
#oils-link {
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#oil {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#edibles-link {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#flower-link {
|
||||
background-color:white;
|
||||
display: flex;
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#flower {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width:1024px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1/5;
|
||||
grid-row:1;
|
||||
background-size: cover;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
height: 67vh;
|
||||
padding-left: 7.5vh;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
align-self: flex-end;
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
color: rgb(62, 190, 147);
|
||||
text-align: center;
|
||||
line-height: 6.5vh;
|
||||
padding-bottom: 22vh;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
transition: 0.4s;
|
||||
grid-column: 2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-width: 30vw;
|
||||
padding-right: 5vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
line-height: 80px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
padding-top: 1em;
|
||||
margin-left: .1em;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1/5;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
margin: 0 5rem 1.5rem 5rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .1em hsl(160, 51%, 70%);
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size:1.5rem;
|
||||
font-weight: 300;
|
||||
padding:1.5rem;
|
||||
text-align: center;
|
||||
font-family: 'Lato', sans-serif;
|
||||
line-height: 2.75;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1/5;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#oils-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 115vh;
|
||||
padding: 6vh 3vw 3vh 0;
|
||||
}
|
||||
|
||||
#oils-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
#oils-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(160, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#current {
|
||||
border: .01em solid hsl(160, 49%, 51%) !important;
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.main-image img, .imgs img {
|
||||
height: 15vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#oils-link .description {
|
||||
grid-column:2 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#oils-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.description ul {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
margin-top: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
#oils-link .page-button {
|
||||
grid-column:2 ;
|
||||
grid-row:4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 1vh 0 2vh 1vw;
|
||||
}
|
||||
|
||||
#oils-link .page-button a:hover {
|
||||
background-color: hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#oils-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em .75em;
|
||||
margin-left: .5em;
|
||||
border: .01em solid hsl(160, 100%, 75%);
|
||||
border-radius: 27px;
|
||||
margin-right: 4%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#oils-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color: hsl(160, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#flower-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 80% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 85vh;
|
||||
padding: 6vh 0 0 6vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#flower-link .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#flower-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(300, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#flower {
|
||||
width: auto;
|
||||
height: 30vh;
|
||||
border: .01em solid hsl(300, 51%, 49%) !important;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.flowers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.main-image img, .flowers img {
|
||||
width: 15vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#flower-link .description {
|
||||
grid-column:1 ;
|
||||
grid-row: 1;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#flower-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color:hsl(300, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#flower-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.description p span {
|
||||
font-weight: 400;
|
||||
line-height: 5;
|
||||
color:hsl(300, 100%, 50%);
|
||||
}
|
||||
|
||||
#flower-link .page-button {
|
||||
grid-column: 1 ;
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 1vh 0 5vh 1vw;
|
||||
}
|
||||
|
||||
#flower-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .01em solid hsl(300, 100%, 50%);
|
||||
padding: .25em .75em;
|
||||
margin-left: 0;
|
||||
border-radius: 27px;
|
||||
margin-right: 4%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin-top:.75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#flower-link .page-button a:hover {
|
||||
background-color: hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
#edibles-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 85vh;
|
||||
padding: 0 3vw 3vh 0;
|
||||
}
|
||||
|
||||
#edibles-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
#edibles-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(75, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#fruit {
|
||||
height: 35vh;
|
||||
width: auto;
|
||||
margin-bottom: 5vh;
|
||||
border: .01em solid hsl(75, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.fruits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.fruits img {
|
||||
height: 15vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.main-image img {
|
||||
height: 15vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .page-button {
|
||||
grid-column:2 ;
|
||||
grid-row:2;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
#edibles-link .description {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#edibles-link .description h3 {
|
||||
font-size: 6.5em;
|
||||
font-weight: 300;
|
||||
color: hsl(75, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#edibles-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
#edibles-link .description p span {
|
||||
font-weight: 400;
|
||||
color: hsl(75, 100%, 50%);
|
||||
line-height: 5;
|
||||
}
|
||||
|
||||
#edibles-link .page-button {
|
||||
grid-column:2 ;
|
||||
grid-row:4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 1vh 0 2vh 1vw;
|
||||
}
|
||||
|
||||
#edibles-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #333;
|
||||
padding: .25em 1em;
|
||||
margin-left: .5em;
|
||||
border: .01em solid hsl(75, 100%, 50%);
|
||||
border-radius: 27px;
|
||||
margin-right: 4%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .page-button a:hover {
|
||||
background-color: hsl(75, 100%, 75%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
|
||||
#mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:768px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto auto ;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1;
|
||||
grid-row:1/2;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;
|
||||
padding: 1em 0 0 0;
|
||||
color: rgb(62, 190, 147);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mobile {
|
||||
max-height: 55vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
font-weight: 300;
|
||||
line-height: 80px;
|
||||
letter-spacing: .5px;
|
||||
padding-top: .95em;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1;
|
||||
grid-row: 2;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin:2rem 1rem;
|
||||
margin-top:0;
|
||||
border-radius: 25px;
|
||||
box-shadow: .02em .01em .01em .05em hsl(160, 51%, 60%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size:1.125rem;
|
||||
font-weight: 300;
|
||||
padding:1rem;
|
||||
line-height: 1.75;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.description ul {
|
||||
font-size: .85rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
line-height: 2.6;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
#oils-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#oils-link .image {
|
||||
grid-row: 1;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#oils-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(160, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#current {
|
||||
height: 30vh;
|
||||
width: auto;
|
||||
border: .01em solid hsl(160, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 2vh;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
||||
.main-image img, .imgs img {
|
||||
height: 7vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.75rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
#oils-link .description {
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
margin-top: 6.5vh;
|
||||
}
|
||||
|
||||
#oils-link .description h3 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
color: hsl(160, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#oils-link .description p {
|
||||
font-size: .85em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.25;
|
||||
padding: 1vh 2vw;
|
||||
|
||||
}
|
||||
|
||||
#oils-link .page-button {
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
#oils-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .02em solid #000;
|
||||
padding: .25em .75em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .25em .75em .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#oils-link .page-button a:active {
|
||||
border-color:hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#flower-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 10vh;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
#flower-link .image {
|
||||
grid-row: 1;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#flower-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(300, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#flower {
|
||||
max-height: 27.5vh;
|
||||
width: auto;
|
||||
border: .01em solid hsl(300, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.flowers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 1rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.main-image img, .flowers img {
|
||||
height: 7vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 3rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
#flower-link .description {
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 6.5vh;
|
||||
}
|
||||
|
||||
|
||||
#flower-link .description h3 {
|
||||
font-size: 2.25rem;
|
||||
color: hsl(300, 100%, 50%);
|
||||
margin-bottom: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#flower-link .description p {
|
||||
font-size: .85em;
|
||||
font-weight:300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.25;
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
#flower-link .description p span {
|
||||
color: hsl(300, 100%, 50%);
|
||||
font-weight: 400;
|
||||
line-height: 5;
|
||||
}
|
||||
|
||||
|
||||
#flower-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#flower-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .02em solid #000;
|
||||
padding: .25em .75em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#flower-link .page-button a:active {
|
||||
border-color: hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
|
||||
#edibles-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .01em .03em hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#edibles-link .image {
|
||||
grid-row: 1;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#edibles-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(75, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#fruit {
|
||||
max-height: 28vh;
|
||||
width: auto;
|
||||
border: .01em solid hsl(75, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.fruits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 1rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.main-image img, .fruits img {
|
||||
height: 8vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .description {
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 7.5vh;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .description h3 {
|
||||
font-size: 2.5rem;
|
||||
color: hsl(75, 100%, 50%);
|
||||
margin-bottom: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#edibles-link .description p {
|
||||
font-size: .85em;
|
||||
font-weight:300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.25;
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
#edibles-link .description p span {
|
||||
color: hsl(75, 100%, 50%);
|
||||
font-weight: 400;
|
||||
line-height: 5;
|
||||
}
|
||||
|
||||
#edibles-link .description ul {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .page-button {
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
#edibles-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .01em solid #000;
|
||||
padding: .25em .75em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#edibles-link .page-button a:active {
|
||||
border-color: hsl(75, 100%, 40%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
.description .additional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title .image #desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
513
templates/assets/css/footer.css
Normal file
513
templates/assets/css/footer.css
Normal file
|
|
@ -0,0 +1,513 @@
|
|||
@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%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight:500;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px){
|
||||
|
||||
footer {
|
||||
grid-area:footer;
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
color: white !important;
|
||||
border-top: solid 3px white;
|
||||
border-bottom: solid 1px white;
|
||||
background-color: black;
|
||||
height:100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 0.8fr 1fr 1fr;
|
||||
grid-template-rows: 2fr 1fr;
|
||||
padding-bottom:1%;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
#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;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#column4 h6 {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#column5 {
|
||||
grid-column:2;
|
||||
grid-row: 1;
|
||||
margin-top:15%;
|
||||
padding-bottom: 10%;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#social-media {
|
||||
padding-left: 5vh;
|
||||
}
|
||||
|
||||
#social-media ul li {
|
||||
display:inline;
|
||||
list-style-type: none;
|
||||
padding-left: 10%;
|
||||
padding-bottom:5%;
|
||||
}
|
||||
|
||||
#column5 h6 {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#gitea {
|
||||
width:18%;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
#youtube {
|
||||
height: auto;
|
||||
width: 4.5vw;
|
||||
}
|
||||
|
||||
#instagram {
|
||||
height:auto;
|
||||
width: 6.5vw;
|
||||
}
|
||||
|
||||
#row2 {
|
||||
grid-column:1;
|
||||
grid-row:5;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin: 2.5vh 0;
|
||||
background-color: black;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 500;
|
||||
letter-spacing: .095em;
|
||||
}
|
||||
|
||||
#row2 p {
|
||||
align-items: center;
|
||||
padding-top:0;
|
||||
font-size: .75em;
|
||||
color:white;
|
||||
}
|
||||
|
||||
#row3 {
|
||||
grid-column:2/3;
|
||||
grid-row:5;
|
||||
margin: 2.5vh 0;
|
||||
}
|
||||
|
||||
#row3 .languages {
|
||||
margin-left:0;
|
||||
align-self:flex-end;
|
||||
}
|
||||
|
||||
#row3 .languages a {
|
||||
color: hsl(160, 51%, 80%);
|
||||
font-size: .75em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#row3 .languages a:active {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
81
templates/assets/css/global.css
Normal file
81
templates/assets/css/global.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
@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%;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
#top-nav {
|
||||
grid-area: top-bar;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#main-nav {
|
||||
grid-area: main-bar;
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
#footer {
|
||||
grid-area:footer;
|
||||
}
|
||||
|
||||
@media screen and (min-width:1024px){
|
||||
|
||||
.global-wrapper {
|
||||
display:grid;
|
||||
height:100vh;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 10% 22% auto 40%;
|
||||
grid-template-areas:
|
||||
"top-bar top-bar top-bar top-bar"
|
||||
"main-bar main-bar main-bar main-bar"
|
||||
"main main main main"
|
||||
"footer footer footer footer";
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:480px) {
|
||||
|
||||
.global-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"main-bar"
|
||||
"main"
|
||||
"footer";
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight:500;
|
||||
display:grid;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
3
templates/assets/css/test.css
Normal file
3
templates/assets/css/test.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
h1 {
|
||||
color: greenyellow;
|
||||
}
|
||||
4
templates/assets/font-awesome.min.css
vendored
4
templates/assets/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 602 KiB After Width: | Height: | Size: 602 KiB |
2
templates/assets/jquery/jquery-3.5.1.min.js
vendored
Normal file
2
templates/assets/jquery/jquery-3.5.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
108
templates/assets/js/main.js
Normal file
108
templates/assets/js/main.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
|
||||
|
||||
// this function shows an element by id
|
||||
|
||||
function show() {
|
||||
var x= document.getElementById("information");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex"; }
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
//this function shows element2 by id -to be generalized
|
||||
|
||||
function display() {
|
||||
var x= document.getElementById("footer-links");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
|
||||
function menu() {
|
||||
var x= document.getElementById("mobile-dropdown");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function menu2() {
|
||||
var x= document.getElementById("down");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
|
||||
function menu3() {
|
||||
var x= document.getElementById("down1");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
|
||||
function menu4() {
|
||||
var x= document.getElementById("down2");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
|
||||
function menu5() {
|
||||
var x= document.getElementById("down3");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
|
||||
function menu6() {
|
||||
var x= document.getElementById("down4");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
}
|
||||
}
|
||||
|
||||
//print pdf file
|
||||
|
||||
// const pdfBtn = document.getElementById('print');
|
||||
|
||||
// console.log(pdfBtn);
|
||||
|
||||
// const printPage = () => {
|
||||
// window.print();
|
||||
// }
|
||||
|
||||
// pdfBtn.addEventListener("click", (event) => {
|
||||
// printPage(event, 'printed');
|
||||
|
||||
// });
|
||||
|
||||
// let screen = () => {
|
||||
// console.log(window.innerHeight);
|
||||
// console.log(window.innerWidth);
|
||||
// };
|
||||
|
||||
// screen();
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
document.getElementById('print').addEventListener('click', () => {
|
||||
let page = this.document.querySelector('.wrapper');
|
||||
console.log(page);
|
||||
console.log(window);
|
||||
|
||||
})
|
||||
}, false);
|
||||
20
templates/assets/js/pages.js
Normal file
20
templates/assets/js/pages.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
$(document).ready(function(){
|
||||
// Add smooth scrolling to all links with #
|
||||
$("a").on('click', function(event) {
|
||||
if (this.hash !== "") {
|
||||
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 1000, function(){
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
});
|
||||
80
templates/assets/js/slider.js
Normal file
80
templates/assets/js/slider.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
let slides=document.querySelector('.slider-items').children;
|
||||
let nextSlide=document.querySelector('.right-slide');
|
||||
let prevSlide=document.querySelector('.left-slide');
|
||||
let totalSlides=slides.length;
|
||||
let index=0;
|
||||
|
||||
console.log(index);
|
||||
|
||||
|
||||
nextSlide.onclick = () => {
|
||||
next("next");
|
||||
}
|
||||
|
||||
prevSlide.onclick = () => {
|
||||
next("prev");
|
||||
}
|
||||
|
||||
let next = (direction)=> {
|
||||
if (direction=="next"){
|
||||
index++;
|
||||
if (index==totalSlides){
|
||||
index=0;
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(index==0){
|
||||
index=totalSlides-1;
|
||||
}
|
||||
else {
|
||||
index--;
|
||||
}
|
||||
}
|
||||
|
||||
for (i=0; i<slides.length;i++){
|
||||
slides[i].classList.remove("active");
|
||||
}
|
||||
slides[index].classList.add("active");
|
||||
}
|
||||
|
||||
const spider=document.querySelector('.spider-items').children;
|
||||
const spiderNext=document.querySelector('#spider-right');
|
||||
const spiderPrev=document.querySelector('#spider-left');
|
||||
let spiderTotal=spider.length;
|
||||
|
||||
console.log(spider);
|
||||
console.log(spiderNext);
|
||||
console.log(spiderPrev);
|
||||
console.log(spiderTotal);
|
||||
|
||||
|
||||
spiderNext.onclick = () => {
|
||||
nextSpider("next");
|
||||
}
|
||||
|
||||
spiderPrev.onclick = () => {
|
||||
nextSpider("prev");
|
||||
}
|
||||
|
||||
let nextSpider = (direction)=> {
|
||||
if (direction=="next"){
|
||||
index++;
|
||||
if (index==spiderTotal){
|
||||
index=0;
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(index==0){
|
||||
index=spiderTotal-1;
|
||||
}
|
||||
else {
|
||||
index--;
|
||||
}
|
||||
}
|
||||
|
||||
for (i=0; i<spider.length;i++){
|
||||
spider[i].classList.remove("active");
|
||||
}
|
||||
spider[index].classList.add("active");
|
||||
}
|
||||
|
||||
|
|
@ -4,20 +4,19 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<link rel="stylesheet" type="text/css" href="global/css/nav.css">
|
||||
<link rel="stylesheet" type="text/css" href="global/css/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="global/css/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/nav.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/experiments.css">
|
||||
<link rel="icon" href="global/img/Logo.svg">
|
||||
<link rel="icon" type="img/svg+xml"href="img/Logo.svg">
|
||||
<title>
|
||||
Cannabinieri - Experiments
|
||||
</title>
|
||||
<script src="../../static/js/jquery-3.5.1.min.js"></script>
|
||||
<script src="../../static/js/pages.js"></script>
|
||||
<script src="jquery/jquery-3.5.1.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#top-nav').load("global/top-nav.html");
|
||||
$('#top-nav').load("components/top-nav.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -25,21 +24,21 @@
|
|||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#main-nav').load("global/main-nav.html");
|
||||
$('#main-nav').load("components/main-nav.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#content').load("global/content/experiments-content.html");
|
||||
$('#content').load("components/experiments-content.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#footer').load("global/footer.html");
|
||||
$('#footer').load("components/footer.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -51,7 +50,7 @@
|
|||
<div id="content"></div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<script src="global/js/pages.js"></script>
|
||||
<script src="global/js/main.js"></script>
|
||||
<script src="js/pages.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
53
templates/greentech.html
Normal file
53
templates/greentech.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Cannabinieri - GreenTech</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<link rel="stylesheet" type="text/css" href="global/css/nav.css">
|
||||
<link rel="stylesheet" type="text/css" href="global/css/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="global/css/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/greentech.css">
|
||||
<link rel="icon" href="global_img/Logo.svg">
|
||||
<script src="../../static/js/jquery-3.5.1.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#top-nav').load("global/top-nav.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#main-nav').load("global/main-nav.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#content').load("global/content/greentech-content.html");
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#footer').load("global/footer.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
<script src="global/js/main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="global-wrapper">
|
||||
<div id="top-nav"></div>
|
||||
<div id="main-nav"></div>
|
||||
<div id="content"></div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,14 +4,14 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<link rel="stylesheet" type="text/css" href="nav.css">
|
||||
<link rel="icon" type="img/svg+xml" href="Logo.svg">
|
||||
<link rel="stylesheet" type="text/css" href="css/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/nav.css">
|
||||
<link rel="icon" type="img/svg+xml" href="img/Logo.svg">
|
||||
<title>
|
||||
Cannabinieri CBD
|
||||
</title>
|
||||
<script defer src="fontawesome.min.css"></script>
|
||||
<script src="assets/jquery/jquery-3.5.1.min.js"></script>
|
||||
<script defer src="fontawesome/all.css"></script>
|
||||
<script src="jquery/jquery-3.5.1.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
|
@ -25,11 +25,12 @@
|
|||
</nav>
|
||||
<div id="main-bar">
|
||||
<div id="logo-container">
|
||||
<img class="logo" type="image/webp" src="Logo.svg">
|
||||
<img class="logo" type="image/webp" src="img/Logo.svg">
|
||||
</div>
|
||||
<nav class="main-navigation-bar">
|
||||
<ul>
|
||||
<li><a href="experiments.html">EXPERIMENTS</a>
|
||||
<!--GET method-->
|
||||
<li><a href="/experiments">EXPERIMENTS</a>
|
||||
<ul class="sub">
|
||||
<li><a href="oils.html">Oils</a></li>
|
||||
<li><a href="flower.html">Flower</a></li>
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="permaculture.html">PERMACULTURE</a>
|
||||
<li><a href="/permaculture">PERMACULTURE</a>
|
||||
<ul>
|
||||
<li><a href="permapp.html">PermApp</a></li>
|
||||
<li><a href="greenlab.html">GreenLab</a></li>
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="greentech.html">GREENTECH</a>
|
||||
<li><a href="/greentech">GREENTECH</a>
|
||||
<ul>
|
||||
<li><a href="automation.html">Automation</a></li>
|
||||
<li><a href="iot.html">IoT</a></li>
|
||||
|
|
@ -84,7 +85,7 @@
|
|||
<div id="mobile-dropdown-container">
|
||||
<div id="mobile-dropdown">
|
||||
<ul>
|
||||
<li onclick="menu2()"><a href="experiments.html">EXPERIMENTS</a>
|
||||
<li onclick="menu2()"><a href="/experiments">EXPERIMENTS</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
|
|
@ -96,7 +97,7 @@
|
|||
</ul>
|
||||
|
||||
<ul>
|
||||
<li onclick="menu3()"><a href="permaculture.html">PERMACULTURE</a>
|
||||
<li onclick="menu3()"><a href="/permaculture">PERMACULTURE</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
|
|
@ -108,7 +109,7 @@
|
|||
</ul>
|
||||
|
||||
<ul>
|
||||
<li onclick="menu4()"><a href="greentech.html">GREENTECH</a>
|
||||
<li onclick="menu4()"><a href="/greentech">GREENTECH</a>
|
||||
<span class="drop">
|
||||
<i class="arrow down"></i>
|
||||
</span>
|
||||
|
|
@ -199,7 +200,7 @@
|
|||
<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.html">More</a>
|
||||
<a href="/experiments">More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -446,8 +447,8 @@
|
|||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="test/main.js" type="text/javascript"></script>
|
||||
<script src="assets/js/pages.js"></script>
|
||||
<script src="assets/js/slider.js"></script>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
55
templates/permaculture.html
Normal file
55
templates/permaculture.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Cannabinieri - Permaculture</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<link rel="stylesheet" type="text/css" href="global/css/nav.css">
|
||||
<link rel="stylesheet" type="text/css" href="global/css/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="global/css/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/permaculture.css">
|
||||
<link rel="icon" href="global_img/Logo.svg">
|
||||
<script src="../../static/js/jquery-3.5.1.min.js"></script>
|
||||
<script src="../../static/js/pages.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#top-nav').load("global/top-nav.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#main-nav').load("global/main-nav.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#content').load("global/content/permaculture-content.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#footer').load("global/footer.html");
|
||||
|
||||
});
|
||||
</script>
|
||||
<script src="../../static/js/main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="global-wrapper">
|
||||
<div id="top-nav"></div>
|
||||
<div id="main-nav"></div>
|
||||
<div id="content"></div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
templates/test.html
Normal file
14
templates/test.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="css/test.css">
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>I can display plain html</h1>
|
||||
<script src="js/test.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-eqiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<link rel="stylesheet" type="text/css" href="test_index.css">
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Purple</h1>
|
||||
<img src="test_logo.svg" type="image/webp">
|
||||
<script src="test_index.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue