-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (136 loc) · 6.74 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yuki Tea Shop - Home</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<style>
/* Used for sitemap links */
li a span:hover {
color: gold;
}
</style>
<script src="utility-functions.js"></script>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/image-map-resizer@1.0.10/js/imageMapResizer.min.js"></script>
</head>
<body>
<header>
<nav class="nav nav-tabs nav-fill bg-dark">
<a
class="nav-link active bg-success text-warning fw-bold"
href="index.html"
>HOME</a
>
<a class="nav-link fw-bold text-success" href="shop.html">SHOP</a>
<a class="nav-link fw-bold text-success" href="about.html">ABOUT</a>
<a class="nav-link fw-bold text-success" href="contact.html">CONTACT</a>
</nav>
<img
id="banner-img"
class="border-bottom border-top border-black border-5"
width="100%"
src="res/images/banner1.png"
alt="Yuki's Tea Shop Banner Image"
usemap="#banner-image-map"
/>
<map name="banner-image-map">
<area
title="Yuki's GitHub"
shape="circle"
coords="1920,640, 75"
href="https://github.com/yuki-konn"
alt="GitHub Icon"
target="_blank"
/>
<area
title="Yuki's LinkedIn"
shape="rect"
coords="2050,565, 2205,720"
href="https://www.linkedin.com/in/yuki-k-745115219/"
alt="LinkedIn Icon"
target="_blank"
/>
</map>
</header>
<main class="container">
<section id="sectionAbout" class="text-center m-2"></section>
<section id="sectionLocation" class="text-center m-2"></section>
<section id="sectionHistory" class="text-center m-2"></section>
<section id="sectionTriva" class="text-center m-2"></section>
<br />
</main>
<footer>
<div id="siteMapGroup" class="m-1">
<span class="fw-bold p-0 m-0"><u style="color: green">Sitemap</u></span>
<ul class="list-group p-1">
<li class="list-group-item">
<a class="no-decor" href="#sectionAbout"><span>About</span></a>
</li>
<li class="list-group-item">
<a class="no-decor" href="#sectionLocation"
><span>Locations</span></a
>
</li>
<li class="list-group-item">
<a class="no-decor" href="#sectionHistory"><span>History</span></a>
</li>
<li class="list-group-item">
<a class="no-decor" href="#sectionTrivia"><span>Trivia</span></a>
</li>
</ul>
</div>
<div class="text-center m-0">
<span class="fw-bold">Copyright 2024</span><br />
Website created by <span class="fst-italic">Yuki Konishi</span>
</div>
</footer>
<script>
const card1 = {};
card1.title = "About";
card1.desc1 =
"This is the about card of my imaginary online tea shop website. You can learn more about the different features in the project in the About section. You can get to the about section by clicking on the button below or the About tab at the top of the page.";
card1.desc2 = "";
card1.desc3 = "";
card1.link = "about.html";
card1.buttonName = "Learn More";
const card2 = {};
card2.title = "Locations";
card2.desc1 =
"Lorem ipsum odor amet, consectetuer adipiscing elit. Tempor magnis scelerisque quam turpis sem parturient. Urna elit habitasse accumsan torquent consequat consequat. Dictum ad metus phasellus magna eleifend scelerisque sem. Magna euismod aliquam finibus conubia ad. Erat adipiscing molestie; fringilla dolor nisi suscipit pulvinar pretium? Nulla class justo sapien egestas placerat! Penatibus iaculis aliquet molestie, porta pulvinar tristique. Finibus ut nullam urna quisque mi.";
card2.desc2 =
"Duis odio facilisi ullamcorper suspendisse a vitae nibh. Inceptos aenean egestas aenean ultrices senectus massa. Tempor aliquet eleifend non porta habitasse elementum lobortis. Curae vulputate lorem cras parturient facilisi erat proin leo. Vestibulum integer litora amet quis; torquent dolor malesuada. Maximus purus elementum, cras sodales hac semper vivamus. Augue leo ultricies hendrerit; in bibendum iaculis. Porttitor penatibus at sociosqu porta rhoncus.";
card2.desc3 = "";
card2.link = "";
card2.buttonName = "Learn More";
const card3 = {};
card3.title = "History";
card3.desc1 =
"Lorem ipsum odor amet, consectetuer adipiscing elit. Vitae torquent dictum montes enim libero nec parturient, enim neque. Malesuada nullam scelerisque conubia; porttitor semper rhoncus finibus. Dui natoque volutpat sociosqu curabitur ac nulla viverra. Curae felis ultrices aliquet ante pellentesque mollis porta. Interdum nisi consequat, neque tempus orci nostra lacus litora scelerisque. Ornare viverra dolor volutpat; potenti eleifend cubilia nostra potenti.";
card3.desc2 =
"Blandit quam fermentum enim justo mi? Per eget sem elit erat convallis in rhoncus. Faucibus duis conubia justo sagittis conubia vulputate! Erat praesent imperdiet praesent tempus gravida, senectus auctor sagittis proin. Consectetur consequat porta fusce amet nisi et commodo. Potenti nibh risus torquent a in torquent. Habitant ultricies curae vehicula ullamcorper curae nostra. Mus nibh risus neque penatibus molestie. Consequat eget magnis vulputate aliquet est arcu.";
card3.desc3 =
"Volutpat suspendisse sit pharetra at ultrices risus. Nostra aliquam facilisis metus nulla inceptos. Dictum in diam feugiat hac aenean curae. Venenatis fames curae leo magna vivamus aenean aliquet mi elementum. Tellus euismod augue torquent duis hac ex suscipit netus. Condimentum potenti euismod id ornare vestibulum. Felis habitasse turpis conubia arcu maximus.";
card3.link = "";
card3.buttonName = "Learn More";
// Trivia Card
const triviaCard = {};
triviaCard.title = "Random Trivia";
triviaCard.buttonName = "Brew Question";
const card1String = convertLinkCard(card1);
const card2String = convertLinkCard(card2);
const card3String = convertLinkCard(card3);
const card4String = convertTriviaCard(triviaCard);
sectionAbout.innerHTML += card1String;
sectionLocation.innerHTML += card2String;
sectionHistory.innerHTML += card3String;
sectionTriva.innerHTML += card4String;
imageMapResize();
</script>
</body>
</html>