<!DOCTYPE html>

Project Materials Store

Home
Products
Contact

<main>
    <section id="home">
        <h2>Welcome to Our Store</h2>
        <p>Find the best materials for your projects here!</p>
    </section>

    <section id="products">
        <h2>Our Products</h2>
        <div class="product">
            <img src="example-product1.jpg" alt="Product 1">
            <h3>Product 1</h3>
            <p>Description of product 1.</p>
            <p>$10.00</p>
            <button class="add-to-cart" data-product="Product 1" data-price="10.00">Add to Cart</button>
        </div>
        <div class="product">
            <img src="example-product2.jpg" alt="Product 2">
            <h3>Product 2</h3>
            <p>Description of product 2.</p>
            <p>$20.00</p>
            <button class="add-to-cart" data-product="Product 2" data-price="20.00">Add to Cart</button>
        </div>
    </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>
</main>

<footer>
    <p>&copy; 2024 Project Materials Store</p>
</footer>

<script src="script.js"></script>

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 1rem;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 1rem;
}

.product {
border: 1px solid #ddd;
padding: 1rem;
margin: 1rem 0;
}

.product img {
max-width: 100%;
height: auto;
}

footer {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}

form {
max-width: 600px;
margin: 0 auto;
}

form label {
display: block;
margin: 0.5rem 0 0.2rem;
}

form input, form textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
}

form button {
padding: 0.7rem 1.5rem;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}

ABK1

Project Materials Store