-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcards.html
258 lines (242 loc) · 12.9 KB
/
cards.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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<title>MTIT-Assignment 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<!--===============================================================================================-->
</head>
<style>
.loader_bg {
position: fixed;
z-index: 999999;
background: #fff;
width: 100%;
height: 100%;
}
.loader {
border: 0 soild transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 75px);
left: calc(50vw - 75px);
}
.loader:before,
.loader:after {
content: '';
border: 1em solid #ff5733;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
}
.loader:before {
animation-delay: .5s;
}
</style>
<body>
<!--Loader-->
<div class="loader_bg">
<div class="loader"></div>
</div>
<!-- End of Loader -->
<br><br><br>
<div class="w-full flex-w flex-sb-m">
<div class="wrappic1 m-r-1 m-t-0.5 m-b-0.5">
<a href="#"><img src="images/logo.png" alt="LOGO" width="200px" height="200px"></a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="projects">
<div class="row">
<!-- vianden_castle -->
<div class="col-lg-4 item html">
<div class="card">
<div class="card-head">
<img src="./images/places/vianden_castle1.png" alt="Vianden Castle"
class="img-fluid card-img">
<div class="card-overlay">
<h2>Vianden Castle</h2>
</div>
<div class="card-hover">
<h3>Vianden Castle</h3>
<p>Vianden Castle, located in Vianden in the north of Luxembourg, is one of the
largest fortified castles west of the Rhine. With origins dating from the
10th century, the castle was built in the Romanesque style from the 11th to
14th centuries.</p>
</div>
</div>
<div class="card-body text-center">
<a href="vianden_castle.html" class="btn btn-lg card-btn">See More</a>
</div>
</div>
</div>
<!-- End of vianden_castle -->
<!-- Sydney Opera House -->
<div class="col-lg-4 item html">
<div class="card">
<div class="card-head">
<img src="./images/places/sydney1.jpeg" alt="Burj Khalifa"
class="img-fluid card-img">
<div class="card-overlay">
<h2>Sydney Opera House</h2>
</div>
<div class="card-hover">
<h3>Sydney Opera House</h3>
<p>The Sydney Opera House is a multi-venue performing arts centre in Sydney.
Located on the banks of Sydney Harbour, it is widely regarded as one of the
world's most famous and distinctive buildings and a masterpiece of 20th
century architecture</p>
</div>
</div>
<div class="card-body text-center">
<a href="sydney_opera.html" class="btn btn-lg card-btn">See More</a>
</div>
</div>
</div>
<!--End of Burj Khalifa -->
<!-- Statue of Liberty -->
<div class="col-lg-4 item css">
<div class="card">
<div class="card-head">
<img src="./images/places/liberty.jpg" alt="Statue of Liberty"
class="img-fluid card-img">
<div class="card-overlay">
<h2>Statue of Liberty</h2>
</div>
<div class="card-hover">
<h3>Statue of Liberty</h3>
<p>The Statue of Liberty is a colossal neoclassical sculpture on Liberty Island
in New York Harbor in New York City, in the United States.</p>
</div>
</div>
<div class="card-body text-center">
<!-- <h4 class="title">CSS</h4> -->
<a href="liberty.html" class="btn btn-lg card-btn">See More</a>
</div>
</div>
</div>
<!--End of Statue of Liberty -->
<!--Colosseum -->
<div class="col-lg-4 item javascript">
<div class="card">
<div class="card-head">
<img src="./images/places/Colosseum1.jpg" alt="Colosseum"
class="img-fluid card-img">
<div class="card-overlay">
<h2>Colosseum</h2>
</div>
<div class="card-hover">
<h3>Colosseum</h3>
<p>The Colosseum is an oval amphitheatre in the centre of the city of Rome,
Italy, just east of the Roman Forum. It is the largest ancient amphitheatre
ever built, and is still the largest standing amphitheatre in the world
today,</p>
</div>
</div>
<div class="card-body text-center">
<!-- <h4 class="title">Javascript</h4> -->
<a href="colosseum.html" class="btn btn-lg card-btn">See More</a>
</div>
</div>
</div>
<!--End of Colosseum -->
<!--Tian Tan Buddha -->
<div class="col-lg-4 item css">
<div class="card">
<div class="card-head">
<img src="./images/places/tian_tan.png" alt="Tian Tan Buddha"
class="img-fluid card-img">
<div class="card-overlay">
<h2>Tian Tan Buddha</h2>
</div>
<div class="card-hover">
<h3>Tian Tan Buddha</h3>
<p>The Big Buddha is a large bronze statue of Buddha, completed in 1993, and
located at Ngong Ping, Lantau Island, in Hong Kong. The statue is sited near
Po Lin Monastery and symbolises the harmonious relationship between man and
nature, people and faith.</p>
</div>
</div>
<div class="card-body text-center">
<a href="tian_tan_buddha.html" class="btn btn-lg card-btn">See More</a>
</div>
</div>
</div>
<!--End of Tian Tan Buddha -->
<!--Angkor Wat Temple -->
<div class="col-lg-4 item html">
<div class="card">
<div class="card-head">
<img src="./images/places/angkor_temple.jpg" alt="Angkor Wat Temple"
class="img-fluid card-img">
<div class="card-overlay">
<h2>Angkor Wat Temple</h2>
</div>
<div class="card-hover">
<h3>Angkor Wat Temple</h3>
<p>Angkor Wat is a Buddhist temple complex in northwest Cambodia. A national
symbol and sacred site of Cambodian Buddhism, the complex is a UNESCO World
Heritage Site and a significant tourist destination.</p>
</div>
</div>
<div class="card-body text-center">
<a href="angkor_wat_temple.html" class="btn btn-lg card-btn">See More</a>
</div>
</div>
</div>
<!--End of Angkor Wat Temple -->
</div>
</div>
</div>
</div>
</div>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/script.js"></script>
<script>
$('.js-tilt').tilt({
scale: 1.1
})
</script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
setTimeout(function () {
$('.loader_bg').fadeToggle();
}, 1500);
</script>
</body>
</html>