381Assignment1/products.html at main · Alvin-L-05/381Assignment1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!--
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Name : products.html
Assignment : 01
Group members : Alvin Long, Thanishque Harshaa
UCIDs : 30184369, 30171412
Submission : Feb 5, 2024
File description : The product listing page
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
-->

<!--
Requirements:
• Create a product listing page with HTML. You have to add 2 products per line.
• Display at least four products with their associated image, name, price, and a button to add
them to the cart. This button will not have any functionality at this moment
-->

<!--
Place the following elements in your HTML at these specific locations and do not change the
order:
• <header>: This is where your website's logo and name should be placed. The logo should
be placed at the top left and the name should be placed right after the logo.
• <div>: The navigation links to other pages (home.html, products.html, contact.html, and
login.html) are placed directly below the header.
• <main>: Below the navigation bar, where the primary content, including the products,
should be placed. Each product must be displayed with an image of the product, followed
by the name, price, and a button to add the product to the cart. Use the heading element to
display the name of the product.
• <footer>: Add a footer with a copyright notice at the bottom of your page
-->

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products Page</title>
</head>

<body>

    <!-- Header Section -->
    <header>
        <!-- Logo on the top left -->
        <img src="images/logo.jpg" alt="Your Logo" width="175" height="100">

        <!-- Website name on the right -->
        <h1>Products Page</h1>
    </header>

    <!-- Navigation Section -->
    <div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="products.html">Products</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="login.html">Login</a></li>
            </ul>
        </nav>
    </div>

    <!-- Main Content Section -->
    <main>
        <!-- Product 1 -->
        <div class="product">
            <img src="images/techtruck.jpg" alt="Tech Truck" width="350" height="150">
            <h2>Tech Truck</h2>
            <p>Price: $100 000.00</p>
            <button>Add to Cart</button>
        </div>

        <!-- Product 2 -->
        <div class="product">
            <img src="images/supercar.jpg" alt="Super Car" width="350" height="125">
            <h2>Super Car</h2>
            <p>Price: $300 000.00</p>
            <button>Add to Cart</button>
        </div>

        <!-- Product 3 -->
        <div class="product">
            <img src="images/luxurycar.jpg" alt="Luxury Car" width="350" height="150">
            <h2>Luxury Car</h2>
            <p>Price: $500 000.00</p>
            <button>Add to Cart</button>
        </div>

        <!-- Product 4 -->
        <div class="product">
            <img src="images/compactcar.jpg" alt="Compact Car" width="350" height="150">
            <h2>Compact Car</h2>
            <p>Price: $30 000.00</p>
            <button>Add to Cart</button>
        </div>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2024 One-Stop Car Shop. All rights reserved.</p>
    </footer>

</body>

</html>