600 lines
22 KiB
HTML
600 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<!--<script src="scroll.min.js"></script>-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Knotenpunkt-Alpen</title>
|
|
<style>
|
|
|
|
|
|
@font-face {
|
|
font-family: "PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
font-family: var(--font-headings,"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);
|
|
font-weight: 700;
|
|
clear: both;
|
|
/*--src: url('assets/ShareTech-Regular.ttf') format('truetype');*/
|
|
/*font-weight: normal;
|
|
font-style: normal;*/
|
|
}
|
|
/*@import url('https://fonts.googleapis.com/css?family=Raleway:regular,bold,italic,bolditalic|Cabin:regular,bold,italic,bolditalic|');*/
|
|
:root {
|
|
--font-headings: Cabin;
|
|
--font-base: Raleway;
|
|
--font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
|
--font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
header {
|
|
font-family: "PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
/*font-family: var(--font-headings,"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);*/
|
|
/*font-weight: 900;*/
|
|
}
|
|
h1 {
|
|
font-family: "PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
/*font-family: var(--font-headings,"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);*/
|
|
/*font-weight: 1500;*/
|
|
text-align: center;
|
|
font-size: 60px;
|
|
margin: 0;
|
|
}
|
|
h2 {
|
|
font-family: "PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
/*font-family: var(--font-headings,"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);*/
|
|
/*font-weight: 1500;*/
|
|
text-align: center;
|
|
font-size: 40px;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
font-size: 17.3913px;
|
|
font-family: "Arial";
|
|
/*font-family: var(--font-base,"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);*/
|
|
line-height: 1.6;
|
|
font-style: normal;
|
|
text-align: center;
|
|
margin-right: 120px;
|
|
margin-left: 120px;
|
|
/*font-weight: 600pt;*/
|
|
}
|
|
button {
|
|
font-family: "Arial";
|
|
border: none;
|
|
font-size: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
nav {
|
|
position: fixed;
|
|
}
|
|
footer {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #303030;
|
|
}
|
|
.content {
|
|
padding-top: 80px;
|
|
}
|
|
.logo {
|
|
width: 300px;
|
|
}
|
|
.header_nav {
|
|
width: 100%; /* i'm assuming full width */
|
|
height: 90px; /* change it to desired width */
|
|
background-color: #ffffff; /* change to desired color */
|
|
|
|
}
|
|
|
|
.logo {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 240px;
|
|
height: 80px;
|
|
margin-right: 20px;
|
|
margin-left: 30px;
|
|
margin-top: 15px; /* if you want it vertically middle of the navbar. */
|
|
}
|
|
#hamitems > a{
|
|
float: right;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-right: 20px;
|
|
height: 90px; /* if you want it to take the full height of the bar */
|
|
line-height: 90px; /* if you want it vertically middle of the navbar */
|
|
color: #d9e1e8;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
transition: color 0.5s;
|
|
}
|
|
#hamitems > a:hover {
|
|
color: #3c90d9;
|
|
transition: color 1s;
|
|
}
|
|
#hamnav label, #hamburger { display: none; }
|
|
.buttons {
|
|
margin: auto;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.embed {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.footer_hinweise {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.footer_hinweise > img {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
.footer_hinweise > img:hover {
|
|
cursor: pointer;
|
|
}
|
|
.footer_box {
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.footer_box > h3 {
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.footer-links {
|
|
font-family: "PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
|
font-weight: lighter;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
.footer-links > a {
|
|
color: #c0c2c9;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.footer-links > a:hover {
|
|
color: #808289;
|
|
transition: color 0.5s;
|
|
}
|
|
|
|
.title {
|
|
height: 600px;
|
|
background-image: url('background.jpg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
margin-bottom: 80px;
|
|
}
|
|
.title_title {
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.ueberschrift {
|
|
padding-top: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.white {
|
|
color: #ffffff;
|
|
}
|
|
.dark_btn {
|
|
background-color: #3c90d9;
|
|
color: white;
|
|
padding: 16px 16px;
|
|
border-radius: 8px;
|
|
transition: background-color 0.5s;
|
|
}
|
|
.dark_btn:hover {
|
|
background-color: #ffffff; /* Green */
|
|
color: #3c90d9;
|
|
/*transition: color 1s;*/
|
|
transition: background-color 0.5s;
|
|
}
|
|
.hilfe {
|
|
background-color: #3c90d9;
|
|
}
|
|
.prezi {
|
|
height: 500px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.prezi img {
|
|
height: 600px;
|
|
}
|
|
.prezi img:hover {
|
|
cursor: pointer;
|
|
}
|
|
.white_btn {
|
|
background-color: #f0f0f0;
|
|
color: #3c90d9;
|
|
padding: 16px 16px;
|
|
border-radius: 8px;
|
|
transition: background-color 0.5s;
|
|
margin-bottom: 100px;
|
|
}
|
|
.white_btn:hover {
|
|
background-color: #3c90d9; /* Green */
|
|
color: #ffffff;
|
|
/*transition: color 1s;*/
|
|
transition: background-color 0.5s;
|
|
}
|
|
.spacing {
|
|
height: 140px;
|
|
}
|
|
|
|
.footer_hinweise .image {
|
|
height: 80px;
|
|
}
|
|
.mobile_logo {
|
|
display: none;
|
|
}
|
|
.kontakt_items {
|
|
color: white;
|
|
background-image: url('background.jpg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
.kontakt_items a {
|
|
color: white;
|
|
}
|
|
.ueber {
|
|
margin-bottom: 140px;
|
|
}
|
|
.mobile_logo:hover {
|
|
cursor: pointer;
|
|
}
|
|
.logo:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 1300px) {
|
|
.header_nav > a {
|
|
font-size: 25px;
|
|
margin-right: 80px;
|
|
}
|
|
.logo {
|
|
margin-right: 100px;
|
|
}
|
|
p {
|
|
margin-right: 500px;
|
|
margin-left: 500px;
|
|
}
|
|
.kontakt-items {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.geschaeftsstelle_div {
|
|
width: 500px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.geschaeftsstelle_div > p {
|
|
width: 425px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.nachricht_div {
|
|
vertical-align: top;
|
|
height: 620px;
|
|
margin-top: 5px;
|
|
width: 500px;
|
|
}
|
|
.nachricht_div > p {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
justify-content: center;
|
|
text-justify: distribute-all-lines;
|
|
}
|
|
.kontakt_items {
|
|
height: 900px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.prezi {
|
|
height: 700px;
|
|
}
|
|
.prezi iframe {
|
|
width: 900px;
|
|
height: 500px;
|
|
}
|
|
.footer_hinweise .image {
|
|
height: 120px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px){
|
|
nav {
|
|
background-color: white;
|
|
position: fixed;
|
|
height: 60px;
|
|
}
|
|
/* Show Hamburger Icon */
|
|
#hamnav label {
|
|
display: inline-block;
|
|
float: right;
|
|
color: white;
|
|
background: #303030;
|
|
font-style: normal;
|
|
font-size: 1.2em;
|
|
padding: 20px;
|
|
line-height: 40px;
|
|
|
|
}
|
|
|
|
/* Break down menu items into vertical */
|
|
#hamitems div {
|
|
background-color: white;
|
|
}
|
|
#hamitems a {
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 100%;
|
|
border-top: 1px solid #333;
|
|
float: left;
|
|
margin-left: 15px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
/*
|
|
#hamitems > a{
|
|
float: right;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-right: 20px;
|
|
height: 90px;
|
|
line-height: 90px;
|
|
color: #d9e1e8;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
transition: color 0.5s;
|
|
}*/
|
|
#hamitems {
|
|
background-color: white;
|
|
}
|
|
.mobile_logo {
|
|
vertical-align: top;
|
|
height: 60px;
|
|
margin-right: 20px;
|
|
margin-left: 30px;
|
|
margin-top: 15px;
|
|
display: block;
|
|
width: 200px;
|
|
}
|
|
.logo {
|
|
width: 200px;
|
|
}
|
|
|
|
.header_nav {
|
|
width: 100%; /* i'm assuming full width */
|
|
height: 80px; /* change it to desired width */
|
|
background-color: #ffffff; /* change to desired color */
|
|
|
|
}
|
|
.title_title {
|
|
margin-top: 100px;
|
|
height: 300px;
|
|
font-size: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.ueberschrift {
|
|
font-size: 45px;
|
|
height: 140px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
/* Toggle Show/Hide Menu */
|
|
#hamitems { display: none; }
|
|
#hamnav input:checked ~ #hamitems {
|
|
display: block;
|
|
transition: color 1s;
|
|
transition: background-color 1s;
|
|
}
|
|
#hamnav input:checked ~ .mobile_logo {
|
|
display: none;
|
|
}
|
|
#hamitems > .logo {
|
|
display: block;
|
|
}
|
|
p {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.title {
|
|
height: 600px;
|
|
}
|
|
.spacing {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
height: 60px ;
|
|
}
|
|
.prezi img{
|
|
width: 350px;
|
|
height: auto;
|
|
}
|
|
.prezi {
|
|
height: 200px;
|
|
}
|
|
.kontakt_items {
|
|
height: 900px;
|
|
}
|
|
.hilfe > h1{
|
|
height: 40px;
|
|
margin-top: 50px;
|
|
}
|
|
.hilfe > p {
|
|
margin-top: 00px;
|
|
}
|
|
.hilfe > button {
|
|
height: 00px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.handbuch_btn {
|
|
margin-top: 00px;
|
|
}
|
|
.prezi_p {
|
|
margin-bottom: 60px;
|
|
}
|
|
.kontakt > h1 {
|
|
height: 40px;
|
|
margin-top: 50px;
|
|
}
|
|
.kontakt > p {
|
|
margin-bottom: 80px;
|
|
}
|
|
.mobile_spacer {
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
|
|
<nav id="hamnav" class="header_nav">
|
|
<label for="hamburger">☰</label>
|
|
<input type="checkbox" id="hamburger"/>
|
|
|
|
<div class="mobile_logo"><img src="assets/logo_header.svg" onclick="window.location.href='https://knotenpunkt-alpen.de/about';"/></div>
|
|
<!--<a href="knotenpunkt-alpen.de">Startseite</a>-->
|
|
<div id="hamitems">
|
|
<div class="logo"><img src="assets/logo_header.svg" onclick="window.location.href='https://knotenpunkt-alpen.de/about';"/></div>
|
|
<a href="https://knotenpunkt-alpen.de/about/impressum.html">Impressum</a>
|
|
<a class="scroll" href="#Kontakt">Kontakt</a>
|
|
<a class="scroll" href="#hilfe">Hilfe</a>
|
|
<a class="scroll" href="#ueber">Über</a>
|
|
<a href="https://knotenpunkt-alpen.de/auth/sign_in">Log-in</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<div id="bg"></div>
|
|
<div class="content" style="z-index: 100">
|
|
|
|
|
|
<a name="Startpage"></a>
|
|
<div class="title">
|
|
<h1 class="ueberschrift white">WERDEN SIE TEIL VON KNOTENPUNKT ALPEN</h1>
|
|
<p class="white">
|
|
knotenpunkt-alpen.de ist eine Onlineplattform für Menschen und Organisationen, die sich für eine nachhaltige Entwicklung des bayerischen Alpenraums einsetzen.
|
|
</p>
|
|
<div class="buttons spacing">
|
|
<button class="scroll dark_btn" onclick="window.location.href='https://knotenpunkt-alpen.de/auth/sign_up';">Registrierung</a>
|
|
</div>
|
|
<div class="buttons spacing">
|
|
<button class="scroll dark_btn" onclick="window.location.href='#tutorial';">Interaktives Tutorial</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a name="ueber"></a>
|
|
<div class="ueber">
|
|
<h1 class="ueberschrift black" >ÜBER DAS PROJEKT</h1>
|
|
<p class="black">
|
|
Bereits während des Projekts „Knotenpunkt Alpen“ entstand die Idee einer Onlineplattform. Akteurinnen und Akteuren aus der ganzen geografischen Breite des bayerischen Alpenraums sollte auf simple Art und Weise ermöglicht werden, sich gegenseitig zu finden, zu vernetzen und miteinander zu kommunizieren. Jetzt wird diese Idee in die Tat umgesetzt: CIPRA Deutschland schafft mit Lukas Schulz vom Programmiererkollektiv „hacc“ ein eigenes „Social Network der Nachhaltigkeit“. Dieser neue Knotenpunkt ermöglicht Wissensaustausch, Vernetzung und gegenseitige Inspiration, um den bayerischen Alpenraum einen Schritt näher zu einer gelebten Nachhaltigkeit zu bringen.
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<a class="dark_bg" name="hilfe"></a>
|
|
<div class="hilfe white">
|
|
<h1 class="ueberschrift">SEIEN SIE DABEI</h1>
|
|
<a name="tutorial"></a>
|
|
<p>
|
|
Probieren Sie die Plattform doch einfach mal aus!
|
|
</p>
|
|
<div class="mobile_spacer"></div>
|
|
<div class="buttons spacing">
|
|
<button class="white_btn" onclick="window.location.href='https://knotenpunkt-alpen.de/auth/sign_up';">Registrierung</a>
|
|
</div>
|
|
<p>
|
|
Sollten Sie noch Unterstützung brauchen, können Sie sich durch das interaktive Tutorial klicken. Nach einem Klick auf "Play" können Sie sich mit den Pfeilen von vorne nach hinten durch die Anleitung klicken oder Sie wählen die für Sie interessanten Punkte direkt aus.
|
|
</p>
|
|
<div class="embed prezi">
|
|
<img class="image" src="images/prezi_start.png" onclick="window.location.href='https://prezi.com/view/jfNaZCWSVAgiSeqTVqis/'"></img>
|
|
</div>
|
|
<p class="prezi_p">
|
|
Bei weitergehenden Fragen und Problemen hilft unser Handbuch als eine ausführliche Anleitung weiter.
|
|
</p>
|
|
|
|
|
|
<div class="buttons spacing">
|
|
<button class="white_btn handbuch_btn" onclick="window.location.href='/about/assets/handbuch.pdf';">Handbuch</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a name="Kontakt"></a>
|
|
<div class="kontakt">
|
|
<h1 class="ueberschrift">KONTAKT</h1>
|
|
<p>
|
|
Wenn Sie weitere Fragen oder Anmerkungen zur Plattform haben, können Sie über info@knotenpunkt-alpen.de Kontakt zu uns aufnehmen.
|
|
</p>
|
|
<div class="buttons spacing">
|
|
<button class="white_btn" onclick="window.location.href='mailto:info@knotenpunkt-alpen.de'">Kontakt</button>
|
|
</div>
|
|
<div class="kontakt_items">
|
|
<div class="geschaeftsstelle_div">
|
|
<h2 class="geschaeftsstelle ueberschrift">CIPRA Deutschland</h2>
|
|
<p>
|
|
CIPRA Deutschland ist der Dachverband von 11 Verbänden und Vereinen, die sich für eine nachhaltige Entwicklung des deutschen Alpenraumes einsetzen. Ziel von CIPRA Deutschland ist es, einen Beitrag zu einer lebenswerten Zukunft in den deutschen Alpen zu leisten. Wichtige Basis für unser Denken und Handeln ist die Alpenkonvention. </br>
|
|
Mit Knotenpunkt Alpen versucht will CIPRA Deutschland seine Netzwerkfunktion auch auf andere Akteurinnen und Akteure im bayerischen Alpenraum ausweiten.
|
|
</p>
|
|
<div class="buttons">
|
|
<button class="white_btn" onclick="window.location.href='https://cipra.de'">cipra.de</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="content" style="z-index: 200">
|
|
<div class="footer_box">
|
|
<h3>powered by...</h3>
|
|
<div class="footer_hinweise">
|
|
<img class="image" src="images/hacc_logo.png" onclick="window.location.href='https://hacc.earth/'"></img>
|
|
<img class="image" src="images/Cogrowing_logo.png" onclick="window.location.href='https://cogrowing.io/'"></img>
|
|
</div>
|
|
</div>
|
|
<div class="footer_hinweise">
|
|
<img class="image" src="images/foerderhinweis.png" onclick="window.location.href='https://www.stmuv.bayern.de/'"></img>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="https://knotenpunkt-alpen.de/about/impressum.html">Impressum</a>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|