websiteClassyTemplate/page2.html at master · 3to1null/websiteClassyTemplate · 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
134
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <title>Opties</title>
  </head>
  <body id="page2">
      <div class="smallNav">
        <div id="cover" class="cover hidden"></div>
        <ul class="smallNav hidden">
          <li><a href="index.html" class="">Home</a></li>
          <li><a href="page2.html">Options</a></li>
          <li><a href="page3.html">Contact</a></li>
        </ul>
      </div>
        <header class="paralax">
                <div class="menu">
                    <a href="index.html">
                    <div class="logoDiv">
                        <span>Nathan</span>
                    </div>
                    </a>
                    <ul>
                      <li class=""><a href="index.html" class="">Home</a></li>
                      <li class="active"><a href="page2.html">Options</a></li>
                      <li><a href="page3.html">Contact</a></li>
                      <!-- Voeg hier extra 'li' tussen voor extra optie -->
                    </ul>
                    <div id="nav-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            <div class="titleDiv">
                <p class="kopTekst hover red">Header koptekst</p>
                <span class="divider small"></span>
                <p class="subTekst">Header subtekst</p>
            </div>
        </header>
      <div class="container">
        <main>
            <section>
                <h1 class="red hover">
                    Standaard classes
                </h1>
            </section>
            <div class="divider"></div>
            <section class="2">
                <h3>Dividers</h3>
                <p class="capitalize">
                    Dividers kunnen worden gebruikt door middel van een div met class="divider". Dividers zijn handig voor het opdelen van een pagina. Een divider is standaard even lang als het object dat hij splitst. Als je hem kleiner wil hebben voeg je ook nog de class 'small' toe. De divider boven dit kopje is normaal en de divider onder deze paragraaf is 'small'.
                </p>
            </section>
                <div class="divider small"></div>
            <section class="3">
                <h3 class="red hover">text opmaak</h3>
                <p class="capitalize">
                    voor opmaak van tekst en andere items zijn al veel standaard classes gebruikt, het is aangeraden deze te gebruiken in plaats van zelf classes te maken.
                </p>
                <ul class="points color_dark_red">
                    <li>
                        <span>
                            capitalize , dit geeft een extra grote letter aan de eerste letter van dit object.
                        </span>
                    </li>
                    <li>
                        <span>
                            points , dit zet punten voor items in lijsten.
                        </span>
                    </li>
                    <li>
                        <span>
                            color_red en color_dark_red ,  deze maken tekst en icoontjes lichtrood of donkerrood.
                        </span>
                    </li>
                    <li class="">
                        <span class="">
                            hover red ,  bij het toevoegen van deze 2(!) classes wordt de tekst rood als je er over heen gaat. probeer het bijvoorbeeld maar op het kopje hierboven!
                        </span>
                    </li>
                </ul>
            </section>
            <div class="divider small"></div>
            <section class="4">
                <h3>headers</h3>
                <p class="capitalize">
                    Er zijn 5 verschillende grote headers, 'H1' is de grootste en 'H5' de kleinste. Voor grote kopjes zoals het kopje helemaal boven is 'H1' gebruikt, voor standaard kopjes wordt 'H3' gebruikt. Headers worden automatisch omgezet naar hoofdletters.
                </p>
                <h1>
                    H1 header
                </h1>
                <h2>
                    h2 header
                </h2>
                <h3>
                    h3 header
                </h3>
                <h4>
                    h4 header
                </h4>
                <h5>
                    h5 header
                </h5>
            </section>
            <div class="divider small"></div>
            <section>
                <h3>quotes</h3>
                <p class="capitalize">
                    Als je 1 of 2 zinnen van je tekst, of een quote van iemand die iets relevants over je tekst gezegd heeft, eruit wil laten springen kan je de blockquote tag gebruiken. Dit ziet er zo uit:
                </p>
                <blockquote>
                    Dit is hoe een blockquote eruit ziet. Een blockquote kan een of meerdere regels zijn.
                </blockquote>
            </section>
        </main>
      </div>
      <footer>
            <div class="titleDiv">
                <p class="kopTekst">Footer tekst</p>
                <span class="divider small"></span>
                <p class="subTekst">
                    <a class="hover red" href="#">Facebook</a>
                    <a class="hover red" href="#">Twitter</a>
                    <a class="hover red" href="#">Youtube</a>
                </p>
            </div>
      </footer>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <script src="js/global.js"></script>
  </body>
</html>