8000 Home Page Complete · umarhasnain/HTML-CSS-Compitition@36f3d7d · GitHub
[go: up one dir, main page]
Skip to content

Commit 36f3d7d

Browse files
umarhasnainumarhasnain
committed
Home Page Complete
1 parent 9b0e40f commit 36f3d7d

15 files changed

+574
-15
lines changed

‎images/380x-hd-hdc-product-images.webp

105 KB
Binary file not shown.

‎images/deskImage.png

190 KB
Loading

‎images/desk_img.jpg

7.69 KB
Loading

‎images/download (1).jpg

4.37 KB
Loading

‎images/her.avif

32.9 KB
Binary file not shown.

‎images/lamp.png

6.3 KB
Loading

‎images/lamp_fix.avif

6 KB
Binary file not shown.

‎images/laptop.webp

62.7 KB
Binary file not shown.

‎images/lightLamp.jpg

33.2 KB
Loading

‎images/lounge_tech.webp

43.4 KB
Binary file not shown.

‎images/pexels-math-90946.jpg

444 KB
Loading

‎images/sofa.webp

89.6 KB
Binary file not shown.

‎images/tagline-img.png

183 KB
Loading

‎index.html

Lines changed: 306 additions & 15 deletions
10000
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,20 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>HTML & CSS Compitition</title>
7+
<link rel="stylesheet" href="style.css" />
78
<link
89
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
910
rel="stylesheet"
1011
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
1112
crossorigin="anonymous"
1213
/>
14+
<link
15+
rel="stylesheet"
16+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
17+
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
18+
crossorigin="anonymous"
19+
referrerpolicy="no-referrer"
20+
/>
1321
</head>
1422
<body>
1523
<nav class="navbar navbar-expand-lg bg-body-tertiary" id="navbar">
@@ -37,23 +45,15 @@
3745
<a class="nav-link active" aria-current="page" href="#">Home</a>
3846
</li>
3947
<li class="nav-item">
40-
<a class="nav-link active" href="#"
41-
>Category</a
42-
>
48+
<a class="nav-link active" href="#">Category</a>
4349
</li>
4450
<li class="nav-item">
45-
<a
46-
class="nav-link active"
47-
aria-current="page"
48-
href="#"
51+
<a class="nav-link active" aria-current="page" href="#"
4952
>Details</a
5053
>
5154
</li>
5255
<li class="nav-item">
53-
<a
54-
class="nav-link active"
55-
aria-current="page"
56-
href="#"
56+
<a class="nav-link active" aria-current="page" href="#"
5757
>Payment</a
5858
>
5959
</li>
@@ -72,16 +72,34 @@
7272
</nav>
7373

7474
<div class="herosection">
75-
<div id="carouselExample" class="carousel slide">
75+
<div id="carouselExample" class="carousel slide carousel_div">
7676
<div class="carousel-inner">
7777
<div class="carousel-item active">
78-
<img src="./images/online-shop-german-web-slider-f1cc4a.png" class="d-block w-100" alt="..." />
78+
<img
79+
src="./images/online-shop-german-web-slider-f1cc4a.png"
80+
class="d-block w-100"
81+
height="570px"
82+
width="800px"
83+
alt="..."
84+
/>
7985
</div>
8086
<div class="carousel-item">
81-
<img src="./images/online-store-sale-slider-template-a3cc06.png" class="d-block w-100" alt="..." />
87+
<img
88+
src="./images/online-store-sale-slider-template-a3cc06.png"
89+
class="d-block w-100"
90+
height="570px"
91+
width="800px"
92+
alt="..."
93+
/>
8294
</div>
8395
<div class="carousel-item">
84-
<img src="./images/shop-online-web-slider-design-e2862a.png" class="d-block w-100" alt="..." />
96+
<img
97+
src="./images/shop-online-web-slider-design-e2862a.png"
98+
class="d-block w-100"
99+
height="570px"
100+
width="800px"
101+
alt="..."
102+
/>
85103
</div>
86104
</div>
87105
<button
@@ -105,6 +123,279 @@
105123
</div>
106124
</div>
107125

126+
<div class="section_2">
127+
<div class="sec2_1">
128+
<div class="sec2_1_text">
129+
<h4>MY SMALLL WRITTING DESK</h4>
130+
<span class="shopNow_span"
131+
>SHOP NOW <i class="fa-solid fa-circle-chevron-right"></i
132+
></span>
133+
<button class="discount_button">-20%</button>
134+
<div class="sec2_1_img">
135+
<img
136+
src="./images/deskImage.png"
137+
height="300px"
138+
width="300px"
139+
alt=""
140+
/>
141+
</div>
142+
</div>
143+
</div>
144+
<div class="sec2_2">
145+
<div class="sec2_2_1">
146+
<h3>MODULAR LOUNGE TEAK</h3>
147+
<div class="img">
148+
<img
149+
src="./images/lounge_tech.webp"
150+
height="150px"
151+
width="200px"
152+
alt=""
153+
/>
154+
</div>
155+
</div>
156+
<div class="sec2_1_2">
157+
<h3>Modular technical fabric sofa</h3>
158+
<div class="img2">
159+
<img src="./images/sofa.webp" height="200px" width="300px" alt="" />
160+
</div>
161+
</div>
162+
</div>
163+
<div class="sec2_3">
164+
<h3>Dirak Light Pendant Lamp</h3>
165+
<div class="img3">
166+
<img
167+
src="./images/lamp_fix.avif"
168+
height="400px"
169+
width="100px"
170+
alt=""
171+
/>
172+
</div>
173+
</div>
174+
</div>
175+
176+
<div class="section_3">
177+
<div class="sec_3">
178+
<div class="card">
179+
<div class="card" style="width: 18rem">
180+
<img
181+
src="./images/380x-hd-hdc-product-images.webp"
182+
height="250px"
183+
width="100px"
184+
class="card-img-top"
185+
alt="..."
186+
/>
187+
<div class="card-body">
188+
<h5 class="card-title">Card title</h5>
189+
<p class="card-text">
190+
Some quick example text to build on the card title and make up
191+
the bulk of the card's content.
192+
</p>
193+
<a href="#" class="btn btn-primary">Go somewhere</a>
194+
</div>
195+
</div>
196+
</div>
197+
198+
<div class="card">
199+
<div class="card" style="width: 18rem">
200+
<img
201+
src="./images/download (1).jpg"
202+
height="250px"
203+
width="100px"
204+
class="card-img-top"
205+
alt="..."
206+
/>
207+
<div class="card-body">
208+
<h5 class="card-title">Card title</h5>
209+
<p class="card-text">
210+
Some quick example text to build on the card title and make up
211+
the bulk of the card's content.
212+
</p>
213+
<a href="#" class="btn btn-primary">Go somewhere</a>
214+
</div>
215+
</div>
216+
</div>
217+
218+
<div class="card">
219+
<div class="card" style="width: 18rem">
220+
<img
221+
src="./images/download.jpg"
222+
height="250px"
223+
width="100px"
224+
class="card-img-top"
225+
alt="..."
226+
/>
227+
<div class="card-body">
228+
<h5 class="card-title">Card title</h5>
229+
<p class="card-text">
230+
Some quick example text to build on the card title and make up
231+
the bulk of the card's content.
232+
</p>
233+
<a href="#" class="btn btn-primary">Go somewhere</a>
234+
</div>
235+
</div>
236+
</div>
237+
238+
<div class="card">
239+
<div class="card" style="width: 18rem">
240+
<img
241+
src="./images/laptop.webp"
242+
height="250px"
243+
width="100px"
244+
class="card-img-top"
245+
alt="..."
246+
/>
247+
<div class="card-body">
248+
<h5 class="card-title">Card title</h5>
249+
<p class="card-text">
250+
Some quick example text to build on the card title and make up
251+
the bulk of the card's content.
252+
</p>
253+
<a href="#" class="btn btn-primary">Go somewhere</a>
254+
</div>
255+
</div>
256+
</div>
257+
</div>
258+
<div class="sec_3_1">
259+
<div class="card">
260+
<div class="card" style="width: 18rem">
261+
<img
262+
src="./images/pexels-math-90946.jpg"
263+
height="250px"
264+
width="100px"
265+
class="card-img-top"
266+
alt="..."
267+
/>
268+
<div class="card-body">
269+
<h5 class="card-title">Card title</h5>
270+
<p class="card-text">
271+
Some quick example text to build on the card title and make up
272+
the bulk of the card's content.
273+
</p>
274+
<a href="#" class="btn btn-primary">Go somewhere</a>
275+
</div>
276+
</div>
277+
</div>
278+
279+
<div class="card">
280+
<div class="card" style="width: 18rem">
281+
<img
282+
src="./images/380x-hd-hdc-product-images.webp"
283+
height="250px"
284+
width="100px"
285+
class="card-img-top"
286+
alt="..."
287+
/>
288+
<div class="card-body">
289+
<h5 class="card-title">Card title</h5>
290+
<p class="card-text">
291+
Some quick example text to build on the card title and make up
292+
the bulk of the card's content.
293+
</p>
294+
<a href="#" class="btn btn-primary">Go somewhere</a>
295+
</div>
296+
</div>
297+
</div>
298+
299+
<div class="card">
300+
<div class="card" style="width: 18rem">
301+
<img
302+
src="./images/online-shop-german-web-slider-f1cc4a.png"
303+
height="250px"
304+
width="100px"
305+
class="card-img-top"
306+
alt="..."
307+
/>
308+
<div class="card-body">
309+
<h5 class="card-title">Card title</h5>
310+
<p class="card-text">
311+
Some quick example text to build on the card title and make up
312+
the bulk of the card's content.
313+
</p>
314+
<a href="#" class="btn btn-primary">Go somewhere</a>
315+
</div>
316+
</div>
317+
</div>
318+
319+
<div class="card">
320+
<div class="card" style="width: 18rem">
321+
<img
322+
src="./images/shop-online-web-slider-design-e2862a.png"
323+
height="250px"
324+
width="100px"
325+
class="card-img-top"
326+
alt="..."
327+
/>
328+
<div class="card-body">
329+
<h5 class="card-title">Card title</h5>
330+
<p class="card-text">
331+
Some quick example text to build on the card title and make up
332+
the bulk of the card's content.
333+
</p>
334+
<a href="#" class="btn btn-primary">Go somewhere</a>
335+
</div>
336+
</div>
337+
</div>
338+
</div>
339+
</div>
340+
341+
<footer class="foot">
342+
<div class="foot_text">
343+
<h1>E-Commerce</h1>
344+
<p>
345+
Our Vision is to provide convenience <br />
346+
and help increase your sales business.
347+
</p>
348+
</div>
349+
<div class="foot_list">
350+
<ul>
351+
<li>
352+
<h3>About</h3>
353+
</li>
354+
<li>How it works</li>
355+
<li>Featured</li>
356+
<li>Patnership</li>
357+
<li>Business Relation</li>
358+
</ul>
359+
</div>
360+
<div class="foot_list">
361+
<ul>
362+
<li>
363+
<h3>Community</h3>
364+
</li>
365+
<li>Events</li>
366+
<li>Blogs</li>
367+
<li>Podcast</li>
368+
<li>Invite a friend</li>
369+
</ul>
370+
</div>
371+
<div class="foot_list">
372+
<ul>
373+
<li>
374+
<h3>Socials</h3>
375+
</li>
376+
<li>Discord</li>
377+
<li>Instagram</li>
378+
<li>Twitter</li>
379+
<li>Facebook</li>
380+
</ul>
381+
</div>
382+
</footer>
383+
384+
<div class="line">
385+
<hr />
386+
</div>
387+
<div class="last_sec">
388+
<div class="last_sec_data">
389+
<h6>© 20222 MORENT. All rights reserved</h6>
390+
</div>
391+
<div class="last_sec_text">
392+
<h6>Privacy & Policy</h6>
393+
<h6>Terms and Condition</h6>
394+
</div>
395+
</div>
396+
397+
398+
108399
<script
109400
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
110401
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"

0 commit comments

Comments
 (0)
0