source: source/freeparkingspace/src/main/resources/templates/home.html

Last change on this file was 31d67c0, checked in by zlatko2810 <zlatko.stojanovski@…>, 2 years ago

proekt
  • Property mode set to 100644
File size: 7.9 KB
Line 
1<!DOCTYPE html>
2<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
3<head>
4 <base href="${pageContext.request.contextPath}">
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>ДОБРЕДОЈДОВТЕ!</title>
8 <meta name="description" content="">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <style>
11 @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
12 @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
13
14 :root {
15 --shadow-color: #FF9E9E;
16 --shadow-color-light: white;
17 }
18
19 .navbar {
20 max-width: 100%;
21 height: 100%;
22 background: rgba(0,0,0,0.25);
23 }
24
25 header {
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 padding: 30px 10%;
30 max-width: 100%;
31 height: 10%;
32 background-color: rgb(0, 0, 0, 0.25);
33 border: none;
34 }
35
36 table{
37 color: white;
38 font-size: 0.3rem;
39 background: rgba(255,255,255,0.05);
40 }
41
42 img {
43 width: 120px;
44 height: 120px;
45 }
46 html{
47 text-align: center;
48 }
49 body {
50 padding: 0;
51 margin: 0;
52 max-width: 100%;
53 background-image: url('../images/background1.jpg');
54 object-fit: cover;
55 height: 100vh;
56 background-size: cover;
57 background-repeat: repeat;
58 text-align: center;
59 }
60
61
62 li,
63 a:not(.btn) {
64 font-family: "Montserrat", sans-serif;
65 font-weight: 500;
66 font-size: 1.2rem;
67 text-decoration: none;
68 color: white;
69 padding: 10%;
70 list-style: none;
71 }
72
73 h1{
74 font-family: 'Roboto', sans-serif;
75 font-width: 900;
76 font-size: 5rem;
77
78 }
79
80 .right {
81 display: flex;
82 align-items: center;
83 justify-content: center;
84 background-color: rgb(0, 225, 255, 0.05);
85 border-radius: 10%;
86 flex-direction: row;
87 margin-left: 25%;
88 width: 17%;
89 height: 2%;
90 }
91
92 .right a {
93 margin: -5px;
94 }
95 .navbar{
96 max-width: 100%;
97 height: 100vh;
98 }
99
100 .reg {
101 color: rgb(255, 0, 0);
102 }
103
104 ul {
105 display: flex;
106 flex-direction: row;
107 }
108
109
110
111 .reg:hover {
112 color: white;
113 }
114 .container-main{
115 display: flex;
116 flex-direction: column;
117 align-items: center;
118 justify-content: center;
119 width: 100%;
120 height: 100%
121 }
122 P{
123 font-family: "Montserrat", sans-serif;
124 font-weight: 500;
125 font-size: 4rem;
126 text-decoration: none;
127 color: white;
128 width: 80%;
129 list-style: none;
130 margin-top: -2%;
131 }
132
133 .glow{
134 text-transform: uppercase;
135 height: auto;
136 text-align: center;
137 }
138
139 .glow {
140 color: white;
141 animation: neon 3s infinite;
142 }
143
144 .h1Combined{
145 display: flex;
146 flex-direction: row;
147 align-items: center;
148 justify-content: center;
149 max-width: 100%;
150 }
151
152 @keyframes neon {
153 0% {
154 text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
155 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
156 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
157 }
158 50% {
159 text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
160 0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
161 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
162 }
163 100% {
164 text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
165 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
166 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
167 }
168 }
169
170 .btn{
171 text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
172 border: 1px solid #b70000;
173 color: white;
174 font-size: 3vw;
175 border:none;
176 background: #af0101;
177 padding: 0.5rem 1.3rem;
178 border-radius: 10%;
179 cursor: pointer;
180 transition: 1s ease;
181 display:block;
182 box-shadow: 3px 2px 10px #d50101,
183 -1px -1px 1px #e60000;
184 font-family: 'Roboto', sans-serif;
185 font-weight: 500;
186 text-decoration: none;
187 transition: infinite 1s ease;
188 }
189
190 .btn:hover{
191 background-color: #58ACFA;
192 color: white;
193 font-size: 3rem;
194 }
195
196 .btn2{
197 text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
198 border: 1px solid #b70000;
199 color: white;
200 font-size: 1.5rem;
201 border:none;
202 background: #af0101;
203 padding: 0.5rem 1.3rem;
204 border-radius: 10%;
205 cursor: pointer;
206 transition: 1s ease;
207 display:block;
208 box-shadow: 3px 2px 10px #d50101,
209 -1px -1px 1px #e60000;
210 font-family: 'Roboto', sans-serif;
211 font-weight: 500;
212 text-decoration: none;
213 transition: infinite 1s ease;
214 }
215
216 .btn2:hover{
217 background-color: #58ACFA;
218 color: white;
219 }
220
221
222 </style>
223</head>
224
225<body>
226<div class="navbar">
227 <!-- <header th:replace="fragments/header.html">-->
228 <!-- </header>-->
229 <main>
230 <div class="container-main">
231 <div class="h1Combined" style="margin-bottom: 5%">
232 <h1 style="color:white">FreeParking <h1 style="color:red">Space</h1></h1>
233 </div>
234 <p style="text-align: center;margin-bottom: 3%; background-color: rgba(0,0,0,0.35); font-size: 2.5rem;">
235 Платформата FreeParkingSpace ќе го реши проблемот за залудно потрошеното време на поединецот
236 во пронаоѓање на паркинг место низ густо населениот главен град. Главна карактеристика на оваа платофрма
237 е дека точно покажува на секој паркинг во кој реон има слободно место.
238 </p>
239 <a class="btn" th:href="@{/reservation-info}">Reservation</a>
240 </div>
241 </main>
242 <!--<footer th:replace="fragments/footer"/>-->
243</div>
244</body>
245</html>
Note: See TracBrowser for help on using the repository browser.