generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathbirthday.html
135 lines (130 loc) · 5.1 KB
/
birthday.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
<!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" class="active">Birthday</a></li>
<li><a href="engagment.html">Engagment</a></li>
<li><a href="gender-reveal.html">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>Birthday</h1>
<br>
<img src="assets/images/basic-bday.webp" alt="basic example of decoration for a birthday">
<img src="assets/images/deluxe-bday.webp" alt="deluxe example of decoration for a birthday">
</section>
<div class="decoration-info">
<p>
With your birthdays 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 and which extra decorations you would like.
Fill in our form below if you want us to decorate your next birthday!
</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="number-balloons"><input type="checkbox" id="number-balloons">Numeric balloons</label>
<label for="decorative-wall"><input type="checkbox" id="decorative-wall">Decorative Wall</label>
<label for="cuddly-toy"><input type="checkbox" id="cuddly-toy">Cuddly Toy (teddybear)</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">Birthdaycake</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>