-
Notifications
You must be signed in to change notification settings - Fork 0
/
result.html
184 lines (169 loc) · 10.9 KB
/
result.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/custom.css">
<link rel="stylesheet" href="/css/style.css">
<title>Art Locator</title>
</head>
<body>
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-cool pl-5 pr-5 d-flex flex-column flex-md-row">
<div class="text-light" style="font-size: 30px;">
<a href="index.html">
<i class="fas fa-map-marked-alt p-2 text-danger"></i>
</a>
<span class="font-weight-bold" >Art Locator</span>
</div>
<div>
<button class="navbar-toggler" type="button" ><i class="fas fa-search p-2"></i></button>
<button class="navbar-toggler" type="button" ><i class="fas fa-users p-2"></i></button>
<button class="navbar-toggler" type="button" ><i class="fas fa-rss p-2"></i></button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars p-2"></i>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="search.html"><i class="fas fa-search p-2"></i>Locations</a></li>
<li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-users p-2"></i>About</a></li>
<li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-rss p-2"></i>Blog</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bars p-2"></i>
More
</a>
<div class="dropdown-menu nml-5 bg-cool" aria-labelledby="navbar-dropdown">
<a class="dropdown-item text-right text-light" href="#">Explore</a>
<a class="dropdown-item text-right text-light" href="#">Learn</a>
<a class="dropdown-item text-right text-light" href="#">Paint</a>
</div>
</li>
</ul>
</div>
</header>
<main class="text-light">
<section class="bg-mus pb-5 pt-5">
<div class="card col-10 m-auto bg-cool">
<div class="card-body d-flex justify-content-center flex-column align-items-center">
<h1 class="font-weight-bold text-center">Brandhorst, Munich</h1>
<h5 class="text-center pl-3 pr-3">"The Brandhorst Musem is a rather new but highly respectable German museum of contemporary art."</h5>
<img class="card-img-top w-75" src="./imgs/bg-gal.png" alt="Card image cap">
<p class="card-text p-4 text-center">It was opened in 2009 by the German state of Bavaria in order to house and showcase incredible contemporary art collection of Anette Brandhorst and her husband Udo Fritz-Hermann, heirs of Fritz Henkel, founder of the famous German chemical company. Brandhorst’s extraordinary collection, which was donated to the state after the death of Anette Brandhorst, includes a comprehensive selection of groundbreaking artworks created by artists such as Andy Warhol, Cy Twombly, Gerhard Richter, Damien Hirst, Jean-Michel Basquiat and Alex Katz. The museum’s unique two-story building, with its multi-colored facade composed of thousands of ceramic louvers glazed in different colors, houses three separate exhibition areas that are connected by stairs.</p>
<table class="table table-hover table-dark w-75">
<tbody>
<tr>
<th scope="row">Country:</th>
<td>Germany</td>
</tr>
<tr>
<th scope="row">City:</th>
<td>Munich</td>
</tr>
<tr>
<th scope="row">Street:</th>
<td>München</td>
</tr>
<tr>
<th scope="row">Number:</th>
<td>80333</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="bg-isect">
<div class="d-flex flex-column justify-content-center align-items-center">
<h2 class="text-light font-stile-bolt pt-3 pb-3">Map Directions</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2662.0347188968412!2d11.572078015458464!3d48.14813587922425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479e75ec397bee15%3A0xd0c4135e4c54520!2sMuseum%20Brandhorst!5e0!3m2!1sen!2spe!4v1585174525564!5m2!1sen!2spe"></iframe>
</div>
</section>
<!-- <section class="bg-paint">
<h2 class="col-lg-8 pt-5 pl-5">Learn</h2>
<div class="row col-lg-11 m-auto">
<div class="col-lg-4 col-md-6 m-auto">
<div class="card bg-icool mb-3">
<img class="card-img-top p-2" src="./imgs/t1.jpg" alt="">
<div class="card-body">
<h4 class="card-title">Underpainting</h4>
<p class="card-text">I never work from white when using oils or acrylics. Create an underpainting in burnt umber or a mix of burnt ...</p>
<a class="text-danger" href="https://www.creativebloq.com/art/painting-techniques-artists-31619638">more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 m-auto">
<div class="card bg-icool mb-3">
<img class="card-img-top p-2" src="./imgs/t2.jpg" alt="">
<div class="card-body">
<h4 class="card-title">Blocking in</h4>
<p class="card-text">Brushes come in a number of shapes and with different fibre types, all of which give very different results. The key is ...</p>
<a class="text-danger" href="https://www.creativebloq.com/art/painting-techniques-artists-31619638">more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-7 m-auto">
<div class="card bg-icool mb-3">
<img class="card-img-top p-2" src="./imgs/t3.jpg" alt="">
<div class="card-body">
<h4 class="card-title">Building up texture</h4>
<p class="card-text">Have a dry, flat brush that you can use to blend your paint and create smooth transitions. I tend to like lots of ...</p>
<a class="text-danger" href="https://www.creativebloq.com/art/painting-techniques-artists-31619638">more</a>
</div>
</div>
</div>
</div>
</section> -->
</main>
<footer class="text-muted bg-icool col-12">
<div class="row">
<ul class="social-media-links col-12 pt-4 pb-4">
<li><i class="fab fa-facebook-square pl-3 pr-3"></i></li>
<li><i class="fab fa-twitter pl-3 pr-3"></i></li>
<li><i class="fab fa-youtube pl-3 pr-3 text-danger"></i></li>
<li><i class="fab fa-instagram pl-3 pr-3"></i></li>
<li><i class="fab fa-pinterest-p pl-3 pr-3"></i></li>
</ul>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex flex-column align-items-center pb-4">
<h6 class="text-light">Subscribe</h6>
<div class="input-group pl-4 pr-4">
<input type="text" id="mail-input" class="form-control bg-dark text-light" placeholder="Here, Your email">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Send</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex flex-column align-items-center pb-4">
<h6 class="text-light">Contact</h6>
<span>Do you like this page?</span>
<span>Find me on<a class="text-danger" href="github.com/FrancoRosa"> Github <i class="fab fa-github"></i></a></span>
</div>
<div class="col-lg-4 d-flex flex-column align-items-center">
<h6 class="text-light">About</h6>
<span>This is a demo of my frontend taste</span>
<span>You can find the code <a class="text-danger" href="https://github.com/FrancoRosa/Art-Gallery-Locator/tree/main-page">here.</a></span>
</div>
</div>
<div class="row d-flex justify-content-between pt-5">
<ul class="list-unstyled list-inline pl-2">
<li class="list-inline-item">Copyright © 2020</li>
</ul>
<ul class="list-unstyled text-danger list-inline pr-2">
<li class="list-inline-item"><a class="text-danger" href="#">Terms of use</a></li>
<li class="list-inline-item"><a class="text-danger" href="#">Privacy Policy</a></li>
<li class="list-inline-item"><a class="text-danger" href="#">Devs</a></li>
</ul>
</div>
</footer>
<!-- Optional JavaScript -->
<script src="https://kit.fontawesome.com/8e996abce9.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>