source: source/freeparkingspace/src/main/resources/templates/master-template.html@ 31d67c0

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

proekt
  • Property mode set to 100644
File size: 7.3 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 <meta charset="UTF-8"/>
5 <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">
6 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
7 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
8 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
9 <style>
10 @import url('https://fonts.googleapis.com/css?family=Montserrat:500');
11 @import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:ital,wght@0,900;1,900&display=swap');
12
13 :root {
14 --shadow-color: #FF9E9E;
15 --shadow-color-light: white;
16 }
17
18 .navbar {
19 max-width: 100%;
20 height: 100%;
21 background: rgba(0,0,0,0.25);
22 }
23
24 header {
25 display: flex;
26 justify-content: center;
27 align-items: center;
28 padding: 30px 10%;
29 max-width: 100%;
30 height: 10%;
31 background-color: rgb(0, 0, 0, 0.25);
32 border: none;
33 }
34
35 table{
36 color: white;
37 font-size: 0.3rem;
38 background: rgba(255,255,255,0.05);
39 }
40
41 img {
42 width: 120px;
43 height: 120px;
44 }
45 html{
46 text-align: center;
47 }
48 body {
49 padding: 0;
50 margin: 0;
51 max-width: 100%;
52 object-fit: cover;
53 height: 100vh;
54 background-size: cover;
55 background-repeat: repeat;
56 text-align: center;
57 }
58
59
60 li,
61 a:not(.btn) {
62 font-family: "Montserrat", sans-serif;
63 font-weight: 500;
64 font-size: 1.2rem;
65 text-decoration: none;
66 color: white;
67 padding: 10%;
68 list-style: none;
69 }
70
71 h1{
72 font-family: 'Roboto', sans-serif;
73 font-width: 900;
74 font-size: 5rem;
75
76 }
77
78 .right {
79 display: flex;
80 align-items: center;
81 justify-content: center;
82 background-color: rgb(0, 225, 255, 0.05);
83 border-radius: 10%;
84 flex-direction: row;
85 margin-left: 25%;
86 width: 17%;
87 height: 2%;
88 }
89
90 .right a {
91 margin: -5px;
92 }
93 .navbar{
94 max-width: 100%;
95 height: 100vh;
96 }
97
98 .reg {
99 color: rgb(255, 0, 0);
100 }
101
102 ul {
103 display: flex;
104 flex-direction: row;
105 }
106
107
108
109 .reg:hover {
110 color: white;
111 }
112 .container-main{
113 display: flex;
114 flex-direction: column;
115 align-items: center;
116 justify-content: center;
117 width: 100%;
118 height: 100vh;
119 }
120 P{
121 font-family: "Montserrat", sans-serif;
122 font-weight: 500;
123 font-size: 4rem;
124 text-decoration: none;
125 color: white;
126 width: 80%;
127 list-style: none;
128 margin-top: -2%;
129 }
130
131 .glow{
132 text-transform: uppercase;
133 height: auto;
134 text-align: center;
135 }
136
137 .glow {
138 color: white;
139 animation: neon 3s infinite;
140 }
141
142 .h1Combined{
143 display: flex;
144 flex-direction: row;
145 align-items: center;
146 justify-content: center;
147 max-width: 100%;
148 }
149
150 @keyframes neon {
151 0% {
152 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),
153 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
154 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);
155 }
156 50% {
157 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),
158 0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
159 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);
160 }
161 100% {
162 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),
163 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
164 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);
165 }
166 }
167
168 .btn{
169 text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
170 border: 1px solid #b70000;
171 color: white;
172 font-size: 1.5rem;
173 border:none;
174 background: #af0101;
175 padding: 0.5rem 1.3rem;
176 border-radius: 10%;
177 cursor: pointer;
178 transition: 1s ease;
179 display:block;
180 box-shadow: 3px 2px 10px #d50101,
181 -1px -1px 1px #e60000;
182 font-family: 'Roboto', sans-serif;
183 font-weight: 500;
184 text-decoration: none;
185 transition: infinite 1s ease;
186 }
187
188 .btn:hover{
189 background-color: #58ACFA;
190 color: white;
191 }
192
193 .btn2{
194 text-shadow: -1px -1px 10px rgba(255,255,255,0.5);
195 border: 1px solid #b70000;
196 color: white;
197 font-size: 1rem;
198 border:none;
199 background: #af0101;
200 padding: 0.5rem 1.3rem;
201 border-radius: 10%;
202 cursor: pointer;
203 transition: 1s ease;
204 display:block;
205 box-shadow: 3px 2px 10px #d50101,
206 -1px -1px 1px #e60000;
207 font-family: 'Roboto', sans-serif;
208 font-weight: 500;
209 text-decoration: none;
210 transition: infinite 1s ease;
211 }
212
213 .btn2:hover{
214 background-color: #58ACFA;
215 color: white;
216 }
217 </style>
218</head>
219<body>
220<header th:replace="fragments/header"/>
221<!--<header style="margin:0px;width: 0%;height: 0%"></header>-->
222<section th:include="${bodyContent}" />
223
224</body>
225</html>
Note: See TracBrowser for help on using the repository browser.