-
Notifications
You must be signed in to change notification settings - Fork 1
/
showroom.html
197 lines (163 loc) · 7.51 KB
/
showroom.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
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Natsu ko</title>
<meta name="author" content="Maja, Mia Julia" />
<meta
name="description"
content="Interior design brand Natsu ko"/>
<meta property="og:title" content="Natsu ko">
<meta property="og:description" content="Interior design brand Natsu ko">
<meta property="og:image" content="./images/logo.png">
<link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/stylesheet.css" />
<link rel="stylesheet" href="css/showroom.css" />
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<title>natsuko</title>
</head>
<body onscroll="brandLogoScroll()">
<!--Navigation menu-->
<nav class="nav-tag navbar navbar-inverse navbar-static-t fixed-top pl-0">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class=" nav-button navbar-toggle p-3 border-light rounded" data-toggle="collapse"
data-target="#myNavbar"><i class="fa fa-bars"></i> Menu
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand-logo" class="navbar-brand ml-auto" href="#">
<img src="images/logo.png" alt="logo" style="width:100px;" />
</a>
<div class="collapse navbar-collapse all-navlinks rounded" id="myNavbar">
<ul class="nav navbar-nav our-navbar">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="index.html#news-teaser">News</a></li>
<li><a href="aboutUs.html">Portfolio</a></li>
<li><a href="showroom.html">Showrooms</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!--page content-->
<!--Heading and 3 cities-->
<div class="container header">
<h1 class="text-center heading"> Showrooms </h1>
<ul class="list-inline text-center">
<li class="list-inline-item"><a class="citylink" href="#berlin">Berlin</a></li>
<li class="list-inline-item"><a class="citylink" href="#paris">Paris</a></li>
<li class="list-inline-item"><a class="citylink" href="#london">London</a></li>
</ul>
</div>
<div class="cities-container">
<!--Berlin-->
<div id ="berlin" class="mb-3 city-block" style="full-width">
<div class="row no-gutters flex-column-reverse flex-md-row">
<div class="col-md-8 backgroundBerlin img-fluid" >
</div>
<div class="col-md-4">
<div class="adress-card">
<h5 class=" berlin">Berlin</h5>
<p class="">
<small class="text-muted">Showroom manager - Darci Partridge <br> [email protected]</small>
</p>
<p class="">Scharnhorststraße 5 <br>
10115 Berlin, Germany</p>
<button class="btn btn-outline-secondary show" >Learn more</button>
<p class="card-body read-more">
Our wish is to offer you an intimate design experience attached to an authentic scenario. The apartment and its professional staff are ready to inspire all our visitors with a private tour over amazing stories behind the pieces.
<br>
</p>
</p>
</div>
</div>
</div>
</div>
</div>
<!--Paris-->
<div id ="paris" class="mb-3 city-block">
<div class="row no-gutters flex-column-reverse flex-md-row">
<div class="col-md-8 backgroundParis img-fluid">
</div>
<div class="col-md-4">
<div class="card-body adress-card">
<h5 class="card-title">Paris</h5>
<p class="card-text">
<small class="text-muted">Showroom manager - Aimée Dalton <br> [email protected]</small>
</p>
<p class="card-text">9 Rue des Gobelins <br> 75013 Paris, France</p>
<button class="btn btn-outline-secondary show" >Learn more</button>
<p class="card-body read-more" id="more-info-paris">
A private show flat in the heart of the world’s design capital: Paris. Our wish is to offer you an intimate design experience attached to an authentic scenario. A highly trained team is waiting to explain every detail of each brand, to tell the amazing stories behind the pieces and to answer all questions.
<br>
</p>
</div>
</div>
</div>
</div>
<!--London-->
<div id ="london" class=" mb-3 city-block">
<div class="row no-gutters flex-column-reverse flex-md-row">
<div class="col-md-8 backgroundLondon img-fluid">
</div>
<div class="col-md-4">
<div class="card-body adress-card">
<h5 class="card-title">London</h5>
<p class="card-text">
<small class="text-muted">Showroom manager - Thomas Pearson <br> [email protected]</small>
</p>
<p class="card-text">191 Portobello Rd, Notting Hill <br> London W11 2ED, United Kingdom</p>
<button class="btn btn-outline-secondary show" id ="readMoreLondonButton"value="Read more" >Learn more</button>
<p class="card-body read-more" id="more-info-london">
London's showroom is a concept store that reconfigures the way we shop for home goods. The shop itself functions as the apartment of the person who curates it, allowing visitors to get a true feel for the way the various pieces come together to make a home.
<br>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small ">
<div class="footer-copyright text-center py-2 bg-white text-dark">
© 2020 Copyright:
<a
class="text-dark"
href="#"
>
Natsuko.com Website by Maja, Mia and Julia</a
>
</div>
</footer>
<script type="text/javascript" src="showroom-cities.js"></script>
<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/[email protected]/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>