-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsection.works.php
executable file
·128 lines (92 loc) · 4.23 KB
/
section.works.php
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
<!-- Works
================================================== -->
<div id="section-works">
<div class="container">
<div class="three columns">
<h3>Works</h3>
</div><!-- // .three -->
<div class="thirteen columns">
<!--
The modal contents that pops up when a user clicks the item is in the bottom of this section
Scroll down and find div beginning with id="work-modal-01"
-->
<a href="#" data-reveal-id="work-modal-01">
<div class="item">
<div class="eight columns alpha">
<img src="images/work_item01.jpg" alt="" />
</div><!-- // .five -->
<div class="five columns omega">
<div class="work-info">
<span class="category">Identity</span>
<h4><em>theBerkeleyMDP</em> Branding Concept</h4>
<p>An identity that reflects multidisciplinary, constructivist approach to education that integrates theory with hands-on, experiential learning</p>
</div><!-- // .work-info -->
</div><!-- // .three -->
<div class="clear"></div>
</div><!-- // .item -->
</a>
<a href="#" data-reveal-id="work-modal-02">
<div class="item">
<div class="eight columns alpha">
<img src="images/work_item02.jpg" alt="" />
</div><!-- // .five -->
<div class="five columns omega">
<div class="work-info">
<span class="category">Web</span>
<h4>Instrumented Indentation Technique Conference 2012</h4>
<p>The conference “Instrumented Indentation Technique” took place at the JW Marriot Hotel (Galleria) in Houston, TX on 7 June 2012.</p>
</div><!-- // .work-info -->
</div><!-- // .three -->
<div class="clear"></div>
</div><!-- // .item -->
</a>
<a href="#" data-reveal-id="work-modal-03">
<div class="item last">
<div class="eight columns alpha">
<img src="images/work_item03.jpg" alt="" />
</div><!-- // .five -->
<div class="five columns omega">
<div class="work-info">
<span class="category">Print</span>
<h4><em>Park</em> Personal Brand Concept</h4>
<p>Personal project in establishing a brand that well communicates the core values of my works: minimal design with extreme usability</p>
</div><!-- // .work-info -->
</div><!-- // .three -->
<div class="clear"></div>
</div><!-- // .item -->
</a>
<!--
End of items
-->
</div><!-- // .thirteen -->
</div><!-- // .container -->
</div><!-- // #section-works -->
<!--
Work Modal Popup
-->
<div id="work-modal-01" class="reveal-modal">
<img src="images/work_item01_detail.jpg" alt="" />
<div class="box-modal">
<h4><em>theBerkeleyMDP</em> Branding Concept</h4>
<p>An identity that reflects multidisciplinary, constructivist approach to education that integrates theory with hands-on, experiential learning</p>
</div><!-- // .box-modal -->
<a href="http://www.behance.net" class="link-details">View project</a>
<a class="close-reveal-modal">Close</a>
</div><!-- // #work-modal-01 -->
<div id="work-modal-02" class="reveal-modal">
<img src="images/work_item02_detail.jpg" alt="" />
<div class="box-modal">
<h4>IITC 2012 Conference</h4>
<p>This later became the foundation of Eventcamp template. "Necessity of IIT and Application Cases" was held on September 27th, 2012 at Houston, TX.</p>
</div><!-- // .box-modal -->
<a href="http://www.iitc2012.org/" class="link-details">Go to the site</a>
<a class="close-reveal-modal">Close</a>
</div><!-- // #work-modal-02 -->
<div id="work-modal-03" class="reveal-modal">
<img src="images/work_item03_detail.jpg" alt="" />
<div class="box-modal">
<h4><em>Park</em> Personal Brand Concept</h4>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div><!-- // .box-modal -->
<a class="close-reveal-modal">Close</a>
</div><!-- // #work-modal-03 -->