Index: src/main/resources/templates/Home.html
===================================================================
--- src/main/resources/templates/Home.html	(revision a51a591b1eec04fb1d9d9128cf341696beef9312)
+++ src/main/resources/templates/Home.html	(revision de70cd4fbb548837239a11395f292094a60fa5b9)
@@ -4,15 +4,15 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <style>
-        .navbar {
+
+        .navbar{
             background: darkkhaki;
-        }
-
-        span {
+
+        }
+        span{
             color: #b2d7ff;
             text-decoration: none;
             background: transparent;
         }
-
-        ul {
+        ul{
             text-align: justify;
             margin-left: 50px;
@@ -20,25 +20,30 @@
 
         }
-
-        body {
-            background-image: url("https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80");
+        #txt {text-align: center;
+            margin-top:17.2rem;
+            margin-bottom: 300px;
+            font-size: 110px;
+            color: black;
+        }
+        #txt1 {text-align: center;
+            margin-top:17.2rem;
+            margin-bottom: 300px;
+            font-size: 110px;
+            color: black;
+        }
+        body{
+            background-image: url("../static/eventrabg.jpg");
             background-size: 100%;
             background-repeat: no-repeat;
-            background-position: center top -150px; /* Adjust the background position to move the image up */
-        }
-
-        .navbar-brand {
-            color: #343a40;
-            font-weight: bold;
-        }
-
-        .nav-link {
-            color: #343a40;
-            font-weight: bold;
-
-        }
-
-        footer {
-            position: fixed;
+        }
+        .navbar-brand{
+            color:yellow;
+        }
+        .nav-link{
+            color: yellow;
+        }
+
+        footer{
+            position: absolute;
             bottom: 0;
             left: 0;
@@ -47,9 +52,9 @@
             height: auto;
             width: 100vw;
+
             padding-top: 40px;
             color: #fff;
         }
-
-        .footer-content {
+        .footer-content{
             display: flex;
             align-items: center;
@@ -57,16 +62,13 @@
             flex-direction: column;
             text-align: center;
-            height: 80px;
-        }
-
-        .footer-content h3 {
+            height: 100px;
+        }
+        .footer-content h3{
             font-size: 2.1rem;
             font-weight: 500;
             text-transform: capitalize;
             line-height: 3rem;
-            margin-top: 20px;
-        }
-
-        .footer-content p {
+        }
+        .footer-content p{
             max-width: 500px;
             margin: 10px auto;
@@ -75,6 +77,5 @@
             color: #cacdd2;
         }
-
-        .socials {
+        .socials{
             list-style: none;
             display: flex;
@@ -83,28 +84,36 @@
             margin: 1rem 0 3rem 0;
         }
-
-        .socials li {
+        .socials li{
             margin: 0 10px;
         }
-
-        .socials a {
+        .socials a{
             text-decoration: none;
             color: #fff;
             border: 1.1px solid white;
             padding: 5px;
+
             border-radius: 50%;
-        }
-
-        .socials a i {
+
+        }
+        .socials a i{
             font-size: 1.1rem;
             width: 20px;
+
+
             transition: color .4s ease;
-        }
-
-        .socials a:hover i {
+
+        }
+        .socials a:hover i{
             color: aqua;
         }
 
-        .footer-bottom p {
+        .footer-bottom{
+            background: #000;
+            width: 100vw;
+            padding: 20px;
+            padding-bottom: 40px;
+            text-align: center;
+        }
+        .footer-bottom p{
             float: left;
             font-size: 14px;
@@ -112,37 +121,35 @@
             text-transform: capitalize;
         }
-
-        .footer-bottom p a {
-            color: #44bae8;
+        .footer-bottom p a{
+            color:#44bae8;
             font-size: 16px;
             text-decoration: none;
         }
-
-        .footer-bottom span {
+        .footer-bottom span{
             text-transform: uppercase;
             opacity: .4;
             font-weight: 200;
         }
-
-        .footer-menu ul {
+        .footer-menu{
+            float: right;
+
+        }
+        .footer-menu ul{
             display: flex;
         }
-
-        .footer-menu ul li {
+        .footer-menu ul li{
             padding-right: 10px;
             display: block;
         }
-
-        .footer-menu ul li a {
+        .footer-menu ul li a{
             color: #cfd2d6;
             text-decoration: none;
         }
-
-        .footer-menu ul li a:hover {
+        .footer-menu ul li a:hover{
             color: #27bcda;
         }
 
-        @media (max-width: 500px) {
-            .footer-menu ul {
+        @media (max-width:500px) {
+            .footer-menu ul{
                 display: flex;
                 margin-top: 10px;
@@ -151,5 +158,5 @@
         }
 
-        .kopce {
+        .kopce{
             background-color: mediumslateblue;
             border: none;
@@ -163,117 +170,116 @@
         }
 
-        /*#logo{*/
-        /*    width:160px;*/
-        /*    height: 60px*/
-        /*}*/
-        h1 {
-            color: black;
-            font-size: 60px;
-            font-weight: 700;
-            letter-spacing: 8px;
-            margin-bottom: 20px;
-            margin-left: auto;
-            margin-right: auto;
-            margin-top: 50px;
-            position: relative;
-            animation: text 3s 1;
-        }
-
-        @keyframes text {
-            0% {
-                color: black;
-                margin-bottom: -40px;
-            }
-            30% {
-                letter-spacing: 25px;
-                margin-bottom: -40px;
-            }
-            85% {
-                letter-spacing: 8px;
-                margin-bottom: -40px;
-            }
-        }
-
-        footer {
-            width: 100%;
-            padding: 20px;
-            box-sizing: border-box;
+        #logo{
+            width:160px;
+            height: 60px
         }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8"/>
-    <title>Home - Eventrra</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-            crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
-            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
-            crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
-            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
-            crossorigin="anonymous"></script>
+    <title>Home</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 </head>
 <body>
 <div>
-    <nav class="navbar navbar-expand-md ">
-        <div class="container">
-            <!--                    <img class="u-image u-image-default u-image-1" src="../static/logoeventra.png" alt="" data-image-width="648" data-image-height="292">-->
-            <!--                <a class="navbar-brand" href="/home"></a>-->
-            <a class="navbar-brand"> Eventrra</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
-                    aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
-                <ul class="navbar-nav m-auto">
-
-                    <li th:if="${session.user!=null}" class="nav-item m-auto">
-                        <a class="nav-link active" href="/">Home</a>
-                    </li>
-
-                    <li th:if="${session.user!=null and session.role == 'ROLE_CLIENT'}"
-                        class="nav-item m-auto">
-                    <a class="kopce" href="/host_event">Host an event</a>
-                    </li>
-                    <li th:if="${session.user!=null}" class="nav-item m-auto">
-                        <a class="nav-link active" href="/my_events">Scheduled events</a>
-                    </li>
-                </ul>
-
-                <form class="form-inline my-2 my-lg-0">
-
-                    <div th:if="${session.user==null}">
-                        <a class="btn btn-light btn-sm ml-3" href="/login">
-                            Login
-                        </a>
-
-                        <a class="btn btn-light btn-sm ml-3" href="/register">
-                            Sign up
-                        </a>
-                    </div>
-                    <div style="text-align: center" th:if="${session.user!=null}" class="nav-item m-auto">
-                        <a th:text="${session.user.username}" style="color:white; font-size: 20px;"
-                           class="nav-link active" href="/login/profile"></a>
-                    </div>
-
-                    <div th:if="${session.user!=null}">
-                        <a class="btn btn-light btn-sm ml-3" href="/logout">
-                            Log out
-                        </a>
-                    </div>
-                </form>
+<nav class="navbar navbar-expand-md ">
+    <div  class="container">
+
+        <img id="logo" src="../static/logoeventra.png">
+        <a class="navbar-brand" href="/home"></a>
+        <a class="navbar-brand" href="/home"> Eventrra</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
+                aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
+            <ul class="navbar-nav m-auto">
+
+                <li  class="nav-item m-auto">
+                    <a  class="nav-link active" href="/home">Home</a>
+                </li>
+
+                <li  class="nav-item m-auto">
+                    <a class="kopce" href="/home/hostevent">Host an event</a>
+                </li>
+            </ul>
+            <form class="form-inline my-2 my-lg-0">
+
+            <div th:if="${session.user==null}">
+                    <a class="btn btn-light btn-sm ml-3" href="/login">
+                         Login
+                    </a>
+
+                    <a  class="btn btn-light btn-sm ml-3" href="/register">
+                         SignUp
+                    </a>
             </div>
+                <div  style="  text-align: center"  th:if="${session.user!=null}" class="nav-item m-auto">
+                    <a th:text="${session.user.username}" style="color:white; font-size: 20px;" class="nav-link active" href="/login/profile"></a>
+                </div>
+
+                <div th:if="${session.user!=null}">
+                    <a class="btn btn-light btn-sm ml-3" href="/logout">
+                         Log out
+                    </a>
+
+
+
+                    </a>
+                </div>
+
+            </form>
         </div>
-    </nav>
+    </div>
+</nav>
 </div>
-<!--        <div class="ml-5">-->
-<!--        <img class="img-fluid" src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80" alt="Image">-->
-<!--        </div>-->
+
+
+
+
+<style>
+    h1{
+        color: black;
+        font-size: 60px;
+        font-weight: 700;
+        letter-spacing: 8px;
+        margin-bottom: 20px;
+        margin-left:auto;
+        margin-right:auto;
+        margin-top:50px;
+        position: relative;
+        animation: text 3s 1;
+    }
+
+
+    @keyframes text {
+        0%{
+            color: black;
+            margin-bottom: -40px;
+        }
+        30%{
+            letter-spacing: 25px;
+            margin-bottom: -40px;
+        }
+        85%{
+            letter-spacing: 8px;
+            margin-bottom: -40px;
+        }
+    }
+
+</style>
+
+
+
+</section>
+</body>
+<!-- Footer -->
+
+
 <footer>
     <div class="footer-content">
-        <br>
         <h3>Contact us</h3>
 
@@ -286,5 +292,12 @@
         </ul>
     </div>
+
+
 </footer>
-</body>
+
+
+
+
+
+
 </html>
