web-dev-learning/page13-CSSopacityandalpha.html at main · JordanPicton/web-dev-learning · 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
<!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>Opactiy and Alpha</title>
   <link rel="stylesheet" href="/styles/opacityandalpha.css">
</head>

<body>
   <header>
      <h1>Opactiy and Alpha</h1>
      <nav>
         <ul>
            <li><a href="page1-agriculture.html">Home</a></li>
         </ul>
      </nav>
      <hr>
   </header>
   <main>
      <section>
         <div id="rgba"></div>
      </section>
      <section>
         <div id="opacity">
            <img
               src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"
               alt="Placeholder Image">
            <div id="testopac">
               <p>
                  I am text within the div of id testopac which is nested within the parent div element of id opacity.
               </p>
            </div>
         </div>
      </section>
   </main>
   <footer>

   </footer>
</body>

</html>