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

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

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