-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (122 loc) · 6.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyStitchers</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Inter|Nunito|Barlow">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="icon" type="image/x-icon" href="/images/logo_new.png">
<script src="js/welcome.js"></script>
<script defer src="js/disclaimer.js"></script>
<script defer src="js/terms.js"></script>
</head>
<body>
<header>
<nav>
<div class="navbar">
<a href="index.html"><img class="primary-icon" src="images/SkyStitcher_logo.png"/>
SkyStitchers
</a>
<a href="index.html"><span class="material-symbols-outlined">Home</span>
Home
</a>
<a href="getting-started.html"><span class="material-symbols-outlined">home_repair_service</span>
Get ready
</a>
<a href="make.html"><span class="material-symbols-outlined">brush</span>
Workshops
</a>
<a href="events.html"><span class="material-symbols-outlined">calendar_month</span>
Events
</a>
<a href="about.html"><span class="material-symbols-outlined">favorite</span>
About Us</a>
</div>
</nav>
<h1>Skystitchers</h1>
<p>
Do you want to design and create your own clothes and toys?
</p>
</header>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade"style="display: block;">
<img src="images/img14.png" alt="Making a furry halloween spider with your hands and some thread" style="width: 100%">
</div>
<div class="mySlides fade">
<img src="images/img2.png" alt="Different threads, buttons and tape measure" style="width: 100%">
</div>
<div class="mySlides fade">
<img src="images/img17.png" alt="Crafting a dolphin key ring with beads" style="width: 100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<p>Gather your tools and become a <i>SkyStitcher</i>.</p>
<p>Follow our tutorials and stich your way to the <i>moon and back.</i></p>
<!---Buttons-->
<div class="container">
<img src="images/img16.png" alt="A child sewing a teadybear by hand while sitting comfortably on the couch" style="width:80%">
<button class="btn" onclick="document.location='make.html'">Workshops</button>
</div>
<div class="container">
<img src="images/img5.png" alt="A child with scissors ready to cut" style="width:80%">
<button class="btn" onclick="document.location='events.html'">Events</button>
</div>
<div class="container">
<img src="images/img21.png" alt="creating a fabric appliqué book" style="width:80%">
<button class="btn" onclick="document.location='about.html'">About Us</button>
</div>
<footer>
<div class="footer">
<ul>
<li>
<a id="discllink">Disclaimer</a>
<div id="disclModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="disClose">×</span>
<h2>Disclaimer</h2>
</div>
<div class="modal-body">
<p>
This is not the official West Highland Way website and is for general purpose and information use only. <br>
The information is provided by Skystitchers and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.
</p>
<p>In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.
</p>
<p>Through this website you are able to link to other websites which are not under the control of Skystitchers. We have no control over the nature, content and availability of those sites. The inclusion of any links does not necessarily imply a recommendation or endorse the views expressed within them.
</p>
</div>
</div>
</div>
</li>
<li>
<a id="tclink">Terms and Conditions</a>
<div id="tcModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="tcClose">×</span>
<h2>Terms and Conditions</h2>
</div>
<div class="modal-body">
<p>This is a mock website for a challenge created by CFG, therefore the terms and conditions are not fully written </p>
<p> In general terms and condtions will be about how the website should be used and how the website generates and keeps the infornation safe. As it is a website for children, the conditons would be about the sfaeguarding of young children.</p>
</div>
</div>
</div>
</li>
<p>Created by Team Blue @2023</p>
</ul>
</div>
</footer>
</body>
</html>