BKGL-Kleinanzeigen
index.html
<!doctype html>
<html lang="de">
<head>
<title>BKGL-Kleinanzeigen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<!-- Cookies -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wruczek/Bootstrap-Cookie-Alert@gh-pages/cookiealert.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<a href="/"><img src="/bilder/logo.png" class="navbar-brand" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Suche</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Katogorien
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Bücher</a></li>
<li><a class="dropdown-item" href="#">Elektronische Geräte</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Weitere</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Anzeige Aufgeben</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="bg-dark text-light text-center p-5">
<div class="container">
<div class="d-sm-flex">
<div>
<h1>Der Kleinanzeigen an <span class="text-warning">Deiner Schule</span></h1>
<p class="lead">Hier kannst du Deine alten Bücher, Computer, Klassenkamerade:innen, etc. verkaufen</p>
</div>
<div>
<img class="img-fluid w-50" src="/bilder/buecher.jpg" alt="">
</div>
</div>
</div>
</section>
<!-- ##### -->
<!-- Cards -->
<!-- ##### -->
<section class="p-5">
<div class="container">
<div class="row gy-3">
<div class="col-sm">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-flex flex-column">
<div class="h1">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title">
Laptops
</h3>
<p class="card-text">
Gebrauchte Laptops zu günstigen Preise.
</p>
<a class="mt-auto" href="#">
<button class="btn btn-light btn-lg">Öffnen</button>
</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-flex flex-column">
<div class="h1">
<i class="bi bi-book"></i>
</div>
<h3 class="card-title">
Bücher
</h3>
<p class="card-text">
Günstige Bücher jeder Klassenstufe.
</p>
<a class="mt-auto" href="#">
<button class="btn btn-light btn-lg">Öffnen</button>
</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-flex flex-column">
<div class="h1">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title">
Nachhilfe
</h3>
<p class="card-text">
Jetzt Nachhilfe besorgen.
</p>
<a class="mt-auto" href="#">
<button class="btn btn-light btn-lg">Öffnen</button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Ende -->
<!-- Formular -->
<section class="p-5">
<div class="container" style="background-color: rgba(0, 0, 0, 0.2);">
<div class="row gy-3">
<form action="https://form.taxi/s/0pc0p6ch" method="POST">
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">E-Mail</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Nachricht</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Sende mir eine Kopie vom Formular.
</label>
</div>
<!-- Submit button -->
<button type="submit" value="send" class="btn btn-primary btn-block mb-4">Senden</button>
</form>
</div>
</div>
</section>
<!-- Ende -->
<!-- Bootstrap JavaScript Libraries -->
<script src="/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
<!-- START Bootstrap-Cookie-Alert -->
<div class="alert text-center cookiealert" role="alert">
<b>Magst du Cookies?</b> 🍪 Wir verwenden Cookies, um sicherzustellen, dass Sie die beste Erfahrung auf unserer Website erhalten. <a href="#" target="_blank">Erfahre mehr</a>
<button type="button" class="btn btn-primary btn-sm acceptcookies">
Erlauben
</button>
</div>
<script src="https://cdn.jsdelivr.net/gh/Wruczek/Bootstrap-Cookie-Alert@gh-pages/cookiealert.js"></script>
<!-- END Bootstrap-Cookie-Alert -->
<!-- Footer -->
<footer class="bg-light text-center text-lg-start">
<!-- Impressum ung Datenschutzerklärung -->
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
<a class="text-dark btn" href="/impressum/">Impressum</a>
</div>
<div class="col col-lg-2">
<a class="text-dark btn" href="#">Datenschutzerklärung</a>
</div>
</div>
</div>
<!-- Ende -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
Copyright © 2022 | Designed with ❤️ by
<a class="text-dark" href="https://arbnor.me/">arbnor.me</a>
</div>
<!-- Copyright -->
</footer>
</html>