-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
169 lines (155 loc) · 6.32 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!--Kate Blake-->
<!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" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<script defer src="./js/home.js"></script>
<title>Second Hand Thrift Fest</title>
<link rel="icon" href="./images/circlelogo80.png" type="image/x-icon" />
<style>
.google-form {
background-color: var(--accentMain);
padding: 2rem;
}
.google-form p {
margin: 1rem 0;
}
.newsletter-btn {
font-size: 1rem;
background-color: var(--accentOther);
letter-spacing: 2px;
width: auto;
border-radius: 30px;
}
.newsletter-btn a {
color: white;
}
.newsletter-btn:hover a {
color: white;
}
</style>
</head>
<body>
<script>
0;
</script>
<header style="position: absolute; background-color: transparent">
<img class="logo" src="./images/circlelogo80.png" alt="Thrift Fest Logo" />
<h1 class="logo-heading" style="color: var(--accentMain)">Second Hand Thrift Fest</h1>
<!--This is for the responsive menu-->
<input type="checkbox" class="nav-toggle" name="nav-toggle" id="nav-toggle" />
<nav>
<ul>
<li>
<a href="./index.html" class="is-active">Home</a>
</li>
<li><a href="./about.html">About</a></li>
<li><a href="./events.html">Events</a></li>
<li><a href="./gallery.html">Gallery</a></li>
<li><a href="./bookings.html">Bookings</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<!--This is for the responsive menu-->
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<div class="container">
<div class="home-background">
<div class="home-underside">
<div class="pic" id="pic4"></div>
<div class="pic" id="pic3"></div>
<div class="pic" id="pic2"></div>
<div class="pic" id="pic1"></div>
</div>
<div class="home-background-area">
<div class="home-background-text">
<h1 id="front-H1">Second Hand Thrift Fest</h1>
<p id="front-P"><em>Welcome to the biggest second hand market to hit the Cape.</em></p>
</div>
</div>
</div>
<section class="about-home clearfix">
<div class="image-wrapper home-wrapper img-1">
<img src="./images/home-about1.jpg" alt="Four boots with different colours" />
<div class="image-caption">
<p>There's something for everyone!</p>
</div>
</div>
<div class="image-wrapper home-wrapper img-2">
<img src="./images/home-about2.jpg" alt="Two people browsing clothes" />
<div class="image-caption">
<p>Clothes, food, trinkets and more!</p>
</div>
</div>
<h2 class="about-heading">What is Second Hand Thrift Fest?</h2>
<p class="about-text">
Second Hand Thrift Fest is a thrifting festival for everything.<br /><br />
Sell the clothes you don't like, need or wear anymore - or, buy some quality clothing that wants to be worn!<br />
<br />
Sell trinkets, handmade goods and bespoke items - or find new items for your home!<br /><br />
Second Hand is more than just a thrifting festival - it's a culture of encouraging eco-friendly business and saving (and gaining) some bucks while you're at it.
</p>
</section>
<section class="home-associates">
<h2>← Who we've worked with →</h2>
<div class="home-associates-row">
<div class="slider">
<div class="slider-inner">
<div class="slider-item">
<img src="./images/obs-logo.jpg" alt="Observatory Community Centre" />
</div>
<div class="slider-item">
<img src="./images/trench-town.jpg" alt="Trenchtown" />
</div>
<div class="slider-item">
<img src="./images/blue-bird.jpg" alt="Blue Bird Garage and Market" />
</div>
<div class="slider-item">
<img src="./images/novalis-logo.jpg" alt="Novalis Ubuntu Institute" />
</div>
<div class="slider-item">
<img src="./images/vegan-goods.jpg" alt="Vegan Goods Market" />
</div>
<div class="slider-item">
<img src="./images/brass-bell.jpg" alt="Brass Bell Restaurant and Pub" />
</div>
<div class="slider-item">
<img src="./images/ashanti.jpg" alt="Ashanti Gardens Backpackers and Hostel" />
</div>
<div class="slider-item">
<img src="./images/kenilworth.jpg" alt="Kenilworth Racecourse" />
</div>
<div class="slider-item">
<img src="./images/spice-yard.jpg" alt="The Spice Yard" />
</div>
</div>
</div>
<div class="slider-progress-bar">
<div class="prog-bar-inner"></div>
</div>
</div>
<button class="go-to-events"><a href="./events.html">See Our Events</a></button>
</section>
</div>
<section class="google-form">
<h1>Newsletter</h1>
<p>Click the button below to receive our newsletter:</p>
<button class="newsletter-btn"><a href="https://forms.gle/UGaNJM2BZhHaWcQN7" target="_blank" rel="noopener" rel="noreferrer">Newsletter link ↝</a></button>
</section>
<footer>
<p>© Designed by Kate Blake, All Rights Reserved</p>
<div class="socials">
<a href="https://www.facebook.com/OfficialSecondHandGroup/" target="_blank" rel="noopener" rel="noreferrer"
><img src="./images/fb250lightgreen.png" height="40px" alt="Facebook Page Link"
/></a>
<a href="https://www.instagram.com/thriftfest/" target="_blank" rel="noopener" rel="noreferrer"><img src="./images/instalightgreen.png" height="40px" alt="Instagram Page Link" /></a>
</div>
<div class="back-to-top"><a href="#top">Back to Top</a></div>
</footer>
</body>
</html>