torsten/motorradig
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed top Navbar

Browse source
This commit is contained in:
tschneider 2020-07-10 08:59:41 +02:00
parent 8fb63d492e
commit ad78c4b6c7
2 changed files with 208 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

44
design/css/custom.css
View file

@ -1,23 +1,23 @@
/* Put your custom styles here */ /* Put your custom styles here */
body, html { body, html {
height: 100%; height: 100%;
} }
.bg { .bg {
/* The image used */ /* The image used */
background-image: url("../images/motorcycle1_unsplash.jpg"); background-image: url("../images/motorcycle1_unsplash.jpg");
/* Full height */ /* Full height */
height: 100%; height: 100%;
/* background: #3df url('../images/motorcycle1_unsplash.jpg') no-repeat fixed center; */ /* background: #3df url('../images/motorcycle1_unsplash.jpg') no-repeat fixed center; */
/* Center and scale the image nicely */ /* Center and scale the image nicely */
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
} }

322
design/navbar_sticky_top.html
View file

@ -1,137 +1,187 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Custom CSS--> <!-- Custom CSS-->
<link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/custom.css">
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>
<body class="bg"> <body class="bg">
<nav class="navbar sticky-top navbar-dark bg-dark"> <nav class="navbar fixed-top navbar-dark bg-dark">
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="images/logo_placeholder.jpg" width="64" height="64" alt=""> <img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a> </a>
<a class="col-md-4 text-light">Aktivitäten</a> <a class="col-md-4 text-light">Aktivitäten</a>
<a class="col-md-4 text-light">Treffen</a> <a class="col-md-4 text-light">Treffen</a>
<a class="col-md-4 text-light">Mitglied werden</a> <a class="col-md-4 text-light">Mitglied werden</a>
<a class="col-md-4 text-light">Login</a> <a class="col-md-4 text-light">Login</a>
<!-- Mitgliedsbereich: <!-- Mitgliedsbereich:
<a class="col-md-3 text-light ">Tourenplan</a> <a class="col-md-3 text-light ">Tourenplan</a>
<a class="col-md-3 text-light">Mitglieder</a> <a class="col-md-3 text-light">Mitglieder</a>
<a class="col-md-3 text-light">Bildergalerie</a> <a class="col-md-3 text-light">Bildergalerie</a>
--> -->
</div> </div>
</nav> </nav>
<div class="col-md-8 d-flex justify-content-center container"> <div class="col-md-8 d-flex justify-content-center container">
<div class="row" style="font-family: 'Abhaya Libre', serif; font-size: 15px; line-height: 2px;"> <div class="row" style="font-family: 'Abhaya Libre', serif; font-size: 15px; line-height: 2px;">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="underlined-title"> <div class="underlined-title">
<h1 style="font-family: 'Abhaya Libre', serif; font-size: 80px; margin-top:0px;" class="text-light">Motorrad IG</h1> <h1 style="font-family: 'Abhaya Libre', serif; font-size: 80px; margin-top:0px;" class="text-light">Motorrad IG</h1>
<hr> <hr>
<h2 class="text-light">privat organisierte Motorradtouren</h2> <h2 class="text-light">privat organisierte Motorradtouren</h2>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 container"> <div class="col-md-6 container">
<div class="row text-center text-light justify-content-center"> <div class="row text-center text-light justify-content-center">
<h1>Willkommen auf der Homepage der Motorrad-IG Deutschland</h1> <h1>Willkommen auf der Homepage der Motorrad-IG Deutschland</h1>
<h2>Das alte Problem: Die Sonne scheint und Dein Motorrad ruft, <h2>Das alte Problem: Die Sonne scheint und Dein Motorrad ruft,
doch alle Deine Freunde sind plötzlich verhindert oder haben keine Zeit. doch alle Deine Freunde sind plötzlich verhindert oder haben keine Zeit.
Hier wollen wir Abhilfe schaffen. Hier wollen wir Abhilfe schaffen.
Unser Ziel: Kontaktvermittlung unter Motorradfahrer/innen für gemeinsame Touren. Unser Ziel: Kontaktvermittlung unter Motorradfahrer/innen für gemeinsame Touren.
Auf den nächsten Seiten erfährst Du alles Wissenswerte über uns, Auf den nächsten Seiten erfährst Du alles Wissenswerte über uns,
unser Angebot für unsere Mitglieder sowie sonstige Aktivitäten.</h2> unser Angebot für unsere Mitglieder sowie sonstige Aktivitäten.</h2>
</div> </div>
</div> </div>
<p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="col-md-4 d-flex justify-content-center container">
<div class="col-md-4 d-flex justify-content-center container">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner"> <div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-item active"> <div class="carousel-inner">
<img src="images/motorrad1.jpeg" class="d-block w-100" alt="..."> <div class="carousel-item active">
</div> <img src="images/motorrad1.jpeg" class="d-block w-100" alt="...">
<div class="carousel-item"> </div>
<img src="images/motorrad2.jpeg" class="d-block w-100" alt="..."> <div class="carousel-item">
</div> <img src="images/motorrad2.jpeg" class="d-block w-100" alt="...">
<div class="carousel-item"> </div>
<img src="images/motorrad3.jpeg" class="d-block w-100" alt="..."> <div class="carousel-item">
</div> <img src="images/motorrad3.jpeg" class="d-block w-100" alt="...">
</div> </div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"> </div>
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="sr-only">Previous</span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a> <span class="sr-only">Previous</span>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"> </a>
<span class="carousel-control-next-icon" aria-hidden="true"></span> <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="sr-only">Next</span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
</a> <span class="sr-only">Next</span>
</div> </a>
</div>
</div>
</div>
<div class="container text-center text-light justify-content-center" style="font-family: 'Abhaya Libre', serif; font-size: 30px; ">
<div class="container text-center text-light justify-content-center" style="font-family: 'Abhaya Libre', serif; font-size: 30px; ">
Selber anrufen und angerufen werden.
Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder inkl. Telefonnummern. Selber anrufen und angerufen werden.
Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder inkl. Telefonnummern.
abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung und Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison
damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung und
Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit zur damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den
Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit zur
Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht. Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer
Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht.
Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,
müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben. Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,
Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc.. müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben.
Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin. Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc..
Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in der Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin.
Trattoria and Bar Antonio, Roßstr. 87, 40476 Düsseldorf-Derendorf, Tel.: 0211/43637525. Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in der
Stadtplan und Anfahrt mit öffentlichen Verkehrsmitteln findet ihr unter: Trattoria and Bar Antonio, Roßstr. 87, 40476 Düsseldorf-Derendorf, Tel.: 0211/43637525.
http://www.daantonio-duesseldorf.de Da Antonio befindet sich direkt neben der Kirche. Stadtplan und Anfahrt mit öffentlichen Verkehrsmitteln findet ihr unter:
Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden. http://www.daantonio-duesseldorf.de Da Antonio befindet sich direkt neben der Kirche.
Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden.
</div>
</div> -->
<!-- Optional JavaScript --> <div class="container text-center text-light justify-content-center" style="font-family: 'Abhaya Libre', serif; font-size: 30px; ">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> Selber anrufen und angerufen werden.
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder inkl. Telefonnummern.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison
</body> abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung und
damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den
Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit zur
Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer
Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht.
Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,
müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben.
Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc..
Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin.
Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in der
Trattoria and Bar Antonio, Roßstr. 87, 40476 Düsseldorf-Derendorf, Tel.: 0211/43637525.
Stadtplan und Anfahrt mit öffentlichen Verkehrsmitteln findet ihr unter:
http://www.daantonio-duesseldorf.de Da Antonio befindet sich direkt neben der Kirche.
Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden.
</div>
<div class="container text-center text-light justify-content-center" style="font-family: 'Abhaya Libre', serif; font-size: 30px; ">
Selber anrufen und angerufen werden.
Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder inkl. Telefonnummern.
Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison
abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung und
damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den
Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit zur
Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer
Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht.
Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,
müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben.
Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc..
Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin.
Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in der
Trattoria and Bar Antonio, Roßstr. 87, 40476 Düsseldorf-Derendorf, Tel.: 0211/43637525.
Stadtplan und Anfahrt mit öffentlichen Verkehrsmitteln findet ihr unter:
http://www.daantonio-duesseldorf.de Da Antonio befindet sich direkt neben der Kirche.
Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden.
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html> </html>