-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (122 loc) · 6.71 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
<!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="assist/fontawesome/css/all.css" > <!-- fontawesome link -->
<link rel="stylesheet" href="assist/CSS/bootstrap.min.css"> <!-- bootstrap link -->
<link rel="stylesheet" href="assist/CSS/style.css"> <!-- css style link -->
<title> Watch Prducts </title>
<link rel="icon" type="image/x-icon" href="assist/images/kisspng-smartwatch.png">
</head>
<body>
<!-- navbar section -->
<div class="navLine mb-5">
<nav class="navbar navbar-expand-lg navbar-light" aria-label="Fifth navbar example">
<div class="navContainer container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarsExample05">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-primary active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">New-Arrivals</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- section one "watch of choice" -->
<div class="container">
<div class="row flex-column flex-lg-row align-items-center">
<div class="wChoice col">
<h1 class="fw-bold mb-5">Watch of Choice</h1>
<p>Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse.
</p>
<button class="btn btn-danger text-uppercase mt-4 ">Show watches</button>
</div>
<div class="col my-5 my-lg-0">
<img class="w-100" src="assist/images/choce_watch1.png" alt="choce watch">
</div>
</div>
</div>
<!-- section Tow "new Prducts" -->
<div class="container my-5 py-5">
<h3 class="fw-bold">New Prducts</h3>
<div class="row flex-column flex-lg-row">
<div class="PrductN text-center col">
<a class="text-decoration-none" href="#">
<img class="rounded w-100 mb-3 mt-5 mt-lg-0" src="assist/images/new_product1.png" alt=" new watch">
<h5 class="text-dark">Skagen watch !</h5>
<p class="text-danger pt-3">$ 50.500</p>
</a>
</div>
<div class="PrductN text-center col">
<a class="text-decoration-none" href="#">
<img class="rounded w-100 mb-3 mt-5 mt-lg-0" src="assist/images/new_product2.png" alt=" new watch">
<h5 class="text-dark">Skagen watch !</h5>
<p class="text-danger pt-3">$ 50.500</p>
</a>
</div>
<div class="PrductN text-center col">
<a class="text-decoration-none" href="#">
<img class="rounded w-100 mb-3 mt-5 mt-lg-0" src="assist/images/new_product3.png" alt=" new watch">
<h5 class="text-dark">Skagen watch !</h5>
<p class="text-danger pt-3">$ 50.500</p>
</a>
</div>
</div>
</div>
<!-- section Three "Add card" -->
<div class="container my-5 py-5">
<div class="row flex-column flex-lg-row">
<div class="Prduct1 col text-center">
<img class="border-bottom border-3 border-danger w-100 mt-5 mt-lg-0" src="assist/images/popular1.png" alt=" new watch">
<a class="addCard text-decoration-none" href="#"><h2 class="bg-danger text-light py-4">Add to Card</h2></a>
<h5 class="Thermo my-3">Thermo Ball Etip Gloves</h5>
<a class="text-decoration-none" href="#"><p class=" text-danger rounded-pill fw-bold fs-5 py-2 my-5">$ 45,743</p></a>
</div>
<div class="Prduct1 col text-center">
<img class="border-bottom border-3 border-danger w-100 mt-5 mt-lg-0" src="assist/images/popular2.png" alt=" new watch">
<a class="addCard text-decoration-none" href="#"><h2 class="bg-danger text-light py-4">Add to Card</h2></a>
<h5 class="Thermo my-3">Thermo Ball Etip Gloves</h5>
<a class="text-decoration-none" href="#"><p class=" text-danger rounded-pill fw-bold fs-5 py-2 my-5">$ 45,743</p></a>
</div>
<div class="Prduct1 col text-center">
<img class="border-bottom border-3 border-danger w-100 mt-5 mt-lg-0" src="assist/images/popular3.png" alt=" new watch">
<a class="addCard text-decoration-none" href="#"><h2 class="bg-danger text-light py-4">Add to Card</h2></a>
<h5 class="Thermo my-3">Thermo Ball Etip Gloves</h5>
<a class="text-decoration-none" href="#"><p class=" text-danger rounded-pill fw-bold fs-5 py-2 my-5">$ 45,743</p></a>
</div>
</div>
</div>
<!-- section Four images -->
<div class="container-fluid">
<div class="imagesS row">
<div class="col-12 col-lg-6">
<img class="w-100 my-2 my-lg-0 py-0" src="assist/images/gallery1.png" alt="gallery image">
</div>
<div class="col-12 col-md-6 col-lg-3 px-lg-0">
<img class="w-100 my-2 my-lg-0 py-0" src="assist/images/gallery2.png" alt="gallery image">
</div>
<div class="col-12 col-md-6 col-lg-3 d-flex flex-column justify-content-between">
<img class="w-100 my-2 my-lg-0 " src="assist/images/gallery3.png" alt="gallery image">
<img class="w-100 my-2 my-lg-0 " src="assist/images/gallery4.png" alt="gallery image">
</div>
</div>
</div>
<script src="assist/JS/jquery-3.6.0.min.js"></script>
<script src="assist/JS/popper.min.js"></script>
<script src="assist/JS/bootstrap.min.js"></script>
</body>
</html>