xsiva
/
rocket-3d
1
0
Fork 1
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

index

master
Xsivax 3 years ago
parent
fb7ca37250
commit
abb54495a6
28 changed files with 92 additions and 13386 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -538
      templates/assets/css/automation.css
  2. +0
    -783
      templates/assets/css/blog.css
  3. +0
    -427
      templates/assets/css/code.css
  4. +0
    -80
      templates/assets/css/contact.css
  5. +0
    -507
      templates/assets/css/diy.css
  6. +0
    -501
      templates/assets/css/edibles.css
  7. +0
    -901
      templates/assets/css/experiments.css
  8. +0
    -443
      templates/assets/css/flower.css
  9. +0
    -81
      templates/assets/css/global.css
  10. +0
    -529
      templates/assets/css/greenlab.css
  11. +0
    -756
      templates/assets/css/greentech.css
  12. +49
    -8
      templates/assets/css/index.css
  13. +0
    -526
      templates/assets/css/iot.css
  14. +0
    -724
      templates/assets/css/join.css
  15. +0
    -990
      templates/assets/css/learn.css
  16. +0
    -474
      templates/assets/css/meet.css
  17. +0
    -5
      templates/assets/css/notes.txt
  18. +0
    -533
      templates/assets/css/oils.css
  19. +0
    -810
      templates/assets/css/partners.css
  20. +0
    -768
      templates/assets/css/permaculture.css
  21. +0
    -532
      templates/assets/css/permapp.css
  22. +0
    -590
      templates/assets/css/spider.css
  23. +0
    -631
      templates/assets/css/spiderpi.css
  24. +0
    -12
      templates/assets/css/test.css
  25. +0
    -615
      templates/assets/css/whatsthat.css
  26. +0
    -612
      templates/assets/css/whoweare.css
  27. +41
    -8
      templates/assets/js/main.js
  28. +2
    -2
      templates/index_de.html.tera

+ 0
- 538
templates/assets/css/automation.css View File

@ -1,538 +0,0 @@
:root {
--gradient: linear-gradient(
45deg,
hsl(160, 51%, 49%),
hsl(160, 51%, 59%),
hsl(160, 51%, 79%),
hsl(160, 51%, 89%),
#fff
);
}
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
font-family: 'Lato', sans-serif;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 {
color: rgb(0, 255, 170);
}
.info p {
color: #333;
}
.info #color {
color: rgb(0, 255, 170);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:rgb(0, 255, 170);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 10vh 0 1vh;
}
.info p {
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 1.25rem;
margin-top: 6vh;
}
.info #color {
font-size: 1.5rem;
margin-top: 5.5vh
}
.info h1 {
font-size: 2.25rem;
padding-top: 10vh;
margin-bottom: .5rem;
}
.image {
display:flex;
justify-content: center;
}
.info img {
width: 37.5vh;
height: auto;
align-self: center;
margin-top: 0;
}
.auto-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding:.75rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 2rem;
line-height: 3.5rem;
color:rgb(0, 255, 170);
margin: 1rem 0;
letter-spacing: .02rem;
font-weight: 400;
}
.about p {
margin: 1rem 0;
line-height: 4vh;
}
.about img {
width:50vh;
height: auto;
padding: 1rem .5rem 2rem .5rem;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
color: rgb(62, 190, 147);
margin: 1rem 0 0 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 450;
line-height: 4rem;
letter-spacing: .05rem;
}
.products img {
width: 30vh;
margin: 1rem;
}
.products h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 500;
line-height: 3rem;
text-transform: uppercase;
margin-bottom: .5rem;
text-align: center;
}
.products p {
text-align: center;
margin: .75rem .75rem 4.5vh .75rem;
line-height: 3.5vh;
}
.product p a {
color: rgb(62, 190, 147);
text-decoration: none;
}
.product p a:active {
opacity: 50%;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem 1rem 5vh 1rem;
}
.product .image {
margin: 1rem 0;
}
.product .click button {
padding: .5rem 1.25rem;
background-image: var(--gradient);
background-size: 300%;
background-position: left;
border: none;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
-webkit-text-stroke-width: .01em;
-webkit-text-stroke-color: #fff;
transition: .6s;
}
.product .click button a {
text-decoration: none;
color: white;
}
.product .click button a:active,
.product .click button a:focus {
-webkit-text-stroke-width: .05em;
-webkit-text-stroke-color: #eee;
filter: blur(.015em)
}
#app {
margin-left: 6.5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 62.5vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.info h1 {
grid-column: 1/3;
grid-row: 1;
font-size: 6rem;
margin-bottom: 0;
display: flex;
justify-self: flex-start;
margin-left: 10rem;
}
.info p {
grid-column: 1/3;
grid-row: 2;
font-size: 3.5vh;
margin: 0 1rem 1rem 5rem;
text-align: left;
line-height: 2.25rem;
letter-spacing: .5px;
justify-self: center;
font-weight: 300;
}
.info #color {
grid-row: 2;
margin: 17.5vh 0 0 15rem;
font-size: 4.5vh;
}
.info img {
width: 60vh;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
margin-top: 3vh;
margin-left: 1vh;
}
.auto-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 100vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
}
.about h3 {
font-size: 2.5rem;
line-height: 3rem;
color:rgb(0, 255, 170);
margin: 5rem 0 2rem 1rem;
}
.about span {
color: rgb(0, 255, 170);
}
.about p {
margin: 1rem 0 0 1rem;
float: left;
font-size: 1.5rem;
font-weight: 300;
line-height: 4.5vh;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
max-width: 40vw;
height: auto;
margin-top: 10vh;
}
.strip2 {
padding: 2rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.5rem;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 3rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 400;
letter-spacing: .07em;
padding-left: 1.5rem;
}
.product h5 {
grid-column: 2;
grid-row: 1;
display:flex;
justify-self: center;
align-self: flex-end;
font-size: 2rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
line-height: 10vh;
letter-spacing: .1em;
margin-bottom: .5rem;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .5fr 1fr .5fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
max-height: 100vh;
}
.product .image {
grid-column: 1;
grid-row:1/3;
padding: 3vh;
margin: 1rem 0;
display: flex;
align-items: center;
margin: 4rem 0 0 4rem;
}
.product .image img {
width: 50vh;
}
.product h5 span{
color: #999;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 5rem;
font-size: 1.15rem;
font-weight: 300;
line-height: 4.5vh;;
}
.product #blog-link {
color: #999;
text-decoration: none;
}
.product #blog-link:hover {
color: hsl(160, 100%, 59%);
opacity: 50%;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding: 0 0 2.5rem 0;
}
.product .click button {
padding: .85rem 2.5rem;
background-image: var(--gradient);
background-size: 300%;
background-position: left;
border: none;
font-size: 1.5rem;
color: white;
font-family:'Lato', sans-serif;
line-height: 1rem;
-webkit-text-stroke-width: .01em;
-webkit-text-stroke-color: #fff;
border-radius: 25px;
font-weight: 400;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
}
.product .click button a {
color: white;
text-decoration: none;
}
.product .click button:hover {
opacity: 50%;
background-color: rgb(0, 255, 170);
-webkit-text-stroke-width: .02em;
-webkit-text-stroke-color: #333;
}
#app {
margin-left: 12.5vh;
}
#app:hover {
opacity: 50%;
background-color: red !important;
}
}

+ 0
- 783
templates/assets/css/blog.css View File

@ -1,783 +0,0 @@
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span {
color: rgb(0, 255, 170);
}
.info p {
color: black;
text-align: center;
}
.info p span {
color: rgb(0, 255, 170);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
}
.strip h3 {
color: #333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.theme h5 {
color: black;
text-transform: uppercase;
align-self: center;
}
.product .click button {
margin: 0 1rem 0 0 !important;
}
#insta {
padding: 0;
background-color:transparent;
border: none;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#gram {
width: 5vh;
margin: 0;
}
#you {
padding: 0;
background-color:transparent;
border: none;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#tube {
width: 5vh;
margin: 0;
}
@media (max-width: 1023px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 77.5vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 0 1vh;
}
.info p {
font-size: 3vh;
margin: 1rem;
text-align: center;
font-weight: 300;
}
.info h1 {
font-size: 2.5rem;
padding-top: 3rem;
}
.info h1 span {
margin-left: 7vh;
}
.image {
display:flex;
justify-content: center;
}
.info img {
width: 30vh;
height: auto;
align-self: center;
}
.blog-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: #333;
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding:2rem 1rem;
background-color: white;
border-radius: 25px;
margin-top: 5vh;
}
.strip h3 {
font-size: 2rem;
font-weight: 500;
line-height: 3rem;
color: #333;
margin-bottom: 5vh;
}
.strip #smaller {
font-size: 1.7rem;
}
.grid figure {
width: 100%;
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
}
.grid .single {
grid-template-rows: repeat(1, 1fr);
}
.theme {
display: flex;
flex-direction: column;
justify-content: space-around;
min-height: 75vh;
box-shadow: 1px 1px 5px 3px #333;
margin-bottom: 5vh;
}
.theme h5 {
font-size: 3.5vh;
}
.theme .downsize {
font-size: 3.15vh;
}
.theme #small {
font-size: 1.2rem;
}
.theme .description {
margin: 1rem;
}
.description p {
font-weight: 300;
line-height: 4vh;
text-align: center;
}
.theme .click {
display: flex;
justify-content: center;
align-items: center;
margin: 0 1rem 1rem 1rem;
}
.theme img {
width:40vh;
height: auto;
padding: 1rem 0 2rem 0;
}
.theme button {
padding: .5rem 1.25rem;
border: .02em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: ease-in .7s;
}
.theme button a {
text-decoration: none;
color: #000;
}
.theme button:active {
background-color: hsl(160, 50%, 80%);
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
font-weight: 400;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 1.25rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
width: 25vh;
margin: 0 0 1rem 3rem;
}
.products h5 {
color: black;
text-shadow: 1.5px 3px rgb(62, 190, 147);
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
text-align: center;
margin: .75rem;
}
.social {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: .75fr .5fr .75fr .75fr;
align-items: center;
box-shadow: 1px 1px 5px 3px #999;
padding: 1rem;
min-height: 80vh;
}
.social h5 {
grid-column: 1/3;
grid-row: 1;
justify-self: center;
font-weight: 100;
}
.social .blog {
grid-column: 1/3;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
}
.social .blog #blog {
margin: 0;
}
.social .instagram {
grid-column: 1/3;
grid-row: 3;
display: flex;
justify-content: space-around;
align-items: center;
}
#gram {
width: 13.5vw;
}
.social .instagram #account {
font-size: 2.25vh;
cursor: pointer;
align-self: center;
text-shadow: none;
}
.social .youtube {
grid-column: 1/3;
grid-row: 4;
display: flex;
justify-content: space-around;
align-items: center;
}
#tube {
width: 12.5vw;
}
.social .youtube #account {
font-size: 2.25vh;
align-self: center;
text-shadow: none;
cursor: pointer;
transition: all ease .7s;
}
.social .youtube #account:active {
filter: blur(.02em);
}
.social button {
padding: .5rem 1.25rem;
background-color: black;
border: none;
font-size: 1.25rem;
font-family:'Fira Sans', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.social button a {
text-decoration: none;
color: white;
}
.social button:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
.social #post {
width: 40vh;
}
.desktop {
display:none;
}
#helper {
width: 45vh;
}
}
@media (min-width:1024px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 63vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6rem;
margin-bottom: 0;
display: flex;
justify-self: flex-start;
margin-left: 10rem;
}
.info p {
grid-column: 1;
grid-row: 2;
font-size: 1.5rem;
margin: 0 1rem 1rem 12rem;
text-align: left;
line-height: 2.25rem;
letter-spacing: .5px;
font-weight: 300;
}
.info .image {
margin-left: 5vh;
}
.info img {
width: 45vh;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
}
.blog-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color: #333;
display:flex;
flex-direction: column;
align-items: center;
}
.strip {
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 90vh;
width: 100%;
margin-top: 5vh;
padding: 2vh 5vw 7.5vh 5vw;
}
.strip h3 {
font-size: 3rem;
line-height: 3rem;
color: #333;
margin: 5vh 0;
padding-left: 5vh;
}
.strip .grid {
display:grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 5vh;
width: 100%;
}
.grid figure {
grid-column: 1/5;
grid-row: 2;
display: grid;
grid-template-columns: repeat(3,1fr);
justify-content: center;
padding: 0 1.5vw;
}
figure .theme {
max-width: 80%;
margin: 0 .5vw;
}
#shorter {
height: 60vh;
max-width: 90%;
}
#tech {
max-width: 100%;
}
#tutorials {
max-width: 100%;
}
.theme {
display: flex;
flex-direction: column;
justify-content: space-evenly;
box-shadow: 1px 1px 5px 3px #333;
width: 40vh;
height: 70vh;
}
.theme h5 {
font-size: 2.25rem;
text-align: center;
}
.theme .description {
display: flex;
justify-content: center;
margin: 1rem;
}
.theme .description p {
line-height: 4vh;
text-align: center;
}
.theme .click {
display: flex;
justify-content: center;
align-items: center;
margin: 0 1rem 1rem 1rem;
}
.theme .image {
display:flex;
justify-content: center;
align-items: center;
}
.theme img {
max-width: 90%;
height: auto;
padding: 1rem 0 2rem 0;
}
.theme button {
padding: .55rem 1.25rem;
background-color: black;
border: none;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .7s;
}
.theme button a {
text-decoration: none;
color: white;
}
.theme button:hover {
opacity: 50%;
background-color: rgb(62, 190, 147);
}
.theme h3 {
font-size: 2.5rem;
line-height: 3rem;
color: #333 ;
margin: 5rem 0 2rem 1rem;
}
.theme span {
color: rgb(0, 255, 170);
}
.strip2 {
padding: 2rem 2rem 5rem 2rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 2.5rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 5vw;
}
.products img {
width: 45vh;
margin-bottom: 3vh;
}
.products p {
text-align: center;
margin: 1rem;
}
.social {
display: grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows: .5fr .5fr .5fr .5fr;
align-items: center;
box-shadow: 1px 1px 3px 5px #999;
padding-left: 2vw;
min-height: 80vh;
grid-gap: 2.5vh;
justify-items: center;
}
.social figure {
grid-column: 1/5;
grid-row: 2;
display: grid;
grid-template-columns: repeat(3,1fr);
justify-content: center;
padding: 0 1.5vw;
}
.social figure img {
display: flex;
justify-self: center;
max-width: 90%;
margin: 0 .5vw;
}
.social h5 {
grid-column: 1/3;
grid-row: 1;
justify-self: flex-start;
font-size: 5vh;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 200;
text-transform: uppercase;
padding-left: 5vw;
}
.social .blog {
grid-column: 1/3;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
}
.social .blog #blog {
margin: 0;
width: 20vh;
height: 5vh;
font-size: 1.75rem;
}
.social .instagram {
grid-column: 1/3;
grid-row: 3;
display: flex;
padding-left: 2vh;
}
#gram {
width: 10vh;
margin-right: 5vh;
transition: all ease .7s;
}
#gram:hover {
filter: opacity(.5);
}
.social .instagram #account {
font-size: 1.75rem;
align-self: center;
text-shadow: none;
cursor: pointer;
transition: all ease .7s;
}
.social .instagram #account:hover {
filter: blur(.75px);
color: hsl(350, 100%, 90%);
}
.social .youtube {
grid-column: 1/3;
grid-row: 4;
display: flex;
padding-left: 2vh;
}
#tube {
width: 10vh;
margin-right: 5vh;
transition: all ease .7s;
}
#tube:hover {
filter: opacity(.5);
}
.social .youtube #account {
font-size: 1.75rem;
align-self: center;
text-shadow: none;
cursor: pointer;
transition: all ease .7s;
}
.social .youtube #account:hover {
filter: blur(.75px);
color: hsl(160, 50%, 70%);
}
.social button {
padding: .5rem 1.25rem;
background-color: black;
border: none;
font-size: 1.25rem;
font-family:'Fira Sans', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.social button a {
text-decoration: none;
color: white;
}
.social button a:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
}

+ 0
- 427
templates/assets/css/code.css View File

@ -1,427 +0,0 @@
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color: rgb(191, 255, 0);
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info p {
color: black;
text-align: center;
}
.info p span {
color: rgb(191, 255, 0);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
}
.strip h3 {
color:rgb(62, 190, 147);
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.theme h5 {
color: black;
text-transform: uppercase;
align-self: center;
}
.product .click button {
margin: 0 1rem 0 0 !important;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 72.5vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 0 1vh;
}
.info p {
font-size: .95rem;
margin: 1rem;
text-align: center;
}
.info h1 {
font-size: 2.5rem;
padding-top: 12.5vh;
}
.info h1 span {
margin-left: 7vh;
}
.image {
display:flex;
justify-content: center;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
padding-right: 2vh;
}
.code-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color:rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding:2rem 1rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 1vh;
}
.strip h3 {
font-size: 2rem;
font-weight: 300;
line-height: 3rem;
margin: 1rem 0;
}
.strip #smaller {
font-size: 1.7rem;
}
.theme {
display: flex;
flex-direction: column;
min-height: 65vh;
box-shadow: 1px 1px 5px 3px #333;
margin-bottom: 5vh;
}
.grid {
display: grid;
justify-items: center;
align-items: center;
width: 100%;
padding-top: 3vh;
}
.grid figure {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.theme h5 {
font-size: 1.5rem;
margin: 2vh 0;
}
.theme #downsize {
font-size: 1.25rem;
}
.theme h6 {
color: rgb(191, 255, 0);
text-align: center;
padding: 1vh 0 0 0;
}
.theme #small {
font-size: 1.2rem;
}
.theme .description {
margin: 1rem;
}
.theme .description {
font-weight: 300;
line-height: 4vh;
text-align: center;
}
.theme .click {
display: flex;
justify-content: center;
align-items: center;
margin: 0 1rem 2rem 1rem;
}
.theme img {
max-width: 65vw;
height: auto;
padding: 1.5rem 0 2rem 0;
}
.theme button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .02em solid hsl(75, 100%, 50%);
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.theme button a {
text-decoration: none;
color: #333;
}
.theme button a:active {
opacity: 50%;
color: rgb(191, 255, 0);
}
.desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 63vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 7rem;
display: flex;
justify-self: flex-start;
margin: 3rem 0 2.5rem 10rem;
}
.info p {
grid-column: 1;
grid-row: 2;
font-size: 1.5rem;
margin: 1rem 1rem 1rem 12rem;
text-align: left;
line-height: 2.25rem;
letter-spacing: .5px;
}
.info .image {
margin: 5vh 0 0 5vh;
}
.info img {
width: 45vh;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
}
.code-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color: rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 90vh;
margin-top: 5vh;
}
.strip h3 {
font-size: 3rem;
line-height: 3rem;
color: #333;
margin: 5vh 0;
padding-left: 5vh;
}
.strip .grid {
display:grid;
grid-template-columns: repeat(1,1fr);
grid-gap: 5vh;
justify-items: center;
align-items: center;
}
figure {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1vw;
justify-items: center;
width: 100%;
}
#shorter {
height: 60vh;
}
.theme {
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 1px 1px 5px 3px #333;
width: 90%;
min-height: 70vh;
}
.theme h5 {
font-size: 2.25rem;
text-align: center;
padding: 3vh 0 .5rem 0;
}
.theme h6 {
color: rgb(191, 255, 0);
text-align: center;
}
.theme .description {
margin: 1rem;
}
.description p {
padding-bottom: 5vh;
line-height: 4vh;
text-align: center;
}
.theme .click {
display: flex;
justify-content: center;
align-items: center;
margin: 0 1rem 1rem 1rem;
}
.theme .image {
display:flex;
justify-content: center;
align-items: center;
}
.theme img {
width: 35vh;
height: auto;
padding: 1rem 0 0 0;
}
.theme button {
padding: .5rem 1.25rem;
border: .02em solid hsl(75, 100%, 50%);
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin: 1rem 0 1rem .25rem;
transition: .5s;
width: 12vh;
height: 5vh;
color: hsl(75, 100%, 50%);
background-color: #fff;
}
.theme button a {
text-decoration: none;
color: hsl(75, 100%, 50%);
}
.theme button a:hover {
color: #fff;
}
.theme button:hover {
opacity: 50%;
color: #fff;
background-color: hsl(75, 100%, 50%);
}
.theme h3 {
font-size: 2.5rem;
line-height: 3rem;
color: #333 ;
margin: 5rem 0 2rem 1rem;
}
.theme span {
color: rgb(0, 255, 170);
}
}

+ 0
- 80
templates/assets/css/contact.css View File

@ -1,80 +0,0 @@
.container {
height: calc(100% - 30vh);
font-family: 'Lato', sans-serif;
}
.donation_container {
color: #333;
height: 40vh;
display: flex;
align-items: center;
text-align: center;
flex-direction: column;
justify-content: space-evenly;
border-bottom: solid 1vh #ff00ff;
}
.donation_container h1 {
color: #ff00ff;
}
.donation_container p {
font-size: 3vh;
line-height: 5vh;
}
.donation_container p span {
color: #333;
font-weight: 600;
}
.form_container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
}
.right {
padding: 3vh 4vw;
}
.right h2 {
padding-bottom: 2vh;
}
.input {
border: solid;
border-top-color: currentcolor;
border-right-color: currentcolor;
border-bottom-color: currentcolor;
border-left-color: currentcolor;
border-radius: 4vw;
background-color: white;
padding: 1vh 1vw;
margin: 1vh 0;
border-color: #f0f;
}
#message {
width: 60vw;
height: 30vw;
}
#sub_btn {
background-color: white;
border: solid;
border-radius: 4vw;
border-color: #f0f;
width: 30vw;
height: 10vw;
color:#f0f;
cursor: pointer;
}

+ 0
- 507
templates/assets/css/diy.css View File

@ -1,507 +0,0 @@
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:magenta;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span{
color:magenta;
}
.info p {
color: black;
}
.info p span {
color:magenta;
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:magenta;
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
.product p a {
text-decoration: none;
color:magenta;
}
.product p a:hover {
opacity: 50%;
color:rgb(62, 190, 147)
}
.product p a:active {
opacity: 50%;
color:rgb(62, 190, 147)
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 62.5vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 10vh 0 1vh;
}
.info p {
font-size: 3vh;
font-weight: 300;
margin: 1rem;
text-align: center;
}
.info p span {
margin-top: 5vh;
}
.info h1 {
font-size: 15vh;
}
.image {
display:flex;
justify-content: center;
}
.info img {
width: 35vh;
height: auto;
align-self: center;
margin-top: 0;
}
.things-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color:magenta;
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding: 1.75rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 1.85rem;
font-weight: 300;
line-height: 3rem;
color: magenta;
margin: 1rem 0;
}
.about p {
font-size: 2.5vh;
font-weight: 300;
line-height: 4.5vh;
margin: 1rem 0;
}
.about img {
width:40vh;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
font-weight: 400;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 0 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem .5rem;
}
.product .image {
margin: 1rem 0;
}
.product img {
max-width: 60vw;
}
.product h5 {
font-size: 1.25rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin: .5rem 0;
}
.product p {
font-weight: 300;
line-height: 4vh;
text-align: center;
margin: .75rem;
}
.product .click {
margin: 1rem;
}
.product .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .02em solid hsl(300, 100%, 50%);
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.product .click button a {
text-decoration: none;
color: #333;
}
.product .click button:active {
opacity: 50%;
background-color: magenta;
}
#app {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 60vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.info h1 {
grid-column: 1/3;
grid-row: 1;
font-size: 6.5rem;
display: flex;
justify-self: flex-start;
margin: 0 0 0 25rem;
}
.info p {
grid-column: 1/3;
grid-row: 2;
font-size: 1.35rem;
margin: 0 1rem 1rem 1rem;
text-align: left;
line-height: 2.25rem;
letter-spacing: .5px;
justify-self: center;
}
.info p span {
margin-left: 6rem;
}
.info img {
width: 50vh;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
margin-top: 8vh;
margin-left: 4vh;
}
.things-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:magenta;
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
min-height: 80vh;
width: 90vh;
align-self: center;
}
.about {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: .2fr 1fr;
}
.about h3 {
font-size: 2.5rem;
line-height: 3rem;
color:magenta;
margin: 2rem 0 0 5rem;
grid-column: 1/3;
display: flex;
justify-self: flex-start;
}
.about span {
color: magenta
;
}
.about p {
margin: 1rem 0 0 1rem;
float: left;
font-size: 1.35rem;
grid-column: 1/2;
padding: 2rem 4rem;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
width:55vh;
height: auto;
margin-top: 10vh;
}
.strip2 {
padding: 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
padding-bottom: 8vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 3rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 1.5rem;
}
.product h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: 1.5rem 1rem;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
grid-gap: 2rem;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
padding: 4rem 1.5rem;
}
.product .image {
grid-column: 1;
grid-row: 1/4;
display: flex;
align-items: center;
justify-content: center;
}
.product img {
max-width: 40vw;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 4.75vh;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product h5 span{
color: #999;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 2.5rem;
font-size: 1.15rem;
line-height: 5vh;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding: 0 0 2.5rem 0;
}
.product .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .02em solid hsl(300, 100%, 50%);
font-size: 1.5rem;
color: white;
font-family:'Fira Sans', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
}
.product .click button a {
color: #333;
text-decoration: none;
text-transform: uppercase;
}
.product .click button:hover {
opacity: 50%;
background-color: magenta;
}
#app {
margin-left: 10vh;
}
}

+ 0
- 501
templates/assets/css/edibles.css View File

@ -1,501 +0,0 @@
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:rgb(191, 255, 0);
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info p {
color: black;
}
.info p span {
color: rgb(191, 255, 0);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:rgb(191, 255, 0);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: black;
text-shadow: 1.5px 3px rgb(191, 255, 0);
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 0 1vh;
padding-top: 4vh;
}
.info p {
font-size: 2.5vh;
font-weight: 300;
padding-top: 5vh;
text-align: center;
}
.info h1 {
font-size: 8vh;
padding-bottom: .5rem;
margin: 0;
}
.image {
display:flex;
justify-content: center;
min-height: 45vh;
}
.info img {
min-width: 67.5vw;
height: auto;
align-self: center;
margin-top: 0;
transform: rotate(45deg);
padding-right: 10vw;
}
.oil-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color:rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
display: grid;
height: auto;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding:.75rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
grid-template-rows: .5fr 1fr .5fr;
align-items: center;
justify-items: center;
}
.about h3 {
font-size: 2rem;
font-weight: 400;
line-height: 3rem;
color:rgb(191, 255, 0);
text-align: left;
padding: 2vh 5vw;
}
.about p {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2vh 2vw;
text-align: left;
line-height: 4vh;
font-weight: 300;
}
.about p span {
padding-top: 2vh;
font-size: 3vh;
}
.about img {
width:40vh;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 1.25rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 400;
}
.products img {
max-width: 35vw;;
margin: 1rem 0;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 0 1rem 3rem 1rem;
}
.product h5 {
font-size: 2rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
margin-bottom: .5rem;
}
.product p {
text-align: center;
margin: .75rem;
line-height: 4vh;
font-weight: 300;
}
.product .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid hsl(75, 100%, 50%);
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.product .click button a {
text-decoration: none;
color: #333;
}
.product .click button a:active {
opacity: 50%;
color: hsl(75, 100%, 40%);
}
#shop {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#shop a:active {
opacity: 50%;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6rem;
font-weight: 300;
margin-bottom: 0;
display: flex;
justify-self: center;
padding-left: 2vw;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.25rem;
text-align: left;
line-height: 2.25rem;
letter-spacing: .5px;
}
.info p span {
font-size: 3.5vh;
padding-top: 5vh;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
}
.info img {
min-width: 55vw;
height: auto;
display:flex;
justify-self: center;
align-self: center;
margin-left: 2vw;
padding-right: 22.5vw;
transform: rotate(10deg);
}
.oil-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 90vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
}
.about h3 {
font-size: 2.5rem;
font-weight: 400;
line-height: 3rem;
color:rgb(191, 255, 0);
margin: 5rem 0 2rem 1rem;
}
.about span {
color: rgb(191, 255, 0);
}
.about p {
margin: 1rem 0 3rem 1rem;
float: left;
font-size: 1.5rem;
line-height: 5vh;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
max-width: 35vw;
height: auto;
padding-top: 5.5vh;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.5rem;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 2.5rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 300;
}
.product h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
min-height: 60vh;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
margin: 1rem;
}
.product .image {
grid-column: 1;
grid-row: 1/4;
display:flex;
align-items: center;
justify-content: center;
padding-left: 3vh;
padding-top: 1vh;
}
.product img {
max-width: 20vw;
margin: 3vh 0 3vh 5vw;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 3rem;
font-weight: 300;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 2.5rem;
font-size: 1.15rem;
line-height: 4.5vh;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding: 0 0 2.5rem 0;
}
.product .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .03em solid hsl(75, 100%, 50%);
font-size: 1.5rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .3s;
}
.product .click button a {
color: #333;
text-decoration: none;
}
.product .click button:hover {
opacity: 50%;
background-color: rgb(191, 255, 0);
}
#shop {
margin-left: 10vh;
}
}

+ 0
- 901
templates/assets/css/experiments.css View File

@ -1,901 +0,0 @@
: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
- 443
templates/assets/css/flower.css View File

@ -1,443 +0,0 @@
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:magenta;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info p {
color: black;
}
.info p span {
color: magenta;
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color: magenta;
font-weight: 400;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 0 1vh;
padding-top: 10vh;
}
.info p {
font-size: 1.1rem;
font-weight: 300;
line-height: 5.5vh;
margin: 1rem;
text-align: center;
}
.info p span {
font-size: 1.2rem;
}
.info h1 {
font-size: 3.2rem;
font-weight: 300;
padding: 0;
}
.image {
display:flex;
justify-content: center;
margin-top: 4vh;
}
.info img {
min-width: 25vh;
height: auto;
align-self: center;
margin: 0;
}
.flower-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: magenta;
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding:.75rem 1rem 2rem 1rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 2rem;
font-weight: 300;
line-height: 3rem;
color: magenta;
margin: 2rem 0 1.75rem 0;
}
.about p {
font-weight: 300;
font-size: 2.5vh;
line-height: 4vh;
margin: 1rem 0;
}
.about img {
width:30vh;
height: auto;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.65rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 0 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
max-height: 30vh;
margin-bottom: 3vh;
}
.products h5 {
color: black;
font-size: 2rem;
font-weight: 300;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
padding-top: 2vh;
}
.products p {
text-align: center;
font-size: 1.1rem;
font-weight: 300;
line-height: 4vh;
margin: 1.5rem 1.25rem 1.25rem 1.25rem;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
}
.product .click {
margin-top: 1vh;
}
.product .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
color: #333;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .3s;
}
.product .click button:active {
color: rgb(62, 190, 147);
}
#shop {
margin-left: 5vh;
}
#desktop {
display:none;
}
}
@media(min-width:768px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 5rem;
font-weight: 300;
margin-bottom: 0;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 2.75vh;
text-align: center;
line-height: 2.25rem;
letter-spacing: .5px;
}
.info p span {
line-height: 5;
}
.info img {
width: 50vh;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
margin-left: 4.5rem;
}
.flower-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color: magenta;
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 90vh;
padding-right: 0;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
}
.about h3 {
font-size: 2.5rem;
font-weight: 400;
line-height: 3rem;
color: magenta;
margin: 5rem 0 2rem 1rem;
}
.about p {
margin: 1rem 0;
float: left;
font-size: 1.5rem;
font-weight: 300;
line-height: 5vh;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
width:50vh;
height: auto;
margin-top: 5vh;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 2.5rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
width: 40vh;
margin-bottom: 3vh;
}
.products h5 {
color: black;
font-size: 1rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
margin: 1rem;
}
.product .image {
grid-column: 1;
grid-row:1/3;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 3.25rem;
font-weight: 300;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product p {
display:flex;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
font-size: 2.5vh;
line-height: 5vh;
padding: 0 4rem;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: flex-start;
justify-content: space-between;
}
.product .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.5rem;
color: #333;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .3s;
}
.product .click button:hover {
color: rgb(62, 190, 147);
}
#shop {
margin-left: 10vh;
}
}

+ 0
- 81
templates/assets/css/global.css View File

@ -1,81 +0,0 @@
@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;
}
/* Adjust Media Queries ! */
@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;
}
}
/* Adjust Media Queries ! */
@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
- 529
templates/assets/css/greenlab.css View File

@ -1,529 +0,0 @@
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span{
color:rgb(191, 255, 0);
}
.info p {
color: black;
}
.info p span {
color:rgb(191, 255, 0);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:rgb(191, 255, 0);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
.product p a {
text-decoration: none;
color: rgb(191, 255, 0);
}
.product p a:hover {
opacity: 50%;
color:rgb(62, 190, 147)
}
.product p a:active {
opacity: 50%;
color:rgb(62, 190, 147)
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 0 1vh;
padding-top: 10vh;
}
.info p {
font-size: 1.1rem;
font-weight: 300;
margin: 1rem;
text-align: center;
line-height: 4vh;
}
.info p span {
font-size: 1.2rem;
}
.info h1 {
font-size: 2.8rem;
font-weight: 400;
padding: 0;
margin-bottom: 1.25rem;
}
.image {
display:flex;
justify-content: center;
min-height: 35vh;
}
.info img {
max-width: 70vw;
height: auto;
align-self: center;
margin-top: 0;
}
.green-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color:rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding: 2rem .75rem 2rem .75rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 2rem;
font-weight: 400;
line-height: 3rem;
text-align: center;
color: rgb(191, 255, 0);
}
.about p {
text-align: center;
font-weight: 300;
line-height: 4.5vh;
margin: 1rem .75rem;
}
.about p span {
font-size: 1.2rem;
}
.about img {
width:40vh;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.75rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 .75rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
max-width: 45vw;
margin: 1rem;
}
.products h5 {
font-size: 2rem;
font-weight: 300;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
display: flex;
flex-direction: column;
line-height: 4vh;
font-weight: 300;
text-align: center;
margin: .75rem;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
}
.product .click {
margin: 1rem;
}
.product .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.product .click button a {
text-decoration: none;
color: #333;
}
.product .click button a:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
#app {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: repeat(2, 50%);
padding-top: 1.5vh;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6rem;
font-weight: 300;
margin-bottom: 0;
display: flex;
justify-self: center;
align-self: center;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
justify-self: center;
align-self: flex-start;
font-size: 1.5rem;
text-align: center;
line-height: 5rem;
letter-spacing: .5px;
}
.info p span {
font-size: 1.65rem;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
}
.info img {
width: 50vh;
height: auto;
display:flex;
justify-self: center;
align-self: center;
margin-top: 8vh;
}
.green-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
min-height: 90vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
padding-bottom: 5vh;
}
.about h3 {
font-size: 2.5rem;
font-weight: 400;
line-height: 3rem;
color:rgb(191, 255, 0);
margin: 2rem 0 2rem 1rem;
}
.about span {
color: rgb(191, 255, 0)
;
}
.about p {
margin: 1rem 0 0 1rem;
float: left;
font-size: 1.5rem;
line-height: 5.25vh;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
max-width: 35vw;
height: auto;
margin-top: 10vh;
}
.strip2 {
padding: 2rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
padding-bottom: 8vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
letter-spacing: .1em;
color: rgb(62, 190, 147);
margin: 3rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 1.5rem;
}
.products img {
width: 50vh;
}
.product h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: .5rem;
padding-top: 4.5vh;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
padding: 2vh 1vw 5vh 1vw;
}
.product .image {
grid-column: 1;
grid-row:1/4;
padding: 3vh 3vw;
margin: 1rem 0;
display: flex;
align-items: center;
border-right: .1em solid #999;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 3rem;
font-weight: 300;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product h5 span{
color: #999;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
line-height: 4vh;
padding: 0 2.5rem;
font-size: 1.15rem;
}
.product p a {
color: #999;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding: 0 0 2.5rem 0;
}
.product .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.5rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .3s;
}
.product .click button a {
color: #333;
text-decoration: none;
}
.product .click button:hover {
opacity: 50%;
background-color: rgb(0, 255, 170);
}
#app {
margin-left: 10vh;
}
#app:hover {
opacity: 50%;
background-color: red !important;
}
}

+ 0
- 756
templates/assets/css/greentech.css View File

@ -1,756 +0,0 @@
:root {
--space : 5px;
}
.page-wrapper {
display:grid;
}
.title{
margin-top: var(--space);
}
#about {
margin-top: var(--space);
background-color:white;
}
#about p {
color:black;
}
h1 {
font-weight: 300;
}
@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: 60% 40%;
height: 67vh;
padding-top: 2vh;
}
.title #heading {
grid-column: 1;
grid-row: 1/2;
display: flex;
justify-content: center;
padding-top: 2vh;
}
.title #heading #two {
color: hsl(160, 51%, 49%);
padding-top: 1em;
}
.title .short {
grid-column: 1;
grid-row: 1/2;
font-family:'IBM Plex Sans', sans-serif;
font-size: 1.65em;
line-height: 10vh;
color: rgb(100,190, 149);
margin-left:.1em;
text-align: center;
align-self: flex-end;
padding: 0 5vw 10vh 5vw;
}
.title .image {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
grid-column: 2;
grid-row: 1/2;
transition: 0.4s;
}
.title .image img {
max-height: 50vh;
width: auto;
padding: 0 5vh 5vw 0;
}
h1 {
font-size: 2.5rem;
line-height: 80px;
letter-spacing: .5px;
padding-top: .75em;
margin-left: .1em;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.title #heading {
display: flex;
}
#about {
grid-column:1/5;
grid-row: 2;
display: flex;
background-color: white;
margin: 3rem 1em 2rem 1rem;
border-radius: 25px;
box-shadow: .02em .02em .02em .06em hsl(160, 51%, 49%);
padding: 1vh 5vw;
}
#about p {
font-size: 1.55rem;
padding:1.5rem;
text-align: center;
font-family: 'Lato', sans-serif;
line-height: 3.2;
}
#about p span {
color: hsl(160, 51%, 50%);
font-weight: 400;
}
#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: 75vh;
}
#auto-link {
display:grid;
grid-template-columns: 50% 50%;
grid-template-rows: 80% 20% ;
box-shadow: .02em .01em .01em .03em hsl(160, 100%, 50%);
border-radius: 25px;
min-height: 90vh;
padding: 1rem 0 3rem 0;
}
#auto-link .description {
grid-column:1/3 ;
grid-row:1;
display: flex;
flex-direction: column;
align-self: flex-start;
justify-self: center;
padding: 2rem 1rem;
}
#auto-link .description h3 {
font-size:6em;
font-weight: 300;
text-align: center;
color: hsl(160, 100%, 50%);
margin-bottom: .1em;
font-family: 'IBM Plex Sans', sans-serif;
}
#auto-link .description p {
font-size: 1.35em;
color: #333;
line-height: 2.5;
text-align: center;
justify-self: flex-end;
padding-top: 1rem;
width: 90vh;
}
#auto-link .description p span {
color: hsl(160, 100%, 70%);
font-weight: 400;
font-size: 1.2em;
line-height: 5vh;
}
#auto-link .image {
grid-column:1 ;
grid-row:1/3;
display: none;
}
#auto-link .image img {
height:auto;
width:70%;
margin: 1em;
margin-left: 2em;
}
#auto-link .page-button {
grid-column: 1/3 ;
grid-row: 2;
display:flex;
align-items: center;
align-self: center;
justify-self: center;
}
#auto-link .page-button a {
text-decoration: none;
background-color:#fff;
color: black;
border: .01em solid #000;
padding: .25em 1.25em;
border-radius: 27px;
text-align: center;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
transition: all ease .5s;
font-weight: 300;
}
#auto-link .page-button a:hover {
background-color: hsl(160, 100%, 75%);
}
#tools-link {
display:grid;
grid-template-columns: 50% 50%;
grid-template-rows: 80% 20% ;
box-shadow: .02em .01em .01em .05em hsl(75, 100%, 50%);
border-radius: 25px;
min-height: 85vh;
margin-top: 10vh;
padding: 1rem 0 3rem 0;
}
#tools-link .image {
grid-column:3 ;
grid-row:1/3;
display: none;
}
#tools-link .description {
grid-column:1/3 ;
grid-row:1;
display: flex;
flex-direction: column;
align-self: center;
justify-self: center;
align-items: center;
padding:1em;
}
#tools-link .description h3 {
font-size:6em;
font-weight: 300;
color: #333;
margin-bottom: .25em;
font-family: 'IBM Plex Sans', sans-serif;
}
#tools-link .description h3 span {
color:hsl(75, 100%, 50%);
}
#tools-link .description p {
font-size: 1.25em;
font-weight: 300;
text-align: center;;
color: #333;
line-height: 2.5;
justify-self: flex-end;
padding-top: 1rem;
}
#tools-link .description p span {
color: hsl(75, 100%, 70%);
font-weight: 400;
font-size: 1.2em;
line-height: 5vh;
}
#tools-link .page-button {
grid-column: 1/3 ;
grid-row: 2;
display:flex;
align-items: center;
align-self: center;
justify-self: center;
}
#tools-link .image img {
margin-top: 2em;
width:100%;
}
#tools-link .page-button a {
text-decoration: none;
background-color:#fff;
color: black;
border: .01em solid #000;
padding: .25em 1.25em;
border-radius: 27px;
text-align: center;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 300;
transition: all ease .5s;
}
#tools-link .page-button a:hover {
background-color: hsl(75, 100%, 75%);
}
#you-link {
display:grid;
grid-template-columns: 50% 50%;
grid-template-rows: 80% 20% ;
box-shadow: .02em .01em .01em .05em hsl(300, 100%, 50%);
border-radius: 25px;
min-height: 85vh;
margin-top: 10vh;
padding: 1rem 0 3rem 0;
}
#you-link .image {
grid-column:1 ;
grid-row:1/3;
display: none;
align-items: center;
}
#you-link .description {
grid-column: 1/3 ;
grid-row: 1;
display: flex;
flex-direction: column;
align-self: center;
justify-self: center;
justify-content: center;
align-items: center;
padding:1em;
}
#you-link .description h3 {
font-size:6em;
font-weight: 300;
color: #333;
margin-bottom: .25em;
font-family: 'IBM Plex Sans', sans-serif;
}
.fa {
color: hsl(300, 100%, 50%);
-webkit-text-stroke: .1em white;
}
#you-link .description p {
font-size: 1.25em;
color: #333;
line-height: 2.5;
text-align: center;
justify-self: flex-end;
padding-top: 1rem;
}
#you-link .page-button {
grid-column: 1/3 ;
grid-row: 2;
display:flex;
align-items: center;
align-self: center;
justify-self: center;
}
#you-link .page-button a {
text-decoration: none;
background-color:#fff;
color: black;
border: .01em solid #000;
padding: .25em 1.25em;
border-radius: 27px;
text-align: center;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 300;
transition: all ease .5s;
}
#you-link .page-button a:hover {
background-color: hsl(300, 100%, 75%);
}
#you-link a {
text-decoration: none;
}
#you-link .description p span {
color:magenta;
}
#footer-wrapper {
margin-top:.5rem;
}
h1 {
font-size: 6.5rem;
line-height: 80px;
letter-spacing: 2px;
font-family: 'IBM Plex Sans', sans-serif;
}
#app-link .image #icon {
display:none;
}
}
@media only screen and (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto auto auto ;
}
.title {
grid-column: 1;
grid-row:1/2;
display: flex;
flex-direction: column;
align-items:center;
justify-content: flex-start;
height: 80vh;
padding-top: 3.75rem;
}
h1 {
font-size: 2.75rem;
line-height: 60px;
letter-spacing: .5px;
margin-left: .1em;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.title .short {
font-family:'Lato', sans-serif;
font-size:1em;
font-weight: 300;
line-height: 5vh;
color: rgb(62, 190, 147);
margin-left:.1em;
text-align: center;
padding: 1.5em 2em;
}
.title .image {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.title .image img {
max-height: 30vh;
width: auto;
}
#one {
text-align: center;
}
#two {
color: hsl(160, 51%, 49%);
}
#about {
grid-column:1;
grid-row: 2;
background-color: white;
display: flex;
margin:0 1rem 2rem 1rem;
margin-top:0;
border-radius: 25px;
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 50%);
padding: 1vh 1vw;
}
#about p {
font-size:1.105rem;
font-weight: 300;
padding:1rem;
line-height: 2.25;
color: #333;
}
#links {
grid-column:1;
grid-row:3;
padding: 1rem;
background-color: white;
border-radius: 25px;
margin-top: 2.5vh;
min-height: 90vh;
}
#auto-link {
display:grid;
grid-template-rows: 80% 20%;
box-shadow: .01em .01em .01em .04em hsl(160, 100%, 50%);
border-radius: 25px;
min-height: 85vh;
padding-bottom: .75rem;
}
/* #auto-link .image {
padding-top: 2em;
}
#auto-link .image img {
margin-top: 1em;
width:80%;
margin-left: 2em;
} */
#auto-link .description {
grid-row: 1/2;
padding: 1em 1em 0 1em;
margin-top: 5vh;
}
#auto-link .description h3 {
font-size: 2.45rem;
color: hsl(160, 100%, 50%);
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align: center;
}
#auto-link .description p {
font-size: .95rem;
font-weight: 300;
color: #333;
text-align: center;
line-height: 2.5;
padding-top: .75rem;
}
#auto-link .description p span {
color: hsl(160, 100%, 70%);
font-weight: 400;
}
#auto-link .page-button{
display:flex;
justify-content: center;
align-items: center;
grid-row: 3;
}
#auto-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
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;
}
#auto-link .page-button a:active {
border-color:hsl(160, 100%, 75%);
}
#tools-link {
display:grid;
grid-template-rows: 80% 20%;
box-shadow: .01em .01em .01em .04em hsl(75, 100%, 50%);
border-radius: 25px;
min-height: 75vh;
margin-top: 9.5vh;
padding-bottom: .75rem;
}
#tools-link .description {
grid-row: 1/2;
padding: 1em 1.15em 0 1.15em;
margin-top: 5vh;
}
#tools-link .image img {
margin-top: 1em;
width:80%;
margin-left: 2em;
display: none;
}
#tools-link .description h3 {
font-size: 2.45rem;
font-weight: 300;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
text-align: center;
}
#tools-link .description h3 span {
color: hsl(75, 100%, 50%);
}
#tools-link .description p {
font-size: .95rem;
font-weight: 300;
color: #333;
text-align: center;
line-height: 2.5;
padding-top: .75rem;
}
#tools-link .description p span {
color: hsl(75, 100%, 50%);
font-weight: 400;
}
#tools-link .page-button{
display:flex;
justify-content: center;
align-items: center;
grid-row: 3;
}
#tools-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
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;
}
#tools-link .page-button a:active {
border-color:hsl(75, 100%, 75%);
}
#you-link {
display:grid;
grid-template-rows: 80% 20%;
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
border-radius: 25px;
min-height: 80vh;
margin-top: 9.5vh;
padding-bottom: .75rem;
}
#you-link .description {
grid-row: 1/2;
padding: 1em 1em 0 1em;
margin-top: 5vh;
}
#you-link .description h3 {
font-size: 3rem;
font-weight: 300;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
text-align: center;
}
#you-link a {
text-decoration: none;
}
#you-link .image .fa {
font-size: 15em;
color:magenta;
}
#you-link .description h3 span {
color:magenta;
-webkit-text-stroke: .1em white;
}
#you-link .description p {
font-size: .95rem;
font-weight: 300;
color: #333;
text-align: center;
line-height: 2.5;
padding-top: .75rem;
}
#you-link .description p span {
color:magenta;
}
#you-link .page-button{
display:flex;
justify-content: center;
align-items: center;
grid-row: 3;
}
#you-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
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;
}
#you-link .page-button a:active {
border-color:hsl(300, 100%, 75%);
}
#footer-wrapper {
margin-top:.5rem;
}
.description .additional {
display: none;
}
#app-link .image #icon-desktop {
display:none;
}
}

+ 49
- 8
templates/assets/css/index.css View File

@ -76,6 +76,7 @@ img {
align-self: center; align-self: center;
justify-self: center; justify-self: center;
transition: all .4 ease-in-out; transition: all .4 ease-in-out;
z-index: 1;
} }
.link button:active, .link button:hover { .link button:active, .link button:hover {
@ -99,6 +100,7 @@ img {
padding: 3vh 1vw 0 1vw; padding: 3vh 1vw 0 1vw;
height: 45vw; height: 45vw;
width: 45vw; width: 45vw;
z-index: 0;
} }
.link .sub_container p { .link .sub_container p {
@ -146,22 +148,22 @@ img {
} }
#spider { #spider {
margin-left: 56vw;
margin-left: 35vw;
} }
#cube { #cube {
margin-left: 5vw;
margin-left: 30vw;
} }
#offgrid { #offgrid {
margin-left: 56vw;
margin-left: 55vw;
} }
#machina { #machina {
margin-left: 58vw;
margin-left: 30vw;
} }
#miner { #miner {
margin-left: 30vw;
margin-left: 2vw;
} }
} }
@ -261,6 +263,13 @@ img {
} }
@media (min-height: 500px) { @media (min-height: 500px) {
.link .sub_container p {
height: 55vw;
margin-top: 8vw;
line-height: 6vw;
}
#hemp { #hemp {
margin-top: 5vw; margin-top: 5vw;
} }
@ -269,28 +278,60 @@ img {
margin-top: 33vw; margin-top: 33vw;
} }
#permapp .sub_container p {
height: 60vw;
margin-top: 8vw;
}
#spider { #spider {
margin-top: 60vw; margin-top: 60vw;
z-index: 1;
}
#spider .sub_container p {
height: 60vw;
margin-top: 8vw;
} }
#cube { #cube {
margin-top: 90vw; margin-top: 90vw;
z-index: 1;
}
#cube .sub_container p {
height: 60vw;
margin-top: 15vw;
} }
#offgrid { #offgrid {
margin-top: 130vw;
margin-top: 125vw;
height: 90vw;
}
#offgrid .sub_container p {
height: 65vw;
}
#offgrid .sub_container {
height: 60vw;
} }
#cyber { #cyber {
margin-top: 145vw; margin-top: 145vw;
} }
#cyber .sub_container p {
height: 60vw;
margin-top: 8vw;
}
#machina { #machina {
margin-top: 180vw;
margin-top: 200vw;
} }
#miner{ #miner{
margin-top: 210vw;
margin-top: 200vw;
} }
#miner .sub_container { #miner .sub_container {

+ 0
- 526
templates/assets/css/iot.css View File

@ -1,526 +0,0 @@
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:rgb(191, 255, 0);
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span{
color:rgb(191, 255, 0);
}
.info p {
color: black;
}
.info p span {
color:rgb(191, 255, 0);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:rgb(191, 255, 0);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
.product p a {
text-decoration: none;
color: rgb(191, 255, 0);
}
.product p a:hover {
opacity: 50%;
color:rgb(62, 190, 147)
}
.product p a:active {
opacity: 50%;
color:rgb(62, 190, 147)
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 13.5vh;
}
.info p {
font-size: .95rem;
font-weight: 300;
line-height: 5.5vh;
margin: 1rem;
text-align: center;
}
.info p span {
font-size: 1.15rem;
}
.info h1 {
font-size: 4rem;
font-weight: 300;
padding: 0;
}
.image {
display:flex;
justify-content: center;
}
.info img {
width: 35vh;
height: auto;
align-self: center;
margin-top: 0;
}
.things-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color:rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
display: grid;
height: auto;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: center;
padding:1rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 2rem;
font-weight: 300;
text-align: center;
line-height: 3rem;
color: rgb(191, 255, 0);
margin: 2rem 1rem;
}
.about p {
font-weight: 300;
line-height: 5vh;
text-align: center;
margin: 1rem .7rem;
}
.about img {
width:40vh;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 0 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
max-width: 60vw;
margin: 1rem;
}
.products h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
font-weight: 300;
line-height: 3.5vh;
text-align: center;
margin: .75rem;
}
.products p a {
color: #999;
}
.products p a:active {
color: hsl(75, 100%, 60%);
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
}
.product .image {
margin: 1rem 0;
}
.product .click {
margin: 1rem;
}
.product .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight:300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.product .click button a {
text-decoration: none;
color: #333;
}
.product .click button:active {
opacity: 50%;
background-color: rgb(191, 255, 0);
}
#app {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 60vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
padding-top: 1.5vh;
}
.info h1 {
grid-column: 1/2;
grid-row: 1;
font-size: 6.5rem;
font-weight: 300;
display: flex;
justify-self: center;
margin: 0;
padding-top: 5vh;
}
.info p {
grid-column: 1/3;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
font-size: 1.35rem;
margin: 0 1rem 1rem 1rem;
text-align: left;
line-height: 6rem;
letter-spacing: .5px;
justify-self: center;
padding-right: 20vw;
}
.info p span {
font-size: 1.5rem;
margin-left: 15vw;
}
.info img {
width: 50vh;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
margin-top: 8vh;
margin-left: 4vh;
}
.things-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(191, 255, 0);
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
min-height: 80vh;
width: 90vh;
align-self: center;
}
.about {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: .2fr 1fr;
padding-bottom: 2vh;
}
.about h3 {
font-size: 2.5rem;
font-weight: 400;
line-height: 3rem;
color:rgb(191, 255, 0);
margin: 2rem 0 0 5rem;
grid-column: 1/3;
display: flex;
justify-self: flex-start;
}
.about span {
color: rgb(191, 255, 0)
;
}
.about p {
margin: 1rem 0 0 1rem;
float: left;
font-size: 1.5rem;
grid-column: 1/2;
line-height: 5vh;
padding: 2rem 4rem;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
width:55vh;
height: auto;
margin-top: 10vh;
}
.strip2 {
padding: 2rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
padding-bottom: 8vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 3rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 1.5rem;
}
.products img {
width: 50vh;
}
.product h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: 1.5rem 1rem;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
padding: 4rem .5rem;
}
.product .image {
grid-column: 1;
grid-row: 1/4;
padding: 3vh 2vw;
display: flex;
align-items: center;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 2.65rem;
font-weight: 300;
text-align: center;
}
.product h5 span{
color: #999;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 2.5rem;
font-size: 1.15rem;
line-height: 5vh;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
}
.product .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.5rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .3s;
}
.product .click button a {
color: #333;
text-decoration: none;
}
.product .click button:hover {
opacity: 50%;
background-color: rgb(191, 255, 0);
}
#app {
margin-left: 10vh;
}
}

+ 0
- 724
templates/assets/css/join.css View File

@ -1,724 +0,0 @@
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span {
color:rgb(0, 255, 170);
}
.info p {
color: black;
}
.info p span {
color: rgb(62, 190, 147);
font-weight: 400;
}
.about p span {
color:rgb(62, 190, 147);
font-weight: 400;
}
.contact-container {
position: relative;
width: 100%;
min-height: 90vh;
padding:2rem;
overflow: hidden;
background-color: transparent;
display:flex;
align-items: center;
justify-content: center;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
margin: 0 1vh;
padding-top: 6vh;
}
.info p {
font-size: 1.35rem;
font-weight: 300;
color: #333;
margin: 1rem;
text-align: center;
margin-top: .5rem;
}
.info h1 {
font-size: 3rem;
font-weight: 300;
}
.image {
display:flex;
justify-content: center;
}
.info img {
width: 40vh;
height: auto;
align-self: center;
margin-top: 2rem;
}
.join-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: rgb(62, 190, 147);
display:flex;
flex-direction: column;
}
.strip {
height: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding:.75rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 2rem;
font-weight: 300;
line-height: 3rem;
text-align: center;
color:rgb(62, 190, 147);
margin: 2rem 0 1rem 0;
}
.about p {
font-weight: 300;
line-height: 4vh;
text-align: center;
margin: 1.5rem 0 1rem 0;
}
.about img {
width: 45vh;
height: auto;
padding: 1rem .5rem 2rem .5rem;
border: none;
box-shadow: none;
}
.strip2 {
padding: 0;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
form .btn {
padding: .75rem 1.5rem;
background-color: #000;
border: none;
font-size: 1.5rem;
color: white;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: ease.5s;
}
.btn:active{
color:rgb(0, 255, 170);
opacity: 50%;
}
.adress-info {
color: white;
margin-bottom: 2rem;
}
.adress-info h3 {
color: rgb(62, 190, 147);
font-size: 1.5rem;
font-weight: 300;
padding: 2vh 0 3vh 0;
}
.phone-info {
color: white;
margin-bottom: 2rem;
}
.phone-info h3 {
color: rgb(62, 190, 147);
font-size: 1.5rem;
}
.social-info {
color: white;
margin-bottom: 2rem;
}
.social-info h3 {
color: rgb(62, 190, 147);
font-size: 1.5rem;
}
.social-info h5 {
color: white;
font-size: 1rem;
margin: 2rem 0 .5rem 0 ;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 66vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
padding-top: 6vh;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6rem;
font-weight: 300;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
color:rgb(62, 190, 147);
margin-bottom: 0;
display: flex;
justify-self: center;
align-self: center;
margin-left: 0;
padding-top: 0;
}
.info p {
grid-column: 1;
grid-row: 2;
font-size: 1.45rem;
margin: 0;
text-align: left;
line-height: 2.5rem;
letter-spacing: .5px;
justify-self: center;
}
.info p span {
color: rgb(62, 190, 147);
font-weight: 600;
font-size: 1.5rem;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
display: flex;
justify-content: center;
padding-right: 7.5vw
}
.info img {
max-width: 35vw;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
}
.join-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(62, 190, 147);
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
min-height: 90vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
padding: 3vh .5vw 1vh .5vw;
}
.about h3 {
display: flex;
align-items: center;
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color:rgb(62, 190, 147);
}
.about p span {
font-size: 1.65rem;
color: rgb(62, 190, 147);
}
.about p {
margin: 1rem 0 0 1rem;
float: left;
font-size: 1.5rem;
line-height: 2.5rem;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
max-width:35vw;
height: auto;
margin-top: 30vh;
}
.strip2 {
padding: 0;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.contact-container {
width: 100%;
height: 100vh;
grid-area: page-content;
padding:2rem;
background-color:transparent;
overflow: hidden;
}
form .btn {
padding: .75rem 1.5rem;
background-color: #000;
border: none;
font-size: 1.5rem;
color: white;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: ease.5s;
}
.btn:hover{
opacity: 50%;
}
.btn:active{
background-color:rgb(0, 255, 170);
opacity: 50%;
}
.adress-info {
color: white;
margin-bottom: 2rem;
}
.adress-info h3 {
color: hsl(160, 49%, 60%);
font-size: 1.5rem;
font-weight: 300;
padding: 1vh 1vw 4vh 1vw;
}
.adress-info h5 {
color: #eee;
font-size: 1.15rem;
font-weight: 300;
letter-spacing: .115em;
text-transform: uppercase;
padding: 1vh 0 1vh 1.5vh;
}
.adress-info p {
font-size: 1.15rem;
line-height: 4vh;
padding: 1vh 0 1vh 1vw;
}
.phone-info {
color: white;
margin-bottom: 2rem;
}
.phone-info h3 {
color: hsl(160, 49%, 60%);
font-size: 1.5rem;
font-weight: 300;
padding: 1vh 1vw 4vh 1vw;
}
.phone-info p {
font-size: 1.15rem;
line-height: 4vh;
padding: 1vh 0 1vh 1vw;
}
.social-info {
color: white;
margin-bottom: 2rem;
}
.social-info h3 {
color: hsl(160, 49%, 60%);
font-size: 1.5rem;
font-weight: 300;
padding: 1vh 1vw 4vh 1vw;
}
.social-info figure {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
figure #pixelfed {
grid-column: 1;
grid-row: 1;
}
figure #pixelfed-adress {
grid-column: 1;
grid-row: 2;
}
figure #peertube {
grid-column: 2;
grid-row: 1;
}
figure #peertube-adress {
grid-column: 2;
grid-row: 2;
}
.social-info h5 {
color: #eee;
font-size: 1.05rem;
font-weight: 300;
letter-spacing: .115em;
text-transform: uppercase;
padding: 1vh 0 1vh 1.5vh;
}
.social-info a {
text-decoration: none;
color: #eee;
padding-top: 1vh;
transition: .5s;
}
.social-info a:hover {
color: hsl(160, 50%, 70%);
}
}
.contact-container .form {
width: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 20px 1px grey;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
z-index: 10000;
overflow: hidden;
min-height: 95vh;
}
.contact-info {
background-color:black;
}
.contact-form {
background-color: white;
position: relative;
}
form{
padding: 2.25rem;
z-index:10;
overflow: hidden;
position: relative;
}
form h3 {
color: rgb(62, 190, 147);
font-weight: 200;
font-size: 2.5rem;
line-height: 5rem;
margin-bottom: 1rem;
}
form .input-container {
position: relative;
margin: 1rem 0;
}
.input-container .input {
width: 100%;
outline: none;
border: .01em solid rgb(62, 190, 147);
box-shadow: .1em .1em .1em .01em hsl(160, 50%, 70%);
background-color: hsl(160, 50%, 50%);
padding: 1rem 1rem;
color: #333;
font-weight: 400;
font-family:'Lato', sans-serif;
font-size: 1.5rem;
letter-spacing: .1em;
transition: .5s;
}
.input-container.textarea .input {
padding: 2rem 2rem;
resize: none;
overflow-y: auto;
}
::placeholder {
top: 50%;
font-size: 1.5rem;
color:white;
font-weight: 600;
pointer-events: none;
transition: .5s;
opacity: 90%;
}
.contact-info {
padding: 2.5rem 2.5rem;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.info p {
color: black;
}
@media (max-width: 480px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.contact-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
}
.contact-container .form {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .6fr 1fr;
}
.contact-info {
grid-row: 2;
}
.adress-info h5 {
color: #eee;
font-size: 1.15rem;
font-weight: 300;
letter-spacing: .115em;
text-transform: uppercase;
padding: 5vh 0 0 0;
}
.adress-info p {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 1.05rem;
font-weight: 300;
line-height: 5vh;
letter-spacing: 0.02em;
padding: 2vh 0 1vh 1vw;
}
.phone-info h3 {
color: rgb(62, 190, 147);
font-size: 1.5rem;
font-weight: 300;
padding: 2vh 0 3vh 0;
}
.phone-info p {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 1.05rem;
font-weight: 300;
line-height: 5vh;
letter-spacing: 0.02em;
padding: 0 0 1vh 0;
}
.social-info h3 {
color: rgb(62, 190, 147);
font-size: 1.5rem;
font-weight: 300;
padding: 1.5vh 0 0 0;
}
.social-info figure {
display: flex;
flex-direction: column;
}
figure h5 {
color: #eee;
font-size: 1.15rem;
font-weight: 300;
letter-spacing: .115em;
text-transform: uppercase;
padding: 5vh 0 0 0;
margin: 1vh 0;
}
figure a {
color: #eee;
font-size: 1.05rem;
font-weight: 300;
text-decoration: none;
margin: 1vh 0;
transition: .5s all ease;
}
figure a:active {
color: hsl(160, 49%, 80%);
filter: blur(.05em);
}
.contact-form {
grid-row: 1;
margin-top: 2rem;
}
form {
padding: .75rem .65rem 1.5rem .75rem;
}
form h3 {
font-size: 2rem;
line-height: 4rem;
}
form .input-container {
margin: 1.2rem 0;
}
.input-container .input{
padding: .5rem .5rem;
font-size: 1.25rem;
}
#phone {
display: none;
}
}

+ 0
- 990
templates/assets/css/learn.css View File

@ -1,990 +0,0 @@
:root {
--space : 5px;
}
.page-wrapper {
display:grid;
}
#about {
margin-top: var(--space);
background-color:white;
}
#about p {
color:black;
}
@media (min-width:769px) {
.page-wrapper {
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto auto auto auto;
}
.title {
grid-column: 1/5;
grid-row:1;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 66vh;
padding-top: 10vh;
}
.title #heading {
grid-column: 1;
grid-row: 1/2;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 5vh;
}
.title .short {
grid-column: 1;
grid-row: 1/3;
font-family:'IBM Plex Sans', sans-serif;
font-size:1.75em;
line-height: 7.5vh;
color: rgb(100,190, 149);
margin-left:.1em;
text-align: center;
align-self: center;
padding-top: 12.5vh;
}
.title .image {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: 0.4s;
grid-column: 2;
grid-row: 1/3;
padding-bottom: 5vh;
}
.title .image img {
max-height: 55vh;
width: auto;
}
h1 {
display: flex;
font-size: 2.5rem;
font-weight:300;
line-height: 80px;
letter-spacing: .5px;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
#about {
grid-column:1/5;
grid-row: 2;
display: flex;
background-color: white;
margin: 0 5rem 2rem 5rem;
border-radius: 25px;
box-shadow: .01em .01em .01em .05em hsl(160, 51%, 49%);
justify-content: center;
padding: 2vh 2vw;
}
#about p {
font-size: 1.5rem;
padding: 2rem 0;
text-align: center;
font-family: 'IBM Plex Sans', sans-serif;
line-height: 2.5;
}
#links {
grid-column:1/5;
grid-row:3;
padding: 1rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 5vh;
min-height: 75vh;
}
#us-link {
display:grid;
grid-template-columns: 45% 65%;
grid-template-rows: 20% 40% 20% ;
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
border-radius: 25px;
min-height: 130vh;
padding-top: 1.5rem;
}
#us-link .image {
grid-column:1 ;
grid-row:1/4;
display:flex;
align-items: center;
justify-content:center
}
#us-link .image img {
height: 50vh;
width:auto;
border-radius: 50%;
}
#us-link .description {
grid-column:2 ;
grid-row:1/3;
display: flex;
flex-direction: column;
align-self: center;
padding:1em;
}
#us-link .description h3 {
font-size: 6em;
font-weight: 300;
color: #333;
margin: .25em 0 .25em 0;
font-family: 'IBM Plex Sans', sans-serif;
padding-left: 5vh;
}
#us-link .description h3 span {
color:hsl(160, 100%, 50%);
}
#us-link .description p {
font-size: 1.25em;
color: #333;
line-height: 1.5;
justify-self: flex-end;
padding-top: 1.5rem;
text-align: center;
max-width: 60vh;
line-height: 5vh;
}
#us-link .page-button {
grid-column: 2 ;
grid-row:4;
display:flex;
align-items: center;
justify-content: center;
padding: 0 0 2rem 0;
max-width: 52.5vw;
}
#us-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
text-align: center;
font-size: 1.65em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 300;
margin-right: 15vw;
transition: all ease .5s;
}
#us-link .page-button a:hover {
background-color: hsl(160, 100%, 75%);
}
#partner-link {
display:grid;
grid-template-columns: 50% 50%;
grid-template-rows: 20% 40% 20% ;
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
border-radius: 25px;
max-height: 90vh;
padding-top: 1.5rem;
margin-top: 10vh;
}
#partner-link .image {
grid-column: 2;
grid-row:1/3;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
padding-bottom: 7.5vh;
}
#partner-link .image img {
height: 60vh;
width: auto;
}
#partner-link .description {
grid-column:1 ;
grid-row: 1/2;
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding:1em;
}
#partner-link .description h3 {
font-size: 6em;
font-weight: 300;
color:hsl(300, 100%, 50%);
font-family: 'IBM Plex Sans', sans-serif;
padding-top: 5vh;
}
#partner-link .description p {
font-size: 1.25em;
color: #333;
line-height: 5vh;
justify-self: flex-end;
padding: 1em 1em 0 1em;
text-align: center;
width: 60vh;
}
#partner-link .image a {
text-decoration: none;
}
#partner-link .page-button {
grid-column: 1 ;
grid-row: 2;
display:flex;
align-items: flex-start;
justify-content: center;
}
#partner-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
text-align: center;
font-size: 1.65em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
transition: all ease .5s;
font-weight: 300;
}
#partner-link .page-button a:hover {
background-color: hsl(300, 100%, 75%);
}
#meet-link {
display:grid;
grid-template-columns: 40% 60%;
grid-template-rows: 20% 40% 20% ;
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 49%);
border-radius: 25px;
min-height: 75vh;
padding-top: 1.5rem;
margin-top: 10vh;
}
#meet-link .image {
grid-column:1 ;
grid-row:1/3;
display: flex;
align-items: center;
margin: 12.5vh 0 0 0;
}
#meet-link .image #plus {
margin-top: .25em;
font-size: 30em;
font-family: 'IBM Plex Sans', sans-serif;
color: #333;
padding-top: 0;
margin-left: 0;
padding: 2rem 5rem;
}
#meet-link .image a {
text-decoration: none;
display: flex;
justify-content: center;
}
#meet-link .description {
grid-column: 2 ;
grid-row:1/3;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#meet-link .description h3 {
font-size: 6em;
font-weight: 300;
color: hsl(160, 51%, 49%);
margin: .5em 0 .25em 5rem;
font-family: 'IBM Plex Sans', sans-serif;
}
#meet-link .description h3 span {
color: #333;
}
#meet-link .description p {
font-size: 1.25em;
color: #333;
line-height: 1.5;
justify-self: flex-end;
padding: 1.5rem 0 0 1em;
text-align: center;
max-width: 60vh;
}
#meet-link .page-button {
grid-column: 2 ;
grid-row: 3;
display:flex;
align-items: center;
justify-content: center;
margin-bottom: 7.5vh;
}
#meet-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
text-align: center;
font-size: 1.65em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
transition: all ease .5s;
font-weight: 300;
}
#meet-link .page-button a:hover {
background-color: hsl(160, 51%, 75%);
}
.desktop-link {
display: grid;
grid-template-columns: 50% 50%;
margin-top: 10vh;
grid-gap: 7.5vh;
min-height: 75vh;
}
#blog-link {
box-shadow: .01em .01em .01em .05em #eee;
border-radius: 25px;
grid-column: 1;
display: grid;
grid-template-rows: 1fr .2fr;
grid-template-columns: 100%;
max-width: 45vw;
}
#blog-link .description {
grid-column:1 ;
grid-row:1;
display:flex;
flex-direction: column;
padding: 2em 1em;
}
#blog-link .description h3 {
font-size: 6em;
font-weight: 300;
color: #333;
font-family: 'IBM Plex Sans', sans-serif;
text-align: center;
}
#blog-link .description p {
font-size: 1.25em;
color: #333;
line-height: 5vh;
justify-self: flex-end;
padding: 3.5rem 0 0 1em;
text-align: center;
}
#blog-link .page-button {
grid-row:2;
display:flex;
align-items: flex-start;
margin: 1rem 0 0 1em;
justify-content: center;
}
#blog-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
text-align: center;
font-size: 1.5em;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
transition: all ease .5s;
font-weight: 300;
}
#blog-link .page-button a:hover {
background-color: hsl(0, 0%, 75%);
}
#blog-link .image a {
text-decoration: none;
}
#code-link {
box-shadow: .01em .01em .01em .05em hsl(75, 100%, 50%);
border-radius: 25px;
grid-column: 2;
display: grid;
grid-template-rows: 1fr .2fr;
grid-template-columns: 100%;
max-width: 45vw;
}
#code-link .description {
grid-column:1 ;
grid-row:1;
display:flex;
flex-direction: column;
padding: 2rem 1em;
}
#code-link .description h3 {
font-size: 6.25em;
font-weight: 300;
font-family: 'IBM Plex Sans', sans-serif;
color: hsl(75, 100%, 50%);
text-align: center;
}
#code-link .description p {
font-size: 1.25em;
color: #333;
line-height: 1.5;
justify-self: flex-end;
padding: 3.5rem 0 0 1em;
text-align: center;
}
#code-link .page-button {
grid-row: 2;
display:flex;
align-items: flex-start;
margin: 1rem 0 0 1em;
justify-content: center;
}
#code-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
text-align: center;
font-size: 1.45em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
transition: all ease .5s;
font-weight: 300;
}
#code-link .page-button a:hover {
background-color: hsl(75, 100%, 75%);
}
#footer-wrapper {
margin-top:.5rem;
}
h1 {
font-size: 6.5rem;
line-height: 80px;
letter-spacing: 2px;
font-family: 'IBM Plex Sans', sans-serif;
}
.discover {
display:none;
}
#app-link .image #icon {
display:none;
}
}
@media (max-width:768px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto 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;
min-height: 77.5vh;
padding-top: 5rem;
}
.title #heading #two {
color: rgb(62, 190, 147) ;
}
.title .short {
font-family:'Lato', sans-serif;
font-size: 1.25em;
font-weight: 300;
padding: 3em 1em;
color: rgb(62, 190, 147);
margin-left:.1em;
text-align: center;
}
.title .image {
display: flex;
align-items: center;
justify-content:center;
margin-top: 5vh;
}
.title .image img {
max-height: 15vh;
width: auto;
}
h1 {
font-size: 4rem;
font-weight: 300;
line-height: 60px;
letter-spacing: .5px;
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: 0 1rem 2rem 1rem;
margin-top:0;
border-radius: 25px;
box-shadow: .01em .01em .01em .04em hsl(160, 51%, 49%);
padding: 1vh 1vw;
}
#about p {
font-size:1.125rem;
font-weight: 300;
padding: 1rem;
line-height: 1.75;
color: #333;
}
#links {
grid-column:1;
grid-row:3;
padding: 1rem;
background-color: white;
border-radius: 25px;
margin-top: 2.5vh;
min-height: 90vh;
}
#us-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
padding-bottom: 1.5rem;
box-shadow: .01em .01em .05em hsl(160, 100%, 50%);
border-radius: 25px;
max-height: 160vh;
}
#us-link .image {
grid-row: 1;
padding-top: 2em;
display: flex;
justify-content: center;
}
#us-link .image img {
margin: 1em 0 1.25em 0;
width: auto;
height: 40vh;
border-radius: 50%;
}
#us-link .description {
grid-row: 2;
padding:.25em 1em 1em 1em;
}
#us-link .description h3 {
font-size: 3rem;
color: #333;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align: center;
padding: .25vh 0 3vh 0;
}
#us-link .description h3 span {
color: hsl(160, 100%, 50%);
}
#us-link .description p {
font-size: 1.05rem;
font-weight: 300;
color: #333;
text-align: center;
line-height: 1.85;
}
#us-link .page-button{
display:flex;
justify-content: center;
padding-top: 1rem;
}
#us-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
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;
}
#us-link .page-button a:active {
border-color:hsl(160, 100%, 75%);
}
#partner-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
grid-template-columns: 100%;
padding-bottom: 1.5rem;
box-shadow: .01em .01em .05em hsl(300, 100%, 50%);
border-radius: 25px;
margin-top: 7.5vh;
min-height: 100vh;
padding-top: 5vh;
}
#partner-link .image img {
max-width: 50vw;
}
#partner-link .image a {
text-decoration: none;
display: flex;
justify-content: center;
}
#partner-link .description {
grid-row: 2;
padding:.5em 1em 1em 1em;
}
#partner-link .description h3 {
font-size: 3rem;
color: hsl(300, 100%, 50%);
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align: center;
padding: 7vh 0 3vh 0;
}
#partner-link .description p {
font-size: 1.05em;
font-weight: 300;
color: #333;
text-align: center;
line-height: 1.85;
}
#partner-link .page-button{
display:flex;
justify-content: center;
}
#partner-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
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;
}
#partner-link .page-button a:active {
border-color:hsl(300, 100%, 75%);
}
#meet-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
grid-template-columns: 100%;
padding-bottom: 1.5rem;
box-shadow: .01em .01em .05em hsl(160, 51%, 49%);
border-radius: 25px;
margin-top: 7.5vh;
min-height: 60vh;
padding-top: 5vh;
}
#meet-link .image #plus {
margin-top: .35em;
font-size: 15em;
font-family: 'IBM Plex Sans', sans-serif;
color: hsl(160, 100%, 50%);
}
#meet-link .image a {
text-decoration: none;
display: flex;
justify-content: center;
}
#meet-link .description {
padding:1em;
}
#meet-link .description h3 {
font-size: 2.65rem;
color: hsl(160, 51%, 49%);
margin-bottom: .6em;
padding-left: .65em;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
}
#meet-link .description h3 span {
color: #eee;
}
#meet-link .description p {
font-size: .95rem;
color: #333;
padding:0 1em;
padding-left: 2em;
line-height: 1.5;
text-align: center;
}
#meet-link .page-button{
display:flex;
justify-content: center;
}
#meet-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: .35em 1.5em;
border-radius: 27px;
text-align: center;
font-size: 1em;
font-family: 'IBM Plex Sans', sans-serif;
margin: 1em;
text-transform: uppercase;
transition: all ease .2s;
}
#meet-link .page-button a:active {
border-color: hsl(160, 51%, 75%);
}
#blog-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
grid-template-columns: 100%;
padding-bottom: 1.25rem;
box-shadow: 1px 1px 1px 3px #333;
border-radius: 25px;
margin-top: 7.5vh;
max-height: 85vh;
}
#blog-link .description {
grid-row: 1/2;
grid-column: 1;
padding: 1em;
}
#blog-link .description h3 {
font-size: 2.65rem;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
padding-top: 7.5vh;
}
#blog-link .description p {
font-size: .95rem;
color: #333;
text-align: center;
line-height: 1.5;
margin-top: 2rem;
}
#blog-link .page-button{
display:flex;
justify-content: center;
grid-row: 2;
padding-top: .5rem;
}
#blog-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: .35em 1.5em;
border-radius: 27px;
text-align: center;
font-size: 1em;
font-family: 'IBM Plex Sans', sans-serif;
margin: 1em;
text-transform: uppercase;
transition: all ease .2s;
}
#blog-link .page-button a:active {
border-color:hsl(0, 0%, 75%);
}
#code-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
grid-template-columns: 100%;
padding-bottom: 1.25rem;
box-shadow: 1px 1px 1px 3px hsl(75, 100%, 50%);
border-radius: 25px;
margin-top: 7.5vh;
max-height: 85vh;
}
#code-link .description {
grid-row: 1/3;
grid-column: 1;
padding: 1em;
}
#code-link .description h3 {
font-size: 2.65rem;
color:hsl(75, 100%, 50%);
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
padding-top: 7.5vh;
}
#code-link .description p {
font-size: .95rem;
color: #333;
text-align: center;
line-height: 1.5;
margin-top: 2.25rem;
padding: 0 .5rem;
}
#code-link .page-button{
display:flex;
justify-content: center;
grid-row: 3;
padding-top: .5rem;
}
#code-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: .35em 1.5em;
border-radius: 27px;
text-align: center;
font-size: 1em;
font-family: 'IBM Plex Sans', sans-serif;
margin: 1em;
text-transform: uppercase;
transition: all ease .2s;
}
#code-link .page-button a:active {
border-color: hsl(75, 100%, 50%);
}
#code2-link {
display: none;
}
#footer-wrapper {
margin-top:.5rem;
}
.description .additional {
display: none;
}
#app-link .image #icon-desktop {
display:none;
}
}

+ 0
- 474
templates/assets/css/meet.css View File

@ -1,474 +0,0 @@
:root {
--space : 5px;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.contact-container {
position: relative;
width: 100%;
min-height: 100vh;
padding:2rem;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
align-items: center;
justify-content: center;
}
.contact-container .form {
width: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 20px 1px grey;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
overflow: hidden;
min-height: 95vh;
}
.contact-info {
background-color:black;
}
.contact-form {
background-color: white;
position: relative;
}
form{
padding: 2.25rem;
overflow: hidden;
position: relative;
}
form h3{
color: rgb(62, 190, 147);
font-weight: 200;
font-size: 3rem;
line-height: 5rem;
margin: 1rem 0 2rem 0;
}
form .input-container {
position: relative;
margin: 1rem 0;
}
.input-container .input {
width: 100%;
outline: none;
border: .01em solid rgb(62, 190, 147);
box-shadow: .1em .1em .1em .01em hsl(160, 50%, 70%);
background-color: hsl(160, 50%, 50%);
padding: 1rem 1rem;
color: #333;
font-weight: 400;
font-family:'Lato', sans-serif;
font-size: 1.5rem;
letter-spacing: .1em;
transition: .5s;
}
.input-container.textarea .input {
padding: 2rem 2rem;
resize: none;
overflow-y: auto;
}
::placeholder {
top: 50%;
font-size: 1.5rem;
color:white;
font-weight: 600;
pointer-events: none;
transition: .5s;
opacity: 90%;
}
form .btn {
padding: .75rem 1.5rem;
background-color: #000;
border: none;
font-size: 1.5rem;
color: white;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: ease.5s;
}
form .btn:hover, .btn:active{
background-color: hsl(160, 49%, 60%);
}
.contact-info {
padding: 2.5rem 5rem 3rem 5rem;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.adress-info {
color: white;
margin-bottom: 2rem;
}
.adress-info h3 {
color: hsl(160, 49%, 60%);
font-size: 2rem;
font-weight: 300;
padding: 1vh 1vw 4vh 1vw;
}
.adress-info h5 {
color: #eee;
font-size: 1.15rem;
font-weight: 300;
letter-spacing: .115em;
text-transform: uppercase;
padding: 1vh 0 1vh 1.5vh;
}
.adress-info p {
font-size: 1.15rem;
line-height: 4vh;
padding: 1vh 0 1vh 1vw;
}
.phone-info {
color:white;
}
.phone-info h3 {
color: hsl(160, 49%, 60%);
font-size: 2rem;
font-weight: 300;
padding: 4vh 1vw 2vh 1vw;
}
.phone-info p {
font-size: 1.15rem;
line-height: 4vh;
padding: 1vh 0 1vh 1vw;
}
.social-info {
color: white;
}
.social-info figure {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 0 5vw;
}
figure #pixelfed {
grid-column: 1;
grid-row: 1;
display: flex;
align-self: center;
}
figure #pixelfed-adress {
grid-column: 1;
grid-row: 2;
display: flex;
align-self: flex-end;
}
figure #peertube {
grid-column: 2;
grid-row: 1;
display: flex;
align-self: center;
}
figure #peertube-adress {
grid-column: 2;
grid-row: 2;
display: flex;
align-self: flex-end;
}
.social-info h3 {
color: hsl(160, 49%, 60%);
font-size: 2rem;
font-weight: 300;
padding: 4vh 1vw 2vh 1vw;
}
.social-info h5 {
color: #eee;
font-size: 1.05rem;
font-weight: 300;
letter-spacing: .115em;
text-transform: uppercase;
padding: 1vh 0 1vh 1.5vh;
}
.social-info a {
text-decoration: none;
color: #eee;
padding-top: 1vh;
transition: .5s;
}
.social-info a:hover {
color: hsl(160, 49%, 60%);
}
.info h1 {
color:rgb(62, 190, 147);
font-size: 3rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
justify-self: center;
align-self: center;
margin-bottom: 1.5rem;
}
.info p {
color: black;
}
.info p span {
color: rgb(62, 190, 147);
font-weight: 500;
}
@media screen and (min-width:769px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: 45% 55%;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 5rem;
font-weight: 300;
margin-bottom: 0;
padding-top: 7.5vh;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 1.25rem;
line-height: 4rem;
padding: .5vh 7.5vw 0 7.5vw;
}
.info p span {
font-size: 1.35rem;
padding-top: 2vh;
}
.info img {
max-height: 50vh;
width: auto;
grid-column: 2;
grid-row: 1/4;
display:flex;
justify-self: flex-start;
align-self: flex-end;
margin: 0 0 5vh 5vw;
}
.contact-container {
width: 100%;
height: 100vh;
grid-area: page-content;
padding:2rem;
background-color:rgb(0, 255, 170);
overflow: hidden;
}
}
@media (max-width: 480px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 80vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 10vh;
}
.info h1 {
margin: 0 0 1rem 0;
}
.info p {
font-size: 1rem;
font-weight: 300;
line-height: 4.5vh;
text-align: center;
padding: 3vh 7.5vw;
}
.info p span {
font-weight: 400;
font-size: 1.05rem;
}
.info img {
max-height: 25vh;
height: auto;
align-self: center;
}
.contact-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
}
.contact-container .form {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .65fr 1fr;
}
.contact-info {
grid-row: 2;
align-items: flex-start;
padding: 7.5vh 5vw;
}
.adress-info h3 {
font-size: 1.8rem;
}
.adress-info p {
font-weight: 300;
font-size: 1.05rem;
letter-spacing: 0.03em;
padding: 1vh 0 1vh 2vw;
}
.phone-info h3 {
font-size: 1.8rem;
padding: 3vh 1vw 2vh 1vw;
}
.phone-info p {
font-weight: 300;
font-size: 1.05rem;
padding: 0 0 1vh 2vw;
letter-spacing: 0.03em;
}
.social-info h3 {
font-size: 1.75rem;
}
.social-info figure {
display: flex;
flex-direction: column;
}
figure h5 {
display: flex;
align-self: flex-start !important;
color: #eee;
font-size: 1.15rem;
font-weight: 300;
letter-spacing: .115em;
text-transform: uppercase;
padding: 5vh 0 0 0;
margin: 1vh 0 0 0;
}
figure #peertube {
padding-top: 3vh;
}
figure a {
display: flex;
align-self: flex-start !important;
color: #eee;
font-size: 1.05rem;
font-weight: 300;
text-decoration: none;
margin: 1vh 0 ;
padding-left: 2vw;
transition: .5s all ease;
}
.contact-form {
grid-row: 1;
max-width: 90vw;
margin-top: 2rem;
}
form {
padding: .75rem .65rem 1.5rem .75rem;
}
form h3 {
font-size: 2rem;
line-height: 4rem;
margin-top: 0;
}
form .input-container {
margin: 1.5rem 0;
}
.input-container .input{
padding: .5rem .5rem;
font-size: 1.25rem;
}
#phone {
display: none;
}
}

+ 0
- 5
templates/assets/css/notes.txt View File

@ -1,5 +0,0 @@
Fix Media Queries
Fix Footer
Fix Z Indexes
New Design, simple, remove childish shit
Add Css Animations

+ 0
- 533
templates/assets/css/oils.css View File

@ -1,533 +0,0 @@
:root {
--gradient: linear-gradient(
45deg,
hsl(160, 51%, 49%),
hsl(160, 51%, 59%),
hsl(160, 51%, 79%),
hsl(160, 51%, 89%),
#fff
);
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:rgb(0, 255, 170);
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info p {
color: black;
}
.info p span {
color: rgb(0, 255, 170);
font-weight: 600;
}
.about p span {
color: rgb(0, 255, 170);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 10vh;
}
.info p {
font-size: 1.1rem;
font-weight: 300;
margin: 2rem 1rem 1rem 1rem;
text-align: center;
}
.info h1 {
font-size: 4.5rem;
font-weight: 300;
padding-top: 0;
margin-bottom: 0;
}
.image {
display:flex;
justify-content: center;
}
.info img {
width: 20vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.oil-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
display: grid;
height: auto;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding: 1rem 1.25rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
padding-top: 6.5vh;
}
.about h3 {
font-size: 1.85rem;
font-weight: 300;
line-height: 3rem;
color: #333;
letter-spacing: .01em;
padding: 1vh 2vw;
}
.about h3 span {
color: rgb(0, 255, 170);
}
.about p {
font-weight: 300;
font-size: 1em;
line-height: 4vh;
text-align: center;
margin: 1.5rem 0;
}
.about p span {
font-weight: 300;
font-size: 1.1rem;
letter-spacing: .02em
}
.about img {
width:40vh;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.75rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1.25rem 0 .75rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
max-height: 30vh;
margin: 1.25rem 0 2rem 0;
}
.products h5 {
color: black;
text-shadow: .05em .025em hsl(160, 49%, 40%);
font-size: 1.85rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 200;
text-transform: uppercase;
margin-bottom: .5rem;
padding-top: 1vh;
}
.products p {
font-weight: 300;
line-height: 4vh;
text-align: center;
margin: .75rem;
padding-top: 2vh;
}
.products p span {
font-weight: 400;
font-size: 1.1rem;
letter-spacing: 0.02em;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem 1rem 2rem 1rem;
}
.product .click {
padding-top: 1vh;
}
.product .click button {
padding: .5rem 1.25rem;
background-image: var(--gradient);
background-size: 300%;
border: none;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
}
.product .click button a {
text-decoration: none;
color: white;
transition: .5s;
}
.product .click button a:active {
-webkit-text-stroke-width: .05em;
-webkit-text-stroke-color: hsl(300, 100%, 95% );
filter: blur(.015em)
}
#shop {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#shop a:active {
opacity: 50%;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
padding-left: 2vw;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 7rem;
font-weight: 300;
margin-bottom: 0;
display: flex;
justify-self: center;
padding-top: 5vh;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
justify-self: center;
align-self: flex-start;
font-size: 1.5rem;
text-align: center;
line-height: 5rem;
letter-spacing: .05em;
}
.info p span {
font-weight: 400;
font-size: 1.6rem;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: flex-start;
align-self: center;
padding-left: 5vw;
}
.info img {
max-height: 45vh;
}
.oil-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
padding: 2.5rem 2.5rem 2.5rem 3rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 90vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
}
.about h3 {
grid-column: 1/3;
grid-row: 1;
font-size: 3.5rem;
font-weight: 300;
line-height: 4rem;
letter-spacing: .05em;
color: #333 ;
margin: 5rem 0 2rem 0;
}
.about span {
color: rgb(0, 255, 170);
}
.about p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
line-height: 5vh;
margin: 1rem 0 0 0;
float: left;
text-align: center;
font-size: 1.55rem;
}
.about p span {
color: rgb(0, 255, 170);
font-weight: 400;
padding-top: 4vh;
letter-spacing: .03em;
font-size: 1.6rem
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
padding-top: 10vh;
}
.about img {
max-width: 35vw;
height: auto;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.75rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 2.5rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
max-width: 45vh;
}
.product h5 {
color: black;
text-shadow: .05em .025em hsl(160, 49%, 40%);
font-size: 1.65rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 200;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
text-align: center;
}
.product {
display: grid;
grid-template-columns: .5fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
margin: 1rem;
min-height: 70vh;
padding-left: 5vw;
}
.product .image {
grid-column: 1;
grid-row:1/4;
display: flex;
align-items: center;
border-right: .1em solid #eee;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 3rem;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 2.5rem;
font-size: 1.15rem;
line-height: 5vh;
margin-top: .5vh;
}
.product p span {
font-weight: 400;
letter-spacing: .03em;
padding-top: 2vh;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding: 0 0 2.5rem 0;
}
.product .click button {
padding: .75rem 1.5rem;
background-image: var(--gradient);
background-size: 300%;
border: none;
font-size: 1.5rem;
color: white;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
}
.product .click button a {
color: white;
text-decoration: none;
}
.product .click button a:active,
.product .click button a:focus,
.product .click button a:hover {
-webkit-text-stroke-width: .05em;
-webkit-text-stroke-color: hsl(300, 100%, 90% );
filter: blur(.015em)
}
#shop {
margin-left: 10vh;
}
}

+ 0
- 810
templates/assets/css/partners.css View File

@ -1,810 +0,0 @@
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:black;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
margin-bottom: .75rem;
}
.info h1 span{
color:magenta;
}
.info p {
color: black;
line-height: 2rem;
}
.info p span {
color:magenta;
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:magenta;
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
.product p a {
text-decoration: none;
color:magenta;
}
.product p a:hover {
opacity: 50%;
color:rgb(62, 190, 147)
}
.product p a:active {
opacity: 50%;
color:rgb(62, 190, 147)
}
#insta {
padding: 0;
background-color:transparent;
border: none;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#gram {
width: 5vh;
margin: 0;
}
#you {
padding: 0;
background-color:transparent;
border: none;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#tube {
width: 5vh;
margin: 0;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 77.5vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 10vh;
}
.info p {
font-size: 1.15rem;
font-weight: 300;
line-height: 6vh;
margin: 1rem;
text-align: center;
}
.info p span {
font-weight: 400;
font-size: 1.25rem;
letter-spacing: .05em;
}
.info h1 {
font-size: 3rem;
font-weight: 300;
color:hsl(300, 100%, 50%);
}
.image {
display:flex;
justify-content: center;
padding-top: 3.5vh;
}
.info img {
max-height: 50vh;
align-self: center;
margin-top: 0;
}
.post-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color:magenta;
display:flex;
flex-direction: column;
}
.strip {
display: grid;
height: auto;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding: 1rem 1.75rem 1.75rem 2rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
padding-top: 3vh;
}
.about h3 {
font-size: 2rem;
font-weight: 300;
text-align: center;
line-height: 3rem;
color: magenta;
margin: .65rem 0 1rem 0;
}
.about p {
font-weight: 300;
line-height: 4vh;
text-align: center;
margin: 1rem 0;
}
.about p span {
font-size: 1.15rem;
letter-spacing: .03em;
}
.about img {
max-width: 70vw;
height: auto;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 0 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-bottom: 1.5vh;
}
.products img {
width: 25vh;
margin: 1rem;
}
.products h5 {
font-size: 1.35rem;
font-weight: 300;
font-family:'IBM Plex Sans', sans-serif;
letter-spacing: .02em;
text-transform: uppercase;
margin-bottom: 1rem;
padding-top: 3vh;
}
.products p {
font-weight: 300;
line-height: 4vh;
text-align: center;
margin: .75rem;
}
.partner{
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
}
.partner.image {
margin: 1rem 0;
}
.partner p span {
color:rgb(62, 190, 147);
font-weight: 400;
font-size: 1.05rem;
letter-spacing: .03em
}
.partner .click {
margin: 1rem;
}
.partner .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.partner .click button a {
text-decoration: none;
color: #333;
}
.partner .click button:active {
opacity: 50%;
background-color: magenta;
}
#app {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
.social {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 1fr .5fr 1fr;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
min-height: 80vh;
}
.social .tommaso {
grid-column: 1/3;
grid-row: 1;
display: flex;
flex-direction: column;
}
.name {
color:#333;
opacity: 90%;
}
.social .blog a {
font-weight: 300;
margin: 0;
text-decoration: none;
color: #333;
}
.social .techdude {
grid-column: 1/3;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#gram {
width: 5vh;
transition: .6s;
}
#gram:active {
opacity: 50%;
background-color: rgb(62, 190, 147);
border-radius: 25px;
}
.social .instagram #account {
font-size: .75rem;
align-self: center;
text-shadow: none;
}
.social .cbdStore {
grid-column: 1/3;
grid-row: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.blog a:active {
opacity: 50%;
color: rgb(62, 190, 147);
}
.social .youtube #account {
font-size: .75rem;
align-self: center;
text-shadow: none;
}
.social button {
padding: .5rem 1.25rem;
background-color: black;
border: none;
font-size: 1.25rem;
font-family:'Fira Sans', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.social button a {
text-decoration: none;
color: white;
}
.social button a:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 66vh;
grid-area: info;
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: repeat(2, 50%);
padding-top: 7.5vh;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6rem;
font-weight: 300;
color: hsl(300, 100%, 50%);
display: flex;
justify-self: center;
}
.info p {
grid-column: 1;
grid-row: 2;
font-size: 1.45rem;
text-align: center;
line-height: 4rem;
letter-spacing: .5px;
justify-self: center;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
display: flex;
justify-content: flex-start;
padding-bottom: 5vh;
}
.info img {
min-width: 21.5vw;
height: auto;
display:flex;
justify-self: center;
align-self: center;
}
.post-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:magenta;
display:flex;
flex-direction: column;
}
.strip {
padding:2rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 80vh;
align-self: center;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
padding: 7.5vh 2vw 5vh 2vw;
}
.about h3 {
font-size: 2.75rem;
font-weight: 300;
line-height: 3rem;
color:magenta;
letter-spacing: .03em;
grid-column: 1/2;
grid-row: 1;
display: flex;
justify-self: center;
align-items: center;
}
.about span {
color: magenta;
}
.about p {
font-size: 1.35rem;
text-align: center;
line-height: 4vh;
grid-column: 1/2;
padding: 1rem 2rem 2rem 4rem;
}
.about p span {
font-size: 1.5rem;
letter-spacing: .05em;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
width:55vh;
height: auto;
margin-top: 10vh;
}
.strip2 {
padding: 1rem 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
padding-bottom: 8vh;
display: flex;
justify-content: center;
}
.products h3 {
font-size: 2.75rem;
font-weight: 300;
line-height: 3rem;
letter-spacing: .05em;
color: rgb(62, 190, 147);
margin: 3rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 1.5rem;
}
.products img {
width: 50vh;
}
.product h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: 1.5rem 1rem;
}
.products p {
text-align: center;
margin: 1rem;
}
.partner {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
padding: 4rem 2rem 3rem 2rem;
min-height: 60vh;
}
.partner .image {
grid-column: 1;
grid-row:1/3;
padding: 3vh;
margin: 1rem 0;
display: flex;
align-items: center;
margin: 4rem 0 0 0;
}
.partner h5 {
grid-column: 2;
grid-row: 1;
font-size: 3rem;
font-weight: 300;
display:flex;
justify-self: center;
align-self: flex-end;
}
.partner h5 span{
color: #999;
}
.partner p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 2.5rem;
font-size: 1.15rem;
line-height: 4vh;
}
.partner p span {
color: rgb(62, 190, 147);
font-weight: 600;
padding: 1vh 0 2vh 0;
}
.partner .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding:0;
}
.partner .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.5rem;
color: white;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .6s;
}
.partner .click button a {
color: #000;
text-decoration: none;
}
.partner .click button:hover {
opacity: 50%;
background-color: magenta;
}
.social {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 1fr 1fr;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
min-height: 80vh;
width: 80vw;
}
.social .tommaso {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 5vh 2vw;
}
.name {
color:#333;
opacity: 90%;
font-family:'IBM Plex Sans', sans-serif;
font-size: 2.5rem;
font-weight: 300;
letter-spacing: .05em;
text-transform: uppercase;
}
#name2 {
margin-bottom: 5vh;
}
.instagram {
margin: 5vh 0;
}
.social .blog a {
margin: 0;
text-decoration: none;
color: #333;
transition: .6s;
}
.social .blog a:hover {
opacity: 50%;
color: rgb(62, 190, 147);
}
.social .techdude {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 4vh;
}
#gram {
width: 10vh;
transition: .6s;
}
#gram:hover {
opacity: 50%;
background-color: rgb(62, 190, 147);
border-radius: 25px;
}
.social .instagram #account {
font-size: 1.5rem;
font-weight: 200;
align-self: center;
text-shadow: none;
margin-top: 3vh;
}
.social .cbdStore {
grid-column: 1/3;
grid-row: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.social .blog a {
font-size: 1.5rem;
font-weight: 300;
margin: 5vh 0;
}
.blog a:active {
opacity: 50%;
color: rgb(62, 190, 147);
}
.social button {
padding: .5rem 1.25rem;
background-color: black;
border: none;
font-size: 1.25rem;
font-family:'Fira Sans', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.social button a {
text-decoration: none;
color: white;
}
.social button a:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
}

+ 0
- 768
templates/assets/css/permaculture.css View File

@ -1,768 +0,0 @@
:root {
--space : 5px;
}
.page-wrapper {
display:grid;
}
.title{
margin-top: var(--space);
}
#about {
margin-top: var(--space);
background-color:white;
}
#about p {
color:black;
}
#app-link .image img {
box-shadow: 1px 1px 3px 5px #eee;
border-radius: 25px;
padding: 1.5rem;
}
@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: 5.75vh;
}
.title #heading {
grid-column: 1;
grid-row: 1/2;
display: flex;
padding-top: 1vh;
}
.title #heading #two {
color: rgb(62, 190, 147);
padding-top: 1.65em;
}
.title .short {
grid-column: 1;
grid-row: 1/2;
font-family:'IBM Plex Sans', sans-serif;
font-size: 1.75em;
color: rgb(100,190, 149);
margin-left:.1em;
text-align: center;
align-self: flex-end;
letter-spacing: .03em;
line-height: 2em;
padding-bottom: 13.5vh;
}
.title .image img {
max-width: 30vw;
}
.title .image {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
transition: 0.4s;
grid-column: 2;
grid-row: 1/2;
padding-bottom: 7.5vh;
}
h1 {
font-size: 5.85rem;
font-weight: 300;
line-height: 80px;
letter-spacing: .01em;
padding-top: 1.15em;
margin-left: .1em;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
#about {
grid-column:1/5;
grid-row: 2;
display: flex;
background-color: white;
margin: 0 5rem 2rem 5rem;
border-radius: 25px;
box-shadow: .01em .01em .01em .05em hsl(160, 51%, 49%);
}
#about p {
font-size:1.5rem;
font-weight: 300;
padding:1.5rem;
text-align: center;
font-family: 'IBM Plex Sans', sans-serif;
line-height: 3;
letter-spacing: 0.02em;
}
#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: 75vh;
}
#app-link {
display:grid;
grid-template-columns: 45% 65%;
grid-template-rows: 20% 40% 20% ;
box-shadow: 1px 1px 1px 3px hsl(160, 100%, 50%);
border-radius: 25px;
min-height: 90vh;
padding-top: 1.5rem;
}
#app-link .image {
grid-column:1 ;
grid-row:1/4;
display:flex;
align-items: center;
justify-content:center
}
#app-link .image img {
height: 35vh;
width: 20vw;
}
#app-link .description {
grid-column:2 ;
grid-row:1/3;
display: flex;
flex-direction: column;
align-self: center;
padding: 2em 1em 1em 1em;
}
#app-link .description h3 {
font-size: 6.25em;
font-weight: 300;
letter-spacing: .04em;
color: hsl(160, 100%, 50%);
margin-bottom: .25em;
margin-top: .5em;
font-family: 'IBM Plex Sans', sans-serif;
}
#app-link .description h3 span {
color: #333;
}
#app-link .description p {
font-size: 1.3em;
color: #333;
line-height: 2;
justify-self: flex-end;
padding-top: 1rem;
text-align: center;
width: 60vh;
}
.description ul {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 1.25em;
color: #333;
line-height: 2;
margin-top: 2rem;
padding-left: 15vw;
}
#app-link .page-button {
grid-column: 2 ;
grid-row:4;
display:flex;
align-items: center;
justify-content: center;
padding: 2rem 0 2.75rem 0;
}
#app-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
margin-right: 20vw;
text-align: center;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 300;
transition: all ease .5s;
}
#app-link .page-button a:hover {
background-color: hsl(160, 100%, 75%);
}
#lab-link {
display:grid;
grid-template-columns: 50% 50%;
grid-template-rows: 20% 40% 20% ;
box-shadow: 1px 1px 1px 3px hsl(75, 100%, 50%);
border-radius: 25px;
min-height: 80vh;
padding-top: 1.5rem;
margin-top: 10vh;
}
#lab-link .image {
grid-column: 2;
grid-row:1/3;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 85vh;
padding-top: 7.5vh;
}
#lab-link .image img {
height: 60vh;
width: auto;
}
#lab-link .description {
grid-column:1 ;
grid-row:1/3;
display:flex;
flex-direction: column;
margin-left: 5rem;
padding:1em;
height: 60vh;
}
#lab-link .description h3 {
font-size: 6.25em;
font-weight: 300;
letter-spacing: .04em;
color:hsl(75, 100%, 50%);
margin-bottom: .25em;
margin-top: .5em;
font-family: 'IBM Plex Sans', sans-serif;
}
#lab-link .description h3 span {
color:#333;
}
#lab-link .description p {
font-size: 1.3em;
color: #333;
line-height: 2;
text-align: center;
justify-self: flex-end;
padding-top: 2rem;
}
#lab-link .page-button {
grid-column:1 ;
grid-row: 4;
display:flex;
align-items: center;
justify-content: center;
padding: 0 0 3rem 0;
}
#lab-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .25em 1em;
margin-left: 5vw;
border-radius: 27px;
text-align: center;
font-size: 1.5em;
font-weight: 300;
font-family: 'lato', sans-serif;
margin-top:.75em;
text-transform: uppercase;
transition: all ease .5s;
}
#lab-link .page-button a:hover {
background-color: hsl(75, 100%, 75%);
}
#about-link {
display:grid;
grid-template-columns: 35% 75%;
grid-template-rows: 20% 40% 20% ;
box-shadow: 1px 1px 1px 3px hsl(160, 51%, 50%);
border-radius: 25px;
min-height: 70vh;
padding: 2rem 0 2rem 0;
margin-top: 10vh;
}
#about-link .image {
grid-column:1 ;
grid-row:1/3;
display: flex;
align-items: center;
margin: 12.5vh 0 0 5vh;
}
#about-link .image #question {
margin-top:0;
font-size: 30em;
font-weight: 300;
color:hsl(160, 49%, 50%);
font-family: 'IBM Plex Sans', sans-serif;
padding-top: 0;
}
#about-link .description {
grid-column:2/5 ;
grid-row:1/2;
}
#about-link .description h3 {
font-size: 6.25em;
font-weight: 300;
letter-spacing: .04em;
color: #333;
margin-bottom: .25em;
margin-top: .5em;
font-family: 'IBM Plex Sans', sans-serif;
}
#about-link h3 span {
color:hsl(160, 49%, 50%);
}
#about-link .description p {
font-size: 1.25em;
color: #333;
line-height: 2;
justify-self: flex-end;
width: 80vh;
padding-top: 1.25rem;
}
#about-link .description p span {
color:hsl(160, 49%, 50%);
}
#about-link a {
text-decoration: none;
}
#about-link .page-button {
grid-column: 2;
grid-row:4;
display:flex;
align-items: center;
justify-content: flex-start;
}
#about-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
text-align: center;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
transition: all ease .5s;
font-weight: 300;
margin-left: 15vw;
}
#about-link .page-button a:hover {
background-color: hsl(160, 49%, 75%);
}
#footer-wrapper {
margin-top:.5rem;
}
.discover {
display:none;
}
#app-link .image #icon {
display:none;
}
}
@media only screen and (max-width:1023px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto auto auto ;
}
.title {
grid-column: 1;
grid-row:1/2;
display: flex;
flex-direction: column;
align-items:center;
justify-content: flex-start;
height: 80vh;
padding-top: 4.25rem;
}
.title .short {
font-family:'IBM Plex Sans', sans-serif;
font-size: 1.1em;
font-weight: 300;
padding: 1em 2em;
color: rgb(62, 190, 147);
margin-left:.1em;
text-align: center;
letter-spacing: 0.01em;
line-height: 5vh;
}
.title .image {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 2rem;
}
.title .image img {
max-width: 70vw;
}
h1 {
font-size: 2.75rem;
font-weight: 300;
line-height: 60px;
letter-spacing: .04em;
margin-left: .1em;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
#two {
color: hsl(160, 51%, 49%);
padding-left: 2rem;
}
#about {
grid-column:1;
grid-row: 2;
background-color: white;
display: flex;
margin:2rem 1rem;
margin-top:0;
border-radius: 25px;
box-shadow: .01em .01em .01em .04em hsl(160, 51%, 49%);
padding:1rem;
}
#about p {
font-size:1.125rem;
font-weight: 300;
line-height: 2;
color: #333;
text-align: center;
}
#links {
grid-column:1;
grid-row:3;
padding: 1rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 2.5vh;
min-height: 90vh;
}
#app-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
padding-bottom: 1.5rem;
box-shadow: 1px 1px 1px 3px hsl(160, 100%, 50%);
border-radius: 25px;
}
#app-link .image {
grid-row: 1;
padding-top: 2em;
display: flex;
justify-content: center;
}
#app-link .image img {
height: 20vh;
width: auto;
}
#app-link .description {
grid-row: 2;
padding:.25em 1em 1em 1em;
}
#app-link .description h3 {
font-size: 2.75rem;
font-weight: 200;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
text-align: center;
letter-spacing: .04em;
padding-top: 3vh;
}
#app-link .description h3 span {
color: hsl(160, 100%, 50%);
}
#app-link .description p {
font-size: .95rem;
font-weight: 300;
color: #333;
text-align: center;
line-height: 2;
}
#app-link .page-button{
display:flex;
justify-content: center;
padding-top: 1rem;
}
#app-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
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;
}
#app-link .page-button a:active {
border-color:hsl(160, 100%, 75%);
}
#lab-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
padding-bottom: 1.5rem;
box-shadow: 1px 1px 1px 3px hsl(75, 100%, 50%);
border-radius: 25px;
margin-top: 10vh;
max-height: 105vh;
}
#lab-link .image {
grid-row: 1;
display: flex;
justify-content: center;
padding-top: 2em;
}
#lab-link .image img {
height: 25vh;
width: auto;
}
#lab-link .description {
grid-row: 2;
padding:.5em 2em 3em 2em;
}
#lab-link .description h3 {
font-size: 2.75rem;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align: center;
letter-spacing: .04em;
padding-top: 3vh;
}
#lab-link .description h3 span {
color: hsl(75, 100%, 50%);
}
#lab-link .description p {
font-size: .95em;
font-weight: 300;
color: #333;
text-align: center;
line-height: 2;
}
#lab-link .page-button{
display:flex;
justify-content: center;
}
#lab-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
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;
}
#lab-link .page-button a:active {
border-color:hsl(75, 100%, 75%);
}
#about-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
grid-template-columns: 100%;
padding-bottom: 1.5rem;
box-shadow: 1px 1px 1px 3px hsl(160, 49%, 50%);
border-radius: 25px;
margin-top: 10vh;
max-height: 90vh;
padding-top: 5vh;
}
#about-link a {
text-decoration: none;
}
#about-link .image {
grid-row: 1/2;
grid-column: 1;
}
#about-link .image #question {
margin-top:.35em;
font-size: 30vh;
color: hsl(160, 49%, 50%);
font-family: 'IBM Plex Sans', sans-serif;
padding-left: 2vh;
}
#about-link .description {
grid-row: 1/2;
grid-column: 1;
padding: 1em;
}
#about-link .description h3 {
font-size: 2.75rem;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align: center;
padding-top: 15vh;
}
#about-link .description h3 span {
color: hsl(160, 49%, 50%);
}
#about-link .description p {
font-size: .95rem;
font-weight: 300;
color: #333;
text-align: center;
line-height: 2;
margin-top: 2rem;
}
#about-link .description p span {
color:hsl(160, 49%, 50%);
}
#about-link .page-button{
display:flex;
justify-content: center;
align-items: center;
grid-row: 2;
}
#about-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1.5em;
border-radius: 27px;
text-align: center;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 300;
margin: 1em;
text-transform: uppercase;
transition: all ease .2s;
}
#about-link .page-button a:active {
border-color:hsl(160, 49%, 75%);
}
#footer-wrapper {
margin-top:.5rem;
}
.description .additional {
display: none;
}
#app-link .image #icon-desktop {
display:none;
}
}

+ 0
- 532
templates/assets/css/permapp.css View File

@ -1,532 +0,0 @@
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span{
color: rgb(0, 255, 170);
}
.info p {
color: black;
}
.info p span {
color: rgb(0, 255, 170);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:rgb(0, 255, 170);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 10vh;
}
.info p {
font-size: 1.05rem;
font-weight: 300;
line-height: 3.5vh;
margin: 1rem;
text-align: center;
}
.info p span {
font-size: 1.15rem;
font-weight: 400;
letter-spacing: .04em;
}
.info h1 {
font-size: 2.75rem;
font-weight: 300;
letter-spacing: 0.4rem;
padding-top: 2vh;
}
.image {
display:flex;
justify-content: center;
}
.info img {
min-width: 60vw;
height: auto;
align-self: center;
margin-top: 0;
}
.app-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding: .75rem .95rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 2rem;
font-weight: 300;
text-align: center;
line-height: 3rem;
color:rgb(0, 255, 170);
margin: 1rem .5rem;
}
.about p {
font-weight: 300;
font-size: .95rem;
line-height: 5vh;
text-align: center;
margin: 1rem .5rem;
}
.about p span {
font-size: 1.1rem;
letter-spacing: .03em;
}
.about img {
width:30vh;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.65rem;
font-weight: 300;
letter-spacing: .04em;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 1rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
width: 20vh;
margin: 1rem;
opacity: 0;
}
.products h5 {
font-size: 1.65rem;
font-weight: 200;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
letter-spacing: .01em;
margin-bottom: .5rem;
padding-top: 2vh;
}
.products p {
font-weight: 300;
font-size: .95rem;
line-height: 5vh;
text-align: center;
margin: .75rem;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
}
.product .image {
border: 1px solid #eee;
border-radius: 25px;
margin: 1rem 0;
}
.product .click {
padding: 2vh 0;
}
.product .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.product .click button a {
text-decoration: none;
color: #333;
}
.product .click button a:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
#app {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
padding-left: 5vw;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6.25rem;
font-weight: 300;
letter-spacing: .04em;
margin-bottom: 0;
display: flex;
justify-self: center;
padding-top: 7.5vh;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
font-size: 1.35rem;
margin: 0 1rem 1rem 1rem;
text-align: center;
line-height: 4rem;
letter-spacing: .03em;
}
.info p span {
font-size: 1.45rem;
font-weight: 400;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: flex-start;
align-self: center;
}
.info img {
min-width: 35vw;
margin: 0;
}
.app-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 90vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
}
.about h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color:rgb(0, 255, 170);
margin: 5rem 0 2rem 1rem;
}
.about span {
color: rgb(0, 255, 170);
}
.about p {
margin: 1rem 1rem 0 1rem;
text-align: left;
font-size: 1.35rem;
font-weight: 300;
line-height: 5vh;
}
.about p span {
font-size: 1.5rem;
letter-spacing: .04em;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about img {
width:55vh;
height: auto;
margin-top: 10vh;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 3rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 1.5rem;
}
.products img {
width: 35vh;
opacity: 0;
}
.product h5 {
font-size: 1.5rem;
font-weight: 300;
font-family:'IBM Plex Sans', sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .5fr 1fr .5fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
}
.product .image {
grid-column: 1;
grid-row:1/3;
padding: 3vh;
border: 1px solid #eee;
border-radius: 25px;
margin: 1rem 0;
display: flex;
align-items: center;
margin: 4rem 0 0 4rem;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 3rem;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product h5 span{
color: #999;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 2.5rem;
font-size: 1.15rem;
font-weight: 300;
line-height: 5vh;
letter-spacing: .02em;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding: 0 0 2.5rem 0;
}
.product .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.5rem;
color: white;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
margin-top: 1rem;
margin-left: .25rem;
}
.product .click button a {
color: #333;
text-decoration: none;
}
.product .click button:hover {
opacity: 50%;
background-color: rgb(0, 255, 170);
}
#app {
margin-left: 10vh;
}
#app:hover {
opacity: 50%;
background-color: red !important;
}
}

+ 0
- 590
templates/assets/css/spider.css View File

@ -1,590 +0,0 @@
:root {
--space : 5px;
}
.page-wrapper {
display:grid;
}
.title{
margin-top: var(--space);
}
#about {
margin-top: var(--space);
background-color:white;
}
#about p {
color:black;
}
@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: 63vh;
padding: 4vh 0 0 2vw;
}
.title #heading {
grid-column: 1;
grid-row: 1/2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
h1 {
font-size: 5.5rem;
font-weight: 300;
line-height: 40px;
letter-spacing: .05em;
padding-top: 1em;
margin-left: .1em;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.title #heading #two {
color: rgb(62, 190, 147);
padding-left: 35vh;
}
.title article {
grid-column: 1;
grid-row: 1/2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: flex-end;
}
article .short {
display: flex;
justify-self: center;
font-family:'IBM Plex Sans', sans-serif;
font-size:1.5em;
padding: 1.25em 1rem 3em;
color: rgb(100,190, 149);
margin-left:.1em;
text-align: center;
letter-spacing: .04em;
align-self: center;
}
/*add jquery animation to spiderpi section*/
article .svg-inline--fa {
font-size: 2.5em;
transform: scale(1.25,1);
display: none;
}
.title .image {
display: flex;
align-items: flex-start;
justify-content: flex-end;
flex-direction: column;
transition: 0.4s;
grid-column: 2;
grid-row: 1/2;
}
.title .image img {
max-height: 50vh;
width: auto;
padding: 0 0 2vh 7.5vw;
}
#about {
grid-column:1/5;
grid-row: 2;
display: flex;
background-color: white;
margin: 4rem 2rem 2rem 2rem;
border-radius: 25px;
box-shadow: .01em .01em.01em .05em hsl(160, 51%, 49%);
padding: 1rem;
}
#about p {
font-size: 1.35rem;
padding:1.5rem;
text-align: center;
font-family: 'Lato', sans-serif;
line-height: 4rem;
letter-spacing: 0.02em;
}
#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: 75vh;
}
#pi-link {
display:grid;
grid-template-columns: 40% 60%;
grid-template-rows: 20% 60% 20% ;
box-shadow: .01em .01em .01em .05em hsl(160, 100%, 50%);
border-radius: 25px;
min-height: 80vh;
padding: 1.5rem 0 2rem 0;
}
/*replace with video*/
#pi-link .image {
grid-column:1 ;
grid-row:1/4;
display:flex;
align-items: flex-end;
justify-content: center;
border-right: .05em solid #eee;
}
#pi-link .image img {
max-width: 30vw;
}
#pi-link .description {
grid-column:2 ;
grid-row:1/3;
display: flex;
flex-direction: column;
align-self: center;
padding:1em 2rem 1rem 4rem;
max-width: 50vw;
}
#pi-link .description h3 {
font-size: 6.25em;
font-weight: 200;
color: hsl(160, 100%, 50%);
letter-spacing: .06em;
margin-bottom: .25em;
font-family: 'IBM Plex Sans', sans-serif;
display: flex;
justify-content: center;
}
#pi-link .description h3 span {
color: #333;
}
#pi-link .description p {
font-size: 1.25em;
color: #333;
line-height: 2;
justify-self: flex-end;
padding-top: 2rem;
text-align: left;
}
#pi-link .page-button {
grid-column:2 ;
grid-row: 4;
display:flex;
align-items: center;
justify-content: center;
}
#pi-link .page-button a {
text-decoration: none;
background-color:#fff;
color: #000;
padding: .25em 1em;
border: .01em solid #000;
border-radius: 27px;
text-align: center;
font-size:1.5em;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
transition: all ease .5s;
font-weight: 300;
margin-right: 10vw;
}
#pi-link .page-button a:hover {
background-color: hsl(160, 100%, 75%);
}
#join-link {
display:grid;
grid-template-columns: 70% 30%;
grid-template-rows: 20% 60% 20% ;
box-shadow: .01em .01em .01em .05em hsl(160, 51%, 49%);
border-radius: 25px;
min-height: 75vh;
padding: 1.5rem 0 0 10vh;
margin: 10vh 10vw 0 10vw;
}
#join-link .image {
grid-column: 1/3 ;
grid-row: 1/3;
display: flex;
align-items: center;
justify-content: flex-end;
padding-bottom: 5vh;
}
#join-link .description {
grid-column:1 ;
grid-row:1/3;
display:flex;
flex-direction: column;
margin-left: 5rem;
padding:1em;
height: 60vh;
}
#join-link .description h3 {
font-size: 6.25em;
font-weight: 300;
letter-spacing: .05em;
color:hsl(160, 51%, 49%);
margin-bottom: .25em;
margin-top: .5em;
font-family: 'IBM Plex Sans', sans-serif;
}
#join-link .description p {
font-size: 1.25em;
color: #333;
line-height: 1.75;
justify-self: flex-end;
padding-top: 1rem;
}
#join-link .page-button {
grid-column:1 ;
grid-row: 2/4;
display:flex;
align-items: flex-end;
justify-content: flex-start;
padding-bottom: 5vh;
padding-left: 7.5vw;
}
#join-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .25em 1em;
margin-left: 0;
border-radius: 27px;
text-align: center;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
margin-top:.75em;
text-transform: uppercase;
transition: all ease .5s;
}
#join-link .page-button a:hover {
background-color: hsl(160, 50%, 75%);
}
#join-link .image #plus {
margin-top: .35em;
font-size: 30em;
font-family: 'IBM Plex Sans', sans-serif;
color: hsl(160, 50%, 75%);
padding-top: 0;
}
#join-link .image a {
text-decoration: none;
}
#footer-wrapper {
margin-top:.5rem;
}
#app-link .image #icon {
display:none;
}
.mobile {
display:none;
}
}
@media only screen and (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto auto auto ;
}
.title {
grid-column: 1;
grid-row:1/2;
display: flex;
flex-direction: column;
align-items:center;
justify-content: flex-start;
height: 80vh;
padding-top: 10vh;
}
.title #heading #two {
color: rgb(62, 190, 147) ;
}
.title article .svg-inline--fa {
display:none;
}
.title .short {
font-family:'IBM Plex Sans', sans-serif;
font-weight: 300;
font-size:1.2em;
padding: 1.25em 1em 1em 1em;
color: rgb(62, 190, 147);
margin-left:.1em;
text-align: center;
line-height: 5vh;
}
.title .image {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.title .image img {
height: 30vh;
width: auto;
}
h1 {
font-size: 2.75rem;
font-weight: 300;
line-height: 60px;
letter-spacing: .5px;
margin-left: .1em;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
#about {
grid-column:1;
grid-row: 2;
background-color: white;
display: flex;
margin: 0 1.05em 2rem 1.05rem;
border-radius: 25px;
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 49%);
}
#about p {
font-size:1.105rem;
font-weight: 300;
padding: 1.75rem 1.25rem;
line-height: 2;
color: #333;
letter-spacing: .01em;
}
#about p span {
font-weight: 800;
}
#links {
grid-column:1;
grid-row:3;
padding: 1rem;
background-color: white;
border-radius: 25px;
margin-top: 1vh;
min-height: 90vh;
}
#pi-link {
display:grid;
grid-template-rows: repeat(2, .7fr);
padding-bottom: 1rem;
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
border-radius: 25px;
}
#pi-link .image {
grid-row: 1;
padding: 1.5em 0 1em 0;
display: flex;
justify-content: center;
}
#pi-link .image img {
max-width: 80vw;
}
#pi-link .description {
grid-row: 2;
padding:.25em 1em 1em 1em;
}
#pi-link .description h3 {
font-size: 2.65rem;
font-weight: 300;
letter-spacing: .04em;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
text-transform: uppercase;
text-align: center;
}
#pi-link .description h3 span {
color: hsl(160, 100%, 50%);
}
#pi-link .description p {
font-size: .95rem;
font-weight: 300;
color: #333;
text-align: center;
line-height: 2;
}
#pi-link .page-button{
display:flex;
justify-content: center;
align-items: center;
grid-row: 3;
padding-top: .75rem;
}
#pi-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: .01em solid #000;
padding: .35em 1em;
border-radius: 27px;
text-align: center;
font-size: 1.05em;
font-family: 'Lato', sans-serif;
font-weight: 300;
margin: .75em;
text-transform: uppercase;
transition: all ease .2s;
}
#pi-link .page-button a:active {
border-color:hsl(160, 100%, 75%);
}
#join-link {
display:grid;
grid-template-rows: .7fr .1fr;
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 49%);
border-radius: 25px;
height: 80vh;
margin-top: 9.5vh;
}
#join-link .image #plus {
margin-top: .25em;
font-size: 12em;
font-family: 'IBM Plex Sans', sans-serif;
color: hsl(160, 51%, 49%);
}
#join-link .image a {
text-decoration: none;
}
#join-link .description {
padding:1em;
}
#join-link .description h3 {
font-size: 3rem;
color: #333;
margin-bottom: 1.5rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}
#join-link .description p {
font-size: .95rem;
color: #333;
text-align: center;
line-height: 1.5;
padding-top: .75rem;
}
#join-link .page-button{
display:flex;
justify-content: center;
align-items: center;
}
#join-link .page-button a {
text-decoration: none;
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: .35em 1em;
border-radius: 27px;
text-align: center;
font-size: 1em;
font-family: 'IBM Plex Sans', sans-serif;
margin: .75em;
text-transform: uppercase;
transition: all ease .2s;
}
#join-link .page-button a:active {
border-color: hsl(160, 51%, 49%);
}
#footer-wrapper {
margin-top:.5rem;
}
.description .additional {
display: none;
}
#app-link .image #icon-desktop {
display:none;
}
}

+ 0
- 631
templates/assets/css/spiderpi.css View File

@ -1,631 +0,0 @@
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span {
color:rgb(0, 255, 170);
}
.info p {
color: black;
}
.info p span {
color: rgb(0, 255, 170);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:rgb(0, 255, 170);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
.product .click {
display: flex;
margin: 1rem 0;
padding-left: 1rem;
}
.product .click button {
margin: 0 1rem 0 0 !important;
}
.product .click button:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
#insta {
padding: 0;
background-color:transparent;
border: none;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#gram {
width: 5vh;
margin: 0;
}
#you {
padding: 0;
background-color:transparent;
border: none;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#tube {
width: 5vh;
margin: 0;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 10vh;
}
.info h1 {
font-size: 2.75rem;
font-weight: 300;
letter-spacing: .05em;
padding: 0;
}
.info h1 span {
margin-right: .1em;
}
.info p {
font-size: 1.05rem;
font-weight: 300;
line-height: 4vh;
letter-spacing: .04em;
margin: 1rem;
text-align: center;
margin-top: .5rem;
}
.info p span {
font-weight: 400;
letter-spacing: .05em;
color:hsl(160, 90%, 50%);
}
.image {
display:flex;
justify-content: center;
}
.info img {
min-width: 90vw;
height: auto;
align-self: center;
margin-top: 0;
}
.spider-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
display: grid;
height: auto;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding:.75rem;
background-color: white;
border-radius: 25px;
}
.strip .about {
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-rows: 15% 60% 25%;
padding-top: 2vh;
}
.about h3 {
grid-row: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.35rem;
font-weight: 300;
letter-spacing: .05em;
line-height: 3rem;
color: hsl(160, 90%, 50%);
text-align: center;
}
.about p {
grid-row: 2;
display:flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-weight: 300;
letter-spacing: .03em;
line-height: 4vh;
padding: 1vh 2vw;
}
.about .image {
grid-row: 3;
display: flex;
flex-direction: column;
}
.about video {
min-width: 35vw;
height: auto;
border: none;
box-shadow: none;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
margin-top: 3vh;
}
.products h3 {
font-size: 1.5rem;
font-weight: 200;
letter-spacing: .05em;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 1rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
width: 30vh;
margin: 1rem;
}
.products h5 {
font-size: 1.65rem;
font-weight: 200;
letter-spacing: .06em;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin: .5rem 0;
text-align: center;
}
.products p {
display: flex;
flex-direction: column;
text-align: center;
line-height: 4vh;
font-weight: 300;
letter-spacing: .02em;
margin: .75rem;
}
.product p a {
color: rgb(62, 190, 147);
text-decoration: none;
}
.product p a:active {
opacity: 50%;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
}
.product .image {
margin: 1rem 0;
}
.product .click {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 10vh;
align-items: center;
justify-items: center;
}
.product .click button {
height: 5vh;
padding: 0 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
transition: .5s;
}
.product .click button a {
text-decoration: none;
color: #333;
}
.product .click button:active {
opacity: 50%;
color: rgb(0, 255, 170);
}
#app {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 66vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
padding-left: 1vw;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6rem;
font-weight: 300;
letter-spacing: .05em;
margin-bottom: 0;
display: flex;
justify-self: center;
align-self: flex-end;
padding: 0 0 3vh 0;
}
.info h1 span {
margin-right: .05em;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
font-size: 1.75rem;
margin: 0;
text-align: left;
line-height: 5rem;
letter-spacing: .04em;
justify-self: center;
align-self: flex-start;
padding-top: 2vh;
}
.info p span {
font-weight: 400;
letter-spacing: .06em;
font-size: 1.65rem;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: flex-start;
align-self: center;
}
.info img {
min-width: 45vw;
height: auto;
margin: 0;
}
.spider-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
padding: 2.5rem 0 2.5rem 2.5rem;
background-color: white;
border-radius: 25px;
min-height: 90vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
}
.about h3 {
font-size: 3rem;
font-weight: 300;
letter-spacing: .05em;
line-height: 3rem;
color: hsl(160, 90%, 50%);
margin: 3rem 0 2rem 1rem;
}
.about span {
color: rgb(0, 255, 170);
}
.about p {
margin: 1rem 0 0 1rem;
float: left;
font-size: 1.45rem;
line-height: 2.75rem;
text-align: left;
}
.about p span {
color: hsl(160, 90%, 50%);
font-size: 1.5rem;
letter-spacing: .03em;
}
.about .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.about video {
max-width:70vw;
height: auto;
margin-top: 40vh;
border: .02em solid #333;
}
.strip2 {
padding: 4rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 200;
letter-spacing: .05em;
line-height: 3rem;
color: hsl(160, 49%, 50%);
margin: 1.5rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 1.5rem;
}
.product h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: 1rem;
}
.products p {
text-align: center;
margin: 1rem 1rem 1.5rem 1rem;
}
.product {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: .5fr 1fr .5fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
max-height: 100vh;
padding-top: 3rem;
}
.product .image {
grid-column: 1;
grid-row:1/4;
display: flex;
align-items: center;
justify-content: center;
padding-top: 5vh;
}
.product .image img {
max-width: 30vw;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 3rem;
font-weight: 200;
letter-spacing: .06em;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product h5 span{
color: #999;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 5rem;
font-size: 1.15rem;
line-height: 5.5vh;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
}
.product .click button {
padding: .75rem 1.5rem;
background-color:#fff;
border: .01em solid #000;
font-size: 1.5rem;
font-family:'lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
}
.product .click button a {
color: #333;
text-decoration: none;
}
.product .click button:hover {
opacity: 50%;
background-color: rgb(0, 255, 170);
}
.product .click button {
margin: 2rem !important;
}
#gram {
min-width: 4vw;
}
#tube {
min-width: 3vw;
}
#gram:hover {
opacity: 50%;
background-color: rgb(0, 255, 170);
border-radius: 25px;
}
#tube:hover {
opacity: 50%;
background-color: rgb(0, 255, 170);
border-radius: 25px;
}
}

+ 0
- 12
templates/assets/css/test.css View File

@ -1,12 +0,0 @@
img {
width: 100vw;
z-index: 0;
grid-row: 1/25;
grid-column: 1/25;
}
.container {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-template-rows: repeat(24, 1fr);
}

+ 0
- 615
templates/assets/css/whatsthat.css View File

@ -1,615 +0,0 @@
body {
overflow-x: hidden;
}
.global-wrapper {
width: 100%;
overflow-x: hidden;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span{
color:magenta;
}
.info p {
color: black;
}
.info p span {
color:magenta;
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
margin-top: 5vh;
}
.about p span {
color:magenta;
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product h5 {
color: #333;
}
.product p a {
text-decoration: none;
color: magenta;
}
.product p a:hover {
opacity: 50%;
color:rgb(62, 190, 147)
}
.product p a:active {
opacity: 50%;
color:rgb(62, 190, 147)
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 7.5vh;
}
.info h1 {
font-size: 2.5rem;
font-weight: 300;
letter-spacing: .04em;
padding: 0;
}
.info h1 span {
margin: 0 1em;
color: hsl(160, 51%, 50%);
}
.info p {
font-size: 1.15rem;
font-weight: 300;
line-height: 4.5vh;
margin: .75rem 1rem 1rem 1rem;
text-align: center;
letter-spacing: .03em;
padding: 0 2vw;
}
.info p span {
color: hsl(160, 51%, 50%);
font-weight: 300;
}
.image {
display:flex;
justify-content: center;
padding-top: 2vh;
}
.info img {
min-width: 60vw;
height: auto;
align-self: center;
margin-top: 0;
}
.culture-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: hsl(160, 51%, 50%);
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding: 1rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.about h3 {
font-size: 2rem;
font-weight: 300;
line-height: 3rem;
color: hsl(160, 51%, 50%);
text-align: center;
margin: 2rem 0 1rem 0;
}
.about p {
font-weight: 300;
font-size: 1.05rem;
letter-spacing: .02em;
line-height: 2.75rem;
text-align: center;
margin: 2rem 0 1rem 0;
}
#twelve {
color: rgb(62, 190, 147);
}
.about ul {
list-style:none;
padding: 0 2.5rem;
}
.about ul li {
font-weight: 300;
line-height: 2.75rem;
}
.about ul li span {
color: rgb(62, 190, 147);
}
#second {
box-shadow: .1em .1em .75em hsl(160, 51%, 50%);
line-height: 2.25rem;
padding: 1rem .75rem;
}
.about img {
max-width: 65vw;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
font-weight: 300;
letter-spacing: .02em;
line-height: 3rem;
color: #333;
margin: 1rem 0 1rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
max-height: 25vh;
margin-bottom: 1rem;
}
.products h5 {
font-size: 1.5rem;
font-weight: 200;
letter-spacing: .05em;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
font-weight: 300;
line-height: 4vh;
text-align: center;
margin: .75rem;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
}
.product .image {
margin: 1rem 0;
}
.product .click {
margin: 1rem;
}
.product .click button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #333;
font-size: 1.25rem;
font-family: 'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .5s;
}
.product .click button a {
text-decoration: none;
color: #333;
}
.product .click button:active {
opacity: 50%;
border-color: hsl(160, 51%, 80%);
}
#app {
margin-left: 5vh;
text-decoration: none;
color: white;
}
#desktop {
display:none;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: 55% 45%;
grid-template-rows: 65% 35%;
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 5rem;
margin-bottom: 0;
display: flex;
justify-self: center;
font-weight: 300;
}
.info h1 span {
padding-top: 10vh;
padding-right: 6vw;
color: rgb(62, 190, 147);
font-size: 6.25rem;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: center;
align-items: flex-start;
font-size: 1.5rem;
text-align: center;
line-height: 2.25rem;
letter-spacing: .05em;
padding-top: 1rem;
}
.info p span {
color: rgb(62, 190, 147);
font-weight: 300;
margin: 0 .3em;
}
.info .image {
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: flex-start;
align-self: center;
}
.info img {
min-width: 35vw;
height: auto;
}
.mobile {
display:none;
}
.culture-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color:rgb(62, 190, 147);
display:flex;
flex-direction: column;
}
.strip {
padding:2.5rem 0 0 2.5rem;
background-color: white;
border-radius: 25px;
min-height: 90vh;
}
.about {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20% 10% 70%;
padding: 5vh 0 5vh 0;
}
.about h3 {
display: flex;
justify-content: center;
align-items: flex-start;
text-align: left;
font-size: 2.65rem;
font-weight: 300;
line-height: 4rem;
color: rgb(62, 190, 147);
grid-column: 1;
grid-row: 1;
margin: 2vh 0;
}
.about #first {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
letter-spacing: .04em;
font-weight: 300;
line-height: 1.5rem;
margin: 5vh 0 4vh 0;
}
#twelve {
color: rgb(62, 190, 147);
font-weight: 400;
}
.about ul {
list-style:none;
grid-column: 1;
grid-row: 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding-left: 2vh;
}
.about #second {
display: flex;
align-items: flex-end;
grid-column: 2;
grid-row: 1/4;
font-size: 1.25rem;
text-align: left;
line-height: 3.5vh;
box-shadow: 1em 1em 2em .75em hsl(160, 51%, 50%);
padding: 25rem 1.5rem 1rem 1rem;
}
.about ul li {
line-height: 3.5rem;
font-size: 1.35rem;
letter-spacing: .04em;
}
.about ul li span {
color: rgb(62, 190, 147);
}
.about span {
color: rgb(62, 190, 147);
}
.about p {
margin: 1rem 0 0 1rem;
float: left;
font-size: 1.5rem;
}
.about .image {
grid-column: 2;
grid-row: 1/4;
display:flex;
justify-content: center;
align-items: flex-start;
padding: 15vh 2vw 0 2vw;
}
.about img {
max-width: 32.5vw;
}
.strip2 {
padding: 2rem 4rem 8vh 4rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color: #333;
margin: 3rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
padding-left: 1.5rem;
}
.product h5 {
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
text-align: center;
margin: 1rem;
}
.product {
display: grid;
grid-template-columns: .25fr 1fr;
grid-template-rows: .25fr .5fr .25fr;
box-shadow: 3px 3px 3px 3px #eee;
border-radius: 25px;
min-height: 60vh;
}
.product .image {
grid-column: 1;
grid-row:1/4;
padding: 3vh;
margin: 1rem 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 4rem;
}
.product .image img {
max-height: 30vh;
}
.product h5 {
grid-column: 2;
grid-row: 1;
font-size: 3rem;
font-weight: 200;
letter-spacing: .05em;
display:flex;
justify-self: center;
align-self: flex-end;
}
.product h5 span{
color: #999;
}
.product p {
display:flex;
flex-direction: column;
justify-self: center;
align-self: center;
grid-column: 2;
grid-row: 2;
padding: 0 2.5rem;
font-size: 1.15rem;
line-height: 5vh;
}
.product .click {
grid-column: 2;
grid-row: 3;
display:flex;
justify-self: center;
align-self: center;
justify-content: space-between;
padding: 0 0 2.5rem 0;
}
.product .click button {
padding: .75rem 1.5rem;
background-color: #fff;
border: .01em solid #333;
font-size: 1.5rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
transition: .3s;
}
.product .click button a {
color: #333;
text-decoration: none;
}
.product .click button:hover {
opacity: 50%;
background-color: hsl(160, 51%, 50%);
}
#app {
margin-left: 10vh;
}
#app:hover {
opacity: 50%;
background-color: red !important;
}
}

+ 0
- 612
templates/assets/css/whoweare.css View File

@ -1,612 +0,0 @@
.global-wrapper {
width: 100%;
}
.page-wrapper {
display:grid;
width: 100%;
}
.info h1 {
color:#333;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
justify-self: center;
align-self: center;
padding-top: 2.5rem;
margin-bottom: 1.5rem;
}
.info h1 span {
color: rgb(0, 255, 170);
}
.info p {
color: black;
text-align: center;
}
.info p span {
color: rgb(0, 255, 170);
font-weight: 600;
}
.info img {
width: 25vh;
height: auto;
align-self: center;
}
.about p span {
color: rgb(0, 255, 170);
font-weight: 400;
}
.product p span{
color:rgb(62, 190, 147);
}
.product .click button {
margin: 0 1rem 0 0 !important;
}
#insta {
padding: 0;
background-color:transparent;
border: none;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#gram {
width: 5vh;
margin: 0;
}
#you {
padding: 0;
background-color:transparent;
border: none;
font-weight: 600;
cursor: pointer;
transition: .3s;
margin-top: 0;
margin-left: 0;
transition: .5s;
}
#tube {
width: 5vh;
margin: 0;
}
@media (max-width:480px) {
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 75vh;
grid-area: info;
display: flex;
flex-direction: column;
padding-top: 10vh;
}
.info p {
font-size: 1.25rem;
font-weight: 300;
line-height: 2rem;
margin: 1rem;
text-align: center;
}
.info h1 {
font-size: 2.75rem;
font-weight: 300;
line-height: 4rem;
padding: 0;
margin-bottom: 1rem;
}
.info h1 span {
margin-left: 7vh;
}
.image {
display:flex;
justify-content: center;
}
.info img {
min-width: 80vw ;
height: auto;
align-self: center;
}
.about-container {
width: 100%;
grid-area: page-content;
padding: 1rem;
padding-top: 1.5rem;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: .95fr 1fr;
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
}
.strip .about {
grid-column: 1;
grid-row: 1;
}
.philo h3 {
font-size: 2rem;
font-weight: 300;
letter-spacing: .05em;
text-align: center;
line-height: 3rem;
color: #333;
margin: 2rem 0 1rem 0;
}
.philo h3 span {
color: hsl(160, 90%, 50%);
}
.philo p {
line-height: 3.5vh;
font-weight: 300;
letter-spacing: .02em;
margin: 1.75rem .75rem 1rem .75rem;
}
.philo img {
max-width:70vw;
height: auto;
padding: 1rem 0 2rem 0;
}
.strip2 {
padding:.75rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
.products h3 {
font-size: 1.5rem;
font-weight: 200;
letter-spacing: .05em;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 1rem 0 1rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
width: 25vh;
margin-bottom: 1rem;
}
.products h5 {
color: black;
text-shadow: 1.5px 3px rgb(62, 190, 147);
font-size: 1.5rem;
font-family:'IBM Plex Sans', sans-serif;
font-weight: 100;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: .5rem;
}
.products p {
text-align: center;
margin: .75rem;
}
.social {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 1fr .5fr 1fr 1fr;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
min-height: 80vh;
}
.social h5 {
grid-column: 1/3;
grid-row: 1;
justify-self: center;
}
.social .blog {
grid-column: 1/3;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
}
.social .blog #blog {
margin: 0;
}
.social .instagram {
grid-column: 1/3;
grid-row: 3;
display: flex;
justify-content: space-around;
}
#gram {
min-width: 15vw;
}
.social .instagram #account {
font-size: .75rem;
align-self: center;
text-shadow: none;
}
.social .youtube {
grid-column: 1/3;
grid-row: 4;
display: flex;
justify-content: space-around;
}
#tube {
min-width: 10vw;
}
.social .youtube #account {
font-size: .75rem;
align-self: center;
text-shadow: none;
}
.social button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
margin-left: .25rem;
transition: .5s;
}
.social button a {
text-decoration: none;
color: #000;
}
.social button:active {
opacity: 50%;
background-color: hsl(160, 100%, 80%);
}
#desktop {
display:none;
}
#helper {
width: 45vh;
}
}
@media (min-width:768px){
.page-wrapper {
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"info"
"page-content";
width: 100%;
}
.info {
width:100%;
height: 65vh;
grid-area: info;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.info h1 {
grid-column: 1;
grid-row: 1;
font-size: 6rem;
font-weight: 200;
letter-spacing: .04em;
margin-bottom: 0;
display: flex;
justify-content: center;
align-self: flex-end;
padding-bottom: 1rem;
}
.info h1 span {
margin: 0 .095em;
}
.info p {
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: center;
font-size: 1.75rem;
font-weight: 300;
text-align: left;
line-height: 2.25rem;
letter-spacing: .03em;
padding-top: 5vh;
}
.info img {
width: 60vh;
height: auto;
grid-column: 2;
grid-row: 1/3;
display:flex;
justify-self: center;
align-self: center;
margin-left: 4.5rem;
margin-top: 20vh;
}
.about-container {
width: 100%;
grid-area: page-content;
padding:2rem;
overflow: hidden;
background-color: rgb(0, 255, 170);
display:flex;
flex-direction: column;
}
.strip {
padding: 0 0 0 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
min-height: 90vh;
}
.philo {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .2fr 1fr;
padding: 0 0 5vh 0;
}
.philo h3 {
display: flex;
align-items: center;
font-size: 2.5rem;
font-weight: 300;
line-height: 3rem;
color: #333;
letter-spacing: 0.4rem;
margin: 5rem 0 2rem 0;
padding-left: 2vw;
}
.philo span {
color: hsl(160, 90%, 50%);
}
.philo p {
display: flex;
margin: 1rem 0 0 0;
font-size: 1.5rem;
font-weight: 300;
line-height: 5vh;
text-align: center;
}
.philo .image {
grid-column: 2;
grid-row:1/3;
display:flex;
justify-content: center;
align-items: center;
}
.philo img {
max-width: 35vw;
height: auto;
margin-top: 15vh;
}
#partners {
width: 65vh;
}
#helper {
width: 65vh;
}
.strip2 {
padding:.75rem .75rem 5rem 2.5rem;
background-color: white;
border-radius: 25px;
z-index: 10000;
margin-top: 3vh;
min-height: 90vh;
}
#heading2 {
color: #333;
grid-row: 1;
grid-column: 1/3;
padding-left: 2vw;
}
.products h3 {
font-size: 2.5rem;
font-weight: 200;
letter-spacing: .05em;
line-height: 3rem;
color: rgb(62, 190, 147);
margin: 2.5rem 0 3rem 1.5rem;
text-transform: uppercase;
font-family:'IBM Plex Sans', sans-serif;
}
.products img {
width: 45vh;
margin-bottom: 3vh;
}
.products p {
text-align: center;
margin: 1rem;
}
.social {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 1fr .5fr 1fr 1fr;
align-items: center;
box-shadow: 1px 1px 1px 1px #999;
border-radius: 25px;
padding: 1rem;
min-height: 80vh;
}
.social h5 {
grid-column: 1/3;
grid-row: 1;
justify-self: center;
font-size: 5vh;
font-weight: 300;
letter-spacing: .04em;
font-family:'IBM Plex Sans', sans-serif;
text-transform: uppercase;
}
.social .blog {
grid-column: 1/3;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
}
.social .blog #blog {
margin: 0;
width: 13.5vw;
height: 5.5vh;
font-size: 1.75rem;
font-weight: 300;
}
.social .instagram {
grid-column: 1/3;
grid-row: 3;
display: flex;
justify-content: center;
}
#gram {
min-width: 6.5vw;
margin-right: 5vw;
}
.social .instagram #account {
font-size: 1.75rem;
align-self: center;
text-shadow: none;
}
.social .youtube {
grid-column: 1/3;
grid-row: 4;
display: flex;
justify-content: center;
}
#tube {
min-width: 5.5vw;
margin-right: 5vw;
}
.social .youtube #account {
font-size: 1.75rem;
align-self: center;
text-shadow: none;
}
.social button {
padding: .5rem 1.25rem;
background-color: #fff;
border: .01em solid #000;
font-size: 1.25rem;
font-family:'Lato', sans-serif;
line-height: 1rem;
border-radius: 25px;
font-weight: 300;
cursor: pointer;
margin-top: 1rem;
transition: .5s;
}
.social button a {
text-decoration: none;
color: #000;
}
.social button:hover {
opacity: 50%;
background-color: hsl(160, 100%, 80%);
}
}

+ 41
- 8
templates/assets/js/main.js View File

@ -52,10 +52,14 @@ document.getElementById("chevron_3").addEventListener("click", function menu() {
document.getElementById("b_1").addEventListener("click", function menu() { document.getElementById("b_1").addEventListener("click", function menu() {
var x= document.getElementById("c_1"); var x= document.getElementById("c_1");
let hemp = document.getElementById("hemp");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
hemp.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
hemp.style.zIndex = "0";
} }
} }
); );
@ -64,10 +68,14 @@ document.getElementById("b_1").addEventListener("click", function menu() {
document.getElementById("b_2").addEventListener("click", function menu() { document.getElementById("b_2").addEventListener("click", function menu() {
var x= document.getElementById("c_2"); var x= document.getElementById("c_2");
let permapp = document.getElementById("permapp");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
permapp.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
permapp.style.zIndex = "0";
} }
} }
); );
@ -76,10 +84,14 @@ document.getElementById("b_2").addEventListener("click", function menu() {
document.getElementById("b_3").addEventListener("click", function menu() { document.getElementById("b_3").addEventListener("click", function menu() {
var x= document.getElementById("c_3"); var x= document.getElementById("c_3");
let spider = document.getElementById("spider");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
spider.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
spider.style.zIndex = "0";
} }
} }
); );
@ -88,10 +100,14 @@ document.getElementById("b_3").addEventListener("click", function menu() {
document.getElementById("b_4").addEventListener("click", function menu() { document.getElementById("b_4").addEventListener("click", function menu() {
var x= document.getElementById("c_4"); var x= document.getElementById("c_4");
let cube = document.getElementById("cube");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
cube.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
cube.style.zIndex = "0";
} }
} }
); );
@ -100,10 +116,15 @@ document.getElementById("b_4").addEventListener("click", function menu() {
document.getElementById("b_5").addEventListener("click", function menu() { document.getElementById("b_5").addEventListener("click", function menu() {
var x= document.getElementById("c_5"); var x= document.getElementById("c_5");
let offgrid = document.getElementById("offgrid");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
offgrid.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
offgrid.style.zIndex = "0";
} }
} }
); );
@ -112,10 +133,14 @@ document.getElementById("b_5").addEventListener("click", function menu() {
document.getElementById("b_6").addEventListener("click", function menu() { document.getElementById("b_6").addEventListener("click", function menu() {
var x= document.getElementById("c_6"); var x= document.getElementById("c_6");
let cyber = document.getElementById("cyber");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
cyber.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
cyber.style.zIndex = "0";
} }
} }
); );
@ -124,10 +149,14 @@ document.getElementById("b_6").addEventListener("click", function menu() {
document.getElementById("b_7").addEventListener("click", function menu() { document.getElementById("b_7").addEventListener("click", function menu() {
var x= document.getElementById("c_7"); var x= document.getElementById("c_7");
let machina = document.getElementById("machina");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
machina.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
machina.style.zIndex = "0";
} }
} }
); );
@ -136,10 +165,14 @@ document.getElementById("b_7").addEventListener("click", function menu() {
document.getElementById("b_8").addEventListener("click", function menu() { document.getElementById("b_8").addEventListener("click", function menu() {
var x= document.getElementById("c_8"); var x= document.getElementById("c_8");
let miner = document.getElementById("miner");
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "flex";}
x.style.display = "flex";
miner.style.zIndex = "9";
}
else { else {
x.style.display ="none"; x.style.display ="none";
miner.style.zIndex = "0";
} }
} }
); );

+ 2
- 2
templates/index_de.html.tera View File

@ -40,7 +40,7 @@
<a>i</a> <a>i</a>
</button> </button>
<div class ="sub_container" id="c_4"> <div class ="sub_container" id="c_4">
<p> Die Spinne braucht den <b><a href="/cube">Kaos Cube</a></b>.<br> Der Cube spannt ein verschlüsseltes Netz der Privatsphäre. Er rechnet Modelle für die Spinne dezentral aus.</p>
<p> Die Spinne braucht den <b><a href="/cube">Kaos Cube</a></b><br> Der Cube spannt ein verschlüsseltes Netz der Privatsphäre. Er rechnet Modelle für die Spinne dezentral aus.</p>
</div> </div>
</div> </div>
<div class="link" id="offgrid"> <div class="link" id="offgrid">
@ -48,7 +48,7 @@
<a>i</a> <a>i</a>
</button> </button>
<div class ="sub_container" id="c_5"> <div class ="sub_container" id="c_5">
<p> Die Systeme der individuellen Automation brauchen Energie. <br>Mit Recycling, Dezentralität, Einfachheit und Erneuerbarkeit erzeugen wir sie und gehen <b><a href="/offgrid">offgrid.</a></b>.</p>
<p> Die Systeme der individuellen Automation brauchen Energie. <br>Mit Recycling, Dezentralität, Einfachheit und Erneuerbarkeit erzeugen wir sie und gehen <b><a href="/offgrid">offgrid.</a></b></p>
</div> </div>
</div> </div>
<div class="link" id="cyber"> <div class="link" id="cyber">

Write Preview
Loading…
Cancel
Save