source: trip-planner-front/src/app/homepage/homepage.component.html@ 84d0fbb

Last change on this file since 84d0fbb was 84d0fbb, checked in by Ema <ema_spirova@…>, 3 years ago

spring security 2.0
  • Property mode set to 100644
File size: 9.2 KB
Line 
1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
2 integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
3<html lang="en">
4
5<head>
6 <meta charset="utf-8">
7
8 <title></title>
9</head>
10
11<body>
12
13 <header>
14 <nav class="navbar navbar-expand-sm bg-light">
15 <img src={{myLogo}} />
16 <strong class="navbar-brand">Trivia Trip</strong>
17
18 <ul class="navbar-nav ml-auto">
19 <li class="nav-item">
20 <button class="btn btn-dark" (click)="onClickSignUp()" type="button">Sign up</button>
21 </li>
22 <li class="nav-item">
23 <button class="btn btn-dark" (click)="onClickLogIn()">Sign in</button>
24 </li>
25 </ul>
26 </nav>
27 </header>
28
29 <main role="main">
30 <img src={{imageURI}} />
31 <h4></h4>
32<!--
33 <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
34 <div class="card">
35 <p-carousel [value]="locations" [numVisible]="3" [numScroll]="3" [circular]="false"
36 [responsiveOptions]="responsiveOptions">
37 <ng-template pTemplate="header">
38 <h5>Weekend favourites</h5>
39 </ng-template>
40 <ng-template let-data pTemplate="item">
41 <div class="product-item">
42 <div class="product-item-content">
43 <div class="p-mb-3">
44 <img src="data:image/png;base64,{{data.photo}}" class="product-image" />
45 </div>
46 <div>
47 <h4 class="p-mb-1">{{data.name}}</h4>
48 <div class="car-buttons p-mt-5">
49 <p-button type="button" styleClass="p-button p-button-rounded p-mr-2" icon="pi pi-search">
50 </p-button>
51 <p-button type="button" styleClass="p-button-success p-button-rounded p-mr-2"
52 icon="pi pi-star-fill"></p-button>
53 <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
54 </div>
55 </div>
56 </div>
57 </div>
58 </ng-template>
59 </p-carousel>
60 </div>
61 </div>
62
63
64 <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
65 <div class="card">
66 <p-carousel [value]="villages" [numVisible]="3" [numScroll]="3" [circular]="false"
67 [responsiveOptions]="responsiveOptions">
68 <ng-template pTemplate="header">
69 <h5>Rural tourism</h5>
70 </ng-template>
71 <ng-template let-village pTemplate="item">
72 <div class="product-item">
73 <div class="product-item-content">
74 <div class="p-mb-3">
75 <img src="data:image/png;base64,{{village.photo}}" class="product-image" />
76 </div>
77 <div>
78 <h4 class="p-mb-1">{{village.name}}</h4>
79 <div class="car-buttons p-mt-5">
80 <p-button type="button" styleClass="p-button p-button-rounded p-mr-2" icon="pi pi-search">
81 </p-button>
82 <p-button type="button" styleClass="p-button-success p-button-rounded p-mr-2"
83 icon="pi pi-star-fill"></p-button>
84 <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
85 </div>
86 </div>
87 </div>
88 </div>
89 </ng-template>
90 </p-carousel>
91 </div>
92 </div>
93-->
94
95 </main>
96<br>
97
98 <footer class="bg-dark text-center text-white">
99 <!-- Grid container -->
100 <div class="container p-4">
101 <!-- Section: Social media -->
102 <section class="mb-4">
103 <!-- Facebook -->
104 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
105 ><i class="fab fa-facebook-f"></i
106 ></a>
107
108 <!-- Twitter -->
109 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
110 ><i class="fab fa-twitter"></i
111 ></a>
112
113 <!-- Google -->
114 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
115 ><i class="fab fa-google"></i
116 ></a>
117
118 <!-- Instagram -->
119 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
120 ><i class="fab fa-instagram"></i
121 ></a>
122
123 <!-- Linkedin -->
124 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
125 ><i class="fab fa-linkedin-in"></i
126 ></a>
127
128 <!-- Github -->
129 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
130 ><i class="fab fa-github"></i
131 ></a>
132 </section>
133 <!-- Section: Social media -->
134
135 <!-- Section: Form -->
136 <section class="">
137 <form action="">
138 <!--Grid row-->
139 <div class="row d-flex justify-content-center">
140 <!--Grid column-->
141 <div class="col-auto">
142 <p class="pt-2">
143 <strong>Sign up for our newsletter</strong>
144 </p>
145 </div>
146 <!--Grid column-->
147
148 <!--Grid column-->
149 <div class="col-md-5 col-12">
150 <!-- Email input -->
151 <div class="form-outline form-white mb-4">
152 <input type="email" id="form5Example21" class="form-control" />
153 <label class="form-label" for="form5Example21">Email address</label>
154 </div>
155 </div>
156 <!--Grid column-->
157
158 <!--Grid column-->
159 <div class="col-auto">
160 <!-- Submit button -->
161 <button type="submit" class="btn btn-outline-light mb-4">
162 Subscribe
163 </button>
164 </div>
165 <!--Grid column-->
166 </div>
167 <!--Grid row-->
168 </form>
169 </section>
170 <!-- Section: Form -->
171
172 <!-- Section: Text -->
173 <section class="mb-4">
174 <p>
175 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt distinctio earum
176 repellat quaerat voluptatibus placeat nam, commodi optio pariatur est quia magnam
177 eum harum corrupti dicta, aliquam sequi voluptate quas.
178 </p>
179 </section>
180 <!-- Section: Text -->
181
182 <!-- Section: Links -->
183 <section class="">
184 <!--Grid row-->
185 <div class="row">
186 <!--Grid column-->
187 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
188 <h5 class="text-uppercase">Links</h5>
189
190 <ul class="list-unstyled mb-0">
191 <li>
192 <a href="#!" class="text-white">Link 1</a>
193 </li>
194 <li>
195 <a href="#!" class="text-white">Link 2</a>
196 </li>
197 <li>
198 <a href="#!" class="text-white">Link 3</a>
199 </li>
200 <li>
201 <a href="#!" class="text-white">Link 4</a>
202 </li>
203 </ul>
204 </div>
205 <!--Grid column-->
206
207 <!--Grid column-->
208 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
209 <h5 class="text-uppercase">Links</h5>
210
211 <ul class="list-unstyled mb-0">
212 <li>
213 <a href="#!" class="text-white">Link 1</a>
214 </li>
215 <li>
216 <a href="#!" class="text-white">Link 2</a>
217 </li>
218 <li>
219 <a href="#!" class="text-white">Link 3</a>
220 </li>
221 <li>
222 <a href="#!" class="text-white">Link 4</a>
223 </li>
224 </ul>
225 </div>
226 <!--Grid column-->
227
228 <!--Grid column-->
229 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
230 <h5 class="text-uppercase">Links</h5>
231
232 <ul class="list-unstyled mb-0">
233 <li>
234 <a href="#!" class="text-white">Link 1</a>
235 </li>
236 <li>
237 <a href="#!" class="text-white">Link 2</a>
238 </li>
239 <li>
240 <a href="#!" class="text-white">Link 3</a>
241 </li>
242 <li>
243 <a href="#!" class="text-white">Link 4</a>
244 </li>
245 </ul>
246 </div>
247 <!--Grid column-->
248
249 <!--Grid column-->
250 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
251 <h5 class="text-uppercase">Links</h5>
252
253 <ul class="list-unstyled mb-0">
254 <li>
255 <a href="#!" class="text-white">Link 1</a>
256 </li>
257 <li>
258 <a href="#!" class="text-white">Link 2</a>
259 </li>
260 <li>
261 <a href="#!" class="text-white">Link 3</a>
262 </li>
263 <li>
264 <a href="#!" class="text-white">Link 4</a>
265 </li>
266 </ul>
267 </div>
268 <!--Grid column-->
269 </div>
270 <!--Grid row-->
271 </section>
272 <!-- Section: Links -->
273 </div>
274 <!-- Grid container -->
275
276 <!-- Copyright -->
277 <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
278 © 2020 Copyright:
279 <a class="text-white" href="#">Trivia trip</a>
280 </div>
281 <!-- Copyright -->
282 </footer>
283 <!-- Footer -->
284</body>
285
286</html>
Note: See TracBrowser for help on using the repository browser.