generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
93 lines (85 loc) · 4.21 KB
/
index.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
<!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</title>
<!--Favicon-->
<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" class="active">Home</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="booking.html">Booking</a></li>
</ul>
</nav>
</header>
<!--Main Content Area-->
<main>
<section>
<div class="welcome-message">
<h3>Welcome to Tarot Tales - our peaceful little corner of the web.</h3>
<br>
<p>The purpose of this site is to give you some general information on Tarot cards and, if you are still
interested, perhaps you would like to make a booking with one of our readers.</p>
<br>
<p>Tarot Cards are wonderful at helping us all open up and discuss our dreams and aspirations. Think of
them as just a tool to help you tell your story.</p>
<br>
</div>
</section>
<section id="index-info">
<div class="info-message">
<div class="info-message-text">
<img src="assets/images/small-tarot.jpeg" alt="Tarot cards laid out on table" id="index-image">
<div class="info-message-text-detail">
<h3>What we offer</h3>
<ul>
<li>5 readers from all different backgrounds and outlooks on life</li>
<li>We offer readings in person or online</li>
<li>No set charge, we just ask that you pay what you feel the reading was worth</li>
</ul>
</div>
</div>
</div>
</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>