Skip to content

Commit 2310517

Browse files
hyeondo-janghyeondo-jang
committed
ADD: gallery, FIX: display
1 parent 58849c3 commit 2310517

6 files changed

Lines changed: 192 additions & 2 deletions

File tree

‎contact.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="icon" href="logo/log_logo.png" type="image/png">
56
<title>Hiring | Lee Optimization Group</title>
67

78
<style>
@@ -87,6 +88,7 @@ <h1>Lee Optimization Group</h1>
8788
<a href="research.html">Research</a>
8889
<a href="group.html">Members</a>
8990
<a href="hiring.html">Hiring</a>
91+
<a href="gallery.html">Gallery</a>
9092
<a href="contact.html">Contact</a>
9193
</nav>
9294
</header>

‎gallery.html‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="logo/log_logo.png" type="image/png">
6+
<title>Gallery | Lee Optimization Group</title>
7+
8+
<style>
9+
body {
10+
font-family: system-ui, -apple-system, sans-serif;
11+
line-height: 1.6;
12+
margin: 0;
13+
padding: 20px;
14+
color: #333;
15+
max-width: 800px;
16+
margin-left: auto;
17+
margin-right: auto;
18+
}
19+
20+
header {
21+
border-bottom: 1px solid #eee;
22+
padding-bottom: 20px;
23+
margin-bottom: 20px;
24+
}
25+
26+
nav a {
27+
margin-right: 15px;
28+
text-decoration: none;
29+
color: #007bff;
30+
}
31+
32+
nav a:hover {
33+
text-decoration: underline;
34+
}
35+
36+
footer {
37+
margin-top: 40px;
38+
font-size: 0.9em;
39+
color: #777;
40+
border-top: 1px solid #eee;
41+
padding-top: 20px;
42+
display: flex;
43+
align-items: center;
44+
justify-content: space-between;
45+
}
46+
47+
.footer-logos {
48+
display: flex;
49+
align-items: center;
50+
gap: 12px;
51+
}
52+
53+
.footer-logos img {
54+
height: 36px;
55+
width: auto;
56+
object-fit: contain;
57+
}
58+
59+
a {
60+
text-decoration: none;
61+
color: #007bff;
62+
}
63+
64+
/* Gallery grid */
65+
.gallery-grid {
66+
display: grid;
67+
grid-template-columns: repeat(6, 1fr);
68+
gap: 4px;
69+
}
70+
71+
.gallery-item {
72+
position: relative;
73+
overflow: hidden;
74+
border: 1px solid #333;
75+
aspect-ratio: 1;
76+
}
77+
78+
.gallery-item a {
79+
display: block;
80+
width: 100%;
81+
height: 100%;
82+
}
83+
84+
.gallery-item img {
85+
width: 100%;
86+
height: 100%;
87+
object-fit: cover;
88+
display: block;
89+
transition: opacity 0.2s;
90+
}
91+
92+
.gallery-item:hover img {
93+
opacity: 0.85;
94+
}
95+
96+
.gallery-item .tooltip {
97+
position: absolute;
98+
bottom: 0;
99+
left: 0;
100+
right: 0;
101+
background: rgba(0, 0, 0, 0.65);
102+
color: #fff;
103+
font-size: 0.7em;
104+
text-align: center;
105+
padding: 4px 6px;
106+
opacity: 0;
107+
transition: opacity 0.2s;
108+
pointer-events: none;
109+
}
110+
111+
.gallery-item:hover .tooltip {
112+
opacity: 1;
113+
}
114+
</style>
115+
</head>
116+
117+
<body>
118+
119+
<header>
120+
<h1>Lee Optimization Group</h1>
121+
<nav>
122+
<a href="index.html">Home</a>
123+
<a href="research.html">Research</a>
124+
<a href="group.html">Members</a>
125+
<a href="hiring.html">Hiring</a>
126+
<a href="gallery.html">Gallery</a>
127+
<a href="contact.html">Contact</a>
128+
</nav>
129+
</header>
130+
131+
<main>
132+
133+
<h2>Gallery</h2>
134+
<p style="margin-bottom: 16px;">We also spend time together on various occasions.</p>
135+
136+
<div class="gallery-grid">
137+
138+
139+
<div class="gallery-item">
140+
<a href="stories/post-icml.jpeg" target="_blank">
141+
<img src="stories/post-icml.jpeg" alt="Post-ICML 2024">
142+
<span class="tooltip">post-ICML 2026</span>
143+
</a>
144+
</div>
145+
146+
<div class="gallery-item">
147+
<a href="stories/year-end-party.png" target="_blank">
148+
<img src="stories/year-end-party.png" alt="Year-end Party">
149+
<span class="tooltip">year-end party</span>
150+
</a>
151+
</div>
152+
153+
<div class="gallery-item">
154+
<a href="stories/open_day.jpg" target="_blank">
155+
<img src="stories/open_day.jpg" alt="Open Day">
156+
<span class="tooltip">LOG open day</span>
157+
</a>
158+
</div>
159+
160+
<div class="gallery-item">
161+
<a href="stories/24_open_day.jpg" target="_blank">
162+
<img src="stories/24_open_day.jpg" alt="Open Day 2024">
163+
<span class="tooltip">LOG e-sports</span>
164+
</a>
165+
</div>
166+
167+
</div>
168+
169+
</main>
170+
171+
<footer>
172+
<p>&copy; 2026 LOG. All rights reserved.</p>
173+
<div class="footer-logos">
174+
<a href="https://www.postech.ac.kr" target="_blank"><img src="logo/postech_logo.png" alt="POSTECH"></a>
175+
<a href="https://ai.postech.ac.kr" target="_blank"><img src="logo/gsai_logo.png" alt="GSAI"></a>
176+
<a href="https://cse.postech.ac.kr" target="_blank"><img src="logo/cs_logo.png" alt="CS"></a>
177+
<img src="logo/log_logo.png" alt="LOG">
178+
</div>
179+
</footer>
180+
181+
</body>
182+
</html>

‎group.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="icon" href="logo/log_logo.png" type="image/png">
56
<title>Group | Lee Optimization Group</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77

88
<style>
99
body {
@@ -135,6 +135,7 @@ <h1>Lee Optimization Group</h1>
135135
<a href="research.html">Research</a>
136136
<a href="group.html">Members</a>
137137
<a href="hiring.html">Hiring</a>
138+
<a href="gallery.html">Gallery</a>
138139
<a href="contact.html">Contact</a>
139140
</nav>
140141
</header>

‎hiring.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="icon" href="logo/log_logo.png" type="image/png">
56
<title>Hiring | Lee Optimization Group</title>
67

78
<style>
@@ -112,6 +113,7 @@ <h1>Lee Optimization Group</h1>
112113
<a href="research.html">Research</a>
113114
<a href="group.html">Members</a>
114115
<a href="hiring.html">Hiring</a>
116+
<a href="gallery.html">Gallery</a>
115117
<a href="contact.html">Contact</a>
116118
</nav>
117119
</header>

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<link rel="icon" href="logo/log_logo.png" type="image/png">
66
<title>Lee Optimization Group</title>
77
<style>
88
body {
@@ -138,6 +138,7 @@ <h1>Lee Optimization Group</h1>
138138
<a href="research.html">Research</a>
139139
<a href="group.html">Members</a>
140140
<a href="hiring.html">Hiring</a>
141+
<a href="gallery.html">Gallery</a>
141142
<a href="contact.html">Contact</a>
142143
</nav>
143144
</header>

‎research.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="icon" href="logo/log_logo.png" type="image/png">
56
<title>Hiring | Lee Optimization Group</title>
67

78
<style>
@@ -179,6 +180,7 @@ <h1>Lee Optimization Group</h1>
179180
<a href="research.html">Research</a>
180181
<a href="group.html">Members</a>
181182
<a href="hiring.html">Hiring</a>
183+
<a href="gallery.html">Gallery</a>
182184
<a href="contact.html">Contact</a>
183185
</nav>
184186
</header>

0 commit comments

Comments
 (0)