wedding-website/rsvp.html at master · wing168/wedding-website · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RSVP by 21 April 2019</title>

<link  href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'/>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'/>
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet"/>
</head>
<body class= "modal-wrap">

    <div class="top-bar">
            <div class="container">

                <div class="mobile">
                    <div  id= 'line1'></div>
                    <div  id= 'line2'></div>
                    <div  id ='line3'></div>
                </div>


                <nav class="nav">


                    <ul class='nav-links'>
                        <a href="index.html"><li>Our Story</li></a>
                        <a href="details.html"><li>Details</li></a>
                        <a href="q&a.html"><li>Q&A</li></a>
                        <li id='nav-key'>RSVP</li>
                    </ul>


                </nav>


                <img src="img/double_happiness.png" alt="" id="logo"><span id="names">Wing & Evangeline</span>
            </div>
        </div>

    <div class="showcase9" >
            <div class="heading">
                <span>RSVP</span>
            </div>

    </div>

    <div class="info-rsvp info">
            <h1>We are super excited to celebrate with you!</h1>
            <p>Please kindly RSVP by 19 April 2019</p>
    </div>


    <form class= 'form'>


        <div class = 'error'>Please complete all the fields</div>

        <div class= 'rsvp-box'>
            <div class="initial">
                <label for="email" class='label'>Email*</label>
                <input type='email' placeholder="Enter email" class='input email' name='email'>

                <div class="name-inline">
                    <div class="firstname">
                        <label for="firstname" class='label'>First Name</label>
                        <input type='text' placeholder='First Name' class='input' id='fname' name='firstname'>
                    </div>

                    <div class="surname">
                        <label for='surname' class='label'>Surname</label>
                        <input type='text' placeholder='Surname' class='input' id='sname' name='surname'>
                    </div>
                </div>

                <label for='attend' class='label'>Will You Be Attending?</label>
                <select name ='attend' class='input attend'>
                    <option></option>
                    <option value='yes'>Yes</option>
                    <option value='no'>No</option>
                </select>

            </div>

            <div class="secondary">
                <label for='starter' class='label'>Please Select Your Starter</label>
                <select name='starter' class='input starter'>
                    <option value=''></option>
                    <option value='parfait'>Chicken Liver Parfait</option>
                    <option value="risotto">Broad Bean Risotto</option>
                </select><br />

                <label for='main' class='label'>Please Select Your Main Course</label>
                <select name='main' class='input main'>
                    <option value=''></option>
                    <option value='seabass'>Filet of Seabass</option>
                    <option value='lamb'>Rump of Lamb</option>
                    <option value='aubergine'>Grilled Aubergine</option>
                </select><br />


                <label for='dessert' class='label'>Please Select Your Dessert</label>
                <select name='dessert' class='input dessert'>
                    <option value=''></option>
                    <option value='cheesecake'>White Chocolate Cheesecake</option>
                    <option value='stickytoffee'>Sticky Toffee Pudding</option>
                </select> <br />


            </div>

            <button type='button' class='btn' id='rsvp-btn'>Submit</button>
        </div>
    </form>

    <div class= 'modal-wrap2'>
        <div class='modal'>

            <div class="modal-head">
                <img src="img/double_happiness.png" alt="" id="logo"><span>Thank you!</span><img src="img/double_happiness.png" alt="" id="logo2">
            </div>

            <div class="modal-content">

                <p>A confirmation will be sent to your email shortly!</p>

                <a href='/index.html' class = 'btn close-btn'>OK</a>
            </div>
        </div>

    </div>

    <footer>WingMan designs 2019 &copy;</footer>

    <script src='app.js'></script>
</body>
</html>