generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
booking.html
107 lines (101 loc) · 5.06 KB
/
booking.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta tags for search engines -->
<meta name="description"
content="Tarot Tales. Get a Tarcot Card reading. Learn about the different tarot card meanings. Join Class to unlock your potential to res Taor Cards. Explore the connections between Tarot Cards and psychology. Online or at our studio in Cork City.">
<meta name="keywords"
content="tarot card, tarot meaning, understanding tarot, reading taror cards, psychology, tarot and psychology overlap, learning, online, class room, Cork City, Cork, Ireland">
<title>Tarot Tales - The Cards</title>
<!--Favicon-->
<!--<a target="_blank" href="https://icons8.com/icon/FEFpkitFCxia/tarot-cards">Tarot Cards</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>-->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/icons8-tarot-cards-100.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/icons8-tarot-cards-100.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/icons8-tarot-cards-100.png">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--Header Area-->
<header>
<a href="index.html">
<h1 id="logo">Tarot Tales</h1>
</a>
<input type="checkbox" id="menu-show" name="menu-show">
<label for="menu-show" class="menu-show-label">
<i class="fa-solid fa-bars"></i>
</label>
<nav>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="booking.html" class="active">Booking</a></li>
</ul>
</nav>
</header>
<!--Main Content Area-->
<main>
<!-- https://codepen.io/tutsplus/pen/wNaGjy -->
<section id="booking-form">
<h3>Booking Information:</h3>
<form action="https://formdump.codeinstitute.net" method="post">
<div class="elem-group">
<label for="name">Name</label>
<input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20}
required>
</div>
<div class="elem-group">
<label for="email">E-mail</label>
<input type="email" id="email" name="visitor_email" placeholder="name@email.com" required>
</div>
<div class="elem-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="visitor_phone" placeholder="0871112233" required>
</div>
<hr>
<div class="elem-group inlined">
<label for="checkin-date">Date</label>
<input type="date" id="checkin-date" name="checkin" required>
</div>
<div class="elem-group inlined">
<label for="checkout-date">Time</label>
<input type="time" id="checkout-date" name="checkout" required>
</div>
<div class="elem-group">
<label for="room-selection">Inperson or online reading?</label>
<select id="room-selection" name="room_preference">
<option>In person</option>
<option>Online</option>
</select>
</div>
<hr>
<div class="elem-group">
<label for="message">Any other info?</label>
<textarea id="message" name="visitor_message"
placeholder="Tell us anything else that might be important."></textarea>
</div>
<button type="submit">Book a reading</button>
</form>
</section>
</main>
<!--Footer Area-->
<footer>
<ul id="socials">
<li><a href="https://www.youtube.com/" target="_blank" rel="noopener"
aria-label="Visit our YouTube page. This will open in a tab"><i
class="fa-brands fa-youtube"></i></a></li>
<li><a href="https://www.twitter.com/" target="_blank" rel="noopener"
aria-label="Visit our Twitter page. This will open in a tab"><i
class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="https://www.facebook.com/" target="_blank" rel="noopener"
aria-label="Visit our Facebook page. This will open in a tab"><i
class="fa-brands fa-facebook"></i></a></li>
<li><a href="https://www.tiktok.com/" target="_blank" rel="noopener"
aria-label="Visit our TikTok page. This will open in a tab"><i class="fa-brands fa-tiktok"></i></a>
</li>
</ul>
</footer>
<script src="https://kit.fontawesome.com/9d9c64c030.js" crossorigin="anonymous"></script>
</body>
</html>