-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (143 loc) · 6.09 KB
/
index.html
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
135
136
137
138
139
140
141
142
143
<html>
<head>
<title>Lewis's Homepage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Content-Security-Policy" content="default-src 'self'">
<meta name="description" content="Lewis's Personal Blog">
<meta name="author" content="Lewis Steentjes">
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<div id="banner">
<h1>Lew's Super Duper Blog</h1>
</div>
<div id="navigation-bar">
<a href="/index.html">Home</a> |
<a href="/blog/identity-values.html">Values</a> |
<a>Empty Link</a>
</div>
<div class="main-column">
<div class="blog-post">
<h3><a href="/blog/foundations-reflections.html">Core Reflections</a></h3>
<p class="blog-date">8 Feb 2024</p>
<p>Reflecting on the core content learned during foundations.</p>
</div>
<div class="blog-post">
<h3><a href=/blog/te-whare-tapa-wha.html>Te Whare Tapa Whā</a></h3>
<p class="blog-date">4 February, 2024</p>
<p>My personal wellbeing plan using Tā Mason Durie’s Te Whare Tapa Whā model</p>
</div>
<hr class="solid">
<div class="blog-post">
<h3><a href="/blog/neuroplasticity.html">Neuroplasticity and The Growth Mindset</a></h3>
<p class="blog-date">4 February, 2024</p>
<p>Covering the topics of neuroplasticity and "the growth mindset". We go over the fundamentals of both and how they can impact our lives.</p>
</div>
<hr class="solid">
<div class="blog-post">
<h3><a href="/blog/problem-solving.html">Problem Solving</a></h3>
<p class="blog-date">2 February, 2024</p>
<p>An inspection on problem solving, techniques used to solve problems and how to deal with issues.</p>
</div>
<hr class="solid">
<div class="blog-post">
<h3><a href="/blog/emotional-intelligence.html">Emotional Intelligence</a></h3>
<p class="blog-date">27 January 2024</p>
<p>A brief introduction to the idea of EQ, as opposed to IQ and how it can be useful.</p>
</div>
<hr class="solid">
<div class="blog-post">
<h3><a href="/blog/javascript-dom.html">JavaScript DOM</a></h3>
<p class="blog-date">25 January 2024</p>
<p>A brief introduction to JavaScript, the DOM and a few of their features.</p>
</div>
<hr class="solid">
<div class="welcome-message">
<h3><a href="/blog/learning-plan.html">My Learning Plan</a></h3>
<p class="blog-date"> 18 January 2024</p>
<p>My learning plan going forward for my time at Dev Academy, and beyond</p>
</div>
<hr class="solid">
<div class="welcome-message">
<h3><a href="/blog/classes-vs-ids.html">Classes vs IDs</a></h3>
<p class="blog-date"> 18 January 2024</p>
<p>When are where should you use Classes vs IDs in your CSS projects? Click here to find out!</p>
</div>
<hr class="solid">
<div class="entry-post">
<h3><a href="/blog/te-houtaewa.html">Te Houetaewa</a></h3>
<p class="blog-date">10 November 2010</p>
<p>Te Houtaewa was the fastest runner of his day and played many pranks on his peoples enemies. One morning his mother wanted kumara for the hangi (earth oven) and asked Te Houtaewa to go to the gardens at Te Kao, a short distance away. He agreed to fetch the kumara and told his mother to prepare the hangi.</p>
</div>
<hr class="solid">
<div class="entry-post">
<h3>Watch out Below! </h3>
<p>Beneath this section is a testing area I used to experiment with using a bunch of different CSS features.</p>
<div style="padding: 100vw 0 0 0; background-color: black"></div>
</div>
<hr class="solid">
<div class="entry-post">
<h3>Dogs</h3>
<p>You've been <span class="fancy-text">waiting</span> for it.</p>
<p>You've been <span class="fancy-text">anticipating</span> it.</p>
<p>It's dog time.</p>
<img src="/images/pointy-ears-dog-baenji-1580328289.jpg" class="blog-pic" style="border-radius: 5px">
<p>Sorry, no list of all my favourite dogs, that's still to come at a later date.</p>
</div>
<hr class="solid">
<div class="entry-post">
<h3>Now What?</h3>
<p>Honestly, I'm not sure. I'm just trying to make this page longer such that I can scroll down to see if my navbar's sufficiently sticky.</p>
<p>How about a table?</p>
<div class="table-container">
<table class="xy-gene-table">
<tr>
<th>\</th>
<th>X</th>
<th>Y</th>
</tr>
<tr>
<th>X</th>
<td>XX</td>
<td>XY</td>
</tr>
<tr>
<th>Y</th>
<td>YX</td>
<td>YY</td>
</tr>
</table>
</div>
</div>
<hr class="solid">
<div class="entry-post">
<h3>Let's do a list</h3>
<p>Things I've added to this site:</p>
<ol>
<li>A responsively sized image</li>
<li>An ordered list</li>
<li>A table</li>
<li>Responsive styling, to adjust white space usage based on device width</li>
<li>Anchor links to other webpages</li>
<li>A sticky nav bar</li>
</ol>
</div>
<hr class="solid">
<div class="entry-post">
<h3>Trying Out Flexboxes</h3>
<div class="gallery">
<img src="/images/puppers/pup01.jpg" class="gallery">
<img src="/images/puppers/pup02.jpg" class="gallery">
<img src="/images/puppers/pup03.jpg" class="gallery">
<img src="/images/puppers/pup04.jpg" class="gallery">
<img src="/images/puppers/pup05.jpg" class="gallery">
<img src="/images/puppers/pup06.jpg" class="gallery">
<img src="/images/puppers/pup07.jpg" class="gallery">
<img src="/images/puppers/pup08.jpg" class="gallery">
<img src="/images/puppers/pup09.jpg" class="gallery">
</div>
</div>
</div>
</body>
</html>