generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathgender-reveal.html
138 lines (132 loc) · 5.21 KB
/
gender-reveal.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="balloon and decor shop for special occasions in Novi Pazar">
<meta name="keywords" content="balloons, decoration, balloonshop, decoration for occasions, Serbia, Novi Pazar">
<link href="assets/css/style.css" rel="stylesheet">
<title>Magic balon decor</title>
</head>
<body>
<header>
<!-- logo and name and navbar-->
<nav>
<div id="wrap">
<img src="assets/images/mbd-logo.webp" alt="logo of the company" id="logo">
<ul class="navbar">
<li><a href="index.html">Home</a></li>
<li>
<a href="#" class="active">Decoration</a>
<ul>
<li><a href="birthday.html">Birthday</a></li>
<li><a href="engagment.html">Engagment</a></li>
<li><a href="gender-reveal.html" class="active">Gender reveal</a></li>
<li><a href="grand-opening.html">Grand opening</a></li>
<li><a href="wedding.html">Wedding</a></li>
</ul>
</li>
<li><a href="webshop.html">Webshop</a></li>
</ul>
</div>
</nav>
</header>
<main>
<section class="picture-example">
<h1>Gender Reveal</h1>
<br>
<img src="assets/images/gender-reveal1.webp" alt="basic example of decoration for a gender reveal">
<img src="assets/images/gender-reveal2.webp" alt="deluxe example of decoration for a gender reveal">
</section>
<div class="decoration-info">
<br>
<p>
With your gender reveal we can keep it simple (first picture) or we can do a more grand version (second picture).
We give you options of choosing the colors of the balloons (we recommend using pink and blue).
and you can choose some extra decorations which you would like.
Fill in our form below if you want us to decorate your gender reveal!
</p>
</div>
<div class="form">
<form action="contact.html">
<fieldset>
<legend>Your Details</legend>
<br>
<div>
<label for="fname">First Name:</label>
<input type="text" id="fname" required>
</div>
<div>
<label for="lname">Last Name:</label>
<input type="text" id="lname" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<div>
<label for="number">Phone number:</label>
<input type="number" id="number" required>
</div>
</fieldset>
<br>
<fieldset>
<legend>Decoration Choices</legend>
<br>
<div>
<label for="color1">Primairy color:</label>
<input type="color" id="color1">
</div>
<div>
<label for="color2">Secondairy color:</label>
<input type="color" id="color2">
</div>
<div>
<label for="color3">Tertiary color:</label>
<input type="color" id="color3">
</div>
</fieldset>
<br>
<fieldset class="options">
<legend>Options</legend>
<br>
<label for="flowers"><input type="checkbox" id="flowers">Flowers</label>
<label for="pop-balloons"><input type="checkbox" id="pop-balloons">Pop Balloon (colors inside)</label>
<label for="decorative-wall"><input type="checkbox" id="decorative-wall">Decorative Wall</label>
<label for="teddy-balloon"><input type="checkbox" id="teddy-balloon">Teddybear Balloon</label>
<label for="pillar"><input type="checkbox" id="pillar">Balloon Pillar</label>
<label for="arch"><input type="checkbox" id="arch">Balloon Arch</label>
<label for="cake"><input type="checkbox" id="cake">Cake</label>
<br>
<label for="extras" class="block-label">Do you want anything extra?</label>
<textarea id="extras" rows="4" cols="40" name="extras"></textarea>
</fieldset>
<br>
<fieldset>
<legend>Date and Time</legend>
<br>
<div>
<label for="date">Date:</label>
<input type="date" id="date" required>
</div>
<div>
<label for="time">Time:</label>
<input type="time" id="time" required>
</div>
</fieldset>
<input type="submit" value="Make Appointment">
</form>
</div>
</main>
<footer>
<ul>
<li id="float-left">Contact Us: <i class="fa-solid fa-phone"></i><a href="tel:1234567890">1234567890</a></li>
<li id="float-right"><a href="https://www.instagram.com/magicbalondecor/" target="_blank" rel="noopener"
aria-label="Find us on Instagram (link opens in a new tab)"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</footer>
<!-- font awesome script-->
<script src="https://kit.fontawesome.com/45c35d510d.js" crossorigin="anonymous"></script>
</body>
</html>