-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (153 loc) · 7.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laptop Store</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-navbar">
<h1>Laptop Store</h1>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#about">About</a>
<a href="#contact">Contact Us</a>
</div>
</div>
<div class="container">
<section id="home" class="section">
<h2 id="text1">Home Section</h2>
<p id="text2">Device Depot</p>
<p id="text3">Discover the Best Deals on Top-Quality Laptops!</p>
</section>
<section id="products" class="section">
<h2>Products Section</h2>
<div class="product-slider">
<button class="back-btn">
<img src="img6.png" alt="back-btn">
</button>
<div class="product-cards">
<!-- Add product cards here -->
<div class="product-card">
<img src="img1.webp" alt="Product 1">
<p id="text7">ASUS Vivobook Go 14</p>
<ul>
<li> AMD Ryzen 3 7320U, 14" (35.56 cm) FHD</li>
<li>Thin and Light Laptop E1404FA-NK325WS</li>
<li> 8 GB RAM/512GB SSD/Win11/Office 2021/42WHr /Black/1.38 kg </li>
<br><li class="text8">Price: Rs. 33,990</li>
</ul>
<button> Add To Cart </button>
</div>
<div class="product-card">
<img src="img7.webp" alt="Product 2">
<p id="text7">HP Laptop 15s</p>
<ul>
<li> 12th Gen Intel Core i3, 15.6-inch (39.6 cm)</li>
<li> Thin & Light fq5007TU / FQ5327TU</li>
<li> 8GB DDR4, 512GB SSD Dual Speakers Win 11, MSO 2021, Silver, 1.69 kg </li>
<br><li class="text8">Price: Rs. 37,599</li>
</ul>
<button> Add To Cart </button>
</div>
<div class="product-card">
<img src="img8.jpg" alt="Product 3">
<p id="text7">Lenovo IdeaPad Slim 3</p>
<ul>
<li> Intel Core i3 12th Gen 15.6" (39.62cm) FHD</li>
<li>Thin and Light Laptop 82RK00VTIN</li>
<li> 8GB/512GB SSD/Windows 11/Office 2021/Arctic Grey/1.63Kg </li>
<br><li class="text8">Price: Rs. 34,000</li>
</ul>
<button> Add To Cart </button>
</div>
<div class="product-card">
<img src="img9.webp" alt="Product 4">
<p id="text7">Dell [Smartchoice] 15 Laptop</p>
<ul>
<li> 12th Gen Intel Core i3-1215U Processor 15.6"(39.62cm) FHD</li>
<li>Win 11 + MSO'21/15 Month McAfee/Spill-Resistant Keyboard</li>
<li> 8GB/512GB SSD/Intel UHD Graphics/Grey/T & L 1.48kg</li>
<br><li class="text8">Price: Rs. 34,900</li>
</ul>
<button> Add To Cart </button>
</div>
<div class="product-card">
<img src="img10.webp" alt="Product 5">
<p id="text7">ASUS VivoBook K15 OLED (2021)</p>
<ul>
<li> 15.6" (39.62 cms) FHD OLED, Intel Core i3-1115G4 11th Gen</li>
<li> Thin and Light Laptop K513EA-L312WS</li>
<li> 8GB/512GB SSD/Integrated Graphics/Office 2021/Windows 11/Black/1.8 Kg</li>
<br><li class="text8">Price: Rs. 36,900</li>
</ul>
<button> Add To Cart </button>
</div>
<div class="product-card">
<img src="img11.webp" alt="Product 6">
<p id="text7">Dell Inspiron 7430 2in1 Touch Laptop</p>
<ul>
<li> 13th Gen Intel Core i3-1315U/8GB/1TB SSD/14.0" (35.56cm) FHD+</li>
<li> 6:10 Aspect Ratio/Backlit KB+FPR/Win 11 + MSO'21</li>
<li> 15 Months McAfee/Platinum Silver/Thin & Light-1.58kg</li>
<br><li class="text8">Price: Rs. 66,499</li>
</ul>
<button> Add To Cart </button>
</div>
</div>
<button class="next-btn">
<img src="img5.png" alt="back-btn">
</button>
</div>
</section>
<section id="about" class="section">
<h2>About Section</h2>
<h2 id="text4">About Device Depot</h2>
<p id="text5">Welcome to Device Depot, your ultimate destination for the latest and greatest in laptop technology.
Our mission is to provide high-quality, cutting-edge laptops that cater to all your professional and personal
needs. Whether you're a gamer, a professional, or a student, we have the perfect laptop for you. At Desktop Depot,
we believe in combining performance with style, ensuring that you not only get the best in technology but also a
sleek, modern design. Join us on a journey to explore the future of computing with our premium laptop collection.</p>
</section>
<section id="contact" class="section">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="8"></textarea><br>
<input type="submit" value="Submit">
</form>
</section>
</div>
<footer class="footer">
<p id="text6">© 2024 Laptop Store. All rights reserved.</p>
</footer>
<script>
window.addEventListener('scroll', function() {
const navbar = document.getElementById('main-navbar');
if (window.scrollY > 100) {
navbar.style.backgroundColor = '#333';
} else {
navbar.style.backgroundColor = 'transparent';
}
});
document.addEventListener('DOMContentLoaded', function () {
const forwardArrow = document.querySelector('.next-btn');
const backwardArrow = document.querySelector('.back-btn');
const travelCards = document.querySelector('.product-cards');
forwardArrow.addEventListener('click', () => {
travelCards.scrollBy({ left: travelCards.clientWidth / 3, behavior: 'smooth' });
});
backwardArrow.addEventListener('click', () => {
travelCards.scrollBy({ left: -travelCards.clientWidth / 3, behavior: 'smooth' });
});
});
</script>
</body>
</html>