Code_Academy_UX_Course/cart.html at master · SixStringsCoder/Code_Academy_UX_Course · 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
  <title>WareHouse</title>
  <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
  <link rel="stylesheet" type="text/css" href="resources/css/base.css">
  <link rel="stylesheet" type="text/css" href="resources/css/cart.css">
</head>
<body>
  <div class="container">

    <!-- Header -->

    <header role=“banner” aria-label="site navigation">
      <div class="image-container">
        <a href="index.html"><img src="resources/img/home_darkgreen.png" alt="warehouse logo in header"></a>
      </div>
      <div class="search-bar">
        <input type="text" name="search" placeholder="Search for items">
        <a href="" class="icon"><img src="resources/img/search.svg" alt="magnifying glass search box icon"></a>
      </div>
      <a href="cart.html" class="button cart">Cart <img src="resources/img/cart.svg" alt="cart button icon"></a>
    </header>
    <nav role="navigation">
      <a href="deals.html">Today's Deals</a>
      <a href="products.html">Products</a>
      <a href="about.html">About Us</a>
      <a href="sell.html">Sell</a>
      <a href="#">Help</a>
    </nav>

    <!-- Cart -->
    <main id="main" class="product-list-section">
      <h2>Shopping Cart</h2>

    <section class="shopping-cart" role="region">

        <div class="row">
          <div class="image-container">
            <img src="resources/img/cart/white-console.jpg" alt="white console">
          </div>

          <div class="description">
            <h3>White Console</h3>
            <br>
            <span class="price">$499</span>
          </div>

          <div>
            Quantity <input type="number" name="Quantity" placeholder="1">
          </div>
        </div>

        <div class="row">
          <div class="image-container">
            <img src="resources/img/cart/yellow-chair.jpg" alt="yellow chair">
          </div>

          <div class="description">
            <h3>Yellow Chair</h3>
            <br>
            <span class="price">$189</span>
          </div>

          <div>
            Quantity <input type="number" name="Quantity" placeholder="1">
          </div>
        </div>

        <div class="row" id="no-border">
          <div class="image-container">
            <img src="resources/img/cart/wire-stool.jpg" alt="two wire stools at a counter">
          </div>

          <div class="description">
            <h3>Wire Stool</h3>
            <br>
            <span class="price">$75</span>
          </div>

            <div>
            Quantity <input type="number" name="Quantity" placeholder="1">
          </div>
        </div>

      <div class="total">
        <div class="description">
          <h3>Total</h3>
          <span class="price">$763.00</span>
        </div>
        <a href="" class="button">Checkout</a>
      </div>
  </section>
</main>

    <!-- Footer -->

    <footer role=“contentinfo”>
      <img src="resources/img/home_darkgreen.png" alt="warehouse logo in footer">
      <div class="links">
        <h4>Get to know us</h4>
        <a href="about.html">About us</a>
        <a href="jobs.html">Jobs</a>
        <a href="#">Investor relations</a>
        <a href="#">Link</a>
      </div>
      <div class="links">
        <h4>Make money with us</h4>
        <a href="sell.html">Sell on WareHouse</a>
        <a href="#">Become a vendor</a>
        <a href="#">Fundraiser events</a>
        <a href="#">Community outreach</a>
      </div>
      <div class="links">
        <h4>Help</h4>
        <a href="#">Contact us</a>
        <a href="#">Conditions of use</a>
        <a href="#">Report a problem</a>
        <a href="#">Privacy Policy</a>
      </div>
    </footer>
  </div>
</body>
</html>