WD4E-JavaScript-Gallery/index.html at main · chuminhthuan/WD4E-JavaScript-Gallery · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <h1 id="top">Colors!</h1>
  </header>

  <main>
    <h2>Basic Media Queries</h2>
    <p>In this assignment you will add two media queries to the css file.</p>
    <ul>
      <li>The first media query should trigger at 772px and change the layout of the divs to be 45% of the viewport width. The images should have a maximum height of 30% of the viewport height.</li>

      <li>The second media query should trigger at 998px and change the layout of the divs to be 30% of the viewport width.</li>
    </ul>
    <p>You will need to make additional changes to ensure that the divs appear next to each other and that the images are contained within the divs.  Some of these properties include display, width and max-height.</p>

    <div>
      <img src="images/Red.jpeg" alt="Red" width="200">
      <p class = "label">Red</p>
    </div>
    <div>
      <img src="images/Orange.png" alt="Orange" width="200">
      <p class = "label">Orange</p>
    </div>
    <div>
      <img src="images/Yellow.png" alt="Yellow" width="200">
      <p class = "label">Yellow</p>
    </div>
    <div>
      <img src="images/Green.png" alt="Green" width="200">
      <p class = "label">Green</p>
    </div>
    <div>
      <img src="images/Blue.png" alt="Blue" width="200">
      <p class = "label">Blue</p>
    </div>
    <div>
      <img src="images/Indigo.jpeg" alt="Indigo" width="200">
      <p class = "label">Indigo</p>
    </div>
    <div>
      <img src="images/Purple.png" alt="Purple" width="200">
      <p class = "label">Purple</p>
    </div>
    <div>
      <img src="images/Pink.jpeg" alt="Pink" width="200">
      <p class = "label">Pink</p>
    </div>
    <div>
      <img src="images/White.png" alt="White" width="200">
      <p class = "label">White</p>
    </div>
    </div>
  </main>

  <footer>
    <a href="#top">Jump to the Top</a>
  </footer>
</body>

</html>