-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmasonry2.html
274 lines (271 loc) · 15 KB
/
masonry2.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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/b182c44c0a.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/masonry2.css">
<title>Masonry Layout</title>
</head>
<body>
<div class="masonry">
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon">
<i class="fa-sharp fa-solid fa-compass-drafting"></i>
</div>
<div class="details">
<h6 class="mb-0">Open</h6>
<span>1 days ago</span>
</div>
</div>
<div class="badge">
<span class="art">Arts</span>
</div>
</div>
<div class="mt-5">
<h3 class="heading">Advanced Product Design</h3>
<p class="mt-4">Learn how to become an artist, salesman, marketer, architect, and engineer all wrapped into one.
A product designer makes a practical and functional product as artistic and attractive to a consumer as possible.
It takes creativity, consumer-savvy, and the know-how to take a product from ideation all the way to production.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar open" role="progressbar" style="width: 64%" aria-valuenow="32" aria-valuemin="0" aria-valuemax="50"></div>
</div>
<div class="mt-3"> <span class="filled">32 Registered <span class="full">of 50 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon">
<i class="fa-sharp fa-solid fa-calculator"></i>
</div>
<div class="details">
<h6 class="mb-0">Full</h6>
<span>6 days ago</span>
</div>
</div>
<div class="badge">
<span class="math">Mathematics</span>
</div>
</div>
<div class="mt-5">
<h3 class="heading">Analytical Computing</h3>
<p class="mt-4">The term analysis is commonly used in business, economics and elsewhere to mean the process
of understanding a system quantitatively. A diverse collection of people (managers, economists, financial
consultants,social scientists, etc.) and equally diverse systems (business projects, corporate or national economic activity,
accounting and financial planning, political or social entities) have remarkably similar needs; namely, for a repeated cycle of
data acquisition and management, data analysis, and presentation of results.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mt-3"> <span class="filled">100 Registered <span class="full">of 100 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon">
<i class="fa-sharp fa-solid fa-flask"></i>
</div>
<div class="details">
<h6 class="mb-0">Open</h6>
<span>2 days ago</span>
</div>
</div>
<div class="badge">
<span class="science">Science</span>
</div>
</div>
<div class="mt-5">
<h3 class="heading">Theoretical Physics</h3>
<p class="mt-4"><p>Theoretical physics is the branch of physics that deals with developing and evolving
theory to explain the fundamental nature of the universe. It is possibly the most important branch of
physics in that without it physics would stagnate and no new discoveries or ideas would develop.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar open" role="progressbar" style="width: 44%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="25"></div>
</div>
<div class="mt-3"> <span class="filled">11 Registered <span class="full">of 25 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon">
<i class="fa-sharp fa-solid fa-bridge"></i>
</div>
<div class="details">
<h6 class="mb-0">Open</h6>
<span>5 days ago</span>
</div>
</div>
<div class="badge"> <span class="eng">Engineering</span> </div>
</div>
<div class="mt-5">
<h3 class="heading">Civil Engineering</h3>
<p class="mt-4"><p>Theoretical physics is the branch of physics that deals with developing and evolving
theory to explain the fundamental nature of the universe. It is possibly the most important branch of
physics in that without it physics would stagnate and no new discoveries or ideas would develop.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar open" role="progressbar" style="width: 81%" aria-valuenow="202" aria-valuemin="0" aria-valuemax="250"></div>
</div>
<div class="mt-3"> <span class="filled">202 Applied <span class="full">of 250 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon">
<i class="fa-sharp fa-solid fa-microphone"></i>
</div>
<div class="details">
<h6 class="mb-0">Full</h6>
<span>12 days ago</span>
</div>
</div>
<div class="badge">
<span class="comm">Communication</span>
</div>
</div>
<div class="mt-5">
<h3 class="heading">Voice Training & Live Presentation</h3>
<p class="mt-4"><p>Skill in vocal performance is crucial for any successful sports broadcaster and communicator.
Students will learn how to recognize and develop vocal richness and authenticity, while exploring the philosophy
of communicating with audiences.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="50"></div>
</div>
<div class="mt-3"> <span class="filled">50 Registered <span class="full">of 50 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon">
<i class="fa-regular fa-building-columns"></i>
</div>
<div class="details">
<h6 class="mb-0">Open</h6>
<span>3 days ago</span>
</div>
</div>
<div class="badge"> <span class="art">Arts</span> </div>
</div>
<div class="mt-5">
<h3 class="heading">Principles of Modern Architecture</h3>
<p class="mt-4"><p>The basic principles of modern architecture include form following function, clean lines,
and a lack of ornamentation. Modern architecture allowed a building's primary purpose to drive its design,
eschewing decor for decor's sake, and, instead, reducing a building to its most basic function.
Because of its emphasis on practicality, modern buildings are designed with a human's experience at their core,
which includes an abundance of natural light and open floor plans.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar open" role="progressbar" style="width: 20%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="10"></div>
</div>
<div class="mt-3"> <span class="filled">2 Registered <span class="full">of 10 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon"> <i class="fa-sharp fa-solid fa-brain"></i> </div>
<div class="details">
<h6 class="mb-0">Full</h6>
<span>22 days ago</span>
</div>
</div>
<div class="badge">
<span class="science">Science</span>
</div>
</div>
<div class="mt-5">
<h3 class="heading">Human Anatomy</h3>
<p class="mt-4"><p>Human Anatomy invites students to join medical and basic science faculty to learn about musculoskeletal injuries
commonly seen in clinical practice.</p>
<p>For each case, students observe the initial patient
encounter and physical examination by an orthopedic surgeon. Following the patient encounter, students complete the interactive gross anatomy,
histology and radiology learning sessions essential for understanding the case. The anatomy learning sessions include observing actual
dissections in the Harvard Medical School anatomy laboratories revealing and explaining the human anatomy relevant for each clinical case.</p>
<p>After completing the case learning sessions, students review pertinent radiology images, commit to a tentative diagnosis from a list of
differential diagnoses, and accompany the patient to a virtual operating room to observe the surgical treatment. In the virtual operating room,
students observe narrated videos of actual surgical procedures.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="75"></div>
</div>
<div class="mt-3"> <span class="filled">75 Registered <span class="full">of 75 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon"> <i class="fa-sharp fa-solid fa-wind-turbine"></i> </div>
<div class="details">
<h6 class="mb-0">Open</h6>
<span>12 days ago</span>
</div>
</div>
<div class="badge">
<span class="eng">Engineering</span>
</div>
</div>
<div class="mt-5">
<h3 class="heading">Introduction to Thermodynamics</h3>
<p class="mt-4">This course provides an introduction to the most powerful engineering principles you will ever learn - Thermodynamics:
the science of transferring energy from one place or form to another place or form. We will introduce the tools you need to analyze
energy systems from solar panels, to engines, to insulated coffee mugs. More specifically, we will cover the topics of mass and energy
conservation principles; first law analysis of control mass and control volume systems; properties and behavior of pure substances; and
applications to thermodynamic systems operating at steady state conditions.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar open" role="progressbar" style="width: 99%" aria-valuenow="124" aria-valuemin="0" aria-valuemax="125"></div>
</div>
<div class="mt-3"> <span class="filled">124 Registered <span class="full">of 125 capacity</span></span> </div>
</div>
</div>
</div>
<div class="course">
<div class="course-header">
<div class="status">
<div class="icon">
<i class="fa-sharp fa-solid fa-lightbulb"></i>
</div>
<div class="details">
<h6 class="mb-0">Open</h6>
<span>12 days ago</span>
</div>
</div>
<div class="badge">
<span class="art">Arts</span>
</div>
</div>
<div class="mt-5">
<h3 class="heading">Philosophy</h3>
<p class="mt-4">Philosophy delves into the realm of abstract ideas and critical thinking.</p>
<div class="mt-5">
<div class="progress">
<div class="progress-bar open" role="progressbar" style="width: 91%" aria-valuenow="59" aria-valuemin="0" aria-valuemax="65"></div>
</div>
<div class="mt-3"> <span class="filled">59 Registered <span class="full">of 65 capacity</span></span> </div>
</div>
</div>
</div>
</div>
</body>
</html>