@ -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> |