Skip to content

Commit c477326

Browse files
jakubkuzilekjakubkuzilek
committed
added certificate of participation in static
1 parent 172fc0a commit c477326

File tree

1 file changed

+266
-0
lines changed

1 file changed

+266
-0
lines changed

‎static/certificate_of_participation/certificate.htm‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HEXED Workshop Certificate</title>
7+
<style>
8+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Open+Sans:wght@300;400;600&display=swap');
9+
10+
body {
11+
margin: 0;
12+
padding: 20px;
13+
font-family: 'Open Sans', sans-serif;
14+
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
15+
min-height: 100vh;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
.certificate {
22+
width: 794px;
23+
height: 1123px;
24+
background: white;
25+
border: 15px solid #1e3a8a;
26+
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
27+
position: relative;
28+
overflow: hidden;
29+
}
30+
31+
.certificate::before {
32+
content: '';
33+
position: absolute;
34+
top: 0;
35+
left: 0;
36+
right: 0;
37+
bottom: 0;
38+
background:
39+
radial-gradient(circle at 20% 20%, rgba(30, 58, 138, 0.08) 0%, transparent 50%),
40+
radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
41+
radial-gradient(circle at 40% 60%, rgba(30, 58, 138, 0.05) 0%, transparent 50%);
42+
pointer-events: none;
43+
}
44+
45+
.certificate-content {
46+
padding: 60px;
47+
text-align: center;
48+
position: relative;
49+
z-index: 1;
50+
height: calc(100% - 120px);
51+
display: flex;
52+
flex-direction: column;
53+
justify-content: space-between;
54+
}
55+
56+
.header {
57+
margin-bottom: 20px;
58+
}
59+
60+
.edm-branding {
61+
margin-bottom: 25px;
62+
text-align: center;
63+
}
64+
65+
.edm-logo {
66+
font-family: 'Playfair Display', serif;
67+
font-size: 56px;
68+
font-weight: 700;
69+
color: #1e3a8a;
70+
letter-spacing: 8px;
71+
margin-bottom: 10px;
72+
background: linear-gradient(90deg, #1e3a8a 0%, #3730a3 50%, #f59e0b 100%);
73+
-webkit-background-clip: text;
74+
-webkit-text-fill-color: transparent;
75+
background-clip: text;
76+
}
77+
78+
.edm-tagline {
79+
font-size: 14px;
80+
color: #6b7280;
81+
font-weight: 400;
82+
letter-spacing: 2px;
83+
text-transform: uppercase;
84+
margin-bottom: 15px;
85+
}
86+
87+
.title {
88+
font-family: 'Playfair Display', serif;
89+
font-size: 42px;
90+
font-weight: 700;
91+
color: #1e3a8a;
92+
margin-bottom: 15px;
93+
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
94+
}
95+
96+
.subtitle {
97+
font-size: 16px;
98+
color: #7f8c8d;
99+
font-weight: 300;
100+
letter-spacing: 2px;
101+
text-transform: uppercase;
102+
}
103+
104+
.main-content {
105+
flex: 1;
106+
display: flex;
107+
flex-direction: column;
108+
justify-content: center;
109+
align-items: center;
110+
min-height: 0;
111+
}
112+
113+
.awarded-text {
114+
font-size: 18px;
115+
color: #34495e;
116+
margin-bottom: 20px;
117+
font-weight: 300;
118+
}
119+
120+
.participant-name {
121+
font-family: 'Playfair Display', serif;
122+
font-size: 38px;
123+
font-weight: 600;
124+
color: #1e3a8a;
125+
margin: 30px 0;
126+
padding: 15px 40px;
127+
border-bottom: 4px solid #f59e0b;
128+
display: inline-block;
129+
min-width: 500px;
130+
background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.1) 50%, transparent 100%);
131+
}
132+
133+
.workshop-details {
134+
margin: 40px 0;
135+
line-height: 2;
136+
}
137+
138+
.workshop-name {
139+
font-size: 28px;
140+
font-weight: 600;
141+
color: #1e3a8a;
142+
margin-bottom: 15px;
143+
}
144+
145+
.conference-info {
146+
font-size: 18px;
147+
color: #6b7280;
148+
margin-bottom: 10px;
149+
}
150+
151+
.date-location {
152+
font-size: 20px;
153+
color: #1e3a8a;
154+
font-weight: 600;
155+
}
156+
157+
.footer {
158+
display: flex;
159+
justify-content: space-between;
160+
align-items: flex-end;
161+
margin-top: 40px;
162+
flex-shrink: 0;
163+
height: 100px;
164+
}
165+
166+
.signature-section {
167+
text-align: center;
168+
flex: 1;
169+
}
170+
171+
.signature-line {
172+
width: 200px;
173+
height: 2px;
174+
background: #bdc3c7;
175+
margin: 0 auto 10px;
176+
}
177+
178+
.signature-label {
179+
font-size: 12px;
180+
color: #7f8c8d;
181+
text-transform: uppercase;
182+
letter-spacing: 1px;
183+
}
184+
185+
.certificate-number {
186+
font-size: 12px;
187+
color: #95a5a6;
188+
text-align: right;
189+
margin-top: 20px;
190+
}
191+
192+
.decorative-elements {
193+
position: absolute;
194+
top: 30px;
195+
left: 30px;
196+
width: 60px;
197+
height: 60px;
198+
background: linear-gradient(45deg, #1e3a8a, #f59e0b);
199+
border-radius: 50%;
200+
opacity: 0.1;
201+
}
202+
203+
.decorative-elements::after {
204+
content: '';
205+
position: absolute;
206+
bottom: -1093px;
207+
right: -710px;
208+
width: 60px;
209+
height: 60px;
210+
background: linear-gradient(45deg, #f59e0b, #1e3a8a);
211+
border-radius: 50%;
212+
}
213+
214+
@media print {
215+
body {
216+
background: white;
217+
padding: 0;
218+
}
219+
.certificate {
220+
box-shadow: none;
221+
border: 2px solid #2c3e50;
222+
}
223+
}
224+
</style>
225+
</head>
226+
<body>
227+
<div class="certificate">
228+
<div class="certificate-content">
229+
<div class="header">
230+
<div class="edm-branding">
231+
<div class="edm-logo">EDM</div>
232+
<div class="edm-tagline">Educational Data Mining Conference 2025</div>
233+
</div>
234+
<div class="title">Certificate of Participation</div>
235+
</div>
236+
237+
<div class="main-content">
238+
<div class="awarded-text">This is to certify that</div>
239+
240+
<div class="participant-name">Mustafa Cavus</div>
241+
242+
<div class="awarded-text">has successfully participated in</div>
243+
244+
<div class="workshop-details">
245+
<div class="workshop-name">2nd Human-Centric eXplainable AI in Education Workshop</div>
246+
<div class="conference-info">held as part of the Educational Data Mining Conference</div>
247+
<div class="date-location">July 20, 2025 • Palermo, Italy</div>
248+
</div>
249+
</div>
250+
251+
<div class="footer">
252+
<div class="signature-section">
253+
254+
</div>
255+
256+
<div class="signature-section">
257+
<div class="signature-line"></div>
258+
<div class="signature-label">Workshop Chair</div>
259+
</div>
260+
</div>
261+
262+
<div class="certificate-number">Certificate No: HEXED-EDM-2025-001</div>
263+
</div>
264+
</div>
265+
</body>
266+
</html>

0 commit comments

Comments
 (0)