-
Notifications
You must be signed in to change notification settings - Fork 0
/
wedding_invitation_card.html
224 lines (187 loc) · 8.2 KB
/
wedding_invitation_card.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>(신랑이름)과 (신부이름)의 결혼식</title>
<meta content="(신랑이름)과 (신부이름)의 결혼식에 와서 축하해주세요~!" name="description"/>
<style>
.map-icon {
width: 50px;
height: 50px;
}
.head {
background: url('https://t1.daumcdn.net/cfile/tistory/99AED0335B7A1A2D13') no-repeat center center;
background-size: cover;
height: 460px;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.text-center {
text-align: center;
}
.text-muted {
color: #6c757d;
}
.pl-2 {
padding-left: .5rem;
}
.pt-2 {
padding-top: .5rem;
}
.invitation-mentions {
background-color: rgb(202, 255, 202);
}
.center-middle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.none-ul {
list-style-type: none;
}
.photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
justify-content: center;
margin: 0 auto;
max-width: 960px;
text-align: center; // to center the text
}
.photo-card {
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.photo-card img {
width: 100%;
height: auto;
}
.photo-card p {
text-align: center;
}
</style>
</head>
<body>
<div class="head" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 460px;">
<p class="ww-couple-name ww-title" style="font-size:2.0em">(Groom's name) & (Bride's name)</p>
<p class="h2 mt-5 ww-title" style="font-family: 'Gugi', cursive; font-size:1.0em">
| WE ARE GETTING MARRIED |
</p>
</div>
<div style="text-align:center;">
<p class="ww-couple-name ww-title" style="font-size:3.0em">신랑 & 신부</p>
</div>
<div style="display: flex; justify-content: space-around;">
<div style="flex: 1; text-align: center;">
<h2>(groom's name)</h2>
<img alt="Groom" class="img-solo-photo" src="https://cdn.newsculture.press/news/photo/202204/508246_615883_4316.jpg" width="500" height="500"/>
</div>
<div style="flex: 1; text-align: center;">
<h2>(Bride's name)</h2>
<img alt="Bride" class="img-solo-photo" src="https://image.jtbcplus.kr/data/contents/jam_photo/202208/23/c759fb8b-631d-46c6-a614-75819e82cf58.jpg" width="500" height="500"/>
</div>
</div>
<div class="invitation-mentions">
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
<img src="https://resources.barunsonmcard.com/upload/invitation/230306/319322/e932ad3f-965f-4796-b7b9-54ad75dbfa34.png" style="width:800px; height:299px;">
</div>
<div class="col text-center mb-5">
<h6 style="font-family: 'Noto Serif KR', serif;">
x<br>
(만난지 x년+x일 되는날 결혼 = x일)
</h6>
</div>
<div class="invitation-mentions" style="font-family: 'Nanum Myeongjo', serif;color: #333333;font-size: 34px;text-align: center;letter-spacing: 0em;line-height: 2.3em;">
(신랑)과 (신부)의 xxx일 끝에 맞잡은 두 손<br>구 즌(궂은) 비바람에도 놓치 않고,<br>다 른 그 무엇보다 소중하고 귀하게<br>은 은한 빛이되어 서로를 환하게 밝히려 합니다.<br><br>바쁘신 가운데 귀한 걸음 하시어<br>저희 결혼식을 축복해주신다면<br>앞으로도 더 없을 기쁨일 것입니다.<br><br>
</div>
</div>
<div class="text-center">
<h4>웨딩 본식</h4>
<ul class="none-ul">
<li>
<span class="pl-2 text-muted">(결혼식장 주소)</span>
</li>
<li class="pt-2">
<span class="pl-2 text-muted">20xx년 xx월 xx일, x:xxPM</span>
</li>
</ul>
<img alt="Wedding Hall" src="https://www.ihall.co.kr/center/pic/banquet_ent_poto/14689960721648090483.jpg"/>
<h4>식사</h4>
<ul class="none-ul">
<li>
<span class="pl-2 text-muted">(결혼식장 식당 주소 [층수])</span>
</li>
<li class="pt-2">
<span class="pl-2 text-muted">(식사가능 시간대)20xx년 xx월 xx일, x:xxPM ~ x:xxPM</span>
</li>
</ul>
<img alt="Restaurant" class="img-fluid" src="https://www.iwedding.co.kr/center/website/ihall_img/1468996072/1468996072_img_4538_0_1534476162.jpg"/>
</div>
<div class="text-center">
<h2>포토 갤러리</h2>
</div>
<div class="photo-gallery">
<div class="photo-card">
<img src="https://wehotel.co.kr/wp-content/uploads/sites/35/2023/03/2-2-scaled.jpg" alt="Gallery Image 1">
</div>
<div class="photo-card">
<img src="https://www.fsnews.co.kr/news/photo/201804/28011_23720_645.jpg" alt="Gallery Image 2">
</div>
<div class="photo-card">
<img src="https://cdn.imweb.me/thumbnail/20211202/4cbae656eb3c0.jpg" alt="Gallery Image 3">
</div>
<div class="photo-card">
<img src="https://www.ifamily.co.kr/image/icard/18/600539ea7b50b_3232256098.jpg" alt="Gallery Image 4">
</div>
</div>
<h2 class="h1 text-center pb-3 ww-title" style="font-family: 'Noto Serif KR', serif;">Gift for our wedding</h2>
<div class="center-middle">
<p>신랑 계좌번호 ~~~ (나중에 토스 등 링크 첨부예정)</p>
</div>
<div class="center-middle">
<p>신부 계좌번호 ~~~ (나중에 토스 등 링크 첨부예정)</p>
</div>
<h2 class="h1 text-center pb-3 ww-title" style="font-family: 'Noto Serif KR', serif;">오시는 길</h2>
<div class="center-middle">
<div>
<h5 style="font-family: 'Noto Serif KR', serif;">(식장 주소, 이름)</h5>
<h6 style="font-family: 'Noto Serif KR', serif;">(식장 도로명 주소)</h6>
</div>
</div>
<div class="form-group center-middle">
<div class="col-md-12">
<div class="my-3 text-center">
<a href="https://naver.me/FNmlDJ15">
<img alt="naver-map" class="map-icon" id="naver-map"
src="https://andersonchoi.github.io/wedding-card/images/map/naver-map.png"/>
</a>
<a href="http://kko.to/z_285Reg6e">
<img alt="kakao-map" class="map-icon" id="kakao-map"
src="https://andersonchoi.github.io/wedding-card/images/map/kakao-map.png"/>
</a>
<a href="https://goo.gl/maps/2ZgFBpuYNTgR5dbC7">
<img alt="google-map" class="map-icon" id="google-map"
src="https://andersonchoi.github.io/wedding-card/images/map/google-map.png"/>
</a>
</div>
<div class="col text-center">
<label style="font-family: 'Noto Serif KR', serif; font-size: 15px;">
셔틀버스 - ~~에서 xx분 간격으로 운행
</label>
</div>
</div>
</div>
<!-- Todo <p>구글 or 카카오 지도 띄우기</p> -->
<div class="center-middle">
<footer>
<p>Created by <a href="https://github.com/wish9">위원종</a></p>
</footer>
</div>
</body>
</html>