-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathSepatu-Leyla-Abu.html
184 lines (177 loc) · 8.08 KB
/
Sepatu-Leyla-Abu.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
<!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">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>ShoesStore</title>
</head>
<body>
<!-- Header -->
<header class="l-header" id="header">
<nav class="nav bd-container">
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
<a href="index.html" class="nav__logo">ShoesStore</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
<li class="nav__item"><a href="AboutUs.html" class="nav__link">About</a></li>
<li class="nav__item"><a href="product.html" class="nav__link">Product</a></li>
<li class="nav__item"><a href="Contact.html" class="nav__link">Contact</a></li>
</ul>
</div>
<div class="nav_shop">
<a href="#" class="nav__icon">
<i class='bx bxs-user-circle' ></i>
</a>
<div class="nav__shop-content">
<div class="btn-checkout">
<li><i class='bx bxs-log-in-circle' ><a href="login.html"> LOG IN</a></i></li>
</div>
</div>
</div>
</nav>
</header>
<!-- Header -->
<!-- Gambar Product -->
<main class="l-main" style="background-color: #ABD9FF; margin-top: 70px;">
<div class = "card-wrapper">
<div class = "card">
<!-- card left -->
<div class = "product-imgs">
<div class = "img-display">
<div class = "img-showcase">
<img src = "images/5.png" alt = "shoe image">
<img src = "images/5.1.png" alt = "shoe image">
<img src = "images/5_2.png" alt = "shoe image">
<img src = "images/size wanita.png" alt = "shoe image">
</div>
</div>
<div class = "img-select">
<div class = "img-item"style="width: 50%; height: 50%;">
<a href = "#" data-id = "1">
<img src = "images/5.png" alt = "shoe image">
</a>
</div>
<div class = "img-item" style="width: 50%; height: 50%; margin-top: 25px;">
<a href = "#" data-id = "2">
<img src = "images/5.1.png" alt = "shoe image">
</a>
</div>
<div class = "img-item"style="width: 50%; height: 50%;margin-top: 25px;">
<a href = "#" data-id = "3">
<img src = "images/5_2.png" alt = "shoe image">
</a>
</div>
<div class = "img-item"style="width: 50%; height: 50%;margin-top: 25px;">
<a href = "#" data-id = "4" >
<img src = "images/size wanita.png" alt = "shoe image">
</a>
</div>
</div>
</div>
<!-- gambar product -->
<!-- product description -->
<div class = "product-content">
<h1 class = "product-title">Shoes-Leyla-Grey</h1>
<a href = "#" class = "product-link">visit ShoesStore</a>
<div class = "product-rating">
<i class = "fas fa-star"></i>
<i class = "fas fa-star"></i>
<i class = "fas fa-star"></i>
<i class = "fas fa-star"></i>
<i class = "fas fa-star-half-alt"></i>
<span>4.7</span>
</div>
<div class = "product-price">
<p class = "last-price">Old Price: <span>Rp.349.000</span></p>
<p class = "new-price">New Price: <span>Rp.185.000</span></p>
</div>
<div class = "product-detail">
<h2>ABOUT THIS ITEM: </h2>
<p>"SUPER LIGHTWEIGHT, Superlite Phylon Sole is made of a special compound material, resulting in a very soft and comfortable outsole.
Top: Hard Net + TPR Strong and Breathable
Insole: EVA Sponge Insole provides Ultimate Cushion and Comfort
Outsole: Phylon Superlite with High Flexibility and Extra Comfort
How to measure a good shoe/sandal size:
<br>
1. Measure your foot length <br>
2. Then add +/- 1cm from the foot size<br>
3. Adjust the size with our size chart</p>
<p>Example:
If your foot length is 24.5cm, we recommend ordering size 39 (25.6cm).</p>
<ul>
<li>Color: <span>Grey</span></li>
<li>Available: <span>in stock</span></li>
<li>Category: <span>Shoes</span></li>
</ul>
</div>
<div class = "purchase-info">
<input type = "number" min = "0" value = "1">
<button type = "button" class = "btn">
Add to Cart <i class = "fas fa-shopping-cart"></i>
</button>
</div>
</div>
</main>
<footer class="footer section bd-container">
<div class="footer__container bd-grid">
<div class="footer__content">
<a href="#" class="footer__logo">Shoes</a>
<span class="footer__description">Store</span>
<div>
<a href="#" class="footer__social"><i class='bx bxl-facebook-circle'></i></a>
<a href="#" class="footer__social"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="footer__social"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="footer__content">
<h3 class="footer__title">AboutUs</h3>
<p>Shoes Store is a website that is engaged in the sale of shoes, which has several types of sneakers for: Children's Shoes, Women's Shoes and Men's Shoes.</p>
</div>
<div class="footer__content">
<h3 class="footer__title">Contact</h3>
<p>If you want to buy shoes in our store, contact us and we will immediately serve you with service 24/7</p>
</div>
<div class="footer__content">
<h3 class="footer__title">Adress</h3>
<ul>
<li>Jl. Doang Jadian Kagak KM 12.8</li>
<li>Bogor 16913 - Indonesia</li>
<li>Phone : +62812xxxxx</li>
<li>Whatsapp : 08211xxxxx</li>
</ul>
</div>
</div>
<p class="footer__copy">© 2022 Group 4. All right reserved</p>
</footer>
<!----Scroll Reveal---->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="js/Main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/slick.min.js"></script>
<script>
const imgs = document.querySelectorAll('.img-select a');
const imgBtns = [...imgs];
let imgId = 1;
imgBtns.forEach((imgItem) => {
imgItem.addEventListener('click', (event) => {
event.preventDefault();
imgId = imgItem.dataset.id;
slideImage();
});
});
function slideImage(){
const displayWidth = document.querySelector('.img-showcase img:first-child').clientWidth;
document.querySelector('.img-showcase').style.transform = `translateX(${- (imgId - 1) * displayWidth}px)`;
}
window.addEventListener('resize', slideImage);
</script>
</body>
</html>