-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (199 loc) · 8.92 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE HTML>
<!--
Verti by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Spice Farm</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#myCarousel a.carousel-control {
height: 25%;
top: 30%;
width: 86px;
color: @light-grey;
border-radius: 60px;
}
body {
background-color: #2b308b;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#certification div{
position: absolute;
float: right;
top: 0;
background-color: yellow;
color: yellow
}
img.certification-image {
border-radius: 8px;
}
</style>
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<header id="header" class="container">
<!-- Logo -->
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt="Spice Farm" style="width:100%" class="certification-image"></a><br>
</div>
<!-- Nav -->
<div>
<nav id="nav">
<ul>
<li class="current"><a href="../index.html">Home</a></li>
<li><a href="pages/products.html">Products</a></li>
<li><a href="pages/contactus.html">Contact Us</a></li>
</ul>
</nav>
<nav id="nav">
<ul>
<li class="certification">
<img src="images/icon_bsi.jpg" alt="BSI" style="width:10%" class="certification-image">
<img src="images/icon_fda.png" alt="FDA" style="width:10%" class="certification-image">
<img src="images/icon_fssa.jpg" alt="FSSA" style="width:10%" class="certification-image">
<img src="images/icon_haccp.jpg" alt="HACCP" style="width:10%" class="certification-image">
<img src="images/icon_klbd.jpg" alt="KLBD" style="width:10%" class="certification-image">
</li>
</ul>
</nav>
</div>
</header>
</div>
<!-- End of Header -->
<!-- Banner -->
<div id="banner-wrapper">
<div id="banner" class="box container">
<div class="container" align="left">
<h3>Welcome to Spice Farm.</h3><br><h4>Your gateway to exotic spices produced and packaged to be at their best aromatic freshness</h4>
</div>
</div>
</div>
<!-- End of Banner -->
<!-- Features -->
<div id="banner">
<div class="container" align="center">
<img src="https://babluboy.github.io/spicefarm/images/home_page_banner.jpg" width="500" height="auto">
</div>
</div>
<!-- End of Features -->
<!-- Main -->
<div id="banner-wrapper">
<div class="box container">
<!-- Content -->
<article>
<h3>Indian spices are incredible</h3>
<p>For food lovers around the world, the cuisine of India is an absolute delight. Exotic Indian spices and Indian ingredients create a culinary explosion of flavours, aromas and colours. Explore the amazing diversity within this vast subcontinent with our carefully choosen range of spices. Eurotrade Consultancy Ltd. is a UK based company supplying spices, Darjeeling & CTC tea, coffee beans, saffron, vanilla etc. of the highest quality mainly from India and other countries. Our main manufacturing unit is based in India. In spices, we have a wide range of products including whole & ground spices, spice extracts, natural colors, food flavors, essential oils and oleo-resins. Our products are widely used in the food, pharmaceuticals, nutraceuticals and cosmetics industries. Product Quality Standards are mainly “ISO HACCP, HALAL, KOSHER, FDA”.</p>
<p>Click below to check out our range of spices.</p>
<a href="pages/products.html" class="button icon fa-arrow-circle-right">Continue Reading</a>
</article>
<!-- End of Content -->
</div>
<div class="box container">
<!-- Carousel -->
<article>
<h3>Our farms</h3>
<p>Kerala, popularly known and believed as God's Own Country, is one of the most sought after tourist destinations in Asia and is a tropical paradise. The state is blessed with myriad features like dense tropical forests, beautiful beaches, cliffs, rocky coasts, an intricate maze of backwaters, still bays and astounding 44 radiant rivers which contribute to making it the "Spice Garden of India".</p>
<p>The pictures below are from our plantations in Kerala where our spices are grown</p>
</article>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/HomePicSlideShow01.jpeg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow02.jpeg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow03.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow04.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow05.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow06.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow07.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow08.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow09.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow10.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow11.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow12.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow13.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow14.jpeg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="images/HomePicSlideShow15.jpeg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End of Carousel -->
</div>
<!-- Footer -->
<div id="footer-wrapper" align="center">
<ul class="menu">
<li>© SpiceFarm. All rights reserved</li>
</ul>
</div>
<!-- End of Footer -->
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>