source: trip-planner-front/src/app/homepage/homepage.component.html@ 1ad8e64

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

spring security
  • 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">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 </main>
94<br>
95
96 <footer class="bg-dark text-center text-white">
97 <!-- Grid container -->
98 <div class="container p-4">
99 <!-- Section: Social media -->
100 <section class="mb-4">
101 <!-- Facebook -->
102 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
103 ><i class="fab fa-facebook-f"></i
104 ></a>
105
106 <!-- Twitter -->
107 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
108 ><i class="fab fa-twitter"></i
109 ></a>
110
111 <!-- Google -->
112 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
113 ><i class="fab fa-google"></i
114 ></a>
115
116 <!-- Instagram -->
117 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
118 ><i class="fab fa-instagram"></i
119 ></a>
120
121 <!-- Linkedin -->
122 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
123 ><i class="fab fa-linkedin-in"></i
124 ></a>
125
126 <!-- Github -->
127 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
128 ><i class="fab fa-github"></i
129 ></a>
130 </section>
131 <!-- Section: Social media -->
132
133 <!-- Section: Form -->
134 <section class="">
135 <form action="">
136 <!--Grid row-->
137 <div class="row d-flex justify-content-center">
138 <!--Grid column-->
139 <div class="col-auto">
140 <p class="pt-2">
141 <strong>Sign up for our newsletter</strong>
142 </p>
143 </div>
144 <!--Grid column-->
145
146 <!--Grid column-->
147 <div class="col-md-5 col-12">
148 <!-- Email input -->
149 <div class="form-outline form-white mb-4">
150 <input type="email" id="form5Example21" class="form-control" />
151 <label class="form-label" for="form5Example21">Email address</label>
152 </div>
153 </div>
154 <!--Grid column-->
155
156 <!--Grid column-->
157 <div class="col-auto">
158 <!-- Submit button -->
159 <button type="submit" class="btn btn-outline-light mb-4">
160 Subscribe
161 </button>
162 </div>
163 <!--Grid column-->
164 </div>
165 <!--Grid row-->
166 </form>
167 </section>
168 <!-- Section: Form -->
169
170 <!-- Section: Text -->
171 <section class="mb-4">
172 <p>
173 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt distinctio earum
174 repellat quaerat voluptatibus placeat nam, commodi optio pariatur est quia magnam
175 eum harum corrupti dicta, aliquam sequi voluptate quas.
176 </p>
177 </section>
178 <!-- Section: Text -->
179
180 <!-- Section: Links -->
181 <section class="">
182 <!--Grid row-->
183 <div class="row">
184 <!--Grid column-->
185 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
186 <h5 class="text-uppercase">Links</h5>
187
188 <ul class="list-unstyled mb-0">
189 <li>
190 <a href="#!" class="text-white">Link 1</a>
191 </li>
192 <li>
193 <a href="#!" class="text-white">Link 2</a>
194 </li>
195 <li>
196 <a href="#!" class="text-white">Link 3</a>
197 </li>
198 <li>
199 <a href="#!" class="text-white">Link 4</a>
200 </li>
201 </ul>
202 </div>
203 <!--Grid column-->
204
205 <!--Grid column-->
206 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
207 <h5 class="text-uppercase">Links</h5>
208
209 <ul class="list-unstyled mb-0">
210 <li>
211 <a href="#!" class="text-white">Link 1</a>
212 </li>
213 <li>
214 <a href="#!" class="text-white">Link 2</a>
215 </li>
216 <li>
217 <a href="#!" class="text-white">Link 3</a>
218 </li>
219 <li>
220 <a href="#!" class="text-white">Link 4</a>
221 </li>
222 </ul>
223 </div>
224 <!--Grid column-->
225
226 <!--Grid column-->
227 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
228 <h5 class="text-uppercase">Links</h5>
229
230 <ul class="list-unstyled mb-0">
231 <li>
232 <a href="#!" class="text-white">Link 1</a>
233 </li>
234 <li>
235 <a href="#!" class="text-white">Link 2</a>
236 </li>
237 <li>
238 <a href="#!" class="text-white">Link 3</a>
239 </li>
240 <li>
241 <a href="#!" class="text-white">Link 4</a>
242 </li>
243 </ul>
244 </div>
245 <!--Grid column-->
246
247 <!--Grid column-->
248 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
249 <h5 class="text-uppercase">Links</h5>
250
251 <ul class="list-unstyled mb-0">
252 <li>
253 <a href="#!" class="text-white">Link 1</a>
254 </li>
255 <li>
256 <a href="#!" class="text-white">Link 2</a>
257 </li>
258 <li>
259 <a href="#!" class="text-white">Link 3</a>
260 </li>
261 <li>
262 <a href="#!" class="text-white">Link 4</a>
263 </li>
264 </ul>
265 </div>
266 <!--Grid column-->
267 </div>
268 <!--Grid row-->
269 </section>
270 <!-- Section: Links -->
271 </div>
272 <!-- Grid container -->
273
274 <!-- Copyright -->
275 <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
276 © 2020 Copyright:
277 <a class="text-white" href="#">Trivia trip</a>
278 </div>
279 <!-- Copyright -->
280 </footer>
281 <!-- Footer -->
282</body>
283
284</html>
Note: See TracBrowser for help on using the repository browser.