alok tharu
6 months ago
parent
ba6f33679e
commit
29b370077c
@ -1,237 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<title>Laptop Details - E-Waste Marketplace</title> |
|
||||||
<style> |
|
||||||
/* Basic Reset */ |
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: Arial, sans-serif; |
|
||||||
background-color: #f4f4f4; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
|
|
||||||
header { |
|
||||||
background-color: #4CAF50; |
|
||||||
color: white; |
|
||||||
padding: 20px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
header nav { |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
header nav a { |
|
||||||
color: white; |
|
||||||
text-decoration: none; |
|
||||||
padding: 5px 10px; |
|
||||||
margin: 0 10px; |
|
||||||
} |
|
||||||
|
|
||||||
header nav a:hover { |
|
||||||
background-color: #45a049; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
main { |
|
||||||
padding: 20px; |
|
||||||
max-width: 1200px; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
.product-detail { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
margin-bottom: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-image img { |
|
||||||
max-width: 500px; |
|
||||||
width: 100%; |
|
||||||
height: auto; |
|
||||||
border-radius: 8px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-info { |
|
||||||
width: 50%; |
|
||||||
padding-left: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-info h2 { |
|
||||||
font-size: 2em; |
|
||||||
margin-bottom: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-info .price { |
|
||||||
font-size: 1.5em; |
|
||||||
color: #4CAF50; |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-info p { |
|
||||||
margin-bottom: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-info ul { |
|
||||||
list-style-type: none; |
|
||||||
padding-left: 0; |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-info li { |
|
||||||
margin-bottom: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.add-to-cart-btn { |
|
||||||
background-color: #4CAF50; |
|
||||||
color: white; |
|
||||||
border: none; |
|
||||||
padding: 10px; |
|
||||||
cursor: pointer; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.add-to-cart-btn:hover { |
|
||||||
background-color: #45a049; |
|
||||||
} |
|
||||||
|
|
||||||
.product-reviews { |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.product-reviews h3 { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.review { |
|
||||||
background-color: #fff; |
|
||||||
padding: 10px; |
|
||||||
margin-bottom: 10px; |
|
||||||
border-radius: 5px; |
|
||||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); |
|
||||||
} |
|
||||||
|
|
||||||
.review p { |
|
||||||
margin-bottom: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.review-form { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.review-form textarea { |
|
||||||
width: 100%; |
|
||||||
padding: 10px; |
|
||||||
margin-bottom: 10px; |
|
||||||
border-radius: 5px; |
|
||||||
border: 1px solid #ddd; |
|
||||||
resize: none; |
|
||||||
} |
|
||||||
|
|
||||||
.review-form button { |
|
||||||
background-color: #4CAF50; |
|
||||||
color: white; |
|
||||||
padding: 10px 20px; |
|
||||||
border: none; |
|
||||||
border-radius: 5px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.review-form button:hover { |
|
||||||
background-color: #45a049; |
|
||||||
} |
|
||||||
|
|
||||||
footer { |
|
||||||
text-align: center; |
|
||||||
padding: 10px; |
|
||||||
background-color: #333; |
|
||||||
color: white; |
|
||||||
position: fixed; |
|
||||||
bottom: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
</style> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
|
|
||||||
<header> |
|
||||||
<h1>E-Waste Marketplace</h1> |
|
||||||
<nav> |
|
||||||
<a href="index.html">Home</a> | |
|
||||||
<a href="cart.html">Cart</a> |
|
||||||
</nav> |
|
||||||
</header> |
|
||||||
|
|
||||||
<main> |
|
||||||
<section class="product-detail"> |
|
||||||
<div class="product-image"> |
|
||||||
<img src="laptop1.jpg" alt="Laptop 1"> |
|
||||||
</div> |
|
||||||
<div class="product-info"> |
|
||||||
<h2>Laptop 1 - Intel i5, 8GB RAM</h2> |
|
||||||
<p class="price">$200.00</p> |
|
||||||
<p><strong>Description:</strong></p> |
|
||||||
<p>This is a refurbished laptop in excellent working condition. It comes with an Intel i5 processor, 8GB of RAM, and a 500GB HDD. Ideal for everyday tasks and light gaming.</p> |
|
||||||
|
|
||||||
<p><strong>Specifications:</strong></p> |
|
||||||
<ul> |
|
||||||
<li>Processor: Intel i5</li> |
|
||||||
<li>RAM: 8GB</li> |
|
||||||
<li>Storage: 500GB HDD</li> |
|
||||||
<li>Graphics: Integrated Intel HD</li> |
|
||||||
<li>Operating System: Windows 10</li> |
|
||||||
<li>Condition: Used (Refurbished)</li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
<button class="add-to-cart-btn">Add to Cart</button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
|
|
||||||
<section class="product-reviews"> |
|
||||||
<h3>Customer Reviews</h3> |
|
||||||
<div class="review"> |
|
||||||
<p><strong>John Doe:</strong> Excellent laptop for the price. Works smoothly and looks brand new. Highly recommend!</p> |
|
||||||
</div> |
|
||||||
<div class="review"> |
|
||||||
<p><strong>Jane Smith:</strong> Good laptop for basic use, but not suitable for heavy gaming. Overall, satisfied with the purchase.</p> |
|
||||||
</div> |
|
||||||
<form class="review-form"> |
|
||||||
<label for="review">Write a review:</label> |
|
||||||
<textarea id="review" rows="4" placeholder="Write your review..."></textarea> |
|
||||||
<button type="submit">Submit Review</button> |
|
||||||
</form> |
|
||||||
</section> |
|
||||||
</main> |
|
||||||
|
|
||||||
<footer> |
|
||||||
<p>© 2025 E-Waste Marketplace. All rights reserved.</p> |
|
||||||
</footer> |
|
||||||
|
|
||||||
<script> |
|
||||||
document.querySelector('.add-to-cart-btn').addEventListener('click', function() { |
|
||||||
alert('Laptop added to your cart!'); |
|
||||||
}); |
|
||||||
|
|
||||||
// Optional: Form submission for the review |
|
||||||
document.querySelector('.review-form').addEventListener('submit', function(e) { |
|
||||||
e.preventDefault(); |
|
||||||
const reviewText = document.querySelector('#review').value; |
|
||||||
if (reviewText) { |
|
||||||
const review = document.createElement('div'); |
|
||||||
review.classList.add('review'); |
|
||||||
review.innerHTML = `<p><strong>You:</strong> ${reviewText}</p>`; |
|
||||||
document.querySelector('.product-reviews').appendChild(review); |
|
||||||
document.querySelector('#review').value = ''; // Clear the textarea |
|
||||||
} |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue