Skip to content

Commit feb31af

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#430 from RAHULBAWA777/patch-79
Diesel Clone
2 parents b83a087 + 75050b9 commit feb31af

File tree

3 files changed

+420
-0
lines changed

3 files changed

+420
-0
lines changed

‎Deisel/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
# Diesel Clone
3+
4+
## 🚀 About Me
5+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
6+
7+
8+
## Run Locally
9+
10+
Clone the project
11+
12+
13+
Start the live server
14+
15+
16+
## Used By
17+
18+
This project is used by the following companies:
19+
20+
-https://github.com/Dezenix/frontend-html-css-js

‎Deisel/index.html

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Diesel</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link
10+
rel="stylesheet"
11+
href="https://unpkg.com/swiper/swiper-bundle.min.css"
12+
/>
13+
14+
</head>
15+
<body>
16+
<nav>
17+
<ul>
18+
<li>MAN</li>
19+
<li>WOMAN</li>
20+
<li>KID</li>
21+
<li>DIESEL LIBRARY</li>
22+
<li>LAST CHANCE</li>
23+
<img src="https://www.dieselindia.com/_nuxt/img/logo.47d3efc.svg" alt="">
24+
<li>LOGIN</li>
25+
<li>SEARCH</li>
26+
<li>HELP</li>
27+
<li><i class="fa-solid fa-heart"></i></li>
28+
<li><i class="fa-solid fa-bag-shopping"></i></li>
29+
</ul>
30+
</nav>
31+
<!-- ################################## -->
32+
<div class="swiper mySwiper">
33+
<div class="swiper-wrapper">
34+
<div class="swiper-slide"><img
35+
src="https://diesel.gumlet.io/banner/1647865563MAIN-BANNER-WEBSITE.webp?compress=true"
36+
alt=""></div>
37+
<div class="swiper-slide"><img
38+
src="https://diesel.gumlet.io/banner/165242790440_D.webp?compress=true" alt=""></div>
39+
<div class="swiper-slide"><img
40+
src="https://diesel.gumlet.io/banner/1653571098UV_D.webp?compress=true" alt=""></div>
41+
<div class="swiper-slide"><img
42+
src="https://diesel.gumlet.io/banner/1652427430D_T.webp?compress=true"
43+
alt=""></div>
44+
45+
</div>
46+
<!-- <div class="swiper-button-next"></div>
47+
<div class="swiper-button-prev"></div> -->
48+
<div class="swiper-pagination"></div>
49+
</div>
50+
51+
<!-- ############################################ -->
52+
<div class="two">
53+
<div class="sideWords">
54+
<h1>NEW IN
55+
MEN | WOMEN</h1>
56+
<button class="shop">SHOP NOW</button>
57+
</div>
58+
<!-- Swiper -->
59+
<div class="swiper mySwiper2">
60+
<div class="swiper-wrapper">
61+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/product/410315117001/300/410315117008_1.jpg?compress=true" alt=""></div>
62+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/product/410315401003/300/410315401007_1.jpg?compress=true" alt=""></div>
63+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/product/410315161001/300/410315161008_1.jpg?compress=true" alt=""></div>
64+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/product/410315342002/300/410315342006_1.jpg?compress=true" alt=""></div>
65+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/product/410315209002/300/410315209010_1.jpg?compress=true" alt=""></div>
66+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/product/410315401003/300/410315401007_1.jpg?compress=true" alt=""></div>
67+
68+
</div>
69+
<div class="swiper-button-next"></div>
70+
<div class="swiper-button-prev"></div>
71+
<div class="swiper-pagination"></div>
72+
</div>
73+
</div>
74+
<!-- ########################### -->
75+
<div class="three">
76+
<img src="https://diesel.gumlet.io/cms_images/1648468906MAIN-BANNER-HIM.webp" alt="">
77+
<img src="https://diesel.gumlet.io/cms_images/1648468918MAIN-BANNER-HER.webp" alt="">
78+
</div>
79+
<!-- ############################################### -->
80+
81+
<!-- Swiper -->
82+
<div class="swiper mySwiper3">
83+
<div class="swiper-wrapper">
84+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/banner/1648469973PRODUCT-CATEGORY-4.webp?compress=true" alt=""></div>
85+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/banner/1648470481PRODUCT-CATEGORY-5.webp?compress=true" alt=""></div>
86+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/banner/1648469909PRODUCT-CATEGORY-3.webp?compress=true" alt=""></div>
87+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/banner/1648470066PRODUCT-CATEGORY-6.webp?compress=true" alt=""></div>
88+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/banner/1648469492PRODUCT-CATEGORY-1.webp?compress=true" alt=""></div>
89+
<div class="swiper-slide"><img src="https://diesel.gumlet.io/banner/1648469769PRODUCT-CATEGORY-2.webp?compress=true" alt=""></div>
90+
91+
</div>
92+
<div class="swiper-button-next"></div>
93+
<div class="swiper-button-prev"></div>
94+
<div class="swiper-pagination"></div>
95+
</div>
96+
</div>
97+
98+
<!-- ################################## -->
99+
<div class="full">
100+
<div class="half"><img src="https://diesel.gumlet.io/cms_images/1626412800ecomm-01.png" alt="">
101+
<h3>ORDER BY PHONE </h3>
102+
<p>Don't worry, you can call our client service and they'll do the ordering for you.</p></div>
103+
<div class="half"><img src="https://diesel.gumlet.io/cms_images/1626412821ecomm-02.png" alt="">
104+
<h3>FREE RETURN</h3>
105+
<p>You can change your mind , 30-days free return.</p></div>
106+
<div class="half"><img src="https://diesel.gumlet.io/cms_images/1626412838ecomm-03.png" alt="">
107+
<h3>FLEXIBLE & SECURE PAYMENTS</h3>
108+
<p>Pay it safe with our secure online systems.</p></div>
109+
</div>
110+
<!-- ########################## -->
111+
<div class="banner"><img src="https://diesel.gumlet.io/cms_images/16245254321624514272living-hp-banner-5.jpg" alt="">
112+
<div class="wordd">
113+
<h1>FOR RESPONSIBLE LIVING</h1>
114+
<p>Diesel commits to implement a responsible business that is respectful of people and the environment. Building upon our philosophy and positively disruptive outlook, our sustainability strategy is called Diesel For Responsible Living.</p>
115+
<button class="pair">DISCOVER NOW</button>
116+
<button class="pair">SHOP GREEN LABEL</button>
117+
</div>
118+
</div>
119+
<!-- ########################### -->
120+
<div class="six">
121+
<div class="left">
122+
<h4>Sign up to never miss an update</h4>
123+
<input type="text">
124+
<button class="xx">Sign Up</button>
125+
</div>
126+
<div class="right">
127+
<h4>Connect with us on social media</h4>
128+
<p><i class="fa-brands fa-instagram"></i><i class="fa-brands fa-facebook"></i><i class="fa-brands fa-youtube"></i></p>
129+
</div>
130+
</div>
131+
132+
133+
134+
135+
136+
137+
138+
139+
140+
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
141+
142+
<script>
143+
var swiper = new Swiper(".mySwiper", {
144+
spaceBetween: 30,
145+
centeredSlides: true,
146+
autoplay: {
147+
delay: 2500,
148+
disableOnInteraction: false,
149+
},
150+
pagination: {
151+
el: ".swiper-pagination",
152+
clickable: true,
153+
},
154+
navigation: {
155+
nextEl: ".swiper-button-next",
156+
prevEl: ".swiper-button-prev",
157+
},
158+
});
159+
</script>
160+
<script>
161+
var swiper = new Swiper(".mySwiper2", {
162+
slidesPerView: 3,
163+
spaceBetween: 30,
164+
slidesPerGroup: 3,
165+
loop: true,
166+
loopFillGroupWithBlank: true,
167+
pagination: {
168+
el: ".swiper-pagination",
169+
clickable: true,
170+
},
171+
navigation: {
172+
nextEl: ".swiper-button-next",
173+
prevEl: ".swiper-button-prev",
174+
},
175+
});
176+
</script>
177+
<script>
178+
var swiper = new Swiper(".mySwiper3", {
179+
slidesPerView: 5,
180+
spaceBetween: 30,
181+
slidesPerGroup: 3,
182+
loop: true,
183+
loopFillGroupWithBlank: true,
184+
pagination: {
185+
el: ".swiper-pagination",
186+
clickable: true,
187+
},
188+
autoplay: {
189+
delay: 2500,
190+
disableOnInteraction: false,
191+
},
192+
navigation: {
193+
nextEl: ".swiper-button-next",
194+
prevEl: ".swiper-button-prev",
195+
},
196+
});
197+
</script>
198+
199+
<script src="https://kit.fontawesome.com/fa1e66a5e4.js" crossorigin="anonymous"></script>
200+
</body>
201+
</html>

0 commit comments

Comments
 (0)