diff --git a/Cargo.toml b/Cargo.toml index 3795e23..6941f9e 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -13,7 +13,6 @@ default-features = false serde = "1.0.130" serde_json = "1.0.67" lazy_static = "1.4.0" -askama_rocket = "0.10.0" [dependencies.rocket_dyn_templates] version = "0.1.0-rc.1" diff --git a/src/build_rocket/get.rs b/src/build_rocket/get.rs index 434b18d..a1e4338 100644 --- a/src/build_rocket/get.rs +++ b/src/build_rocket/get.rs @@ -12,11 +12,11 @@ use rocket_dyn_templates::Template; // generate routes, set attributes // set http method // set uri - #[get("/")] + #[get("/de")] // if success call handler - pub fn index() -> Template { - let context = templates::TplIndex::new(); - Template::render("home", &context) + pub fn index_de() -> Template { + let context = templates::TplIndexDe::new(); + Template::render("index_de", &context) } // serve other pages (html GET) diff --git a/src/build_rocket/templates.rs b/src/build_rocket/templates.rs index 99ddf9a..471d04b 100644 --- a/src/build_rocket/templates.rs +++ b/src/build_rocket/templates.rs @@ -1,17 +1,27 @@ use rocket::serde::Serialize; -// context Template index +use serde_json::Value; +use serde_json::json; + + +// context Template index #[derive(Serialize)] -pub struct TplIndex { +pub struct TplIndexDe { pub title: String, + pub hemp: Value, } -impl TplIndex { - pub fn new() -> TplIndex { - TplIndex { +// (prototype languages) +impl TplIndexDe { + pub fn new() -> TplIndexDe { + // transform to JSON value array/object + TplIndexDe { title: String::from("Cannabinieri CBD"), + // how to include several objects ? + hemp : json!({"de" : "Uns interessieren Informationen. "}), } } + } // context privacy-policy diff --git a/src/main.rs b/src/main.rs index e382566..12ddf50 100644 --- a/src/main.rs +++ b/src/main.rs @@ -26,7 +26,7 @@ async fn main() -> Result<(), rocket::Error> { // catch errors .mount("/", routes![ - get::index, get_static_files::fileserver, + get::index_de, get_static_files::fileserver, get::hemp, get::spider, get::permapp, get::cyber, get::offgrid, get::about, get::meet, get::privacy ]) .mount("/hemp", routes! [ get::oil, get::flower]) diff --git a/templates/assets/css/home.css b/templates/assets/css/home.css deleted file mode 100644 index 6151ec5..0000000 --- a/templates/assets/css/home.css +++ /dev/null @@ -1,107 +0,0 @@ -@font-face { - font-family: 'Lato', sans-serif; - src: url('fonts/Lato-Thin.ttf') format('truetype'); - font-style: normal; - font-weight: 100; -} - -.content { - height: 120vh !important; - width: 100vw; -} - -.content .container { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(8, 1fr); - margin-top: .2rem; - font-family: 'Lato', sans-serif;; -} - -.container img { - height: 100%; - z-index: 0; - max-width: 100vw; - grid-column: 1/3; - grid-row: 1/9; - justify-self: center; -} - -.link button { - width: 2rem; - height: 2rem; - border-radius: 50%; - border: .1rem solid hsl(300, 100%, 50%); - background-color: hsl(300, 100%, 50%); - transition: all .5s ease-in-out; -} - -#hemp button:active { - box-shadow: 0px 0px 10px hsl(300, 100%, 30%); -} - -.link button a { - color: #fff; - text-decoration: none; - font-weight: 600; - font-size: 1.25rem; - transition: all .4s ease-in-out; -} - -.link button a:active { - color: #999; -} - -.link h6 { - text-transform: uppercase; - font-size: .85rem; - letter-spacing: .25rem; -} - -.link p { - font-size: .65rem; - text-align: center; - background-color: #333; - color: #eee; - line-height: 2.25vh; -} - -#hemp { - grid-column: 1/3; - grid-row: 1; - z-index: 2; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(3, 1fr) -} - -#hemp button { - grid-column: 2; - grid-row: 2; - justify-self: start; - align-self: end; - margin-left: 2.4rem; - margin-bottom: .2rem; -} - - -#hemp h6 { - grid-column: 1; - grid-row: 1; - justify-self: center; - display: flex; - align-items: center; -} - -#hemp p { - grid-column: 1; - grid-row: 2; -} - -@media (min-width: 768px) { - .content { - height: 250vh !important; - margin-top: 5rem; - } - -} \ No newline at end of file diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index 28504a5..ff5fff8 100644 --- a/templates/assets/css/index.css +++ b/templates/assets/css/index.css @@ -1,2961 +1,102 @@ - @font-face { - font-family: 'Lato', sans-serif; +@font-face { + font-family: 'Lato', sans-serif; src: url('fonts/Lato-Thin.ttf') format('truetype'); - font-style: normal; + font-style: normal; font-weight: 100; - } - - @font-face { - font-family: 'IBM Plex Sans', sans-serif; - src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype'); - font-style: normal; - } - - *{ - margin:0; - padding:0; - box-sizing:border-box; - } - - :root { - --top_padding:5px; - - --gradient1: linear-gradient( - 45deg, - hsl(160, 51%, 49%), - hsl(160, 51%, 59%), - hsl(160, 51%, 79%), - hsl(160, 51%, 89%), - #fff - ); - - --gradient2: radial-gradient( - #000, - #333, - #999, - #eee, - #fff - ); - - --gradient3: radial-gradient( - hsl(160, 51%, 79%), - #fff, - #eee - ); - }; - - html, - body { - width: 100%; - height: 100%; - } - - /* Adjust Media Queries ! */ - - @media (min-width: 1024px){ - - .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: 100; - -webkit-font-smoothing: antialiased; - overflow-x: hidden; - } - - .top-bar { - background-color:white; - grid-area: top-bar; - display: flex; - align-items: center; - } - - .languages a:hover { - color: rgb(62, 190, 147); - } - - #main-bar { - background-color: black; - grid-area: main-bar; - z-index:1; - display: flex; - align-items: center; - border-top: 1px solid rgb(62, 190, 147); - border-bottom: 3px solid rgb(62, 190, 147); - box-sizing: border-box; - min-width: 100vw; - height: 80%; - font-weight:100 !important; - } - - #logo-container { - margin-top: 6em; - } - - .logo { - z-index:3; - width: 20vh; - margin-left: 5vh; - } - - .main-navigation-bar { - z-index: 2; - display:flex; - align-items:center; - position: relative; - margin-left:5%; - } - - .main-navigation-bar ul { - list-style:none; - position:relative; - align-items:center; - padding-top: 2%; - } - - - .main-navigation-bar ul li { - position:relative; - width:100%; - text-align: left; - padding-right: 4%; - } - - .main-navigation-bar ul li a:hover { - color: rgb(0, 255, 170); - } - - .main-navigation-bar ul li a { - color:white; - text-decoration: none; - justify-content: space-between; - padding: 10px 1.5em; - line-height: 50px; - } - - .main-navigation-bar ul li #edit { - text-decoration: none; - justify-content: space-between; - padding: 10px 1em; - line-height: 50px; - } - - .main-navigation-bar ul #learn { - width:10em; - } - - - .main-navigation-bar ul ul { - border-top: 3px solid rgb(62, 190, 147); - position: absolute; - top: 90%; - opacity: 0; - visibility: hidden; - } - - .main-navigation-bar ul li li { - position: relative; - float:left; - display: list-item; - } - - .main-navigation-bar ul li:hover > ul { - opacity: 1; - visibility: visible; - } - - main{ - grid-area: main; - } - -/*Footer*/ - - footer { - grid-area:footer; - } - - #footer-wrapper { - color: white; - border-top: solid 3px rgb(62, 190, 147); - border-bottom: solid 1px rgb(62, 190, 147); - background-color: black; - height:100%; - display: grid; - grid-template-columns: 1fr 0.8fr 1fr 1fr; - grid-template-rows: 2fr 1fr; - padding: 10vh 5vh 5vh 5vh ; - font-family: 'Lato', sans-serif; - font-weight: 300; - min-height: 60vh; - min-width: 100vw; - } - - #column1 { - background-color: black; - display:none; - } - - - #footer-logo { - height: auto; - width: 100%; - text-align: center; - padding-left: 20%; - padding-top: 5%; - padding-bottom:5%; - padding-right: 20%; - } - - #column2 { - display:flex; - flex-direction: column; - text-align: center; - grid-column: 1; - } - - #column2 ul { - list-style: none; - text-align: center; - } - - #column2 ul li p a { - text-decoration:none; - color:white; - font-weight: 400; - font-size: 2.25vh; - } - - #column2 ul li { - margin: 4.4vh - } - - h6 { - font-size: 2.85vh; - text-transform: uppercase; - font-weight: 300; - } - - #column2 ul li a:hover { - color: hsl(160, 100%, 90%); - } - - #column3 { - display:flex; - flex-direction: column; - } - - #column3 h6 { - text-align: center; - } - - #column3 ul { - list-style: none; - text-align: center; - } - - #column3 ul li p a { - text-decoration:none; - color:white; - font-weight: 400; - font-size: 2.35vh; - } - - #column3 ul li { - text-align: center; - margin: 4.5vh; - } - - #column3 ul li a:hover { - color: hsl(160, 100%, 90%); - } - - #column4 { - display:flex; - flex-direction: column; - text-align: center; - } - - #column4 p { - font-size: 2.35vh; - font-weight: 300; - line-height: 4vh; - margin-top: 4.5vh; - text-align: center; - } - - #column5 { - display:flex; - flex-direction: column; - text-align: center; - } - - #social-media ul { - margin-top: 4.5vh - } - - #social-media ul li { - display:inline; - list-style-type: none; - padding-left: 9%; - } - - #social-media ul li .youtube { - padding-left: 0; - } - - .follow { - margin-left:10%; - - } - - #youtube { - height: auto; - width: 2vw; - } - - #instagram { - height:auto; - width: 3vw; - } - - #gitea { - height:auto; - width: 3vw; - } - - #row2 { - color: white; - grid-column: 2/4; - margin-top:5%; - } - - #row2 p { - text-align: center; - padding-top:2%; - cursor: pointer; - } - - .arrow .down { - display:none; - } - - #dropdown { - display:none; - } - - .ham-btn { - display:none; - } - - .hamburger { - display: none; - } - - .hamburger-icon { - display: none; - } - - #mobile-dropdown-container { - display: none; - } - - #name { - display:none; - } - -/*Content-section*/ - - #content { - display: grid; - grid-template-columns: 100%; - grid-template-rows: auto auto auto auto auto auto; - grid-template-areas: - "elevator" - "experiments" - "spider" - "permaculture" - "greentech" - "about" - "news"; - font-family: 'Lato', sans-serif; - font-weight: 400; - grid-gap: 0.2em; - width: 100%; - } - - .section1 { - grid-area: elevator; - color: white; - display:grid; - grid-template-columns: 50% 50%; - grid-template-rows: 25% 25% 25% 25%; - height: 65vh; - width: 100vw; - } - - .section1 #title { - grid-column: 1; - grid-row: 1/4; - display:flex; - align-items: center; - justify-content: center; - } - - .section1 #title h3 { - height:auto; - color: #000; - font-size: 5vw; - padding-left:.1em; - text-shadow: 5px 5px #fff; - text-transform: uppercase; - font-family: 'IBM Plex Sans', sans-serif; - } - - .section1 #slogan { - grid-column: 1; - grid-row: 3/4; - margin-bottom: 0; - margin-top: 5vh; - display: flex; - justify-content: center; - flex-direction: column; - cursor: pointer; - } - - .section1 #slogan:hover { - opacity: 60%; - } - - .section1 #slogan h2 { - font-size: 6vh; - text-transform: uppercase; - z-index:2; - color: transparent; - -webkit-text-stroke-width: 2px; - -webkit-text-stroke-color: #000; - font-family: 'IBM Plex Sans', sans-serif; - text-align: center; - padding-top: 5vh; - transition: ease-in-out 2s; - } - - .section1 #slogan a { - text-decoration: none; - display: flex; - flex-direction: column; - } - - .section1 #slogan h2:hover { - color: hsl(160, 51%, 49%); - } - - .section1 #slogan .fa-caret-down { - color: #000; - font-size: 6vh; - align-self: center; - cursor: pointer; - transition: ease .2s; - } - - .section1 #slogan .fa-caret-down:hover { - opacity:50%; - } - - .section1 #product { - grid-column: 2; - grid-row: 1/5; - display: flex; - justify-content: flex-start; - align-items: flex-start; - } - - #product a { - padding-top: 10vh; - } - - #product img { - min-height: 50vh; - opacity: 85%; - } - - - .section1 #image { - grid-column: 1/5; - grid-row: 1/5; - display:flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - margin-top:0; - z-index: -1; - width: 120vw; - } - - .section1 #image #leaves { - width: 100%; - height: auto; - opacity:1; - z-index:-1; - opacity: 50%; - } - - .section1 #about { - grid-column:1; - grid-row: 3/4; - display: flex; - align-items: center; - flex-direction: column; - padding-top: 5vh; - display:none; - } - - .section1 #about a { - text-decoration: none; - color: #fff; - padding: 5px 5px 5px 5px; - font-size: 2.5em; - text-shadow: 1px 1px rgb(0, 255, 170); - font-weight:600; - transition: .5s; - text-transform: uppercase; - } - - .section1 #about a:hover{ - color:magenta; - opacity: 50%; - } - - .section1 #about a:active{ - color:magenta; - opacity: 50%; - } - - .section1 #about .fas { - color: magenta; - } - - .pages-container { - background-color: #333; - padding-top: 2.5vh; - } - - .strip { - background-color: white; - border-radius: 25px; - z-index: 10000; - margin: 5vh; - } - - .section2 { - grid-area:experiments; - color:#333; - display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: 25% 25% 25% 25%; - min-height: 90vh; - box-shadow: 1px 1px 5px 3px rgb(0, 255, 170); - border-radius: 25px; - padding: 1.5vh 0; - } - - .section2 .image-slider { - grid-column: 2; - grid-row: 1/5; - display: flex; - align-items: center; - justify-content: center; - position: relative; - } - - .slider-items { - - align-self: center; - padding-top: 1em; - } - - .section2 .slider-items .item img { - max-width: 100%; - display: block; - border: .5em solid white; - margin: 1em; - } - - .item #sample{ - max-width: 30vh; - } - - .section2 .slider-items .item { - display: none; - } - - .section2 .slider-items .item.active { - display: block; - } - - .section2 .image-slider .left-slide { - background-color: transparent; - border-radius: 50%; - position:absolute; - height:50px; - width:50px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - margin-top: -20px; - left: 10%; - cursor: pointer; - transition: all .5s ease; - } - - #dark{ - font-size: 2em; - color: #333; - } - - .section2 .image-slider .left-slide:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section2 .image-slider .right-slide { - background-color: transparent; - border-radius: 50%; - height:50px; - width:50px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - margin-top: -20px; - right:10%; - cursor: pointer; - transition: all .5s ease; - } - - .fas.fa-angle-right { - font-size: 2em; - color: #333; - } - - .section2 .image-slider .right-slide:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section2 h1 { - grid-column: 1; - grid-row: 1; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 10vh; - line-height: 80px; - letter-spacing: .5px; - padding: 6vh 0 4vh 8vh; - text-transform: uppercase; - font-weight: 800; - display: flex; - align-self: center; - color: white; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: black; - } - - .section2 p { - grid-column: 1; - grid-row: 2/3; - font-size: 2.65vh; - padding: 1.75rem 3.5rem; - color: rgb(62, 190, 147); - line-height: 6vh; - text-align: center; - } - - .section2 .page-button { - grid-column:1 ; - grid-row: 4; - display:flex; - align-items: center; - justify-content: center; - padding-bottom: 5vh; - } - - .section2 .page-button a { - text-decoration: none; - background-color: #fff; - color: #000; - border: .01em solid #000; - padding: .35em 1.5em; - border-radius: 25px; - text-align: center; - font-size: 1.45rem; - font-family: 'IBM Plex Sans', sans-serif; - font-weight: 390; - text-transform: uppercase; - transition: all .5s ease; - align-self: center; - } - - .section2 .page-button a:hover { - opacity: 50%; - color: hsl(160, 51%, 80%); - } - - #black { - background-color: black; - border-radius: 25px; - z-index: 10000; - min-height: 90vh; - margin: 5vh; - } - - - .section3 { - grid-area:spider; - color: #eee; - display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: 25% 25% 25% 25%; - min-height: 95vh; - box-shadow: 1px 1px 5px 3px rgb(0, 255, 170); - border-radius: 25px; - padding: 1.5vh 0; - } - - .section3 .spider-slider { - grid-column: 2; - grid-row: 1/5; - max-width: 700px; - display: flex; - align-items: center; - justify-content: center; - position: relative; - } - - - .section3 .spider-items .item img { - max-width: 35vw; - display: flex; - align-self: center; - justify-self: center; - } - - .section3 .spider-items .item { - display: none; - } - - .section3 .spider-items .item.active { - display: block; - } - - .section3 .spider-slider #spider-left { - background-color: transparent; - border-radius: 50%; - position:absolute; - height:50px; - width:50px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - margin-top: -20px; - left: 3%; - cursor: pointer; - transition: all .5s ease; - } - - .fas.fa-angle-left { - font-size: 2em; - color: #eee; - } - - .section3 .spider-slider #spider-left:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section3 .spider-slider #spider-right { - background-color: transparent; - border-radius: 50%; - height:50px; - width:50px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - margin-top: -20px; - right: 3%; - cursor: pointer; - transition: all .5s ease; - /*SlideShow Javascript!!!*/ - } - - .fas.fa-angle-right { - font-size: 2em; - color: #eee; - } - - .section3 .spider-slider #spider-right:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section3 h1 { - grid-column: 1; - grid-row: 1; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 10vh; - line-height: 80px; - letter-spacing: .5px; - text-transform: uppercase; - display: flex; - align-self: center; - justify-self: center; - padding: 6vh 0 4vh 8vh; - color: #000; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #fff; - } - - .section3 p { - grid-column: 1; - grid-row: 2/3; - font-size: 1.25rem; - padding: 2vh 5vh; - color: hsl(160, 51%, 60%); - line-height: 6vh; - font-weight: 400; - text-align: center; - } - - .section3 .page-button { - grid-column:1 ; - grid-row:4; - display:flex; - align-items: center; - justify-content: center; - padding-top: 3.5rem; - padding-bottom: 5vh; - } - - .section3 .page-button a { - text-decoration: none; - background-color: #000; - border: .01em solid #fff; - color: #fff; - padding: .35em 1em; - border-radius: 27px; - text-align: center; - font-size: 1.5em; - font-family: 'IBM Plex Sans', sans-serif; - font-weight: 390; - text-transform: uppercase; - transition: ease .5s ; - align-self: center; - } - - .section3 .page-button a:hover { - color: hsl(160, 51%, 80%); - } - - .section4 { - grid-area: permaculture; - color: #333; - display: grid; - grid-template-columns: 40% 60%; - grid-template-rows: 25% 25% 25% 25%; - min-height: 95vh; - box-shadow: 1px 1px 5px 3px rgb(0, 255, 170); - border-radius: 25px; - padding: 1.5vh 0; - } - - .section4 .image-slider { - grid-column: 1; - grid-row: 1/5; - display: flex; - align-items: center; - justify-content: center; - position: relative; - } - - .section4 .slider-items .item img { - max-height: 60vh; - display: flex; - align-self: center; - justify-self: center; - } - - .section4 .slider-items .item { - display: none; - } - - .section4 .slider-items .item.active { - display: block; - } - - .section4 .image-slider .left-slide { - background-color:black; - border-radius: 50%; - position:absolute; - height:50px; - width:50px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - margin-top: -20px; - left:15%; - cursor: pointer; - transition: all .5s ease; - display:none; /*SlideShow Javascript!!!*/ - } - - .fas.fa-angle-left { - font-size: 2em; - } - - .section4 .image-slider .left-slide:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section4 .image-slider .right-slide { - background-color:black; - border-radius: 50%; - height:50px; - width:50px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - margin-top: -20px; - right:15%; - cursor: pointer; - transition: all .5s ease; - display:none; /*SlideShow Javascript!!!*/ - } - - .fas.fa-angle-right { - font-size: 2em; - } - - .section4 .image-slider .right-slide:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section4 h1 { - grid-column: 2; - grid-row: 1; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 9.5vh; - line-height: 80px; - letter-spacing: .5px; - padding: 6vh 6vh 4vh 0; - text-transform: uppercase; - font-weight: 800; - display: flex; - align-self: center; - justify-self: center; - color: white; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: black; - } - - - .section4 p { - grid-column: 2; - grid-row: 2/3; - font-size: 1.25rem; - line-height: 6vh; - padding: 2em; - color: rgb(62, 190, 147); - font-weight: 300; - text-align: center; - justify-self: center; - } - - .section4 .page-button { - grid-column:1 ; - grid-row:3; - display:flex; - align-items: center; - grid-column: 2; - grid-row: 4; - display: flex; - justify-content: center; - align-items: center; - padding-bottom: 5vh; - } - - .section4 .page-button a { - text-decoration: none; - background-color: #fff; - color: #000; - border: 0.01em solid #000; - padding: .25em 1em; - border-radius: 27px; - text-align: center; - font-size: 1.5em; - font-family: 'IBM Plex Sans', sans-serif; - font-weight: 390; - text-transform: uppercase; - margin-top: 6vh; - transition: ease .5s ; - } - - .section4 .page-button a:hover { - opacity: 90%; - background-color:hsl(160, 50%, 90%) - } - - - .section5 { - grid-area:greentech; - color: #eee; - display:grid; - grid-template-columns: 40% 60%; - grid-template-rows: 25% 25% 25% 25%; - min-height: 90vh; - box-shadow: 1px 1px 5px 3px rgb(0, 255, 170); - border-radius: 25px; - padding: 1.5vh 0; - } - - .section5 .image-slider { - grid-column: 1; - grid-row: 1/5; - display: flex; - align-items: flex-start; - justify-content: center; - position: relative; - align-self: center; - } - - .section5 .slider-items .item img { - max-height: 60vh; - display: flex; - align-self: center; - justify-self: center; - } - - .section5 .slider-items .item { - display: none; - } - - .section5 .slider-items .item.active { - display: block; - } - - .section5 .image-slider .left-slide { - background-color:black; - border-radius: 50%; - position:absolute; - height:50px; - width:50px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - margin-top: -20px; - left:10%; - cursor: pointer; - transition: all .5s ease; - display: none; - } - - .fas.fa-angle-left { - font-size: 2em; - } - - .section5 .image-slider .left-slide:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section5 .image-slider .right-slide { - background-color:black; - border-radius: 50%; - height:50px; - width:50px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - margin-top: -20px; - right:10%; - cursor: pointer; - transition: all .5s ease; - /*SlideShow Javascript!!!*/ - display: none; - } - - .fas.fa-angle-right { - font-size: 2em; - } - - .section5 .image-slider .right-slide:hover { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section5 h1 { - grid-column: 2; - grid-row: 1; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 10vh; - line-height: 80px; - letter-spacing: .5px; - text-transform: uppercase; - display: flex; - align-self: center; - justify-self: center; - padding: 6vh 6vh 4vh 0; - color: #000; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #fff; - } - - .section5 p { - grid-column: 2; - grid-row: 2/3; - font-size: 1.25rem; - line-height: 6vh; - padding: 3.25rem 3.5rem 3rem 0; - color: hsl(160, 51%, 60%); - font-weight: 400; - text-align: center; - justify-self: center; - } - - .section5 .page-button { - grid-column:2 ; - grid-row:4; - display:flex; - align-items: center; - justify-content:center; - padding-bottom: 6vh; - padding-right: 1.5em; - } - - .section5 .page-button a { - text-decoration: none; - background-color: #000; - color: #fff; - border: 0.01em solid #fff; - padding: .35em 1.5em; - border-radius: 27px; - text-align: center; - font-size: 1.35em; - font-family: 'IBM Plex Sans', sans-serif; - text-transform: uppercase; - font-weight: 390; - margin: 1em; - transition: ease .5s ; - } - - .section5 .page-button a:hover { - opacity: 90%; - color: hsl(160, 100%, 90%); - } - - .section6 { - grid-area: about; - color: #eee; - display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: 25% 25% 25% 25%; - min-height: 90vh; - box-shadow: 1px 1px 5px 3px rgb(0, 255, 170); - border-radius: 25px; - padding: 5vh 0 0 0; - } - - .section6 .image-slider { - grid-column: 2; - grid-row: 1/4; - display: flex; - align-items: center; - justify-content: center; - position: relative; - } - - .section6 .slider-items .item img { - max-height: 60vh; - display: flex; - align-self: center; - justify-self: center; - } - - .section6 h1 { - grid-column: 1; - grid-row: 1; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 10vh; - line-height: 80px; - letter-spacing: .5px; - padding: 1em 0 .5em 0; - margin-left: .1em; - text-transform: uppercase; - display: flex; - align-self: center; - justify-self: center; - padding-top: 4rem; - color: #000; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #fff; - } - - .section6 p { - grid-column: 1; - grid-row: 2/3; - font-size: 1.25rem; - padding: 2.5em 3.5rem 1.5rem 3.5rem; - color: hsl(160, 51%, 60%); - line-height: 6vh; - font-weight: 400; - text-align: center; - justify-self: center; - } - - .section6 .page-button { - grid-column: 1 ; - grid-row: 4; - display:flex; - align-items: center; - justify-content: center; - padding-bottom: 5vh; - } - - .section6 .page-button a { - text-decoration: none; - background-color:#000; - color:#fff; - border: 0.01em solid #fff; - padding: .25em 1em; - border-radius: 27px; - text-align: center; - font-size: 1.5em; - font-family: 'IBM Plex Sans', sans-serif; - margin: 1em; - font-weight: 390; - text-transform: uppercase; - transition: ease .5s; - } - - .section6 .page-button a:hover { - opacity: 90%; - color: hsl(160, 51%, 80%); - } - - .section7 { - grid-area: news; - color:black; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: .2fr 1fr; - padding: 2vh 5vh 5vh 5vh; - height: 105vh; - } - - .section7 h1 { - display: flex; - justify-content: flex-start; - align-items: center; - grid-row:1; - margin-left: 5rem; - color: #fff; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #000; - font-size: 7vh; - font-weight: 200; - } - - .section7 .news { - grid-row: 2/4; - max-width: 85vw; - } - - .news 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; - grid-row: 1; - font-weight: 100; - } - - .news img { - width: 45vh; - margin-bottom: 3vh; - } - - - .news p { - text-align: center; - margin: 1rem; - } - - #insta { - padding: 0; - background-color:transparent; - border: none; - cursor: pointer; - transition: .3s; - margin-top: 0; - margin-left: 0; - transition: .5s; - } - - #you { - padding: 0; - background-color:transparent; - border: none; - font-weight: 600; - cursor: pointer; - transition: .3s; - margin-top: 0; - margin-left: 0; - transition: .5s; - } - - .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; - min-height: 80vh; - grid-gap: 2.5vh; - box-shadow: 1px 1px 5px 3px hsl(160, 100%, 90%); - padding: 2rem; - height: 80vh; - border-radius: 25px; - } - - #post_1 { - - grid-column: 1; - grid-row: 2; - max-width: 25vw; - } - - #post_2 { - - grid-column: 2; - grid-row: 2; - max-width: 25vw; - } - - #post_3 { - - grid-column: 3; - grid-row: 2; - max-width: 25vw; - } - - .social h5 { - grid-column: 1/3; - grid-row: 1; - justify-self: flex-start; - font-size: 5vh; - font-family:'IBM Plex Sans', sans-serif; - text-transform: uppercase; - padding: 1vh; - font-weight: 200; - - } - - .social .instagram { - grid-column: 1/3; - grid-row: 3; - display: flex; - padding-left: 2vh; - } - - .social .instagram a { - display:flex; - text-decoration: none; - color: #333; - } - - #gram { - width: 8vh; - margin-right: 5vh; - transition: all 0.5s ease; - margin-bottom: 0 !important; - filter: opacity(0.5); - } - - #gram:hover, #gram:active { - background-color: hsl(160, 100%, 80%) !important; - border-radius: 50%; - filter:opacity(1); - } - - .social .instagram #account { - font-size: 1.75rem; - align-self: center; - text-shadow: none; - font-weight: 100; - } - - .social .instagram #account:hover { - opacity: 50%; - } - - .social .youtube { - grid-column: 1/3; - grid-row: 4; - display: flex; - padding-left: 2vh; - margin: 0; - } - - .social .youtube a { - display:flex; - text-decoration: none; - color: #333; - } - - #tube { - width: 7vh; - margin-right: 5vh; - transition: all 0.5s ease; - filter: opacity(0.5) - } - - #tube:hover { - background-color: hsl(300, 100%, 80%); - border-radius: 50%; - filter: opacity(1); - } - - - .social .youtube #account { - font-size: 1.75rem; - align-self: center; - text-shadow: none; - font-weight: 100; - } - - .social .youtube #account:hover { - opacity: 50%; - } - - .social button { - padding: .5rem 1.25rem; - background-color: transparent; - border: none; - font-size: 1.25rem; - font-family:'Fira Sans', sans-serif; - line-height: 1rem; - border-radius: 50%; - font-weight: 600; - cursor: pointer; - transition: .3s; - margin-top: 1rem; - margin-left: .25rem; - transition: .5s; - } - - .social button a { - text-decoration: none; - color: white; - } -} - -/* Adjust Media Queries ! */ - -@media (max-width: 768px) { - - body { - background-color: white; - } - - .top-bar { - display: none; - } - - .main-navigation-bar { - display: none; - } - - .wrapper { - grid-template-columns: 100%; - grid-template-rows: auto auto auto; - grid-template-areas: - "main-bar" - "main" - "footer"; - font-family: 'Fira Sans', sans-serif; - font-weight:500; - display:grid; - } - - #main-bar { - grid-area: main-bar; - background-color: black; - display: flex; - justify-content: flex-start; - border-bottom: 3px solid rgb(62, 190, 147); - padding: 0 0; - } - - .logo { - width: auto; - height: 17.5vh; - padding: 1vh 0 0 .5vh; - } - - #main-bar h3 { - color: white; - text-transform: uppercase; - padding-top:0; - font-size: 13px; - margin-left:10%; - margin-bottom: 10%; - font-weight: 300; - display: none; - } - - .hamburger-wrap { - float: right; - padding-top:0;; - width: 80vw; - margin-right: 1vh; - align-self: center; - } - - .hamburger { - padding: 25px 25px !important; - display:block; - float:right; - cursor:pointer; - } - - .hamburger .hamburger-icon { - width: 7.5vw; - height: 2.5px; - background-color:white; - display: block; - position:relative; - } - - .hamburger .hamburger-icon::before, - .hamburger .hamburger-icon::after { - content:''; - width:100%; - height:100%; - background-color: white; - display: block; - position:absolute; - } - - .hamburger .hamburger-icon::after { - top: -7px; - } - - .hamburger .hamburger-icon::before { - top: 7px; - } - - .ham-btn { - display:none; - } - - .ham-btn:checked .hamburger .hamburger-icon { - transform: rotate(45deg); - } - - #mobile-dropdown-container { - background-color: black; - position: absolute; - width: 100%; - display: block; - z-index: 2; - padding-bottom: 0; - margin-left:0; - } - - #mobile-dropdown { - margin: 1em; - display: none; - } - - #mobile-dropdown ul { - list-style:none; - } - - #mobile-dropdown ul li { - margin: 2vh 0 5vh 0; - display:flex; - flex-direction: column; - } - - #mobile-dropdown ul li a { - color :white; - text-decoration:none; - font-size: 3vh; - font-weight: 700; - line-height: 1.8em; - justify-self: center; - align-self: center; - } - - #mobile-dropdown ul li a:hover ,#mobile-dropdown ul li a:active { - color: rgb(0, 255, 170); - } - - #mobile-dropdown ul li ul li a { - color: white; - } - - .drop { - display: flex; - justify-self: center; - align-self: center; - } - - #down li { - margin: 1vh 0 2vh 0 !important; - } - - #down li a { - margin-bottom: 0 !important; - } - - .languages a { - color: white; - font-size: 10px; - } - - .languages a:active { - color: rgb(0, 255, 170); - } - - .arrow { - border: solid white; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 3px; - cursor: pointer; - transition: .1s; - } - - .down { - transform: rotate(45deg); - } - - - main { - grid-area: main; - } - - footer { - grid-area:footer; - background-color: yellow; - } - - #footer-wrapper { - grid-template-columns: 50% 50%; - grid-template-rows: .5fr 0.1fr 0.1fr 0.1fr 0.1fr; - display: grid; - background-color:black; - } - - #column1 { - grid-row: 1; - grid-column: 1; - display: flex; - justify-content: center; - } - - #footer-logo { - width:80%; - height:auto; - text-align: center; - padding-left: 20%; - padding-top: 1%; - padding-right: 20%; - padding-bottom:1%; - } - - #column1 a { - color: white; - text-decoration: none; - text-transform: uppercase; - margin-left: 0; - font-size:100%; - padding-top:5%; - padding-bottom:5%; - display:flex; - } - - #column1 a:hover { - color: #4dff88; - } - - #column2 { - grid-column:1/3; - grid-row: 2; - margin-top:0; - border-top:1px solid white; - padding: 5% 7.5% 5% 5%; - border-bottom:1px solid white; - } - - #column2 ul { - display:none; - position: relative; - width:100%; - overflow:auto; - z-index: 1; - list-style : none; - flex-direction: column; - text-align: center; - box-shadow: 1px 1px 3px 1px hsl(160, 100%, 50%); - border-radius: 25px; - padding: .9em; - } - - #column2 ul li p a { - text-decoration:none; - color:white; - } - - #column2 ul li p a:active { - color: hsl(160, 100%, 50%); - filter: blur(1px); - } - - #column2 ul li { - margin: .5em 0; - } - - h6 { - font-size: 2vh; - padding-bottom: 6%; - text-transform: uppercase; - color:white; - display: flex; - justify-content: space-between; - } - - .arrow { - border: solid white; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 3px; - transition: .2s; - } - - .down { - transform: rotate(45deg); - position: relative; - margin-left: 55%; - } - - .down2 { - transform: rotate(45deg); - position: relative; - margin-left:73%; - } - - #column3 { - grid-column: 1/3; - grid-row: 3; - margin-top:0; - border-top:1px solid white; - padding-top:5%; - padding-bottom:4%; - padding-left: 5%; - padding-right: 5%; - border-bottom:1px solid white; - } - - #column3 ul { - display:none; - position: relative; - width:100%; - overflow:auto; - z-index: 1; - list-style : none; - box-shadow: 1px 1px 3px 1px hsl(160, 100%, 50%); - border-radius: 25px; - padding: .5em; - text-align: center; - justify-content: space-evenly; - } - - #column3 ul li { - margin: .5em 0; - } - - #column3 ul li p a { - text-decoration:none; - color:white; - } - - #column4 { - grid-column: 1/3; - grid-row:4; - border-bottom: solid white 1px; - } - - #column4 p { - display:flex; - align-items: center; - justify-content: space-evenly; - padding-bottom: 1%; - padding-top: 1%; - color:white; - font-size:100%; - } - - #column4 h6 { - display:none; - } - - #column5 { - grid-column:2; - grid-row: 1; - margin-top:15%; - padding-bottom: 10%; - display:flex; - align-items: center; - } - - #social-media ul li { - display:inline; - list-style-type: none; - padding-left: 2.5vh; - padding-bottom: 5%; - } - - #column5 h6 { - display:none; - } - - #gitea { - width: 5vh; - height:auto; - } - - #gitea:active, #gitea:hover { - filter: blur(.75px); - } - - #youtube { - height: auto; - width: 4vh; - } - - #youtube:active, #youtube:hover { - filter: blur(.75px); - } - - #instagram { - height:auto; - width: 5vh; - } - - #instagram:active, #instagram:hover { - filter: blur(.75px); - } - - #row2 { - grid-column:1; - grid-row:5; - display:flex; - align-items:center; - justify-content:center; - margin-top:0; - margin-bottom:5%; - margin-top:5%; - background-color: black; - } - - #row2 p { - align-items: center; - padding-top:0; - font-size: 50%; - color:white; - } - - #row3 { - grid-column: 2; - grid-row: 5; - } - - /*Content Section*/ - - #content { - display: grid; - grid-template-columns: 100%; - grid-template-rows: auto auto auto auto auto auto; - grid-template-areas: - "elevator" - "experiments" - "spider" - "permaculture" - "greentech" - "about" - "news"; - font-family: 'Fira Sans', sans-serif; - font-weight:500; - grid-gap: 0.2em; - width: 100%; - } - - .section1 { - grid-area: elevator; - color: white; - border-top: 3px solid white; - display:grid; - grid-template-columns: 50% 50%; - grid-template-rows: 20% 25% 25% 30%; - grid-gap: 0.2em; - width: 100%; - height: 75vh; - } - - .section1 #title { - grid-column: 1/3; - grid-row: 1/3; - display:flex; - align-items: center; - justify-content: center; - } - - .section1 #title h3 { - height:auto; - color: #000; - font-size: 6.5vh; - font-family: 'IBM Plex Sans', sans-serif; - text-shadow: 5px 5px hsl(300, 100%, 80%); - text-transform: uppercase; - } - - .section1 #slogan { - grid-column: 1/3; - grid-row: 3/5; - margin-bottom: 0; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - margin-top: 7.5vh; - cursor: pointer; - } - - .section1 #slogan a { - display: flex; - flex-direction: column; - text-decoration: none; - align-items: center; - } - - .section1 #slogan h2 { - font-size: 4.5vh; - text-transform: uppercase; - padding-right: .1em; - padding-bottom:1vh; - color: #000; - font-family: 'IBM Plex Sans', sans-serif; - text-align: center; - padding-top: 5vh; - transition: ease; - } - - .section1 #slogan h2:active { - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: hsl(160, 51%, 60%); - } - - .section1 #slogan a .fa-caret-down { - color: #000; - font-size: 7vh; - justify-self: center; - } - - .section1 #slogan a .fa-caret-down:active { - color: hsl(160, 51%, 49%); - } - - - .section1 #image { - grid-column: 1/3; - grid-row:1/5; - display:flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - margin-top:0; - z-index: -1; - } - - .section1 #image #leaves { - width: auto; - height: 85vh; - z-index:-1; - opacity: 35%; - } - - .section1 #about { - grid-column:1; - grid-row: 4; - align-self: center; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding-bottom: 1.5em; - display: none; - } - - - .section1 #about a { - text-decoration: none; - color: hsl(300, 100%, 80%); - padding: 5px 5px 5px 5px; - font-size: 3.5vh; - text-shadow: .75px .75px #000; - font-weight:600; - text-transform: uppercase; - margin-left: 1.5vh; - display: flex; - flex-direction: column; - align-items: center; - } - - .section1 #about a .svg-inline--fa.fa-w-14 { - color: hsl(300, 100%, 80%); - cursor: pointer; - } - - .section1 #about a .svg-inline--fa.fa-w-14:active { - filter: blur(.5px); - color: hsl(160, 100%, 80%); - } - - .section1 #about a:active { - filter : blur(.5px) - } - - .section1 #product { - grid-column: 1/3; - grid-row: 3/4; - display: flex; - justify-content: center; - align-items: center; - padding-top: 7.5vh; - } - - .section1 #product a { - cursor: pointer; - } - - .section1 #product img { - max-height: 40vh; - } - - .pages-container { - background-color: #000; - padding-top: 2vh; - overflow-x: hidden; - } - - .strip { - background-color: white; - border-radius: 25px; - z-index: 10000; - min-height: 90vh; - margin: 5vh; - } - - - .section2 { - grid-area:experiments; - display:grid; - grid-template-columns: 100%; - grid-template-rows:auto auto auto auto; - padding-top: 2vh; - margin-bottom: .5em; - width: 100%; - min-height: 95vh; - color: rgb(62, 190, 147); - font-weight: 600; - } - - .section2 .image-slider { - grid-column: 1; - grid-row: 1; - display: flex; - justify-content: center; - position: relative; - width: 25vh; - height: 35vh; - justify-self: center; - } - - - .section2 .slider-items .item img { - max-width: 100%; - display: flex; - position: absolute; - } - - .section2 .slider-items .item #sample { - max-width: 30vw; - padding-top: 10vh; - } - - .section2 .slider-items .item { - display: none; - } - - .section2 .slider-items .item.active { - display: flex; - justify-self: center; - align-self: center; - justify-content: center; - } - - .section2 .image-slider .left-slide { - background-color: transparent; - border-radius: 50%; - position:absolute; - height: 45px; - width: 45px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - right: 23vh; - cursor: pointer; - transition: all .5s ease; - } - - .fas.fa-angle-left { - font-size: 2em; - color: #fff; - } - - .section2 .image-slider .left-slide:active { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section2 .image-slider .right-slide { - background-color:transparent; - border-radius: 50%; - height: 45px; - width: 45px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - left: 23vh; - cursor: pointer; - transition: all .5s ease; - } - - .fas.fa-angle-right { - font-size: 2em; - color: #fff; - } - - .section2 .image-slider .right-slide:active { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section2 h1 { - grid-column: 1; - grid-row: 2; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 5vh; - letter-spacing: .5px; - padding-top: 1vh; - text-transform: uppercase; - text-align: center; - color: #000; - } - - - .section2 p { - grid-column: 1; - grid-row: 3; - font-size:2.5vh; - padding: .5vh 3vh; - padding-bottom: 0; - text-align: center; - line-height: 1.5; - font-weight: 200; - } - - #desktop { - display: none; - } - - .section2 .page-button { - grid-column:1 ; - grid-row:4; - display:flex; - align-items: center; - justify-content: center; - margin: 2.5vh 0 5vh 0; - transition: all .5s ease; - } - - .section2 .page-button a { - text-decoration: none; - background-color: #000; - color:white; - padding: .75vh 2.75vh; - margin-left: 1vh; - border-radius: 27px; - margin-right: 4%; - text-align: center; - font-size: 3.5vh; - font-family: 'IBM Plex Sans', sans-serif; - text-transform: uppercase; - font-weight: 390; - } - - .section2 .page-button a:active { - opacity: 50%; - background-color: hsl(160, 51%, 80%); - color: #333; - } - - .strip2 { - background-color: #fff; - border-radius: 25px; - z-index: 10000; - min-height: 90vh; - margin: 5vh; - } - - .section3 { - grid-area:spider; - display:grid; - grid-template-columns: 100%; - grid-template-rows:auto auto auto auto; - padding-top: 2vh; - margin-bottom: .5em; - color: #0000; - width: 100%; - min-height: 95vh; - } - - .section3 .spider-slider { - grid-column: 1; - grid-row: 1; - display: flex; - justify-content: center; - position: relative; - width: 40vh; - height: 30vh; - justify-self: center; - } - - .section3 .spider-items .item img { - max-width: 100%; - display: flex; - position: absolute; - } - - .section3 .spider-items .item { - display: none; - } - - .section3 .spider-items .item.active { - display: flex; - justify-self: center; - align-self: center; - justify-content: center; - } - - #pic1 { - height: 35vh; - width: 40vh; - } - - .section3 .spider-slider #spider-left { - background-color: transparent; - border-radius: 50%; - position:absolute; - height: 45px; - width: 45px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - left: -3.5vh; - cursor: pointer; - transition: all .5s ease; - display: none; - } - - .fas.fa-angle-left { - font-size: 2em; - color: #999; - } - - .fas.fa-angle-left:active { - opacity: 50%; - color: rgb(0, 255, 170); - } - - .section3 .spider-slider #spider-left:active { - box-shadow: 0px 0px 10px magenta; - } - - .section3 .spider-slider #spider-right { - background-color: transparent; - border-radius: 50%; - height:45px; - width: 45px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - right: -5vh; - cursor: pointer; - transition: all .5s ease; - } - - .fas.fa-angle-right { - font-size: 2em; - color:#999; - } - - .fas.fa-angle-right:active { - opacity: 50%; - color: rgb(62, 190, 147); - } - - .section3 .spider-slider #spider-right:active { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section3 h1 { - grid-column: 1; - grid-row: 2; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 5.5vh; - letter-spacing: .5px; - padding-top: 2vh; - text-transform: uppercase; - text-align: center; - color: #000; - } - - .section3 p { - grid-column: 1; - grid-row: 3; - font-size:2.5vh; - padding: .5vh 3vh; - padding-bottom: 0; - text-align: center; - color: rgb(62, 190, 147); - font-weight: 600; - line-height: 1.5; - } - - .section3 .page-button { - grid-column:1 ; - grid-row:4; - display:flex; - align-items: center; - justify-content: center; - margin:1.5vh 0; - } - - .section3 .page-button a { - text-decoration: none; - background-color:#000; - color:white;; - padding: .75vh 2vh; - margin-left: 1vh; - border-radius: 27px; - margin-right: 4%; - text-align: center; - font-size: 3.5vh; - font-family: 'IBM Plex Sans', sans-serif; - font-weight: 800; - text-transform: uppercase; - } - - .section4 { - grid-area:permaculture; - display:grid; - grid-template-columns: 100%; - grid-template-rows:auto auto auto auto; - padding-top: 2.5vh; - margin-bottom: .5em; - color:#000; - width: 100%; - height: 98vh; - } - - .section4 .image-slider { - grid-column: 1; - grid-row: 1; - display: flex; - align-items: center; - justify-content: center; - position: relative; - width: 22.5vh; - height: auto; - justify-self: center; - } - - .section4 .slider-items .item img { - max-width: 100%; - display: flex; - } - - .section4 .slider-items .item { - display: none; - } - - .section4 .slider-items .item.active { - display: block; - } - - .section4 .image-slider .left-slide { - background-color:black; - border-radius: 50%; - position:absolute; - height:50px; - width:50px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - margin-top: -20px; - right:30vh; - cursor: pointer; - transition: all .5s ease; - display: none; - } - - .fas.fa-angle-left { - font-size: 2em; - } - - .section4 .image-slider .left-slide:active { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section4 .image-slider .right-slide { - background-color:black; - border-radius: 50%; - height:50px; - width:50px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - margin-top: -20px; - left: 35vh; - cursor: pointer; - transition: all .5s ease; - display: none; - } - - .fas.fa-angle-right { - font-size: 2em; - } - - .section4 .image-slider .right-slide:active { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section4 h1 { - grid-column: 1; - grid-row: 2; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 4.5vh; - letter-spacing: .5px; - padding: 2.5vh 0 2vh 0; - text-transform: uppercase; - text-align: center; - font-weight: 800; - } - - .section4 p { - grid-column: 1; - grid-row: 3; - font-size:2.5vh; - padding: .5vh 3vh; - padding-bottom: 0; - text-align: center; - color: rgb(62, 190, 147); - font-weight: 600; - line-height: 1.5; - } - - .section4 p span { - display: none; - } - - .section4 .page-button { - grid-column:1 ; - grid-row:4; - display:flex; - align-items: center; - justify-content: center; - margin: 2vh 0 2.5vh 0; - } - - .section4 .page-button a { - text-decoration: none; - background-color: #000; - color:white;; - padding: .75vh 2vh; - border-radius: 27px; - text-align: center; - font-size: 3.5vh; - font-family: 'IBM Plex Sans', sans-serif; - font-weight: 800; - text-transform: uppercase; - } - - - .section5 { - grid-area:greentech; - display:grid; - grid-template-columns: 100%; - grid-template-rows:auto auto auto auto; - padding-top: 2vh; - margin-bottom: .5em; - color: #000; - width: 100%; - height: 98vh; - } +} - .section5 .image-slider { - grid-column: 1; - grid-row: 1; - display: flex; - align-items: center; - justify-content: center; - position: relative; - width: 22.5vh; - height: auto; - justify-self: center; - } - - .section5 .slider-items .item img { - max-width: 100%; - display: flex; +.content { + height: 120vh !important; + width: 100vw; +} - } - - .section5 .slider-items .item { - display: none; - } - - .section5 .slider-items .item.active { - display: flex; - } - - .section5 .image-slider .left-slide { - background-color:black; - border-radius: 50%; - position:absolute; - height:50px; - width:50px; - top:50%; - display:flex; - justify-content: center; - align-items: center; - margin-top: -20px; - right:30vh; - cursor: pointer; - transition: all .5s ease; - display: none; - } - - .fas.fa-angle-left { - font-size: 2em; - } - - .section5 .image-slider .left-slide:active { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section5 .image-slider .right-slide { - background-color:black; - border-radius: 50%; - height:50px; - width:50px; - top: 50%; - display:flex; - justify-content: center; - align-items: center; - position:absolute; - margin-top: -20px; - left: 35vh; - cursor: pointer; - transition: all .5s ease; - display: none; - } - - - .section5 .image-slider .right-slide:active { - box-shadow: 0px 0px 10px rgb(0, 255, 170); - } - - .section5 h1 { - grid-column: 1; - grid-row: 2; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 5vh; - letter-spacing: .5px; - padding-top: 1.5vh; - text-transform: uppercase; - text-align: center; - font-weight: 800; - display: flex; - align-self: center; - justify-self: center; - } - - .section5 p { - grid-column: 1; - grid-row: 3; - font-size: 2.5vh; - padding: .5vh 3vh; - padding-bottom: 0; - color: rgb(62, 190, 147); - font-weight: 600; - line-height: 1.5; - text-align: center; - } +.content .container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(8, 1fr); + margin-top: .2rem; + font-family: 'Lato', sans-serif;; +} - .section5 p span { - display: none; - } - - .section5 .page-button { - grid-column:1 ; - grid-row:4; - display:flex; - align-items: center; - justify-content: center; - margin:1vh 0; - margin-bottom: 3vh; - } - - .section5 .page-button a { - text-decoration: none; - background-color:#000; - color:white;; - padding: .75vh 2vh; - border-radius: 27px; - text-align: center; - font-size: 3.5vh; - font-family: 'IBM Plex Sans', sans-serif; - font-weight: 800; - text-transform: uppercase; - } - +.container img { + height: 100%; + z-index: 0; + max-width: 100vw; + grid-column: 1/3; + grid-row: 1/9; + justify-self: center; +} - .section6 { - grid-area:about; - display:grid; - grid-template-columns: 100%; - grid-template-rows:auto auto auto auto; - padding-top: 2vh; - margin-bottom: .5em; - color: #000; - width: 100%; - height: 100vh; - } +.link { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr) +} - .section6 .image-slider { - grid-column: 1; - grid-row: 1; - display: flex; - align-items: center; - justify-content: center; - position: relative; - width:30vh; - height: auto; - justify-self: center; - } - - .section6 .slider-items .item img { - max-width: 100%; - display: flex; - } - - .section6 .slider-items .item { - display: none; - } - - .section6 .slider-items .item.active { - display: flex; - } - - .section6 h1 { - grid-column: 1; - grid-row: 2; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 5vh; - letter-spacing: .5px; - padding-top: 1vh; - text-transform: uppercase; - text-align: center; - color: rgb(62, 190, 147); - } - - .section6 p { - grid-column: 1; - grid-row: 3; - font-size:2.5vh; - padding: .5vh 3vh 0 3vh; - text-align: center; - font-weight: 600; - color: #000; - line-height: 1.5; - } +.link button { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + border: .1rem solid hsl(300, 100%, 50%); + background-color: hsl(300, 100%, 50%); +} - .section6 p span { - display: none; - } - - .section6 .page-button { - grid-column:1 ; - grid-row:4; - display:flex; - align-items: center; - justify-content: center; - margin:1vh 0 3vh 0; - } - - .section6 .page-button a { - text-decoration: none; - background-color:rgb(62, 190, 147); - color:white;; - padding: .75vh 2vh; - margin-left: 1vh; - border-radius: 27px; - margin-right: 4%; - text-align: center; - font-size: 3.5vh; - font-family: 'IBM Plex Sans', sans-serif; - font-weight: 800; - text-transform: uppercase; - } - +.link a { + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 1.25rem; + transition: all .5s ease-in-out; +} - .section7 { - grid-area: news; - color: black; - display: grid; - grid-template-columns: 100%; - grid-template-rows:.25fr 1fr 1fr 1fr; - } +.link button:active { + box-shadow: 0px 0px 10px hsl(300, 100%, 30%); +} - .section7 h1 { - color:#333; - display: flex; - justify-content: center; - margin: 2.5vh; - grid-column: 1; - grid-row: 1; - font-family: 'IBM Plex Sans', sans-serif; - font-size: 6vh; - text-transform: uppercase; - } +.link .sub_container { + display: none; +} - .news { - grid-row: 2/5; - } +.link .sub_container p { + font-size: .65rem; + text-align: center; + color: #333; + line-height: 2.25vh; + background-color: rgba(255, 255, 255, 0.7); + border-radius: .03rem; +} - .news h3 { - font-size: 1.5rem; - line-height: 3rem; - color: rgb(62, 190, 147); - margin: 1rem 0 0 1.5rem; - text-transform: uppercase; - font-family:'IBM Plex Sans', sans-serif; - } - - .news img { - width: 25vh; - margin: 0 0 1rem 3rem; - } - - .news 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; - } - - .news 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 magenta; - padding: 1rem; - min-height: 80vh; - border-radius: 25px; - } - - .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; - } +#hemp { + grid-column: 1/3; + grid-row: 1; + z-index: 2; +} - #insta { - padding: 0; - background-color:transparent; - border: none; - cursor: pointer; - transition: .3s; - margin-top: 0; - margin-left: 0; - } - - #gram { - width: 5vh; - margin: 0; - transition: .7s all ease; - } +#hemp button { + grid-column: 2; + grid-row: 2; + justify-self: start; + align-self: end; + margin-left: 2.4rem; + margin-bottom: .2rem; +} - #gram:active, #gram:hover { - border-radius: 50px; - background-color: hsl(160, 100%, 80%) - } - - #you { - padding: 0; - background-color:transparent; - border: none; - font-weight: 600; - cursor: pointer; - transition: .3s; - margin-top: 0; - margin-left: 0; - } - - #gram { - width: 9vh; - - } - - .social .instagram #account { - font-size: 2vh; - align-self: center; - text-shadow: none; - } - - .social .youtube { - grid-column: 1/3; - grid-row: 4; - display: flex; - justify-content: space-around; - } - - #tube { - width: 8vh; - margin: 0; - transition: .7s all ease; - } +#hemp .sub_container { + grid-column: 1; + grid-row: 2; +} - #tube:active, #tube:hover { - border-radius: 50px; - background-color: hsl(300, 100%, 80%); - } - - .social .youtube #account { - font-size: 2vh; - 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); - } - - .social #post { - width: 40vh; +@media (min-width: 992px) { + .content { + height: 250vh !important; + margin-top: 5rem; } - .desktop { - display: none; + #hemp { + z-index: 0; } -} - - - - - - - \ No newline at end of file +} \ No newline at end of file diff --git a/templates/assets/css/navigation.css b/templates/assets/css/navigation.css index 774b9b2..1c2b529 100644 --- a/templates/assets/css/navigation.css +++ b/templates/assets/css/navigation.css @@ -115,16 +115,15 @@ transition: all .7 ease; } -#down_5 { - bottom: 24%; - max-height: 40vh !important; +#down_3 { + margin-top: 4rem; } .desktop_navigation { display: none; } -@media (min-width:768px) { +@media (min-width: 992px) { .main_bar { z-index: 1; display: flex; @@ -203,6 +202,7 @@ #broader { min-width: 15vw; + z-index: 1; } .desktop_navigation ul li li { diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js index ebefeb6..e12de6c 100644 --- a/templates/assets/js/main.js +++ b/templates/assets/js/main.js @@ -10,7 +10,7 @@ document.getElementById("icon").addEventListener("click", function menu() { } ) -// show experiments submenu +// show hemp submenu document.getElementById("chevron_1").addEventListener("click", function menu() { var x= document.getElementById("down_1"); @@ -22,7 +22,7 @@ document.getElementById("chevron_1").addEventListener("click", function menu() { } ) -// permaculture submenu +// spider submenu document.getElementById("chevron_2").addEventListener("click", function menu() { var x= document.getElementById("down_2"); @@ -34,7 +34,7 @@ document.getElementById("chevron_2").addEventListener("click", function menu() { } ) -// greentech submenu +// offgrid submenu document.getElementById("chevron_3").addEventListener("click", function menu() { var x= document.getElementById("down_3"); @@ -46,22 +46,10 @@ document.getElementById("chevron_3").addEventListener("click", function menu() { } ) -// spiderpi submenu +// index -document.getElementById("chevron_4").addEventListener("click", function menu() { - var x= document.getElementById("down_4"); - if (x.style.display === "none") { - x.style.display = "flex";} - else { - x.style.display ="none"; - } - } -) - -// about submenu - -document.getElementById("chevron_5").addEventListener("click", function menu() { - var x= document.getElementById("down_5"); +document.getElementById("click").addEventListener("click", () => { + var x = document.getElementById("show"); if (x.style.display === "none") { x.style.display = "flex";} else { diff --git a/templates/home.html.tera b/templates/home.html.tera deleted file mode 100644 index e8d3d6a..0000000 --- a/templates/home.html.tera +++ /dev/null @@ -1,20 +0,0 @@ -{%extends "base"%} -{%block title %}Cannabinieri CBD{%endblock title %} -{%block head%} -{{super()}} - -{%endblock head%} -{{super()}} -{%block content%} -
We experiment with hemp
to understand our ecosystem
and produce 100% organic
CBD oils and flower
{{ hemp["de"] }}
Hanf ist unglaublich vielseitig.
Deshalb bauen wir ihn an.
Konsequent biologisch.