-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·218 lines (213 loc) · 9.5 KB
/
index.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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exhibition</title>
<meta name="description" content="A room that show exhibition details in 3D perspective." />
<meta name="keywords" content="tanea joshi, 3D design, 3d, room, exhibition, gallery, web design, github" />
<meta name="author" content="taneajoshi" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script>document.documentElement.className = 'js';
// This adds a class to the root <html>, so you could (for example) do something like hide a <div> only when JavaScript is enabled.
// For example .js div#id { display: none; }
</script>
</head>
<body>
<svg class="hidden">
<symbol id="icon-menu" viewBox="0 0 24 24">
<title>menu</title>
<path d="M24,5.8H0v-2h24V5.8z M19.8,11H4.2v2h15.6V11z M24,18.2H0v2h24V18.2z"/>
</symbol>
<symbol id="icon-cross" viewBox="0 0 24 24">
<title>cross</title>
<path d="M13.4,12l7.8,7.8l-1.4,1.4l-7.8-7.8l-7.8,7.8l-1.4-1.4l7.8-7.8L2.7,4.2l1.4-1.4l7.8,7.8l7.8-7.8l1.4,1.4L13.4,12z"/>
</symbol>
</svg>
<div class="container">
<div class="scroller">
<div class="room room--current">
<div class="room__side room__side--back">
<img class="room__img" src="img/set5/2.jpeg" alt="Some image"/>
<img class="room__img" src="img/set5//8.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--left">
<img class="room__img" src="img/set5//7.jpeg" alt="Some image"/>
<img class="room__img" src="img/set5//1.jpeg" alt="Some image"/>
<img class="room__img" src="img/set5//3.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--right">
<img class="room__img" src="img/set5//4.jpeg" alt="Some image"/>
<img class="room__img" src="img/set5//5.jpeg" alt="Some image"/>
<img class="room__img" src="img/set5//6.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--bottom"></div>
</div><!-- /room -->
<div class="room">
<div class="room__side room__side--back">
<img class="room__img" src="img/set1/1.jpeg" alt="Some image"/>
<img class="room__img" src="img/set1/6.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--left">
<img class="room__img" src="img/set1/3.jpeg" alt="Some image"/>
<img class="room__img" src="img/set1/4.jpeg" alt="Some image"/>
<img class="room__img" src="img/set1/5.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--right">
<img class="room__img" src="img/set1/8.jpeg" alt="Some image"/>
<img class="room__img" src="img/set1/7.jpeg" alt="Some image"/>
<img class="room__img" src="img/set1/2.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--bottom"></div>
</div><!-- /room -->
<div class="room">
<div class="room__side room__side--back">
<img class="room__img" src="img/set3/5.jpeg" alt="Some image"/>
<img class="room__img" src="img/set3/8.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--left">
<img class="room__img" src="img/set3/3.jpeg" alt="Some image"/>
<img class="room__img" src="img/set3/4.jpeg" alt="Some image"/>
<img class="room__img" src="img/set3/1.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--right">
<img class="room__img" src="img/set3/6.jpeg" alt="Some image"/>
<img class="room__img" src="img/set3/7.jpeg" alt="Some image"/>
<img class="room__img" src="img/set3/2.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--bottom"></div>
</div><!-- /room -->
<div class="room">
<div class="room__side room__side--back">
<img class="room__img" src="img/set2/4.jpeg" alt="Some image"/>
<img class="room__img" src="img/set2/5.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--left">
<img class="room__img" src="img/set2/7.jpeg" alt="Some image"/>
<img class="room__img" src="img/set2/1.jpeg" alt="Some image"/>
<img class="room__img" src="img/set2/2.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--right">
<img class="room__img" src="img/set2/3.jpeg" alt="Some image"/>
<img class="room__img" src="img/set2/6.jpeg" alt="Some image"/>
<img class="room__img" src="img/set2/8.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--bottom"></div>
</div><!-- /room -->
<div class="room">
<div class="room__side room__side--back">
<img class="room__img" src="img/set4/7.jpeg" alt="Some image"/>
<img class="room__img" src="img/set4/5.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--left">
<img class="room__img" src="img/set4/6.jpeg" alt="Some image"/>
<img class="room__img" src="img/set4/4.jpeg" alt="Some image"/>
<img class="room__img" src="img/set4/3.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--right">
<img class="room__img" src="img/set4/2.jpeg" alt="Some image"/>
<img class="room__img" src="img/set4/1.jpeg" alt="Some image"/>
<img class="room__img" src="img/set4/8.jpeg" alt="Some image"/>
</div>
<div class="room__side room__side--bottom"></div>
</div><!-- /room -->
</div>
</div><!-- /container -->
<div class="content">
<header class="header">
<h1 class="headtitle">Exhibition</h1>
<button class="btn btn--info btn--toggle">
<svg class="icon icon--info"><use xlink:href="#icon-info"></use></svg>
<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
</button>
<button class="btn btn--menu btn--toggle">
<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
</button>
<div class="overlay overlay--menu">
<ul class="menu">
<li class="menu__item menu__item--current"><a class="menu__link" href="#">Exhibitions</a></li>
<li class="menu__item"><a class="menu__link" href="#">EXPLORE</a></li>
<li class="menu__item"><a class="menu__link" href="#">SHOP</a></li>
<li class="menu__item"><a class="menu__link" href="#">BOOK A SHOW</a></li>
<li class="menu__item"><a class="menu__link" href="#">JOIN US</a></li>
</ul>
</div>
<div class="overlay overlay--info">
<!-- right double quote ===> ” -->
<p style="font-style: italic;"class="info">Renowned for successfully merging traditional imagery in modern paintings, Jogen Chowdhury is a leading artist of the current times. His work constructs volume by modulating light and shade and uses cross-hatching to develop an illusion of middle tonalities </br> - From EmamiArts</p>
</div>
</header>
<div class="slides">
<div class="slide">
<h2 class="slide__name">BLACK <br/>AND WHITE</h2>
<h3 class="slide__title">
<span>“Life is Black And White Camera Roll!”</span>
<div class="slide__number">Visit<strong>US</strong></div>
</h3>
<p class="slide__date">January 7,2019</p>
</div>
<div class="slide">
<h2 class="slide__name">Tumblr <br/>Art</h2>
<h3 class="slide__title">
<span>“For the love and their doves”</span>
<div class="slide__number">Visit <strong>US</strong></div>
</h3>
<p class="slide__date">5 May – 17 Jun 2017</p>
</div>
<div class="slide">
<h2 class="slide__name">Wonder Cars</h2>
<h3 class="slide__title">
<span>“They are cars but can make your fly”</span>
<div class="slide__number">Visit<strong>US</strong>/div>
</h3>
<p class="slide__date">March 20, 2019 - March 30, 2019</p>
</div>
<div class="slide">
<h2 class="slide__name">Modals</h2>
<h3 class="slide__title">
<span>“Happy faces”</span>
<div class="slide__number">Visit<strong>US</strong></div>
</h3>
<p class="slide__date">March 20, 2019 - March 30, 2019</p>
</div>
<div class="slide">
<h2 class="slide__name">Buildings and bricks</h2>
<h3 class="slide__title">
<span>“The pillar of trust”</span>
<div class="slide__number">Visit<strong>US</strong></div>
</h3>
<p class="slide__date">March 20, 2019 - March 30, 2019</p>
</div>
</div>
<nav class="nav">
<button class="btn btn--nav btn--nav-left">
<svg class="nav-icon nav-icon--left" width="42px" height="12px" viewBox="0 0 70 20">
<path class="nav__triangle" d="M52.5,10L70,0v20L52.5,10z"/>
<path class="nav__line" d="M55.1,11.4H0V8.6h55.1V11.4z"/>
</svg>
<p>Left</p>
</button>
<button class="btn btn--nav btn--nav-right">
<svg class="nav-icon nav-icon--right" width="42px" height="12px" viewBox="0 0 70 20">
<path class="nav__triangle" d="M52.5,10L70,0v20L52.5,10z"/>
<path class="nav__line" d="M55.1,11.4H0V8.6h55.1V11.4z"/>
</svg>
<p>Right</p>
</button>
</nav>
</div><!-- /content -->
<div class="overlay overlay--loader overlay--active">
<div class="loader">
<div></div>
<div></div>
</div>
<h4>Use Desktop for clear 2D effect!</h3>
</div>
<script src="js/anime.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>