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

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

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