webdev-practice/index.html at main · runeru/webdev-practice · 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
<!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" />

    <meta name="description" content="How to live a life in Thailand" />
    <meta
      name="keywords"
      content="Thailand, blog, starting a new life, how to live in Thailand"
    />
    <meta name="author" content="Rune" />

    <link rel="stylesheet" href="/dist/css/main.css" />

    <title>A Thai Life</title>
  </head>
  <body>
    <header id="mainHeader">
      <div class="container">
        <h1>A Thai Life</h1>
      </div>
    </header>

    <nav id="mainNav">
      <div class="container">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Shop</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

    <section id="jumbo">
      <div class="container">
        <h1>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium,
          itaque.
        </h1>
      </div>
    </section>

    <div class="container">
      <aside id="sidebar">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga debitis
          consequatur architecto delectus dolorum ducimus fugit cum quae eveniet
          repellendus!
        </p>
      </aside>
      <section id="main">
        <h2>Section Title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia eum
          labore itaque facilis nesciunt reprehenderit, debitis quis aperiam
          repellat accusamus sequi odit asperiores, ut omnis cum natus ea?
          Temporibus, dolor. Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Officia eum labore itaque facilis nesciunt reprehenderit,
          debitis quis aperiam repellat accusamus sequi odit asperiores, ut
          omnis cum natus ea? Temporibus, dolor. Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Officia eum labore itaque facilis
          nesciunt reprehenderit, debitis quis aperiam repellat accusamus sequi
          odit asperiores, ut omnis cum natus ea? Temporibus, dolor. Lorem ipsum
          dolor sit amet consectetur adipisicing elit. Officia eum labore itaque
          facilis nesciunt reprehenderit, debitis quis aperiam repellat
          accusamus sequi odit asperiores, ut omnis cum natus ea? Temporibus,
          dolor.
        </p>
        <h3>Psudo Elements</h3>
        <p>
          It's basically just an element before a paragraph, link, heading or
          whatever. And after also. Targeted in css like ::before and ::after
        </p>
        <p id="pseudoTest">See the css styling on this paragraph</p>
        <p id="pseudoHover">Also works on hover</p>
      </section>
    </div>
    <div class="container">
      <section id="json-test">
        <h2>Testing JSON</h2>
        <ul id="list"></ul>
        <script>
          fetch("data.json")
            .then((resp) => resp.json())
            .then((json) => {
              // console.log(json.shoppingList[0]);
              var list = json.users[1].shoppingList;
              var output = "";
              for (var i = 0; i < list.length; i++) {
                output += "<li>" + list[i] + "</li>";
                document.getElementById("list").innerHTML = output;
              }
            });
        </script>
      </section>
    </div>
    <section id="learnFlexbox">
      <h2>Learn flexBox</h2>
      <div class="flexbox-container">
        <div class="flexbox-item item-1"></div>
        <div class="flexbox-item item-2"></div>
        <div class="flexbox-item item-3"></div>
      </div>
    </section>
    <footer id="mainFooter">
      <p>Copyright &copy; 2023 A Thai Life</p>
    </footer>
  </body>
</html>