styling footer plus contact form

src/main/java/nl/noorderzon/controller/FilterOpGenre.java

@@ -8,12 +8,21 @@
 import javax.persistence.TypedQuery;
 import java.util.List;
 
+/*
+ * Facilitates function for query 'Find Artists on Genre' where Genre is chosen on webpage and query is done on database via Spring boot
+ * @author Onze Marike
+ * @version 1001.1
+ * @param /voorstellingen the param for webpage
+ * @return Artiests matching the Genre of choice
+ * */
+
 @RestController
 public class FilterOpGenre{
 
 	@PersistenceContext
 	private EntityManager em;
 
+
     @RequestMapping(value = "/voorstellingen")
 	public List<Artiest> zoekOpGenre(
             @RequestParam(value = "artiestgenre") String genre) {

src/main/resources/static/css/style.css

@@ -77,6 +77,7 @@ h3 {
 }
 .container {
     min-height: 80vh;
+    max-height: min-content;
 }
 
 /* -- Intro page --  */
@@ -153,15 +154,15 @@ h3 {
 /* -- Top menu --  */
 
 .top-bar {
-    padding: 5px 20px;
-    vertical-align: bottom;
+    padding: 10px 20px;
+    vertical-align: baseline;
     background-color: #eeeeee;
     box-shadow: 0 0 2px 2px #aaaaaa;
     position: fixed;
     width: 100vw;
     top: 0;
     z-index: 15;
-    height: 30px;
+    height: min-content;
 }
 
 .top-bar img {
@@ -171,10 +172,9 @@ h3 {
 .top-menu {
     float: right;
     color: #0acc66;
-    vertical-align: bottom;
     position: absolute;
-    bottom: 0;
     right: 20px;
+    display: inline-block;
 }
 
 @media (max-width: 767px) {
@@ -230,7 +230,7 @@ h3 {
 
 .section-img-3 {
     vertical-align: center;
-    margin-top: -25px;
+    margin-top: -50px;
 }
 
 .section-img-3 img {
@@ -315,7 +315,7 @@ h3 {
 
 /* -- Section --  */
 .section {
-    height: 550px;
+    min-height: 550px;
 }
 
 @media (max-width: 991px) {
@@ -352,7 +352,7 @@ h3 {
 /* -- Section items --  */
 .items {
     margin: auto;
-    height: 320px;
+    height: min-content;
     z-index: 2;
 }
 
@@ -539,11 +539,11 @@ button.put-button {
     position: relative;
     bottom: 0;
     left: 0;
-    min-height: 180px;
+    max-height: min-content;
     width: 100vw;
     background-color: rgba(74, 74, 74, 0.9);
     color: #eee;
-    margin-top: -100px;
+    padding: 50px 30px 50px 30px;
 }
 
 #fill-page {
@@ -621,3 +621,65 @@ button.put-button {
 .genre-radio li {
     display: inline;
 }
+
+
+/* contact Formulier
+ */
+#formContact{
+    width: auto;
+    padding: 20px;
+    position: relative;
+}
+
+#formContact input{
+    height: 45px;
+    border-radius: 5px;
+    background-color: #ffffff;
+    border: solid 1px #eeeeee;
+    width: 100%;
+    display:block;
+}
+
+#formContact label{
+    font-family: Europa, sans-serif;
+    font-size: 16px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 2em;
+    letter-spacing: normal;
+    color: rgba(6, 6, 6, 0.4);
+    display: block;
+    padding: 10px 0;
+}
+
+#formContact textarea{
+    display: block;
+    border: solid 1px #eeeeee;
+    width: 100%;
+    border-radius: 5px;
+}
+
+.footer h5{
+    font-size: 22px;
+    font-weight: bold;
+    text-decoration: underline;
+    margin-bottom: 10px;
+}
+
+form button{
+    border: 2px solid #0acc66;
+    color: #0acc66;
+    padding: 15px;
+    width: auto;
+    display: inline-block;
+    border-radius: 5px;
+
+}
+
+#bedanktForm{
+    visibility: hidden;
+    min-height: 200px;
+    padding: 50px 30px;
+    border: 2px solid #0acc66
+}

src/main/resources/static/footer.html

@@ -1,8 +1,33 @@
 <div class="footer">
-    <ul>
-        <li>hier</li>
-        <li>komen</li>
-        <li>menu</li>
-        <li>items</li>
-    </ul>
+
+
+        <div class="row offset-md-1">
+        <div class="col-md-4">
+            <h5>Create by</h5>
+            <ul>
+        <li>Marike Visser</li>
+        <li>Rene van Rijnswou</li>
+        <li>Gerrit de Graaff</li>
+                <li>Tom Sluizeman</li>
+            </ul>
+        </div>
+            <div class="col-md-4">
+                <h5>Powered by</h5>
+                <ul>
+                    <li>Bart</li>
+                    <li>Ralf</li>
+                    <li>Christina</li>
+                    <li>Timmie</li>
+                </ul>
+            </div>
+            <div class="col-md-4">
+                <h5>Thanks to</h5>
+                <ul>
+                    <li>Family</li>
+                    <li>Fools</li>
+                    <li>Friends</li>
+                    <li>IT Academy</li>
+                </ul>
+            </div>
+        </div>
 </div>

src/main/resources/static/header.html

@@ -4,7 +4,6 @@
     <div class="top-menu">
         <ul>
             <li><a href="index.html">home</a></li>
-            <li><a href="pages/line-up.html">line-up</a></li>
             <li><a href="programma.html">programma</a></li>
             <li><a href="index.html#contact">contact</a></li>
         </ul>

src/main/resources/static/include/mail.php

@@ -0,0 +1,27 @@
+<?php
+
+$name = $_POST['name'];
+$email = $_POST['email'];
+$phone = $_POST['phone'];
+$revenue = $_POST['revenue'];
+$message = $_POST['message'];
+
+
+$content = 'Naam: '. $name . ' Email: ' . $email . ' Phone: ' . $phone . ' Revenue: ' . $revenue . ' Message: ' . $message;
+
+$subject = 'Nieuwe aanvraag';
+$to = 'tom.sluizeman@minbzk.nl';
+$from = $email;
+
+$headers   = array();
+$headers[] = "MIME-Version: 1.0";
+$headers[] = "Content-type: text/plain; charset=iso-8859-1";
+$headers[] = "From: Noorderzon <{$from}>";
+$headers[] = "Reply-To: Noorderzon <{$from}>";
+//$headers[] = "Subject: {$subject}";
+$headers[] = "X-Mailer: PHP/".phpversion();
+
+mail($to, $subject, $content, implode("\r\n", $headers), "-f".$from );
+
+//header('Location: http://localhost:8888/src/main/resources/static/index.html);
+?>

src/main/resources/static/index.html

@@ -83,11 +83,26 @@
             <p class="section-title-3 wide">contact</p>
         </div>
         <div id="contact" class="col-lg-8 items">
-            <ul>
-                <li>Vul hier</li>
-                <li>het contact-</li>
-                <li>formulier in</li>
-            </ul>
+            <form id="formContact" action="include/mail.php" method="POST">
+                <label>Naam*
+                    <input type="text" name="name" required>
+                </label>
+                <label>E-mailadres*
+                    <input type="email" name="email" required>
+                </label>
+                <label>Telefoonnummer*
+                    <input type="number" name="phone" required>
+                </label>
+                <label>Stel je vraag
+                    <textarea type="text" name="message" rows="5"></textarea>
+                </label>
+                <input type="hidden" name="revenue" value="Empty" required>
+                <button class="buttonNeemContact" type="submit">Neem contact op</button>
+            </form>
+            <div id="bedanktForm">
+                <h3> Je contact bericht is verstuurd.</h3>
+                <h4> Don't call us, we call you!</h4>
+            </div>
         </div>
         <div class="col-lg-1 empty"></div>
     </div>
@@ -100,6 +115,25 @@
 <div w3-include-html="footer.html"></div>
 
 <script src="js/includeHTML.js"></script>
+<script>
+    $(document).ready(function () {
+    $('.buttonNeemContact').on('submit', function(e) {
+    e.preventDefault();
+    $.ajax({
+    url : $(this).attr('action') || window.location.pathname,
+    type: "GET",
+    data: $(this).serialize(),
+    success: function (data) {
+    $("#bedanktForm").html(data);
+    },
+    error: function (jXHR, textStatus, errorThrown) {
+    alert(errorThrown);
+    }
+    });
+    });
+    });
+
+</script>
 
 </body>
 </html>

src/main/resources/static/js/functions.js

@@ -17,3 +17,9 @@ $(document).ready(function(){
     animate('zoomOutUp');
   });
 });
+
+$('.buttonNeemContact').click(function(){
+    $('#bedanktForm').show('fast');
+    $('#formContact').hide('fast');
+});
+