Skip to content

Commit c6056a7

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#319 from RAHULBAWA777/patch-60
Wrangler Clone
2 parents a187004 + 00192d7 commit c6056a7

File tree

3 files changed

+448
-0
lines changed

3 files changed

+448
-0
lines changed

‎Wrangler/README.md

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

‎Wrangler/index.html

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Wrangler</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
11+
</head>
12+
13+
<body>
14+
<nav>
15+
<ul class="uno">
16+
<img src="https://www.wrangler.in/static/frontend/Aceturtle/lee/en_US/images/Wrangler_Kabel_black1.png" alt="">
17+
<li><i class="fa-solid fa-location-dot"></i>Store Locator</li>
18+
<li><i class="fa-regular fa-heart"></i>Saved</li>
19+
<li><i class="fa-solid fa-truck"></i>Track Your Order</li>
20+
<li><i class="fa-regular fa-user"></i>Account</li>
21+
<li><i class="fa-solid fa-cart-arrow-down"></i>Cart</li>
22+
</ul>
23+
<ul class="uno2">
24+
<li>NEW IN</li>
25+
<li>MEN</li>
26+
<li>COLLECTIONS</li>
27+
<li>SALE</li>
28+
<li>FIT GUIDE</li>
29+
</ul>
30+
</nav>
31+
<!-- ################# SWIPER 1 ##################### -->
32+
<div class="swiper mySwiper">
33+
<div class="swiper-wrapper">
34+
<div class="swiper-slide"><img
35+
src="https://www.wrangler.in/media/mageplaza/bannerslider/banner/image/s/s/ss_22-banner-website-position-1.jpg"
36+
alt=""></div>
37+
<div class="swiper-slide"><img
38+
src="https://www.wrangler.in/media/mageplaza/bannerslider/banner/image/b/a/bau_banner_final.jpg" alt=""></div>
39+
<div class="swiper-slide"><img
40+
src="https://www.wrangler.in/media/mageplaza/bannerslider/banner/image/t/r/traveller.jpg" alt=""></div>
41+
<div class="swiper-slide"><img
42+
src="https://www.wrangler.in/media/mageplaza/bannerslider/banner/image/m/o/monochrome-banner-white-revised.jpg"
43+
alt=""></div>
44+
<div class="swiper-slide"><img
45+
src="https://www.wrangler.in/media/mageplaza/bannerslider/banner/image/w/r/wrangler75_-desktop_banner.jpg"
46+
alt=""></div>
47+
<div class="swiper-slide"><img
48+
src="https://www.wrangler.in/media/mageplaza/bannerslider/banner/image/b/a/banner_1800x507.jpg" alt=""></div>
49+
</div>
50+
<div class="swiper-button-next"></div>
51+
<div class="swiper-button-prev"></div>
52+
<div class="swiper-pagination"></div>
53+
</div>
54+
<!-- ################# section 2 ##################### -->
55+
<div class="picSec1">
56+
<div class="p1"><img src="https://www.wrangler.in/media/wysiwyg/home/Price-Point-Call-out-TShirts.jpg" alt=""></div>
57+
<div class="p1"><img src="https://www.wrangler.in/media/wysiwyg/home/Price-Point-Call-out-Winter-Wear.jpg" alt="">
58+
</div>
59+
<div class="p1"><img src="https://www.wrangler.in/media/wysiwyg/home/Price-Point-Call-out-JEANS.jpg" alt=""></div>
60+
</div>
61+
<!-- ################# section 3 ##################### -->
62+
<div class="picSec2">
63+
<div class="p2"><img src="https://www.wrangler.in/media/wysiwyg/home/TSHIRTS.jpg" alt=""></div>
64+
<div class="p2"><img src="https://www.wrangler.in/media/wysiwyg/home/POLO.jpg" alt=""></div>
65+
</div>
66+
<!-- ################# section 4 ##################### -->
67+
<div class="picSec3">
68+
<div class="p3"><img src="https://www.wrangler.in/media/wysiwyg/Banner_Jeans_1_.jpg" alt=""></div>
69+
</div>
70+
<!-- ################# section 5 ##################### -->
71+
<div class="picSec4">
72+
<h1>sale</h1>
73+
<div class="swiper mySwiper1">
74+
<div class="swiper-wrapper">
75+
<div class="swiper-slide"><img
76+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts000870_1.jpg"
77+
alt=""></div>
78+
<div class="swiper-slide"><img
79+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts000872_1.jpg"
80+
alt=""></div>
81+
<div class="swiper-slide"><img class="hh"
82+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts003394_1.jpg"
83+
alt=""></div>
84+
<div class="swiper-slide"><img
85+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts000870_1.jpg"
86+
alt=""></div>
87+
<div class="swiper-slide"><img class="hh"
88+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts003395_1.jpg"
89+
alt=""></div>
90+
<div class="swiper-slide"><img
91+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts000808_1.jpg"
92+
alt=""></div>
93+
<div class="swiper-slide"><img
94+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts000850_1.jpg"
95+
alt=""></div>
96+
<div class="swiper-slide"><img
97+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts000866_1.jpg"
98+
alt=""></div>
99+
<div class="swiper-slide"><img
100+
src="https://www.wrangler.in/media/catalog/product/cache/b99259a78f8f95515c86f6b612c73f56/w/m/wmts000868_1.jpg"
101+
alt=""></div>
102+
</div>
103+
<div class="swiper-button-next"></div>
104+
<div class="swiper-button-prev"></div>
105+
<div class="swiper-pagination"></div>
106+
</div>
107+
</div>
108+
<!-- ################# section 6 ##################### -->
109+
<button id="butt">Shop Now</button>
110+
<div class="picSec5">
111+
<div class="p5"><img src="https://www.wrangler.in/media/wysiwyg/home/Collection--75th-Anniversary.jpg" alt=""></div>
112+
<div class="p5"><img src="https://www.wrangler.in/media/wysiwyg/home/Collection---WECARE.jpg" alt=""></div>
113+
<div class="p5"><img src="https://www.wrangler.in/media/wysiwyg/home/Collection---TRAVELER.jpg" alt=""></div>
114+
</div>
115+
<!-- ################# section 7 ##################### -->
116+
<h1>fit guide</h1>
117+
<div class="picSec6">
118+
<div class="p6"><img src="https://www.wrangler.in/media/wysiwyg/home/Fits---VEGAS.jpg" alt=""></div>
119+
<div class="p6"><img src="https://www.wrangler.in/media/wysiwyg/home/Fits---TEXAS.jpg" alt=""></div>
120+
<div class="p6"><img src="https://www.wrangler.in/media/wysiwyg/home/Fits---BOSTIN.jpg" alt=""></div>
121+
<div class="p6"><img src="https://www.wrangler.in/media/wysiwyg/home/Fits---SKANDERS.jpg" alt=""></div>
122+
<div class="p6"><img src="https://www.wrangler.in/media/wysiwyg/home/Fits---MILLARD.jpg" alt=""></div>
123+
</div>
124+
<!-- FOOTER******************************************************************************* -->
125+
<footer id="footer-main">
126+
<h4>WRANGLER INDIA</h4>
127+
<p style="margin-bottom: 20px;"> Everyone knows that Wrangler’s denim heritage goes deep, right back to the working cowboy. So, making jeans that are durable and comfortable enough for the wild frontier is a given for us.</p>
128+
<hr>
129+
<div class="footer-grid">
130+
<section class="footer-1">
131+
<h2 class="foot"> ABOUT US</h2>
132+
<br>
133+
<p> About Us</p>
134+
<br>
135+
<p> Store Locator</p>
136+
<br>
137+
<p>FAQs</p>
138+
</section>
139+
<section class="footer-2">
140+
<h2 class="foot">CUSTOMER SERVICE</h2>
141+
<br>
142+
<p> Contact Us</p>
143+
<br>
144+
<p>Privacy Policy</p>
145+
<br>
146+
<p>Return Policy</p>
147+
<br>
148+
<p>Shipping Policy</p>
149+
<br>
150+
<p> Warranty Policy</p>
151+
152+
</section>
153+
<section class="footer-3">
154+
<h2 class="foot">MY ACCOUNT</h2>
155+
<br>
156+
<p>Log In</p>
157+
<p> Register</p>
158+
<p>Wishlist</p>
159+
<p>Returns</p>
160+
</section>
161+
<section class="footer-4">
162+
<h2 class="foot">Also Available on</h2>
163+
<br>
164+
<p><img src="https://www.wrangler.in/static/frontend/Aceturtle/lee/en_US/images/facebook.svg" alt=""></p>
165+
<p><img src="https://www.wrangler.in/static/frontend/Aceturtle/lee/en_US/images/instagram.svg" alt=""></p>
166+
<p><img src="https://www.wrangler.in/static/frontend/Aceturtle/lee/en_US/images/twitter.png" alt=""></p>
167+
<p><img src="https://www.wrangler.in/static/frontend/Aceturtle/lee/en_US/images/youtube.svg" alt=""></p>
168+
</section>
169+
</div>
170+
</footer>
171+
172+
173+
174+
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
175+
176+
<script>
177+
var swiper = new Swiper(".mySwiper", {
178+
spaceBetween: 30,
179+
centeredSlides: true,
180+
autoplay: {
181+
delay: 2500,
182+
disableOnInteraction: false,
183+
},
184+
pagination: {
185+
el: ".swiper-pagination",
186+
clickable: true,
187+
},
188+
navigation: {
189+
nextEl: ".swiper-button-next",
190+
prevEl: ".swiper-button-prev",
191+
},
192+
});
193+
</script>
194+
195+
<script>
196+
var swiper = new Swiper(".mySwiper1", {
197+
slidesPerView: 4,
198+
spaceBetween: 30,
199+
slidesPerGroup: 3,
200+
loop: true,
201+
loopFillGroupWithBlank: true,
202+
pagination: {
203+
el: ".swiper-pagination",
204+
clickable: true,
205+
},
206+
navigation: {
207+
nextEl: ".swiper-button-next",
208+
prevEl: ".swiper-button-prev",
209+
},
210+
});
211+
</script>
212+
<script src="https://kit.fontawesome.com/fa1e66a5e4.js" crossorigin="anonymous"></script>
213+
</body>
214+
215+
</html>

0 commit comments

Comments
 (0)