Add files via upload

arghadipmanna101 · Aug 8, 2024 · 294f8b0 · 294f8b0
1 parent dd9cd3f
commit 294f8b0
Showing 1 changed file with 174 additions and 0 deletions.
diff --git a/src/Mobile and Tab Store.html b/src/Mobile and Tab Store.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mobile Shop</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+header {
+ background-color: #333;
+ color: white;
+ padding: 1em 0;
+ text-align: center;
+}
+
+header h1 {
+ margin: 0;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+}
+
+nav ul li {
+ display: inline;
+ margin: 0 1em;
+}
+
+nav ul li a {
+ color: white;
+ text-decoration: none;
+}
+
+section {
+ padding: 2em;
+ text-align: center;
+}
+
+.product-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.product-item {
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1em;
+ padding: 1em;
+ width: 200px;
+}
+
+.product-item img {
+ max-width: 100%;
+ height: auto;
+}
+
+footer {
+ background-color: #333;
+ color: white;
+ padding: 1em 0;
+ text-align: center;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+form label {
+ margin-top: 1em;
+}
+
+form input, form textarea {
+ margin-top: 0.5em;
+ padding: 0.5em;
+ width: 100%;
+ max-width: 300px;
+}
+
+form button {
+ margin-top: 1em;
+ padding: 0.5em 1em;
+}
+
+ </style>
+<body>
+ <header>
+ <h1>Mobile Shop</h1>
+ <nav>
+ <ul>
+ <li><a href="#home">Home</a></li>
+ <li><a href="#products">Products</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <section id="home">
+ <h2>Welcome to Our Mobile Shop</h2>
+ <p>Find the latest and greatest mobile phones here!</p>
+ </section>
+
+ <section id="products">
+ <h2>Products</h2>
+ <div class="product-list">
+ <!-- Product items will be injected here by JavaScript -->
+ </div>
+ </section>
+
+ <section id="about">
+ <h2>About Us</h2>
+ <p>We are a leading mobile shop providing the best smartphones at competitive prices.</p>
+ </section>
+
+ <section id="contact">
+ <h2>Contact Us</h2>
+ <form id="contact-form">
+ <label for="name">Name:</label>
+ <input type="text" id="name" name="name" required>
+ <label for="email">Email:</label>
+ <input type="email" id="email" name="email" required>
+ <label for="message">Message:</label>
+ <textarea id="message" name="message" required></textarea>
+ <button type="submit">Send</button>
+ </form>
+ </section>
+
+ <footer>
+ <p>&copy; 2024 Mobile Shop. All rights reserved.</p>
+ </footer>
+
+ <script>
+ document.addEventListener("DOMContentLoaded", function() {
+ const products = [
+ { name: "iPhone 13", price: "$799", image: "https://via.placeholder.com/150" },
+ { name: "Samsung Galaxy S21", price: "$699", image: "https://via.placeholder.com/150" },
+ { name: "Google Pixel 6", price: "$599", image: "https://via.placeholder.com/150" },
+ ];
+
+ const productList = document.querySelector(".product-list");
+
+ products.forEach(product => {
+ const productItem = document.createElement("div");
+ productItem.classList.add("product-item");
+
+ productItem.innerHTML = `
+ <img src="${product.image}" alt="${product.name}">
+ <h3>${product.name}</h3>
+ <p>${product.price}</p>
+ `;
+
+ productList.appendChild(productItem);
+ });
+
+ document.getElementById("contact-form").addEventListener("submit", function(event) {
+ event.preventDefault();
+ alert("Thank you for your message!");
+ });
+});
+
+ </script>
+</body>
+</html>