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,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">
<div class="mr-auto" 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-white" href="#">Aktivitäten</a>
<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>
<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>
<!-- 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>

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">
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <span class="navbar-toggler-icon"></span>
<a class="navbar-brand" href="index.html"> </button>
<img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a> <div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<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">
<h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
<!-- 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="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,19 +15,34 @@
</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 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"> <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>
<div class="nav-item mr-5">
<h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
</div>
<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>
<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="login.html">Login</a> </h3>
<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>
<!-- Mitgliedsbereich: <!-- Mitgliedsbereich:
<a class="col-md-3 text-light ">Tourenplan</a> <a class="col-md-3 text-light ">Tourenplan</a>
@ -39,24 +54,21 @@
</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.
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>
<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">
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <span class="navbar-toggler-icon"></span>
<a class="navbar-brand" href="index.html"> </button>
<img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a> <div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<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">
<h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
<!-- 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="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">
<div class="mr-auto" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;"> <span class="navbar-toggler-icon"></span>
<a class="navbar-brand" href="index.html"> </button>
<img src="images/logo_placeholder.jpg" width="64" height="64" alt="">
</a> <div id="navbarSupportedContent" class="mr-auto collapse navbar-collapse" style="font-family: 'Abhaya Libre', serif; font-size: 30px; line-height: 2px;">
<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">
<h3><a class="text-info" href="activities.html">Aktivitäten</a></h3> <!-- Header Tag used to enforce line break.-->
<!-- 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="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>