527 lines
20 KiB
HTML
527 lines
20 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;
|
|
}
|
|
.foerderhinweis {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: 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;
|
|
}
|
|
.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 iframe {
|
|
width: 550px;
|
|
height: 400px;
|
|
}
|
|
.white_btn {
|
|
background-color: #f0f0f0;
|
|
color: #3c90d9;
|
|
padding: 16px 16px;
|
|
border-radius: 8px;
|
|
transition: background-color 0.5s;
|
|
}
|
|
.white_btn:hover {
|
|
background-color: #3c90d9; /* Green */
|
|
color: #ffffff;
|
|
/*transition: color 1s;*/
|
|
transition: background-color 0.5s;
|
|
}
|
|
.spacing {
|
|
height: 80px;
|
|
}
|
|
|
|
.foerderhinweis .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;
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 1000px) {
|
|
.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;
|
|
}
|
|
.foerderhinweis .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 {
|
|
height: 240px;
|
|
font-size: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.ueberschrift {
|
|
font-size: 50px;
|
|
height: 60px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.title {
|
|
height: 500px;
|
|
}
|
|
.prezi iframe{
|
|
height: 300px;
|
|
}
|
|
.prezi {
|
|
height: 320px;
|
|
}
|
|
.kontakt_items {
|
|
height: 900px;
|
|
}
|
|
}
|
|
|
|
|
|
</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" /></div>
|
|
<!--<a href="knotenpunkt-alpen.de">Startseite</a>-->
|
|
<div id="hamitems">
|
|
<div class="logo"><img src="assets/logo_header.svg" /></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="title_title white">Werde Teil von knotenpunkt-alpen.de!</h1>
|
|
<p class="white">
|
|
knotenpunkt-alpen.de ist eine Onlineplattform für Menschen und Organisationen, die sich für eine nachhaltige Entwicklung das bayerischen Alpenraums einsetzen.
|
|
</p>
|
|
<div class="buttons">
|
|
<button class="dark_btn" onclick="window.location.href='https://knotenpunkt-alpen.de/auth/sign_in';">Log-In</a>
|
|
<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</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 dem Programmiererkollektiv „hacc“ ein eigenes „Social Network der Nachhaltigkeit“. Dieser neue Knotenpunkt ermöglicht Wissensaustausch, Vernetzung und gegenseitige Inspiration, um den bayrischen 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">HILFE</h1>
|
|
<a name="tutorial"></a>
|
|
<div class="embed prezi">
|
|
<iframe src="https://prezi.com/view/jfNaZCWSVAgiSeqTVqis/embed" webkitallowfullscreen="1" mozallowfullscreen="1" allowfullscreen="1"></iframe>
|
|
</div>
|
|
<p>
|
|
Du brauchst noch Unterstützung für die knotenpunkt-alpen.de Plattform? Klicke dich mit den Pfeilen von vorne nach hinten durch die interaktive Anleitung oder wähle interessante Punkte direkt aus. Bei Detailfragen hilft dir unser Handuch, eine ausführlichere Anleitung, weiter.
|
|
</p>
|
|
|
|
|
|
<div class="buttons spacing">
|
|
<button class="white_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>
|
|
Du hast Fragen, Anmerkungen oder möchtest uns wegen etwas anderem eine Nachricht zukommen lassen? Du erreichst uns über die Kontaktangaben der Geschäftsstelle. Über das Formular kannst du uns auch eine Nachricht schicken.
|
|
</p>
|
|
<div class="kontakt_items">
|
|
<div class="geschaeftsstelle_div">
|
|
<h2 class="geschaeftsstelle ueberschrift">Geschäftsstelle</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.
|
|
c/o Sektion München des DAV e.V.
|
|
Rindermarkt 3
|
|
München, 80331
|
|
Deutschland
|
|
</p>
|
|
<div class="buttons">
|
|
<button class="white_btn" onclick="window.location.href='https://cipra.de'">cipra.de</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nachricht_div">
|
|
<h2 class="nachricht ueberschrift">Nachricht senden</h2>
|
|
<div class="text">
|
|
</div>
|
|
<p>
|
|
Du kannst gerne einfach eine mail an <a href="mailto:info@knotenpunkt-alpen.de">info@knotenpunkt-alpen.de</a> senden!
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="content" style="z-index: 200">
|
|
<div class="foerderhinweis">
|
|
<img class="image" src="images/foerderhinweis.png"></img>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="https://knotenpunkt-alpen.de/about/impressum.html">Impressum</a>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|