uoft-csc309-tutorials/Week2-CSS/main.html at master · etesami/uoft-csc309-tutorials · 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
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>ABC Cabinets</title>

    <!-- TODO: The very first thing we need to do is to tell the HTML document that we have some CSS rules
      we want it to use. There is file in the same folder as this HTML document named style.css. The ".css"
      extension shows that this is a CSS file. Use the <link> tag to import the local CSS file. The other
      file is the Bootstrap CSS file which we import it from this address:
      https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css.
      Use the same HTML tag but link to this address instead. -->
    <link>
    <link>

  </head>
  <body>
    <header><h1>ABC Cabinet</h1></header>
    <hr/>
    <nav>
      <h3>Navigation</h3>
      <!-- TODO: Instead of manually writing CSS rules, for these two link, we would like to use pre-written
        rules from the bootstrap CSS file. Find the appropriate class name for that can be used to change the
        style of links below according to the screenshots.
        Look at here: https://getbootstrap.com/docs/4.0/components/buttons/ -->
      <a href='main.html' class="">Main Page</a>
      <a href='order.html' class="">Order Page</a>
    </nav>

    <div id='content'>
      <hr/>
      <p>We sell the following products:</p>
      <table class="item-tables">
        <tr>
          <th><p>Item</p></th>
          <th><p>Year</p></th>
          <th><p>Price</p></th>
        </tr>
        <tr>
          <td><p>Double Cabinet</p></td>
          <td><p>2008</p></td>
          <td><p>$150.00</p></td>
        </tr>
        <tr>
          <td><p>Single Cabinet</p></td>
          <td><p>2009</p></td>
          <td><p>$100.00</p></td>
        </tr>
        <tr>
          <td><p>Drawer</p></td>
          <td><p>2009</p></td>
          <td><p>$90.00</p></td>
        </tr>
      </table>


      <!-- TODO: Look at the <div> tags below and underestand which tag is the parent and which tags are the childern.
        You will use CSS to change their style. -->
      <div class="container-flex">

        <div class="flex-item item-description">
          <img alt="Double Cabinet" src="images/double.gif">
          <ul>
            <li>Double Cabinet</li>
            <li>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, risus quis tempus ultrices, risus metus luctus metus, eget euismod nunc felis at arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent malesuada ex et laoreet consectetur. Pellentesque sit amet arcu porta, aliquet justo vitae.
            </li>
          </ul>
        </div>

        <div class="flex-item item-description">
          <img alt="Single Cabinet" src="images/single.gif">
          <ul>
            <li>Double Cabinet</li>
            <li>
              In nec maximus lacus. Aenean eget magna sit amet massa pellentesque rhoncus eget in lectus. Nullam lobortis orci eu accumsan blandit. Sed efficitur interdum leo, vel cursus risus pellentesque at.
            </li>
          </ul>
        </div>

        <div class="flex-item item-description">
          <img alt="Drawer" src="images/drawer.gif">
          <ul>
            <li>Double Cabinet</li>
            <li>
              Nunc faucibus efficitur augue id luctus. Donec blandit sed nisl eu volutpat. Maecenas luctus, sapien sit amet aliquet pellentesque, velit arcu consectetur lorem, ut volutpat tellus neque sit amet neque. Proin tincidunt varius malesuada. Morbi molestie a metus vel malesuada.
            </li>
          </ul>
        </div>

        <div class="flex-item item-description">
          <img alt="Kitchen Stand" src="images/kitchen-stand.jpeg">
          <ul>
            <li>Kitchen Stand</li>
            <li>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, risus quis tempus ultrices, risus metus luctus metus, eget euismod nunc felis at arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent malesuada ex et laoreet consectetur. Pellentesque sit amet arcu porta, aliquet justo vitae.
            </li>
          </ul>
        </div>

        <div class="flex-item item-description">
          <img alt="TV Unit" src="images/tv-unit.png">
          <ul>
            <li>TV Unit</li>
            <li>
              In nec maximus lacus. Aenean eget magna sit amet massa pellentesque rhoncus eget in lectus. Nullam lobortis orci eu accumsan blandit. Sed efficitur interdum leo, vel cursus risus pellentesque at.
            </li>
          </ul>
        </div>

        <div class="flex-item item-description">
          <img alt="Work Table" src="images/work-table.png">
          <ul>
            <li>Work Table</li>
            <li>
              Nunc faucibus efficitur augue id luctus. Donec blandit sed nisl eu volutpat. Maecenas luctus, sapien sit amet aliquet pellentesque, velit arcu consectetur lorem, ut volutpat tellus neque sit amet neque. Proin tincidunt varius malesuada. Morbi molestie a metus vel malesuada.
            </li>
          </ul>
        </div>

      </div>

    </div>


    <footer>
      <p>©Copyright 2022. All rights reversed.
      <br/>CSC309, University of Toronto</p>
    </footer>

  </body>
</html>