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
RevLine 
[59329aa]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">
[1ad8e64]18 <li class="nav-item">
19 <button class="btn btn-dark" (click)="onClickSignUp()" type="button">Sign up</button>
20 </li>
[59329aa]21 <li class="nav-item">
[84d0fbb]22 <button class="btn btn-dark" (click)="onClickLogIn()">Sign in</button>
[59329aa]23 </li>
24 </ul>
25 </nav>
26 </header>
27
28 <main role="main">
29 <img src={{imageURI}} />
30 <h4></h4>
[bdd6491]31
32 <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
[59329aa]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>
[bdd6491]92
[59329aa]93 </main>
[bdd6491]94 <br>
[59329aa]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 -->
[bdd6491]102 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>
103
[59329aa]104 <!-- Twitter -->
[bdd6491]105 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>
106
[59329aa]107 <!-- Google -->
[bdd6491]108 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>
109
[59329aa]110 <!-- Instagram -->
[bdd6491]111 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>
112
[59329aa]113 <!-- Linkedin -->
[bdd6491]114 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>
115
[59329aa]116 <!-- Github -->
[bdd6491]117 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a>
[59329aa]118 </section>
119 <!-- Section: Social media -->
[bdd6491]120
[59329aa]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-->
[bdd6491]133
[59329aa]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-->
[bdd6491]143
[59329aa]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 -->
[bdd6491]157
[59329aa]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 -->
[bdd6491]167
[59329aa]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>
[bdd6491]175
[59329aa]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-->
[bdd6491]192
[59329aa]193 <!--Grid column-->
194 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
195 <h5 class="text-uppercase">Links</h5>
[bdd6491]196
[59329aa]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-->
[bdd6491]213
[59329aa]214 <!--Grid column-->
215 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
216 <h5 class="text-uppercase">Links</h5>
[bdd6491]217
[59329aa]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-->
[bdd6491]234
[59329aa]235 <!--Grid column-->
236 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
237 <h5 class="text-uppercase">Links</h5>
[bdd6491]238
[59329aa]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 -->
[bdd6491]261
[59329aa]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.