mirror of
https://github.com/nat3yice/savethedate.git
synced 2026-03-10 08:51:18 +00:00
accomodations finished, team finished, song request finished
This commit is contained in:
nat3yice
BIN
img-vid/charlotte.png
Normal file
BIN
img-vid/charlotte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
img-vid/eline.png
Normal file
BIN
img-vid/eline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
153
img-vid/schedule.svg
Normal file
153
img-vid/schedule.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 49 KiB |
23
img-vid/vector-bed.svg
Normal file
23
img-vid/vector-bed.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="72px" height="71px" viewBox="0 0 72 71" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>vector-bed</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Version-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="NO-DECISION" transform="translate(-476.000000, -4928.000000)" fill-rule="nonzero" fill="#50E3C2">
|
||||
<g id="accomodation" transform="translate(180.000000, 3967.000000)">
|
||||
<g id="straw-bed" transform="translate(87.000000, 961.000000)">
|
||||
<g id="vector-bed" transform="translate(209.000000, 0.000000)">
|
||||
<g id="Group" transform="translate(0.279846, 0.000000)">
|
||||
<path d="M34.2810886,22.4895631 L34.2810886,22.4895631 C35.0226795,23.090216 36.0860929,23.090216 36.8136915,22.4755944 C38.6186958,20.9669778 44.4954538,15.7287255 44.4954538,11.8454345 C44.4954538,8.6605771 41.9068818,6.07637264 38.7166417,6.07637264 C37.5692747,6.07637264 36.4638845,6.41162079 35.5403939,7.02624239 C34.6169034,6.41162079 33.5115132,6.07637264 32.3641461,6.07637264 C29.173906,6.07637264 26.585334,8.6605771 26.585334,11.8454345 C26.585334,15.8125375 32.4760844,20.9949151 34.2810886,22.4895631 Z M32.3641461,10.0155384 C32.9798065,10.0155384 33.55349,10.3228492 33.8893048,10.83969 L33.8893048,10.83969 C34.6728725,12.0270272 36.4079154,12.0270272 37.1914831,10.83969 L37.1914831,10.83969 C37.5272978,10.3228492 38.1009814,10.0155384 38.7166417,10.0155384 C39.724086,10.0155384 40.5356383,10.83969 40.5356383,11.8314658 C40.5356383,13.018803 38.0869891,15.9522243 35.5264017,18.3268986 C32.9658142,15.9801616 30.5311573,13.060709 30.5311573,11.8314658 C30.5311573,10.83969 31.3567019,10.0155384 32.3641461,10.0155384 Z" id="Shape"></path>
|
||||
<path d="M65.5538368,32.6587569 L65.5538368,9.86188296 C65.5538368,8.77232648 64.6723231,7.8923001 63.5809252,7.8923001 C60.3207237,7.8923001 57.6621903,5.23825228 57.6621903,1.98355153 C57.6621903,0.880026383 56.7806766,0 55.6892787,0 L15.3915092,0 C14.3001113,0 13.4185976,0.880026383 13.4185976,1.96958286 C13.4185976,5.22428361 10.7600641,7.87833143 7.49986266,7.87833143 C6.40846473,7.87833143 5.52695102,8.75835781 5.52695102,9.84791428 L5.52695102,32.6587569 C2.44864919,32.868287 0,35.4245541 0,38.5535368 L0,64.1301766 C0,65.219733 0.881513708,66.0997594 1.97291163,66.0997594 L6.19858052,66.0997594 L6.19858052,68.977306 C6.19858052,70.0668625 7.08009422,70.9468889 8.17149215,70.9468889 C9.26289007,70.9468889 10.1444038,70.0668625 10.1444038,68.977306 L10.1444038,66.0997594 L62.2516585,66.0997594 L62.2516585,68.977306 C62.2516585,70.0668625 63.1331722,70.9468889 64.2245701,70.9468889 C65.3159681,70.9468889 66.1974818,70.0668625 66.1974818,68.977306 L66.1974818,66.0997594 L69.0938839,66.0997594 C70.1852819,66.0997594 71.0667956,65.219733 71.0667956,64.1301766 L71.0667956,38.5535368 C71.0807879,35.4245541 68.6321387,32.868287 65.5538368,32.6587569 Z M9.47277429,11.6359044 C13.3346439,10.8536587 16.3849611,7.80848806 17.1685289,3.95313439 L53.912259,3.95313439 C54.6958267,7.80848806 57.746144,10.8536587 61.6080136,11.6359044 L61.6080136,32.6447882 L58.0679665,32.6447882 L58.0679665,26.6661963 C58.0679665,25.5766398 57.1864528,24.6966134 56.0950548,24.6966134 L39.8500165,24.6966134 C38.7586186,24.6966134 37.8771049,25.5766398 37.8771049,26.6661963 L37.8771049,32.6447882 L33.2176753,32.6447882 L33.2176753,26.6661963 C33.2176753,25.5766398 32.3361616,24.6966134 31.2447636,24.6966134 L14.985733,24.6966134 C13.8943351,24.6966134 13.0128214,25.5766398 13.0128214,26.6661963 L13.0128214,32.6447882 L9.47277429,32.6447882 L9.47277429,11.6359044 Z M54.1221432,28.6357791 L54.1221432,32.6447882 L41.8229281,32.6447882 L41.8229281,28.6357791 L54.1221432,28.6357791 Z M29.2578597,28.6357791 L29.2578597,32.6447882 L16.9586447,32.6447882 L16.9586447,28.6357791 L29.2578597,28.6357791 Z M67.1349646,62.1605937 L3.94582326,62.1605937 L3.94582326,47.6192054 L67.1349646,47.6192054 L67.1349646,62.1605937 Z M67.1349646,43.6800397 L3.94582326,43.6800397 L3.94582326,38.5535368 C3.94582326,37.4639803 4.82733697,36.5839539 5.91873489,36.5839539 L65.1480607,36.5839539 C66.2394586,36.5839539 67.1209723,37.4639803 67.1209723,38.5535368 L67.1209723,43.6800397 L67.1349646,43.6800397 Z" id="Shape"></path>
|
||||
<path d="M12.0613463,56.8664667 L22.1357887,56.8664667 C23.2271866,56.8664667 24.1087003,55.9864404 24.1087003,54.8968839 C24.1087003,53.8073274 23.2271866,52.927301 22.1357887,52.927301 L12.0613463,52.927301 C10.9699484,52.927301 10.0884347,53.8073274 10.0884347,54.8968839 C10.0884347,55.9864404 10.9699484,56.8664667 12.0613463,56.8664667 Z" id="Shape"></path>
|
||||
<path d="M48.9449992,56.8664667 L59.0194416,56.8664667 C60.1108395,56.8664667 60.9923532,55.9864404 60.9923532,54.8968839 C60.9923532,53.8073274 60.1108395,52.927301 59.0194416,52.927301 L48.9449992,52.927301 C47.8536013,52.927301 46.9720876,53.8073274 46.9720876,54.8968839 C46.9720876,55.9864404 47.8536013,56.8664667 48.9449992,56.8664667 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
23
img-vid/vector-camp.svg
Normal file
23
img-vid/vector-camp.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="90px" height="76px" viewBox="0 0 90 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>vector-camp</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Version-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="NO-DECISION" transform="translate(-467.000000, -4445.000000)" fill-rule="nonzero" fill="#50E3C2">
|
||||
<g id="accomodation" transform="translate(180.000000, 3967.000000)">
|
||||
<g id="camp" transform="translate(46.000000, 478.000000)">
|
||||
<g id="vector-camp" transform="translate(241.000000, 0.000000)">
|
||||
<path d="M45,48.538 C45.553,48.538 46,48.09 46,47.538 L46,43.349 C46,42.797 45.553,42.349 45,42.349 C44.447,42.349 44,42.797 44,43.349 L44,47.538 C44,48.09 44.447,48.538 45,48.538 Z" id="Shape"></path>
|
||||
<path d="M45,39.403 C45.553,39.403 46,38.956 46,38.403 L46,34.912 C46,34.36 45.553,33.912 45,33.912 C44.447,33.912 44,34.36 44,34.912 L44,38.403 C44,38.956 44.447,39.403 45,39.403 Z" id="Shape"></path>
|
||||
<path d="M45,30.968 C45.553,30.968 46,30.52 46,29.968 L46,25.779 C46,25.227 45.553,24.779 45,24.779 C44.447,24.779 44,25.227 44,25.779 L44,29.968 C44,30.52 44.447,30.968 45,30.968 Z" id="Shape"></path>
|
||||
<path d="M45,21.833 C45.553,21.833 46,21.385 46,20.833 L46,17.342 C46,16.79 45.553,16.342 45,16.342 C44.447,16.342 44,16.79 44,17.342 L44,20.833 C44,21.386 44.447,21.833 45,21.833 Z" id="Shape"></path>
|
||||
<path d="M87.5,71.81 L83.557,71.81 C83.514,71.656 83.459,71.503 83.377,71.358 L47.294,7.108 L49.506,3.17 C50.047,2.207 49.704,0.987 48.741,0.447 C47.777,-0.095 46.558,0.248 46.017,1.211 L45,3.023 L43.982,1.211 C43.441,0.249 42.223,-0.095 41.258,0.447 C40.295,0.988 39.952,2.207 40.493,3.17 L42.705,7.108 L6.622,71.358 C6.54,71.504 6.485,71.656 6.442,71.81 L2.5,71.81 C1.396,71.81 0.5,72.706 0.5,73.81 C0.5,74.914 1.396,75.81 2.5,75.81 L87.5,75.81 C88.604,75.81 89.5,74.914 89.5,73.81 C89.5,72.706 88.604,71.81 87.5,71.81 Z M34.919,35.697 L26.413,50.702 C25.497,52.313 23.562,52.979 21.875,52.369 L33.938,30.89 C35.392,32.012 35.851,34.055 34.919,35.697 Z M20.885,54.132 C21.614,54.444 22.379,54.601 23.138,54.601 C25.143,54.601 27.094,53.553 28.153,51.689 L36.66,36.683 C38.138,34.078 37.349,30.796 34.931,29.122 L45,11.193 L79.042,71.81 L60.053,71.81 C60.054,71.789 60.062,71.77 60.062,71.749 L60.062,58.539 C60.062,57.392 59.128,56.459 57.982,56.459 L45.973,56.459 C45.979,56.412 46,56.371 46,56.323 L46,52.134 C46,51.582 45.553,51.134 45,51.134 C44.447,51.134 44,51.582 44,52.134 L44,56.323 C44,56.371 44.021,56.412 44.027,56.459 L32.019,56.459 C30.873,56.459 29.939,57.392 29.939,58.539 L29.939,71.749 C29.939,71.77 29.947,71.789 29.948,71.81 L10.958,71.81 L20.885,54.132 Z M45.001,59.1 L57.708,71.81 L32.292,71.81 L45.001,59.1 Z M31.938,69.334 L31.938,58.539 C31.938,58.495 31.974,58.459 32.018,58.459 L42.812,58.459 L31.938,69.334 Z M47.186,58.458 L57.982,58.458 C58.026,58.458 58.062,58.494 58.062,58.538 L58.062,69.334 L47.186,58.458 Z" id="Shape"></path>
|
||||
<path d="M17.539,27.278 C23.099,27.278 27.861,23.31 28.864,17.843 C29.007,17.068 28.68,16.282 28.032,15.835 C27.382,15.387 26.532,15.363 25.858,15.773 C24.939,16.331 23.892,16.627 22.829,16.627 C19.598,16.627 16.969,13.998 16.969,10.767 C16.969,9.577 17.326,8.43 18.002,7.448 C18.448,6.8 18.473,5.949 18.064,5.276 C17.655,4.603 16.893,4.234 16.107,4.329 C10.354,5.045 6.016,9.957 6.016,15.755 C6.017,22.109 11.186,27.278 17.539,27.278 Z M13.021,9.747 C12.986,10.084 12.968,10.425 12.968,10.767 C12.968,16.204 17.391,20.627 22.828,20.627 C22.977,20.627 23.128,20.624 23.277,20.617 C21.887,22.259 19.815,23.278 17.538,23.278 C13.391,23.278 10.016,19.903 10.016,15.755 C10.017,13.321 11.188,11.127 13.021,9.747 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
23
img-vid/vector-hotel.svg
Normal file
23
img-vid/vector-hotel.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="79px" height="66px" viewBox="0 0 79 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>vector-hotel</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Version-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="NO-DECISION" transform="translate(-473.000000, -5443.000000)" fill-rule="nonzero" fill="#50E3C2">
|
||||
<g id="accomodation" transform="translate(180.000000, 3967.000000)">
|
||||
<g id="aduard" transform="translate(87.000000, 1476.000000)">
|
||||
<g id="vector-hotel" transform="translate(206.000000, 0.000000)">
|
||||
<g id="Group">
|
||||
<path d="M70.7929075,44.7228578 L52.4391907,44.7228578 L52.4391907,34.1998324 C52.4391907,31.2954774 50.089915,28.9383197 47.1952717,28.9383197 L31.4635144,28.9383197 C28.5688711,28.9383197 26.2195954,31.2954774 26.2195954,34.1998324 L26.2195954,44.7228578 L7.86587861,44.7228578 C6.41593499,44.7228578 5.24391907,45.8988058 5.24391907,47.3536141 L5.24391907,63.1381521 C5.24391907,64.5929604 6.41593499,65.7689085 7.86587861,65.7689085 L70.7929075,65.7689085 C72.2428511,65.7689085 73.414867,64.5929604 73.414867,63.1381521 L73.414867,47.3536141 C73.414867,45.8988058 72.2428511,44.7228578 70.7929075,44.7228578 Z M20.9756763,57.8766394 C20.9756763,59.3314477 19.8036604,60.5073958 18.3537168,60.5073958 L13.1097977,60.5073958 C11.6598541,60.5073958 10.4878381,59.3314477 10.4878381,57.8766394 L10.4878381,52.6151268 C10.4878381,51.1603185 11.6598541,49.9843704 13.1097977,49.9843704 L18.3537168,49.9843704 C19.8036604,49.9843704 20.9756763,51.1603185 20.9756763,52.6151268 L20.9756763,57.8766394 Z M36.7074335,57.8766394 C36.7074335,59.3314477 35.5354176,60.5073958 34.085474,60.5073958 L28.8415549,60.5073958 C27.3916113,60.5073958 26.2195954,59.3314477 26.2195954,57.8766394 L26.2195954,52.6151268 C26.2195954,51.1603185 27.3916113,49.9843704 28.8415549,49.9843704 L34.085474,49.9843704 C35.5354176,49.9843704 36.7074335,51.1603185 36.7074335,52.6151268 L36.7074335,57.8766394 Z M52.4391907,57.8766394 C52.4391907,59.3314477 51.2671748,60.5073958 49.8172312,60.5073958 L44.5733121,60.5073958 C43.1233685,60.5073958 41.9513526,59.3314477 41.9513526,57.8766394 L41.9513526,52.6151268 C41.9513526,51.1603185 43.1233685,49.9843704 44.5733121,49.9843704 L49.8172312,49.9843704 C51.2671748,49.9843704 52.4391907,51.1603185 52.4391907,52.6151268 L52.4391907,57.8766394 Z M68.1709479,57.8766394 C68.1709479,59.3314477 66.998932,60.5073958 65.5489884,60.5073958 L60.3050693,60.5073958 C58.8551257,60.5073958 57.6831098,59.3314477 57.6831098,57.8766394 L57.6831098,52.6151268 C57.6831098,51.1603185 58.8551257,49.9843704 60.3050693,49.9843704 L65.5489884,49.9843704 C66.998932,49.9843704 68.1709479,51.1603185 68.1709479,52.6151268 L68.1709479,57.8766394 Z" id="Shape"></path>
|
||||
<polygon id="Shape" points="31.6260759 23.7951911 39.329393 19.7306725 47.0327102 23.7951911 45.5644128 15.1847256 51.7968106 9.08926315 43.1836736 7.83439238 39.329393 0 35.4751125 7.83439238 26.8619754 9.08926315 33.0943733 15.1847256"></polygon>
|
||||
<polygon id="Shape" points="12.4674176 32.7660702 20.1707347 36.8305887 18.7024374 28.222754 24.9348352 22.1246608 16.3216981 20.86979 12.4674176 13.0353977 8.61313708 20.86979 0 22.1246608 6.23239782 28.222754 4.76147852 36.8305887"></polygon>
|
||||
<polygon id="Shape" points="78.6587861 22.1246608 70.045649 20.86979 66.1913685 13.0353977 62.337088 20.86979 53.7239509 22.1246608 59.9563487 28.222754 58.4880514 36.8305887 66.1913685 32.7660702 73.8973076 36.8305887 72.4263883 28.222754"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img-vid/whatsapp.png
Normal file
BIN
img-vid/whatsapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
830
rsvp.css
830
rsvp.css
@@ -2,8 +2,12 @@
|
||||
box-sizing : border-box;
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
font-family: 'Glass Antiqua', cursive;
|
||||
color: #4A4A4A;
|
||||
}
|
||||
|
||||
|
||||
/* video */
|
||||
.fullscreen-bg {
|
||||
z-index : -100;
|
||||
position : fixed;
|
||||
@@ -14,7 +18,6 @@
|
||||
overflow : hidden;
|
||||
pointer-events : none;
|
||||
}
|
||||
|
||||
.fullscreen-bg:after {
|
||||
z-index : 10;
|
||||
content : '';
|
||||
@@ -26,7 +29,6 @@
|
||||
height : 100%;
|
||||
background : rgba(235,140,46,0.45);
|
||||
}
|
||||
|
||||
.fullscreen-bg__video {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
@@ -35,13 +37,11 @@
|
||||
height : 100%;
|
||||
pointer-events : none;
|
||||
}
|
||||
|
||||
.body {
|
||||
display : flex;
|
||||
width : 100%;
|
||||
height : 100vh;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align : center;
|
||||
}
|
||||
@@ -54,6 +54,8 @@ img {
|
||||
border: #50E3C2;
|
||||
}
|
||||
|
||||
|
||||
/*dark overlay behind white-background modal*/
|
||||
.modal {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
@@ -66,32 +68,6 @@ img {
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal p {
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 34px;
|
||||
color: #F8E6C1;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
font-weight: 100;
|
||||
}
|
||||
.modal a {
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
color: #F8E6C1;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(165,157,154, 0.6);
|
||||
transition: 0.3s;
|
||||
align-items: center;
|
||||
}
|
||||
.modal button {
|
||||
background-color: transparent;
|
||||
border: 2px solid #F8E6C1;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.modal a:hover, .modal a:focus {
|
||||
color: #50E3C2;
|
||||
}
|
||||
@@ -102,61 +78,61 @@ img {
|
||||
font-size: 50px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.login-form {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#take-me-in-btn {
|
||||
display : flex;
|
||||
width : 262px;
|
||||
height : 71px;
|
||||
margin-top : 1em;
|
||||
margin-right : auto;
|
||||
margin-left : auto;
|
||||
color : #F8E6C1;
|
||||
border : 2px solid #F8E6C1;
|
||||
border-radius : 100px;
|
||||
background-color : transparent;
|
||||
text-align : center;
|
||||
font-size : 24px;
|
||||
justify-content : center;
|
||||
line-height : 42px;
|
||||
letter-spacing : 2px;
|
||||
-webkit-transition-duration: 0.4s; /*safari*/
|
||||
transition-duration: 0.4s;
|
||||
cursor: pointer;
|
||||
}
|
||||
#take-me-in-btn:hover {
|
||||
background-color: #FFF;
|
||||
color: #50E3C2;
|
||||
border: #50E3C2;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
background-color: rgba(165,157,154, 0.6);
|
||||
border: 0px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
width: 377px;
|
||||
height: 60px;
|
||||
margin: .5em 0;
|
||||
font-size: 24px;
|
||||
color: #F8E6C1;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/*placeholders for input fields*/
|
||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #F8E6C1;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #F8E6C1;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: #F8E6C1;
|
||||
}
|
||||
|
||||
/*placeholders for RSVP input fields*/
|
||||
.textbox-sharingroom::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #9B9B9B;
|
||||
opacity: 1; /* Firefox */
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
.textbox-sharingroom:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #9B9B9B;
|
||||
opacity: 1; /* Firefox */
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
.textbox-sharingroom::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: #9B9B9B;
|
||||
opacity: 1; /* Firefox */
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/*placeholders for song input fields*/
|
||||
.artist::placeholder, .title::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #9B9B9B;
|
||||
opacity: 1; /* Firefox */
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
.artist:-ms-input-placeholder, .title:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #9B9B9B;
|
||||
opacity: 1; /* Firefox */
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
.artist::-ms-input-placeholder, .title::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: #9B9B9B;
|
||||
opacity: 1; /* Firefox */
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/*hiding scrollbar*/
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -164,40 +140,734 @@ img {
|
||||
button:focus {outline:0;}
|
||||
input:focus {outline:0;}
|
||||
|
||||
|
||||
/*main content of modal*/
|
||||
.white_background {
|
||||
display: grid;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
max-width: 1000px;
|
||||
max-height: 90%;
|
||||
min-height: 90%;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(255,255,255, .95);
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
grid-template-columns: 50px 1fr 1fr 20px;
|
||||
grid-template-rows: 50px auto 50px;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
/* MODAL HEADER AKA LOGO */
|
||||
.modal__header {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 0 / 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
/* MODAL BODY */
|
||||
.modal__content {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
grid-row: 2 / 3;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
/* guest response section */
|
||||
.greetings-section {
|
||||
text-align: center;
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
}
|
||||
|
||||
.yay {
|
||||
grid-column: 2 / 3;
|
||||
text-align: center;
|
||||
}
|
||||
/* You're invited! Yay! */
|
||||
.yay > h1 {
|
||||
font-size: 64px;
|
||||
font-weight: normal;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 2.33px;
|
||||
}
|
||||
|
||||
/* welcome to our wedding website...
|
||||
it's now time to R.S.V.P. */
|
||||
.yay > p:nth-of-type(1) {
|
||||
font-size: 24px;
|
||||
line-height: 160%;
|
||||
font-weight: lighter;
|
||||
margin-top: 30px;
|
||||
letter-spacing: 2.33px;
|
||||
}
|
||||
/* June 30th, 2018 */
|
||||
.yay > h2 {
|
||||
font-size: 55px;
|
||||
color: #50E3C2;
|
||||
margin-top: 70px;
|
||||
letter-spacing: 2.53px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Oldehove, The Netherlands */
|
||||
.yay > p:nth-of-type(2) {
|
||||
font-size: 22px;
|
||||
margin-top: 10px;
|
||||
letter-spacing: 2.14px;
|
||||
}
|
||||
|
||||
/* Are you coming? */
|
||||
.yay h3 {
|
||||
font-size: 45px;
|
||||
letter-spacing: 2.33px;
|
||||
margin-top: 70px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* guest response section */
|
||||
.guest-responses {
|
||||
grid-column: 2 / 3;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* names of guests */
|
||||
.guest-responses p {
|
||||
font-size: 32px;
|
||||
letter-spacing: 3.11px;
|
||||
font-weight: 300;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* guest response buttons */
|
||||
.guest-responses button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 30px;
|
||||
color: #FFF;
|
||||
background-color: #929292;
|
||||
border-radius: 5px;
|
||||
padding: 10px 50px;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
/* We kindly ask you to respond
|
||||
by March 10, 2018. */
|
||||
.guest-responses > h3 {
|
||||
font-size: 22px;
|
||||
letter-spacing: 2.14px;
|
||||
margin-top: 60px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
/* line break for end of Yay section */
|
||||
.greetings-line-break {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 2px solid #50E3C2;
|
||||
width: 40%;
|
||||
margin-top: 60px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
|
||||
/* Below you'll find more info */
|
||||
.guest-responses > h4 {
|
||||
font-size: 50px;
|
||||
margin-top: 60px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* venue section */
|
||||
.venue-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
text-align: center;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Venue Title */
|
||||
.venue-header {
|
||||
grid-column: 2 / 3;
|
||||
text-align: center;
|
||||
font-size: 45px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
.underline-venue {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 2px solid #50E3C2;
|
||||
width: 110px;
|
||||
margin-top: 5px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
|
||||
/* Venue JPEG */
|
||||
.venue-img {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.hayemaheerd-pic {
|
||||
width: 101%;
|
||||
}
|
||||
|
||||
/* Hayema Heerd */
|
||||
.venue-name {
|
||||
grid-column: 2 / 3;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
margin-top: 50px;
|
||||
letter-spacing: 3.88px;
|
||||
}
|
||||
|
||||
/* Jensemaweg 3
|
||||
9883 TH Oldehove
|
||||
The Netherlands */
|
||||
.venue-address {
|
||||
grid-column: 2 / 3;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
font-size: 22px;
|
||||
letter-spacing: 3px;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
/* venue desription */
|
||||
.venue-description {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 50px;
|
||||
font-size: 22px;
|
||||
letter-spacing: 2.3px;
|
||||
line-height: 160%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* schedule section */
|
||||
.schedule-section {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.schedule-header {
|
||||
grid-column: 2 / 3;
|
||||
font-size: 45px;
|
||||
letter-spacing: 2.33px;
|
||||
margin-top: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
.underline-schedule {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 2px solid #50E3C2;
|
||||
width: 170px;
|
||||
margin-top: 5px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
|
||||
.schedule-date {
|
||||
grid-column: 2 / 3;
|
||||
font-size: 40px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
.schedule-img {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 70px;
|
||||
justify-content: center;
|
||||
}
|
||||
.svg-schedule {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
.schedule-arrivaltime-notes {
|
||||
grid-column: 2 / 3;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2.75px;
|
||||
margin-top: 50px;
|
||||
text-align: justify;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
/* accomodation section */
|
||||
.accomodation-section {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* accomodation */
|
||||
.accomodation-header {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
font-size: 45px;
|
||||
letter-spacing: 2.33px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
/* underline accomodation */
|
||||
.underline-accomodation {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 2px solid #50E3C2;
|
||||
width: 300px;
|
||||
margin-top: 5px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
.accomodation-message {
|
||||
grid-column: 2 / 3;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.5px;
|
||||
text-align: justify;
|
||||
margin-top: 50px;
|
||||
line-height: 160%;
|
||||
}
|
||||
.accomodation-camp {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.camp-title {
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
/* underline for camp-title */
|
||||
.underline-camp {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 1px solid #50E3C2;
|
||||
width: auto;
|
||||
max-width: 290px;
|
||||
margin-top: 10px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
.camp-msg {
|
||||
font-size: 17px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.camp-details-container {
|
||||
display: inline-block;
|
||||
}
|
||||
.camp-details {
|
||||
font-size: 17px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 21px;
|
||||
line-height: 150%;
|
||||
text-align: left;
|
||||
}
|
||||
.camp-link {
|
||||
font-size: 18px;
|
||||
letter-spacing: 2.75px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.camp-link > a {
|
||||
color: #50E3C2;
|
||||
}
|
||||
.accomodation-camp > button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: #FFF;
|
||||
background-color: #DFDFDF;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
letter-spacing: 1.65px;
|
||||
padding: 12px 17px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.svg-camp {
|
||||
width: 100%;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
/* book bed section */
|
||||
.accomodation-bookbed {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 107px;
|
||||
text-align: center;
|
||||
}
|
||||
.bookbed-title {
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
/* underline for camp-title */
|
||||
.underline-bookbed {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 1px solid #50E3C2;
|
||||
width: auto;
|
||||
max-width: 360px;
|
||||
margin-top: 10px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
.bookbed-msg-container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.bookbed-msg {
|
||||
font-size: 17px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 20px;
|
||||
text-align: justify;
|
||||
line-height: 150%;
|
||||
max-width: 490px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.bookbed-details-container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.bookbed-details {
|
||||
font-size: 17px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 21px;
|
||||
line-height: 150%;
|
||||
text-align: left;
|
||||
max-width: 265px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.bookbed-link {
|
||||
font-size: 18px;
|
||||
letter-spacing: 2.75px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.bookbed-link > a {
|
||||
color: #50E3C2;
|
||||
}
|
||||
.accomodation-bookbed > button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: #FFF;
|
||||
background-color: #DFDFDF;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
letter-spacing: 1.65px;
|
||||
padding: 12px 17px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.svg-bookbed {
|
||||
width: 100%;
|
||||
max-width: 73px;
|
||||
}
|
||||
|
||||
/* hotel section */
|
||||
.accomodation-hotel {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 107px;
|
||||
text-align: center;
|
||||
}
|
||||
.hotel-title {
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
/* underline for hotel-title */
|
||||
.underline-hotel {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 1px solid #50E3C2;
|
||||
width: auto;
|
||||
max-width: 430px;
|
||||
margin-top: 10px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
.hotel-msg-container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.hotel-msg {
|
||||
font-size: 17px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 20px;
|
||||
text-align: justify;
|
||||
line-height: 150%;
|
||||
max-width: 490px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.hotel-details-container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.hotel-details {
|
||||
font-size: 17px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 21px;
|
||||
line-height: 150%;
|
||||
text-align: left;
|
||||
max-width: 270px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.hotel-prices-container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.hotel-prices {
|
||||
font-size: 17px;
|
||||
letter-spacing: 2.6px;
|
||||
margin-top: 12px;
|
||||
line-height: 150%;
|
||||
text-align: left;
|
||||
max-width: 153px;
|
||||
min-width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.hotel-link {
|
||||
font-size: 18px;
|
||||
letter-spacing: 2.75px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.hotel-link > a {
|
||||
color: #50E3C2;
|
||||
}
|
||||
.accomodation-hotel > button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: #FFF;
|
||||
background-color: #DFDFDF;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
letter-spacing: 1.65px;
|
||||
padding: 12px 17px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.textbox-sharingroom-container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.textbox-sharingroom {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-height: 115px;
|
||||
resize: none;
|
||||
padding: 15px 20px;
|
||||
font-size: 17px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 32px;
|
||||
line-height: 150%;
|
||||
box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.50);
|
||||
}
|
||||
.svg-hotel {
|
||||
width: 100%;
|
||||
max-width: 73px;
|
||||
}
|
||||
|
||||
/* no thanks, I don't need accomodation */
|
||||
.accomodation-nothanks {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
.overline-or {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 2px solid #50E3C2;
|
||||
width: auto;
|
||||
max-width: 430px;
|
||||
height: 1px;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 47px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
.or {
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.accomodation-nothanks > button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: #FFF;
|
||||
background-color: #DFDFDF;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
letter-spacing: 1.65px;
|
||||
padding: 12px 17px;
|
||||
margin-top: 47px;
|
||||
}
|
||||
|
||||
/* Meet the team secion */
|
||||
.team-section {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
}
|
||||
.team-header {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 95px;
|
||||
font-size: 45px;
|
||||
letter-spacing: 2.33px;
|
||||
}
|
||||
.underline-team {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 2px solid #50E3C2;
|
||||
width: auto;
|
||||
max-width: 309px;
|
||||
margin-top: 5px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
.team-msg {
|
||||
grid-column: 2 / 3;
|
||||
text-align: justify;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 160%;
|
||||
margin-top: 46px;
|
||||
}
|
||||
.team-pics {
|
||||
grid-column: 2 / 3;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 57px;
|
||||
}
|
||||
.charlotte {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.eline {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
.charlotte > h1, .eline > h1 {
|
||||
font-size: 31px;
|
||||
letter-spacing: 1.55px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.phone-container {
|
||||
margin-top: 13px;
|
||||
}
|
||||
.whatsapp {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.phone-container > span {
|
||||
font-size: 22px;
|
||||
letter-spacing: 1.55px;
|
||||
padding-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.team-email {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 55px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* song request section */
|
||||
.song-request-section {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 10fr 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
.song-request-header {
|
||||
grid-column: 2 / 3;
|
||||
font-size: 45px;
|
||||
letter-spacing: 2.33px;
|
||||
margin-top: 95px;
|
||||
}
|
||||
.underline-song {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-top: 2px solid #50E3C2;
|
||||
width: auto;
|
||||
max-width: 288px;
|
||||
margin-top: 5px;
|
||||
height: 1px;
|
||||
text-align: center; /*for IE & Opera*/
|
||||
-webkit-margin-start: auto; /*for Chrome, Safari, Firefox*/
|
||||
-webkit-margin-end: auto; /*for Chrome, Safari, Firefox*/
|
||||
}
|
||||
.song-request-msg {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 46px;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
line-height: 160%;
|
||||
}
|
||||
.song-request-input {
|
||||
grid-column: 2 / 3;
|
||||
margin-top: 49px;
|
||||
text-align: center;
|
||||
}
|
||||
.request1 > input, .request2 > input,
|
||||
.request3 > input, .request4 > input,
|
||||
.request5 > input, .request6 > input,
|
||||
.request7 > input, .request8 > input {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
padding: 10px 24px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
border-radius: 5px;
|
||||
background: #D8D8D8;
|
||||
border: 0;
|
||||
color: #4A4A4A;
|
||||
}
|
||||
|
||||
.request2 , .request3 , .request4 , .request5 , .request6 , .request7 , .request8 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
.modal__footer {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3 / 4;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: orange;
|
||||
background-color:orange;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
260
rsvp.html
260
rsvp.html
@@ -20,22 +20,268 @@
|
||||
<link href='img-vid/favicon.png' rel="shortcut icon" type="image/png"/>
|
||||
</head>
|
||||
<body class='body'>
|
||||
<!-- background video -->
|
||||
<div class="fullscreen-bg">
|
||||
<video loop muted autoplay poster='img-vid/eng-540p-low-img.jpg'class="fullscreen-bg__video">
|
||||
<source src="img-vid/eng-540p-low.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!-- modal post login -->
|
||||
<div id="myNav" class="modal">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
|
||||
<!-- background of foreground modal :) -->
|
||||
<div class="white_background">
|
||||
<div class="modal__header">Your fucking logo</div>
|
||||
<div class="modal__content">
|
||||
<div class="yay">
|
||||
<div>line 1</div>
|
||||
<div>line 2</div>
|
||||
</div>
|
||||
<div class="modal__header">
|
||||
<a href=""><img href="" src="img-vid/temp-logo.png"></img></a>
|
||||
</div>
|
||||
<div class="modal__footer">footer</div>
|
||||
<div class="modal__content">
|
||||
<!-- capture guests' decision -->
|
||||
<div class="greetings-section">
|
||||
<div class="yay">
|
||||
<h1>You're invited! Yay!</h1>
|
||||
<p>welcome to our wedding website</br>
|
||||
it's now time to R.S.V.P.</p>
|
||||
<h2>June 30th, 2018</h2>
|
||||
<p>Oldehove, The Netherlands</p>
|
||||
<h3>Are you coming?</h3>
|
||||
</div>
|
||||
<div class="guest-responses">
|
||||
<div class="guest1">
|
||||
<p>Babette van Son</p>
|
||||
<button type="button">yes</button>
|
||||
<button type="button">no</button>
|
||||
</div>
|
||||
<div class="guest2">
|
||||
<p>Robert van Baraneveld</p>
|
||||
<button type="button">yes</button>
|
||||
<button type="button">no</button>
|
||||
</div>
|
||||
<h3>We kindly ask you to respond by March 10, 2018.</h3>
|
||||
<hr class="greetings-line-break"></hr>
|
||||
<h4>Below you'll find more info</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- venue section -->
|
||||
<div class="venue-section">
|
||||
<div class="venue-header">Venue
|
||||
<hr class="underline-venue"></hr></div>
|
||||
<div class="venue-img"><img class="hayemaheerd-pic" src="img-vid/hayemaheerd.jpg"
|
||||
alt="Hayema Heerd Barn"></div>
|
||||
<div class="venue-name">Hayema Heerd</div>
|
||||
<div class="venue-address">Jensemaweg 3
|
||||
</br>
|
||||
9883 TH Oldehove
|
||||
</br>
|
||||
The Netherlands
|
||||
</div>
|
||||
<div class="venue-description">Hayema Heerd is a traditional Dutch farm in the beautiful national
|
||||
landscape called Middag Humsterland in the Groningen province. This former
|
||||
livestock farm has been turned into a unique wedding venue with a campsite
|
||||
and a homemade straw hotel with straw igloos, covered wagons, a straw castle
|
||||
and a barn hostel.
|
||||
</div>
|
||||
</div>
|
||||
<!-- schedule section -->
|
||||
<div class="schedule-section">
|
||||
<div class="schedule-header">Schedule
|
||||
<hr class="underline-schedule"></hr></div>
|
||||
<div class="schedule-date">June 30th, 2018</div>
|
||||
<div class="schedule-img"><img class="svg-schedule" src="img-vid/schedule.svg">
|
||||
</div>
|
||||
<div class="schedule-arrivaltime-notes">*Your arrival time depends on whether you have to check-in at
|
||||
the venue, set up your tent or caravan and whether you would like to attend the tea ceremony.
|
||||
</br></br>
|
||||
**In a traditional Chinese marriage ceremony, the bride and groom serve their parents and elder
|
||||
relatives tea. It is a devout way to show respect and gratitude to their family for all the years of
|
||||
love and care. This process also symbolizes the joining together of the two families. For those that
|
||||
are curious to see a tea ceremony (or Nikita in a Chinese dress), you’re more than welcome to attend!
|
||||
</div>
|
||||
</div>
|
||||
<!-- accomodation section -->
|
||||
<div class="accomodation-section">
|
||||
<div class="accomodation-header">Accomodation
|
||||
<hr class="underline-accomodation"></hr>
|
||||
</div>
|
||||
<div class="accomodation-message">Since our venue is situated in quite a secluded area, we have prepared some
|
||||
accommodation options for you. There is a big national event nearby during the weekend of our wedding and
|
||||
because of that, hotel room availability is limited. Therefore we would like to ask you to share the rooms
|
||||
with family or friends if possible.
|
||||
</br></br>
|
||||
Please let us know whether you would like to book any of the accommodations below before February 24th so we
|
||||
can make sure nobody has to sleep between the cows ;).
|
||||
</div>
|
||||
<!-- camping option-->
|
||||
<div class="accomodation-camp">
|
||||
<img class="svg-camp" src="img-vid/vector-camp.svg" alt="tent logo">
|
||||
<div class="camp-title">Camp at the venue
|
||||
<hr class="underline-camp"></hr>
|
||||
</div>
|
||||
<div class="camp-msg">Bring your own tent, caravan or camper!
|
||||
</div>
|
||||
<div class="camp-details-container">
|
||||
<div class="camp-details">
|
||||
Facilities: Shared bathrooms</br>
|
||||
Breakfast: Included</br>
|
||||
Price: €16.00 / person / night
|
||||
</div>
|
||||
</div>
|
||||
<div class="camp-link"><a href="">more info</a>
|
||||
</div>
|
||||
<button class="camp-btn" type="button">I'm camping!</button>
|
||||
</div>
|
||||
<!-- book a bed on venue option-->
|
||||
<div class="accomodation-bookbed">
|
||||
<img class="svg-bookbed" src="img-vid/vector-bed.svg" alt="bed logo">
|
||||
<div class="bookbed-title">Book a bed at the venue
|
||||
<hr class="underline-bookbed"></hr>
|
||||
</div>
|
||||
<div class="bookbed-msg-container">
|
||||
<div class="bookbed-msg">Go for a unique experience
|
||||
and discover how comfortable a bed made of straw
|
||||
can be. Don’t worry, there’s a comfortable
|
||||
mattress pad on top!
|
||||
</div>
|
||||
</div>
|
||||
<div class="bookbed-details-container">
|
||||
<div class="bookbed-details">
|
||||
Facilities: Shared bathrooms</br>
|
||||
Breakfast: Included</br>
|
||||
Price: €33.00 / person / night
|
||||
</div>
|
||||
</div>
|
||||
<div class="bookbed-link"><a href="">more info</a>
|
||||
</div>
|
||||
<button class="bookbed-btn" type="button">Book me a bed!</button>
|
||||
</div>
|
||||
<!-- book a hotel room option-->
|
||||
<div class="accomodation-hotel">
|
||||
<img class="svg-hotel" src="img-vid/vector-hotel.svg" alt="hotel logo">
|
||||
<div class="hotel-title">Best Western Hotel in Aduard
|
||||
<hr class="underline-hotel"></hr>
|
||||
</div>
|
||||
<div class="hotel-msg-container">
|
||||
<div class="hotel-msg">We made reservations for the
|
||||
Deluxe Rooms at the Best Western Hotel in Aduard.
|
||||
Every room can host a maxiumum of 4 people. It is
|
||||
possible to book a room for 2 nights (Friday 29th
|
||||
and Saturday 30th).
|
||||
</br>
|
||||
</br>
|
||||
The hotel is a 10 minute drive away from the venue.
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel-details-container">
|
||||
<div class="hotel-details">
|
||||
Facilities: Private bathrooms</br>
|
||||
Breakfast: Included</br>
|
||||
Price/room/night
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel-prices-container">
|
||||
<div class="hotel-prices">
|
||||
1-2 people €76.00</br>
|
||||
3 people €108.00</br>
|
||||
4 people €140.00</br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel-link"><a href="">more info</a>
|
||||
</div>
|
||||
<button class="hotel-btn" type="button">Book me a room</button>
|
||||
<div class="textbox-sharingroom-container">
|
||||
<textarea class="textbox-sharingroom" name="sharingroomwith" cols="40" rows="5"
|
||||
placeholder="Please tell us if you'd like only Saturday or both Friday and Saturday. And if you're sharing a room please tell us the names of your roomates..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accomodation-nothanks">
|
||||
<div class="or"><hr class="overline-or"></hr>OR
|
||||
</div>
|
||||
<button class="noaccomodation
|
||||
|
||||
|
||||
-btn" type="button">No thanks, I don't need accomodation</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- meet the team secion -->
|
||||
<div class="team-section">
|
||||
<div class="team-header">Meet the team
|
||||
<hr class="underline-team"></hr>
|
||||
</div>
|
||||
<div class="team-msg">We are very pleased to tell you that we have two “ceremoniemeesters”.
|
||||
In The Netherlands, their role is comparable to the maid of honor. They’ve been super helpful
|
||||
with our wedding planning and will help to make it an unforgettable day! Charlotte and Eline
|
||||
will also be available for all of you in case you have any questions or want to gossip ;).
|
||||
</div>
|
||||
<div class="team-pics">
|
||||
<div class="charlotte"><img src="img-vid/charlotte.png">
|
||||
<h1>Charlotte</h1>
|
||||
<div class="phone-container">
|
||||
<img class="whatsapp" src="img-vid/whatsapp.png"><span>+31 62550 2779</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eline"><img src="img-vid/eline.png">
|
||||
<h1>Eline</h1>
|
||||
<div class="phone-container">
|
||||
<img class="whatsapp" src="img-vid/whatsapp.png"><span>+31 62550 2779</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-email">
|
||||
<a href="mailto:n2ceremoniemeesters@gmail.com?Subject=⚭%20Nathan%20%26%20Nikita%27s%20Wedding%20⚭">Email: n2ceremoniemeesters@gmail.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- song request section -->
|
||||
<div class="song-request-section">
|
||||
<div class="song-request-header">Song request
|
||||
<hr class="underline-song"></hr>
|
||||
</div>
|
||||
<div class="song-request-msg">
|
||||
We want everyone to enjoy the party and dance the night away.
|
||||
</br>
|
||||
What better way of doing that than to your favorite song?
|
||||
</div>
|
||||
<div class="song-request-input">
|
||||
<div class="request1">
|
||||
<input id="artist1" class="artist" type="text" placeholder="artist 1"/>
|
||||
<input id="title1" class="title" type="text" placeholder="title 1"/>
|
||||
</div>
|
||||
<div class="request2">
|
||||
<input id="artist2" class="artist" type="text" placeholder="artist 2"/>
|
||||
<input id="title2" class="title" type="text" placeholder="title 2"/>
|
||||
</div>
|
||||
<div class="request3">
|
||||
<input id="artist3" class="artist" type="text" placeholder="artist 3"/>
|
||||
<input id="title3" class="title" type="text" placeholder="title 3"/>
|
||||
</div>
|
||||
<div class="request4">
|
||||
<input id="artist4" class="artist" type="text" placeholder="artist 4"/>
|
||||
<input id="title4" class="title" type="text" placeholder="title 4"/>
|
||||
</div>
|
||||
<div class="request5">
|
||||
<input id="artist5" class="artist" type="text" placeholder="artist 5"/>
|
||||
<input id="title5" class="title" type="text" placeholder="title 5"/>
|
||||
</div>
|
||||
<div class="request6">
|
||||
<input id="artist6" class="artist" type="text" placeholder="artist 6"/>
|
||||
<input id="title6" class="title" type="text" placeholder="title 6"/>
|
||||
</div>
|
||||
<div class="request7">
|
||||
<input id="artist7" class="artist" type="text" placeholder="artist 7"/>
|
||||
<input id="title7" class="title" type="text" placeholder="title 7"/>
|
||||
</div>
|
||||
<div class="request8">
|
||||
<input id="artist8" class="artist" type="text" placeholder="artist 8"/>
|
||||
<input id="title8" class="title" type="text" placeholder="title 8"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<div class="footer">
|
||||
<div>We kindly ask you to R.S.V.P. by March 10, 2018.</div>
|
||||
<div>Your R.S.V.P. is final after March 10, 2018.</div>
|
||||
<button type="button" id="close-end-btn" >Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openNav() {
|
||||
|
||||
Reference in New Issue
Block a user