Collapsable Nav

This commit is contained in:
tschneider 2020-07-17 17:40:19 +02:00
parent 610c9bb0b7
commit a3a578a089
5 changed files with 206 additions and 148 deletions

View file

@ -13,41 +13,52 @@
<title>MotorradIG</title> <title>MotorradIG</title>
</head> </head>
<body class="bg"> <body class="bg" style="padding: 45px 0 0 0;">
<nav class="navbar fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<a class="navbar-brand" href="index.html">
<img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a>
<div class="nav-item mr-5">
<h3><a class="text-white" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
</div>
<div class="nav-item text-info mr-5">
<h3><a class="text-info" href="meetings.html">Treffen</a></h3>
</div>
<div class="nav-item text-info mr-5">
<h3><a class="text-info" href="become_member.html">Mitglied werden</a> </h3>
</div>
<div class="nav-item text-info mr-5">
<h3><a class="text-info" href="login.html">Login</a> </h3>
</div>
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <!-- Mitgliedsbereich:
<a class="navbar-brand" href="index.html"> <a class="col-md-3 text-light ">Tourenplan</a>
<img src="images/logo_placeholder.jpg" width="64" height="64" alt=""> <a class="col-md-3 text-light">Mitglieder</a>
</a> <a class="col-md-3 text-light">Bildergalerie</a>
-->
<a class="col-md-4 text-white" href="#">Aktivitäten</a> </div>
<a class="col-md-4 text-info" href="meetings.html">Treffen</a>
<a class="col-md-4 text-info" href="become_member.html">Mitglied werden</a>
<a class="col-md-4 text-info" href="login.html">Login</a>
<!-- Mitgliedsbereich:
<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">Bildergalerie</a>
-->
</div>
</nav> </nav>
<div class="col-md-8 d-flex justify-content-center container"> <div class="container text-center text-light mt-5">
<div class="row" style="font-family: 'Abhaya Libre', serif; font-size: 15px; line-height: 2px;"> <h1 class="text-center">Motorrad IG</h1>
<div class="col-sm-12"> <h5>privat organisierte Motorradtouren</h5>
<div class="underlined-title"> <hr/>
<h1 style="font-family: 'Abhaya Libre', serif; font-size: 80px; margin-top:0px;" class="text-light">Motorrad IG</h1> <h2>Aktivitäten</h2>
<hr> <hr/>
<h2 class="text-light">Aktivitäten</h2>
</div>
</div>
</div>
</div> </div>
@ -57,6 +68,7 @@
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- 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://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

View file

@ -13,42 +13,54 @@
<title>MotorradIG</title> <title>MotorradIG</title>
</head> </head>
<body class="bg"> <body class="bg" style="padding: 45px 0 0 0;">
<nav class="navbar fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<a class="navbar-brand" href="index.html">
<img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a>
<a class="col-md-4 text-info" href="activities.html">Aktivitäten</a> <a class="navbar-brand" href="index.html">
<a class="col-md-4 text-info" href="meetings.html">Treffen</a> <img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
<a class="col-md-4 text-white" href="#">Mitglied werden</a> </a>
<a class="col-md-4 text-info" href="login.html">Login</a>
<div class="nav-item mr-5">
<!-- Mitgliedsbereich: <h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
<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">Bildergalerie</a>
-->
</div>
</nav>
<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="col-sm-12">
<div class="underlined-title">
<h1 style="font-family: 'Abhaya Libre', serif; font-size: 80px; margin-top:0px;" class="text-light">Motorrad IG</h1>
<hr>
<h2 class="text-light">Hier muss der Mitgliedsantrag rein.</h2>
</div> </div>
</div>
</div> <div class="nav-item text-info mr-5">
</div> <h3><a class="text-info" href="meetings.html">Treffen</a></h3>
</div>
<div class="nav-item text-info mr-5">
<h3><a class="text-white" href="become_member.html">Mitglied werden</a> </h3>
</div>
<div class="nav-item text-info mr-5">
<h3><a class="text-info" href="login.html">Login</a> </h3>
</div>
<!-- Mitgliedsbereich:
<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">Bildergalerie</a>
-->
</div>
</nav>
<div class="container text-center text-light mt-5">
<h1 class="text-center">Motorrad IG</h1>
<h5>privat organisierte Motorradtouren</h5>
<hr/>
<h2>Hier muss der Mitgliedsantrag rein.</h2>
<hr/>
</div>

View file

@ -15,18 +15,33 @@
</head> </head>
<body class="bg" style="padding: 45px 0 0 0;"> <body class="bg" style="padding: 45px 0 0 0;">
<nav class="navbar fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" 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="index.html"> <a class="navbar-brand" href="index.html">
<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-info" href="activities.html">Aktivitäten</a> <div class="nav-item mr-5">
<a class="col-md-4 text-info" href="meetings.html">Treffen</a> <h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
<a class="col-md-4 text-info" href="become_member.html">Mitglied werden</a> </div>
<a class="col-md-4 text-info" href="login.html">Login</a>
<div class="nav-item mr-5">
<h3><a class="text-info" href="meetings.html">Treffen</a></h3>
</div>
<div class="nav-item mr-5">
<h3><a class="text-info" href="become_member.html">Mitglied werden</a> </h3>
</div>
<div class="nav-item mr-5">
<h3><a class="text-info" href="login.html">Login</a> </h3>
</div>
<!-- Mitgliedsbereich: <!-- Mitgliedsbereich:
@ -39,15 +54,12 @@
</nav> </nav>
<div class="col-md-6 container"> <div class="container text-center text-light mt-5">
<div class="row text-center text-light justify-content-center mt-5 "> <h1 class="text-center">Motorrad IG</h1>
<h5>privat organisierte Motorradtouren</h5>
<h1 >Motorrad IG</h1> <hr/>
<hr> <h2>Willkommen auf der Homepage der Motorrad-IG Deutschland</h2>
<h2 class="text-light">privat organisierte Motorradtouren</h2> <hr/>
<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.
@ -55,10 +67,10 @@ 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>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>

View file

@ -13,42 +13,53 @@
<title>MotorradIG</title> <title>MotorradIG</title>
</head> </head>
<body class="bg"> <body class="bg" style="padding: 45px 0 0 0;">
<nav class="navbar fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<a class="navbar-brand" href="index.html">
<img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a>
<a class="col-md-4 text-info" href="activities.html">Aktivitäten</a> <a class="navbar-brand" href="index.html">
<a class="col-md-4 text-info" href="meetings.html">Treffen</a> <img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
<a class="col-md-4 text-info" href="become_member.html"">Mitglied werden</a> </a>
<a class="col-md-4 text-white" href="#">Login</a>
<div class="nav-item mr-5">
<!-- Mitgliedsbereich: <h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
<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">Bildergalerie</a>
-->
</div>
</nav>
<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="col-sm-12">
<div class="underlined-title">
<h1 style="font-family: 'Abhaya Libre', serif; font-size: 80px; margin-top:0px;" class="text-light">Motorrad IG</h1>
<hr>
<h2 class="text-light">Hier kommt die Anmelde-Maske rein.</h2>
</div> </div>
</div>
</div> <div class="nav-item mr-5">
</div> <h3><a class="text-info" href="meetings.html">Treffen</a></h3>
</div>
<div class="nav-item mr-5">
<h3><a class="text-info" href="become_member.html">Mitglied werden</a> </h3>
</div>
<div class="nav-item mr-5">
<h3><a class="text-white" href="login.html">Login</a> </h3>
</div>
<!-- Mitgliedsbereich:
<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">Bildergalerie</a>
-->
</div>
</nav>
<div class="container text-center text-light mt-5">
<h1 class="text-center">Motorrad IG</h1>
<h5>privat organisierte Motorradtouren</h5>
<hr/>
<h2>Hier kommt die Anmelde-Maske rein.</h2>
<hr/>
</div>

View file

@ -13,42 +13,53 @@
<title>MotorradIG</title> <title>MotorradIG</title>
</head> </head>
<body class="bg"> <body class="bg" style="padding: 45px 0 0 0;">
<nav class="navbar fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<a class="navbar-brand" href="index.html">
<img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a>
<a class="col-md-4 text-info" href="activities.html">Aktivitäten</a> <a class="navbar-brand" href="index.html">
<a class="col-md-4 text-white" href="#">Treffen</a> <img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
<a class="col-md-4 text-info" href="become_member.html">Mitglied werden</a> </a>
<a class="col-md-4 text-info" href="login.html">Login</a>
<div class="nav-item mr-5">
<!-- Mitgliedsbereich: <h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
<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">Bildergalerie</a>
-->
</div>
</nav>
<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="col-sm-12">
<div class="underlined-title">
<h1 style="font-family: 'Abhaya Libre', serif; font-size: 80px; margin-top:0px;" class="text-light">Motorrad IG</h1>
<hr>
<h2 class="text-light">Treffen</h2>
</div> </div>
</div>
</div> <div class="nav-item mr-5">
</div> <h3><a class="text-white" href="meetings.html">Treffen</a></h3>
</div>
<div class="nav-item mr-5">
<h3><a class="text-info" href="become_member.html">Mitglied werden</a> </h3>
</div>
<div class="nav-item mr-5">
<h3><a class="text-info" href="login.html">Login</a> </h3>
</div>
<!-- Mitgliedsbereich:
<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">Bildergalerie</a>
-->
</div>
</nav>
<div class="container text-center text-light mt-5">
<h1 class="text-center">Motorrad IG</h1>
<h5>privat organisierte Motorradtouren</h5>
<hr/>
<h2>Treffen</h2>
<hr/>
</div>