@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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; | |||
} | |||
} |
@ -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; | |||
} | |||
} |
@ -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; | |||
} | |||
} |
@ -0,0 +1,3 @@ | |||
h1 { | |||
color: greenyellow; | |||
} |
@ -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); |
@ -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 | |||
}); | |||
}); |
@ -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"); | |||
} | |||
@ -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> |
@ -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> |
@ -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> |