-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
171 lines (171 loc) · 10.6 KB
/
product.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Name</title>
<meta name="description" content="Some text for description">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/main.min.css">
</head>
<body class="product">
<header>
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-medium-1-3 uk-width-small-1-10">
<span class="toggle-menu" onclick="openNav()">☰</span>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="https://kamuz.github.io/chronos/">Home</a>
<a href="https://kamuz.github.io/chronos/shop.html">Shop</a>
<a href="https://kamuz.github.io/chronos/blog.html">Blog</a>
<a href="https://kamuz.github.io/chronos/product.html">Product</a>
</div>
</div>
<div class="uk-width-medium-1-3 uk-width-small-4-10">
<a href="#" id="logo"><img src="img/logo.svg" class="uk-align-center" width="148" alt="Chronos"></a>
</div>
<div class="uk-width-medium-1-3 uk-width-small-5-10 uk-text-right top-right-content">
<div class="uk-form-select" data-uk-form-select>
<div class="uk-button uk-form-select" data-uk-form-select>
<span></span>
<i class="uk-icon-caret-down"></i>
<select>
<option value="1">English</option>
<option value="2">Option 02</option>
<option value="3">Option 03</option>
<option value="4">Option 04</option>
</select>
</div>
</div>
<a href="#" class="shopping-card"><i class="uk-icon-shopping-cart"></i></a>
<a href="#" class="user"><i class="uk-icon-user"></i> <span class="uk-hidden-small">User</span></a>
</div>
</div>
</div>
</header>
<div class="uk-container uk-container-center uk-margin-top">
<div class="uk-grid">
<div class="uk-width-medium-6-10 uk-width-small-1-1">
<div class="product-gallery" data-uk-slideshow="{animation: 'scroll', duration: 700}">
<div class="uk-grid uk-grid-small" data-uk-grid-margin>
<div class="uk-width-medium-2-5 uk-width-1-3">
<div class="uk-grid">
<div class="uk-width-1-1">
<figure class="uk-overlay">
<img src="img/preview-01.png" alt="Product Image">
<a class="uk-position-cover slideshow-item" href="#" data-uk-slideshow-item="0"></a>
</figure>
</div>
<div class="uk-width-1-1">
<figure class="uk-overlay">
<img src="img/preview-02.png" alt="Product Image">
<a class="uk-position-cover slideshow-item" href="#" data-uk-slideshow-item="1"></a>
</figure>
</div>
</div>
</div>
<div class="uk-width-medium-3-5 uk-width-2-3 uk-margin-bottom">
<div class="uk-slidenav-position">
<ul class="uk-slideshow">
<li>
<figure class="uk-overlay uk-overlay-hover">
<img src="img/big-image.jpg" alt="111">
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
<a class="uk-position-cover" href="img/big-image.jpg"></a>
</figure>
</li>
<li>
<figure class="uk-overlay uk-overlay-hover">
<img src="img/big-image.jpg" alt="111">
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
<a class="uk-position-cover" href="img/big-image.jpg"></a>
</figure>
</li>
</ul>
<a data-uk-slideshow-item="previous" href="#" class="uk-slidenav uk-slidenav-previous"></a>
<a data-uk-slideshow-item="next" href="#" class="uk-slidenav uk-slidenav-next"></a>
</div>
</div>
</div>
</div>
<h2>Info Box / Description | Specification</h2>
<p>Enter description text here. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there</p>
<p>000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
<div class="uk-width-medium-4-10 uk-width-small-1-1 product-details">
<div data-uk-sticky="{boundary: true, top:90}">
<h1>Rover X 88</h1>
<p class="uk-text-uppercase uk-text-large">Railmasteromega CO-AXIAL Master Chronometer 40mm</p>
<hr>
<p>Steel - yellow gold on Steel - yellow gold <br> 127.20.27.20.52.002</p>
<hr>
<div class="uk-form-select" data-uk-form-select>
<div class="uk-button uk-form-select" data-uk-form-select>
<span></span>
<i class="uk-icon-caret-down"></i>
<select>
<option value="1">Choose Band</option>
<option value="2">Option 02</option>
<option value="3">Option 03</option>
<option value="4">Option 04</option>
</select>
</div>
</div>
<div class="uk-text-large price">$6000.00</div>
<form class="uk-form">
<div class="quantity uk-margin-bottom">
<button id="decrease" class="uk-button uk-button-large" type="button"><i class="uk-icon-minus" aria-hidden="true"></i></button>
<input type="text" class="uk-form-large uk-form-width-mini" id="price" value="1">
<button id="increase" class="uk-button uk-button-large" type="button"><i class="uk-icon-plus" aria-hidden="true"></i></button>
</div>
<button type="submit" class="uk-button uk-button-large uk-button-primary uk-width-1-1 uk-margin-top">Add to Basket</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="uk-container uk-container-center">
<div class="uk-grid uk-grid-large">
<div class="uk-width-medium-1-3">
<h3>Get In Touch</h3>
<ul>
<li><i class="uk-icon-phone"></i> 1-800-9999-999</li>
<li><i class="uk-icon-map"></i> 1234 Winchester Blvd. Campbell, CA</li>
<li><i class="uk-icon-envelope"></i> <a href="mailto:info@chronos-art.com">info@chronos-art.com</a></li>
</ul>
</div>
<div class="uk-width-medium-1-3">
<h3>Additional Resources</h3>
<div class="uk-grid">
<div class="uk-width-2-5">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="uk-width-3-5">
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms and conditions</a></li>
</ul>
</div>
</div>
</div>
<div class="uk-width-medium-1-3">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum accusamus, sit possimus ad provident at saepe totam quasi blanditiis aut deleniti reiciendis quod hic cupiditate tempore error aperiam.</p>
</div>
</div>
</div>
</footer>
<div class="copy uk-text-center">Chronos Watcher. All Rights Reserved</div>
<script src="js/main.min.js"></script>
</body>
</html>