606 lines
22 KiB
HTML
606 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 iframe{
|
|
height: 300px;
|
|
}
|
|
.prezi {
|
|
height: 320px;
|
|
}
|
|
.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="dark_btn" onclick="window.location.href='https://knotenpunkt-alpen.de/auth/sign_in';">Log-in</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_in';">Zur 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>
|
|
<div class="embed">
|
|
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=11.573109626770021%2C48.13522547943893%2C11.576006412506105%2C48.136874078682965&layer=mapnik&marker=48.136049785677855%2C11.574558019638062" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=48.13605&mlon=11.57456#map=19/48.13605/11.57456"></a></small>
|
|
</div>
|
|
<p>
|
|
Alpenschutzkommission CIPRA Deutschland e.V. <br>
|
|
c/o Sektion München des DAV e.V. <br>
|
|
Rindermarkt 3 <br>
|
|
80331 München <br>
|
|
Deutschland
|
|
</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>
|