-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
203 lines (192 loc) · 8.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PISTONS</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://raw.githubusercontent.com/peterhry/CircleType/master/dist/circletype.min.js"></script>
</head>
<body>
<div class="alert">
<p>FREE SHIPPING ON ALL ORDERS</p>
</div>
<p class="feedback">FEEDBACK</p>
<nav>
<img src="images/logo.png" class="logo" alt="">
<ul class="hidding_in_phone">
<li class="">
<a class="" href="#"><b>NEW</b></a>
</li>
<li class="">
<a class="" href="#"><b>BRANDS</b></span></a>
</li>
<li class="">
<a class="" href="#"><b>COLLECTIONS</b></span></a>
</li>
<li class="">
<a class="" href="#"><b>ACCESORIES</b></span></a>
</li>
<li class="">
<a class="" href="#five"><b>ABOUT</b></span></a>
</li>
</ul>
<div class="last-part-nav">
<img src="images/shopping_vector.png" alt="">
<a href=""><img src="images/Vector.png" alt=""></a>
<!-- on click, call a function that toggle mobile_nav -->
<a class="hidding_in_lap" onclick="toggleMobileNav()"><img src="logos/Vector.png" alt=""></a>
</div>
<div class="mobile_nav mobile_hidden">
<a onclick="toggleMobileNav()"><img src="logos/cross.png" alt=""></a>
<ul>
<li class="">
<a class="" href="#"><b>NEW</b></a>
</li>
<li class="">
<a class="" href="#"><b>BRANDS</b></span></a>
</li>
<li class="">
<a class="" href="#"><b>COLLECTIONS</b></span></a>
</li>
<li class="">
<a class="" href="#"><b>ACCESORIES</b></span></a>
</li>
<li class="">
<a class="" href="#five"><b>ABOUT</b></span></a>
</li>
</ul>
</div>
</nav>
<div class="zero"></div>
<div class="one">
<div class="left">
<img src="images/11.png" alt="">
<div class="text1">
<h2 class="curve" style="font-size: 3vw;">MADE FOR YOU</h2>
<br>
<h2 style="font-size: 3vw;">PISTONS</h2>
</div>
</div>
<div class="left">
<img src="images/12.png" alt="">
<div class="text2">
<h2>YOU WERE MADE TO MAKE AN IMPACT.</h2>
<button>SHOP PENS</button>
</div>
</div>
</div>
<div class="two">
<div class="left">
<img src="images/13.png" alt="">
<div class="text1">
<h2 class="curve">MADE FOR THE BEST CHANGE MAKER</h2>
<button>SHOP BRANDS</button>
</div>
</div>
<div class="left"><img src="images/14.png" alt=""></div>
</div>
<div class="three">
<div class="left"><img src="images/15.png" alt=""></div>
<div class="left">
<img src="images/16.png" alt="">
<div class="text2">
<h2>SAVOUR THE PRESENT</h2>
<button>SHOP MONT BLANC</button>
</div>
</div>
</div>
<div class="full">
<img src="images/21.png" alt="">
<div class="black"></div>
<div class="text">
<h2>WHERE QUALITY MEETS CLASS</h2><br>
<h2 style="font-size: 3vw;">MADE FOR YOU</h2>
<h2 style="font-size: 3vw;">PISTONS</h2>
<button>SHOP THE FALL 2023 COLLECTION</button>
</div>
</div>
<div class="five" id="five">
<div class="five-1">
<div class="five-left"><img src="images/31.png" alt=""></div>
<div class="five-left">
<h1>ABOUT PISTONS</h1>
<p>Established in 1897, our beloved fountain pen haven, 'PISTONS,' has been a haven for pen enthusiasts for generations. With a century-long dedication to fine writing instruments, we've bridged tradition and modernity, offering a curated selection of vintage and contemporary fountain pens. Our little shop, nestled in the heart of town, continues to inspire a love for the art of writing, connecting past and present through the timeless elegance of ink on paper.</p>
</div>
</div>
<div class="five-2">
<hr>
<h1>TESTIMONIAL</h1>
<br><br><br>
<div class="review" id="testimonials">
</div>
<br><br>
<div class="end">
<br><h2>PISTONS</h2>
<h2>STAY CONNECTED</h2><br>
<div class="logos">
<img src="logos/1.png" alt="">
<img src="logos/2.png" alt="">
<img src="logos/3.png" alt="">
<img src="logos/4.png" alt="">
<img src="logos/5.png" alt="">
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// read the json from https://elitefit4you.com/test-api/testimonials.json,
var dat = {
"testimonials": [
{
"name": "Alex P.",
"message": "I stumbled upon this shop, and their selection blew me away. The user-friendly website made my shopping experience a breeze!",
"image": "https://i.ibb.co/vmYY6tY/img1.png"
},
{
"name": "Emily S.",
"message": "The checkout process was seamless, and the responsive design worked flawlessly on my mobile device. I'll definitely be coming back!",
"image": "https://i.ibb.co/k29V4KN/img2.png"
},
{
"name": "David R.",
"message": "Their site's intuitive navigation made finding the perfect pen a joy. Five stars for both their products and web design!",
"image": "https://i.ibb.co/Mcz1SWT/img3.png"
},
{
"name": "Lisa M.",
"message": "I appreciate the attention to detail in both their pens and website. A visually stunning and user-focused online shop.",
"image": "https://i.ibb.co/94fW8xZ/img4.png"
}
]
}
var testimonialsDiv = document.getElementById("testimonials");
dat.testimonials.forEach(function (testimonial) {
var testimonialContainer = document.createElement("div");
testimonialContainer.className = "testimonial";
var imageElement = document.createElement("img");
imageElement.src = testimonial.image;
var divElement = document.createElement("div");
divElement.className = "text";
var nameElement = document.createElement("h2");
nameElement.innerText = "Name: " + testimonial.name;
var messageElement = document.createElement("p");
messageElement.innerText = "Message: " + testimonial.message;
testimonialContainer.appendChild(imageElement);
divElement.appendChild(nameElement);
divElement.appendChild(messageElement);
testimonialContainer.appendChild(divElement);
testimonialsDiv.appendChild(testimonialContainer);
});
// define funciton toggleMobileNav() which finds mobile_nav and toggles mobile_hidden class in it
function toggleMobileNav() {
var mobileNav = document.querySelector(".mobile_nav");
mobileNav.classList.toggle("mobile_hidden");
// prevent default behavior of the link
event.preventDefault();
}
</script>
</body>
</html>