-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
196 lines (182 loc) · 7.89 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!--
Name: Golden Garden - Home Page
Description: Home page of Golden Garden website that allows navigation to all other pages within the site.
Created By: Jennifer Ryan, Deirbhle Touhy and Sunje Alice Winteler.
Created On: 04/02/2019
-->
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Golden Garden Home</title>
<!--External Style Links-->
<!-- jQuery first, then Popper.js, then Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!--CSS Bootstrap-->
<link rel="stylesheet" href="resources/css/bootstrap.min.css">
<!--JavaScript Bootstrap-->
<script src="resources/js/bootstrap.min.js"></script>
<!--FontAwesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!--Customized Style sheet-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="loadLogo()">
<!-- Loading image -->
<div class="loader" id="preloader">
<div class="preloader-img">
<span class="loading-animation animate-flicker"><img src="resources/images/Logo-Loading-Animation.gif" class="loading" alt="loading"/></span>
</div>
</div>
<div class="wrapper" id="webContent">
<header>
<!--<a href = "index.html"><video width = "125" height = "75" autoplay muted loop><source src="resources/videos/animatedLogo.mp4" type = "video/mp4">Your browser does not support the video tag.</video></a>-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<!--When active in the nav bar th.e writing will be in white and the rest in grey-->
<li class="nav-item active">
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="product.html#landscaping">Landscaping</a>
<a class="dropdown-item" href="product.html#sandgravel">Sand & Gravel</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="studentProject">
<marquee>Disclaimer: This is a Student Project! Do not enter any personal details.</marquee>
</div>
</header>
<div class="openHome">
<!--Slide Show-->
<div class="row">
<div class="col-sm-5">
<div class="slideShow">
<div class="slideshow-container">
<div class="mySlides">
<img class="responsive" src="resources/images/Beech_Pebble_10mm_Customer.jpg">
</div>
<div class="mySlides">
<img class="responsive" src="resources/images/Gold_Customer.jpg">
</div>
<div class="mySlides">
<img class="responsive" src="resources/images/Plum_Slate_Customer.jpg">
</div>
</div>
</div>
<br>
<!-- The dots/circles-->
<div id="dot">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<!--Welcome Message-->
<div class="col-sm-5" id="welcomeBan">
<div class="oval">
<div class="welcome">
<h2>Welcome!</h2>
<p>To Golden Garden where we strive to provide our customers with the best availabe materials to create the garden of their dreams </p>
</div>
</div>
</div>
</div>
</div>
<!--Content section-->
<div class="contentHome" id="home">
<div class="text-block1" id="products">
<h2>Products</h2>
<p>Our product section is split into two, we have Sand and Gravel products and Landscaping stones.</p>
<div class="text-block2" id="sandgravel">
<a href="product.html#sandgravel"><h3>Sand & Gravel</h3></a>
<p>Coming soon: At Golden Garden we have a great variety of sands and gravel products for all purposes.</p>
</div><!--End of Sand & Gravel-->
<div class="text-block3" id="landscarping">
<a href="product.html#landscaping"><h3>Landscaping</h3></a>
<p>With our Landscaping products you can beautify every garden, field or land.</p>
</div><!--End of landscaping div-->
</div><!--End of products div-->
<div class="row">
<div class="text-block4" >
<div class="col-sm-4" id="about">
<h2>About Us</h2>
<p>Golden Garden is split into Golden Garden Sand and Gravel and Golden Garden Landscaping products. Our company was founded in 2007 and has grown a lot in landscaping products.</p>
<p>Our company has been in business since 2007. During the past few years our business has grown in landscaping products.</p>
<p>We started by selling our own beech pebble in sizes of 6mm to 20mm and expanded in sourcing stone from all over Ireland, which today gives us one of the most extensive range of products for the Garden & Landscaping business.</p>
<p>We supply most of our products in bags from 25kg up to 1ton.</p>
</div><!--End of about div-->
<div class="siteVideo">
<div class="col-sm-4" >
<video width = "752px" height = "360px" autoplay muted loop><source src="resources/videos/GoldenGardenVideo.mp4" type = "video/mp4">Your browser does not support the video tag.</video>
</div>
</div>
</div>
</div>
</div><!--End of content div-->
<!--Footer contains: -Logo linked to Home Page, address and social media links-->
<footer>
<div class="row">
<div class="col-sm-3" id="opening">
<h5>Opening Times</h5>
<!--Table displaying the opening times-->
<table align="center">
<tr>
<th>Mon - Fri:</th>
<td>9:00 - 6:00</td>
</tr>
<tr>
<th>Saturday:</th>
<td>9:00 - 2:00</td>
</tr>
<tr>
<th>Sunday:</th>
<td>Closed</td>
</tr>
</table>
</div>
<div class="col-sm-3" id="social">
<h5>Social Media</h5>
<p>
<div class="facebook">
<a href = "https://www.facebook.com/goldengardenlandscapeproducts/" ><img src="resources/images/facebook_icon.png" class="facebook_icon"></a>
</div>
<div class="instagram">
<a href = "https://www.instagram.com/goldengardenlandscapeproducts/" ><img src="resources/images/instagram_icon.png" class="instagram_icon"></a>
</div>
</p>
</div>
<div class="col-sm-3" id="address">
<h5>Address</h5>
<p>
Golden Garden<br>
Dundrum,<br>
Co. Tipperary.
</p>
</div>
<div class="col-sm-3">
<a id="logoBottom" href = "index.html"><video width = "125" height = "75" autoplay muted loop><source src="resources/videos/animatedLogo.mp4" type = "video/mp4">Your browser does not support the video tag.</video></a>
</div>
</div>
</footer>
</div>
<!--External JavaScript-->
<script src="script.js"></script>
</body>
</html>