From ec6e459c6fab096d37c18dd72cc5b2eae6a0c470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20V=C3=B6lkl?= <benjamin.voelkl@areya.de>
Date: Fri, 17 Sep 2021 13:11:33 +0200
Subject: [PATCH] added form

---
 content/includes/css.blade.php |   2 +-
 content/pages/buchen.blade.php | 112 +++++++++++++++++++++++++++++++--
 css/app.css                    |   4 ++
 3 files changed, 111 insertions(+), 7 deletions(-)

diff --git a/content/includes/css.blade.php b/content/includes/css.blade.php
index 2bd15bd..109e533 100644
--- a/content/includes/css.blade.php
+++ b/content/includes/css.blade.php
@@ -1,4 +1,4 @@
 <link rel="stylesheet" href="{{asset('template/css/bootstrap.min.css')}}" >
-<link rel="stylesheet" href="{{asset('template/css/app.css?v=14')}}" >
+<link rel="stylesheet" href="{{asset('template/css/app.css?v=15')}}" >
 
 
diff --git a/content/pages/buchen.blade.php b/content/pages/buchen.blade.php
index cc6181b..979700a 100644
--- a/content/pages/buchen.blade.php
+++ b/content/pages/buchen.blade.php
@@ -10,18 +10,118 @@
                 <br>
 
 
-                <h2>Preise</h2>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aperiam asperiores, consequatur dicta, ex fuga illum maxime perspiciatis rem soluta vel voluptates. Aut dignissimos necessitatibus non nulla quasi. Delectus?
 
             </div>
 
-            <div class="col-12 text-center mt-5">
+            <div class="col-12 col-md-6 offset-md-3 mt-5">
+                <div class="card shadow-lg" style="background-color: #ebe5d84d">
+                    <div class="card-body">
+                        <form>
+                            <h5>Ihre Kontaktdaten</h5>
+                            <br>
+
+                            <div class="mb-4">
+                                <label for="exampleInputEmail1" class="form-label">Vor und Nachname</label>
+                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Max Meyer">
+                            </div>
+
+                            <div class="mb-4">
+                                <label for="exampleInputEmail1" class="form-label">Telefonnummer</label>
+                                <input type="tel" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="09654 5529550">
+                            </div>
+
+                            <div class="mb-4">
+                                <label for="exampleInputEmail1" class="form-label">Email address</label>
+                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="vor.nachname@areya.de" >
+                            </div>
+
+
+                            <br>
+                            <hr>
+
+                            <br>
+                            <h5>Alpakatour</h5>
+                            <br>
+                            <div class="mb-5">
+                                <label for="exampleInputEmail1" class="form-label">Datum</label>
+                                <input type="date" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" min="2021-07-17">
+                            </div>
+
+                            <div class="row">
+                                <div class="col-6">
+                                    <div class="mb-5">
+                                        <label for="anzahlerwachsene" class="form-label">Anzahl Erwachsene</label>
+                                        <select class="form-select" aria-label="Default select example" id="anzahlerwachsene">
+                                            <option selected disabled>Anzahl Erwachsene</option>
+                                            <option value="1">1</option>
+                                            <option value="2">2</option>
+                                            <option value="3">3</option>
+                                            <option value="4">4</option>
+                                            <option value="5">5</option>
+                                            <option value="6">6</option>
+                                            <option value="7">7</option>
+                                            <option value="8">8</option>
+                                            <option value="9">9</option>
+                                            <option value="10">10</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="col-6">
+                                    <div class="mb-5">
+                                        <label for="anzahlkinder" class="form-label">Anzahl Kinder</label>
+
+                                        <select class="form-select" aria-label="Default select example" id="anzahlkinder">
+                                            <option selected disabled>Anzahl Kinder</option>
+                                            <option value="1">1</option>
+                                            <option value="2">2</option>
+                                            <option value="3">3</option>
+                                            <option value="4">4</option>
+                                            <option value="5">5</option>
+                                            <option value="6">6</option>
+                                            <option value="7">7</option>
+                                            <option value="8">8</option>
+                                            <option value="9">9</option>
+                                            <option value="10">10</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mb-5">
+                                <label for="anzahlkinder" class="form-label">Anzahl Alpakas</label>
+
+                                <select class="form-select" aria-label="Default select example" id="anzahlalpakas">
+                                    <option selected disabled>Anzahl Alpakas</option>
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                    <option value="3">3</option>
+                                    <option value="4">4</option>
+                                    <option value="5">5</option>
+                                    <option value="6">6</option>
+                                    <option value="7">7</option>
+
+                                </select>
+                            </div>
+                            <br>
+                            <br>
+
+
+                            <div class="text-end">
+                                <a class="btn btn-ci btn-lg text-end">
+                                    <svg style="fill: white; width: 18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M424 336h-96c-22.1 0-40-17.9-40-40s17.9-40 40-40h88s96-107 96-160-43-96-96-96-96 43-96 96c0 29.8 30.3 76.7 56.9 112H328c-48.5 0-88 39.5-88 88s39.5 88 88 88h96c22.1 0 40 17.9 40 40s-17.9 40-40 40H135.1c26.6-35.3 56.9-82.2 56.9-112 0-53-43-96-96-96S0 299 0 352s96 160 96 160h328c48.5 0 88-39.5 88-88s-39.5-88-88-88zM368 96c0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4-27.2-36.2-47.5-70.9-48-84.3zM96 436.3c-27.2-36.2-47.5-70.9-48-84.3 0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4zM96 336c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM432 96c0-8.8-7.2-16-16-16s-16 7.2-16 16 7.2 16 16 16 16-7.2 16-16z"/></svg>
+                                    Alpaka Tour anfragen
+                                </a>
+                            </div>
+                        </form>
+
+
+
+                    </div>
+                </div>
                 <br>
                 <br>
                 <br>
-                <a class="btn btn-ci btn-lg">
-                    <svg style="fill: white; width: 18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M424 336h-96c-22.1 0-40-17.9-40-40s17.9-40 40-40h88s96-107 96-160-43-96-96-96-96 43-96 96c0 29.8 30.3 76.7 56.9 112H328c-48.5 0-88 39.5-88 88s39.5 88 88 88h96c22.1 0 40 17.9 40 40s-17.9 40-40 40H135.1c26.6-35.3 56.9-82.2 56.9-112 0-53-43-96-96-96S0 299 0 352s96 160 96 160h328c48.5 0 88-39.5 88-88s-39.5-88-88-88zM368 96c0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4-27.2-36.2-47.5-70.9-48-84.3zM96 436.3c-27.2-36.2-47.5-70.9-48-84.3 0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4zM96 336c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM432 96c0-8.8-7.2-16-16-16s-16 7.2-16 16 7.2 16 16 16 16-7.2 16-16z"/></svg>                            Alpaka Tour Buchen
-                </a>
+
             </div>
         </div>
 
diff --git a/css/app.css b/css/app.css
index 7a6625e..73eb667 100644
--- a/css/app.css
+++ b/css/app.css
@@ -745,4 +745,8 @@ a:hover {
 {
   color: #754545;
   background-color: #f8f8f8;
+}
+
+.card{
+  background-color: #f8f8f8;
 }
\ No newline at end of file