Question

<!doctype HTML>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pastimes - Admin Login</title>
<link rel="stylesheet" href="style.css">
</head>

<?php
session_start();
include('DBConn.php');

// Handle the form submission to fetch item price
if (isset($_POST['itemId'])) {
$itemId = $_POST['itemId'];

// Fetch item details from the database to get the price
$query = "SELECT itemPrice FROM tbl_item WHERE itemId = $itemId";
$result = mysqli_query($conn, $query);

if ($result) {
$itemRow = mysqli_fetch_assoc($result);
// Display an alert with the price
echo "<script>alert('Item added to cart! Price: $" . $itemRow['itemPrice'] . "');</script>";
} else {
echo "<script>alert('Error fetching item price: " . mysqli_error($conn) . "');</script>";
}
}

// Fetch all verified items from the database
$query = "SELECT * FROM tbl_item WHERE itemVerified = 1";
$result = mysqli_query($conn, $query);

if ($result) {
echo '<table>';
echo '<tr><th>Item Image</th><th>Item Name</th><th>Price</th><th>Description</th><th>Add to Cart</th></tr>';

while ($itemRow = mysqli_fetch_assoc($result)) {
echo '<tr>';
// Display item image dynamically
echo '<td><img src="' . $itemRow['itemImage'] . '" alt="' . $itemRow['itemName'] . '" width="100"></td>';
// Display item details
echo '<td>' . $itemRow['itemName'] . '</td>';
echo '<td>$' . $itemRow['itemPrice'] . '</td>';
echo '<td>' . $itemRow['itemDescription'] . '</td>';
// Add to Cart button
echo '<td><form method="POST" name="addTocart">';
echo '<input type="hidden" name="itemId" value="' . $itemRow['itemId'] . '">';
echo '<button type="submit">Add to Cart</button>';
echo '</form></td>';
echo '</tr>';
}

echo '</table>';
} else {
echo "Error fetching items: " . mysqli_error($conn);
}

// Close the connection
mysqli_close($conn);
?>

</body>
</html>

create a css styling sheet to style the images

use the colours:
#121481
#ff877d
#ffb1b1
#ffcbcb
#ffeae3
GPT-4o mini
Here is a CSS stylesheet that you can use to style the images and the overall layout of your HTML:

```css
/* style.css */

/* General Body Styles */
body {
font-family: Arial, sans-serif;
background-color: #ffeae3;
color: #121481;
margin: 0;
padding: 20px;
}

/* Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ffcbcb;
}

th {
background-color: #ffb1b1;
color: #121481;
}

tr:hover {
background-color: #ff877d;
}

/* Image Styles */
img {
border-radius: 10px; /* Rounded corners for images */
border: 2px solid #ff877d; /* Border color */
}

/* Button Styles */
button {
background-color: #ffb1b1; /* Button background */
color: #121481; /* Button text color */
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #ff877d; /* Change on hover */
}

/* Form Styles */
form {
display: inline; /* Makes the form inline for better layout */
}

h1 {
color: #121481; /* Heading color */
}

/* Responsive Styles */
@media (max-width: 768px) {
table, th, td {
display: block;
width: 100%;
}

th, td {
box-sizing: border-box;
}

tr {
margin-bottom: 10px; /* Separation between rows on mobile */
}
}
```

### Explanation:
- **Body Styles**: The body has a light background, font style, and text color.
- **Table Styles**: The table is styled for better readability, with alternating background colors on hover.
- **Image Styles**: Images are rounded with a border, making them visually appealing.
- **Button Styles**: Buttons have a clear style and change color when hovered over.
- **Form Styles**: The form is set to display inline with the button for better layout.
- **Responsive Styles**: Adjustments for smaller screens to make the table easier to read.

Make sure to link this CSS file in the head of your HTML file as shown in your initial example.