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