final content addition

2 files changed, 47 insertions, 10 deletions

diff --git a/index.css b/index.css
index dad0ba9..8f6af56 100644
--- a/index.css
+++ b/index.css
@@ -20,7 +20,10 @@ h3 {
     padding: 20px;
 }
 
-
+hr {
+    border: none;
+    border-top: dashed rgb(179, 242, 116);
+}
 
 img {
     /* Ensured images don't go oversize */
@@ -34,7 +37,7 @@ a {
 p {
     color: white;
     font-size: large;
-    padding-left: 10px;
+    padding-left: 20px;
 }
 
 #wrapper {
@@ -55,6 +58,21 @@ p {
     margin: 5px;
 }
 
+.toc {
+    background-color: rgb(49, 65, 90);
+    border: 2px double rgb(39, 232, 181);
+    border-radius: 25px;
+    padding: 10px;
+    margin: 5px;
+    width: fit-content;
+    margin-left: 40px
+}
+
+.toc li {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
 @font-face {
     font-family: tintin;
     src: url(fonts/tintin_talking.ttf);
diff --git a/index.html b/index.html
index 0d20377..f8414d9 100644
--- a/index.html
+++ b/index.html
@@ -13,9 +13,18 @@
             </header>
 
             <article>
-                <!--TABLE OF CONTENTS ??-->
-
-                <h2 id="intro">Introduction - Have you ever been in front of a blank page ?</h2>
+                <!--what your wallpaper says about you-->
+                <div class="toc">
+                    <h2>Table of contents</h2>
+                    <ol>
+                        <li><a href="#intro">Introduction - <small>Have you ever been in front of a blank page ?</small></a></li>
+                        <li><a href="#beginning">The "obvious" - <small>What's obvious isn't always obvious</small></a></li>
+                        <li><a href="#filler">Filling blanks - <small>Goofy stuff and other stuff (2 much stuff)</small></a></li>
+                        <li><a href="#debate">Leaving blank spaces - <small>How ok is it ?</small></a></li>
+                        <li><a href="#conclusion">Conclusion - <small>Was I good ?</small></a></li>
+                    </ol>
+                </div>
+                <h2 id="intro">Introduction - <small>Have you ever been in front of a blank page ?</small></h2>
                 <p>Yeaaaaah this is the feeling I'm talking about: this void you have to fill, this immaculate sheet you need to stain,
                     this frightening emptiness you are staring at, the blank page. You have probably already faced it,
                      be it a sheet of paper, words that don't come to your mind, or in our (rather specific, I know,) case, 
@@ -32,7 +41,7 @@
                     I don't mean putting like all your info, this is still the internet so protect yourself, but just the basics, like your name/pseudonym, your hobbys/interests, why you chose that pseudonym,
                     what got you to build your house on the internet, links to some friends or people you admire 's websites...
                 </p>
-                <h2 id="filler">Filling blanks - <small>goofy stuff and other stuff (2 much stuff)</small></h2>
+                <h2 id="filler">Filling blanks - <small>Goofy stuff and other stuff (2 much stuff)</small></h2>
                 <h3>Okay see this is a great example:</h3>
                 <div class="example">
                     <h3>How to make toast:</h3>
@@ -101,7 +110,7 @@
                     <p>Here's an example of an article you could publish on your website (google rss feeds)</p>
                 </div>
 
-                <h2 id="debate">Leaving blank spaces - <small>how ok is it ?</small></h2>
+                <h2 id="debate">Leaving blank spaces - <small>How ok is it ?</small></h2>
                 <p>Let's first take some examples:</p>
                 <div class="example">
                     <h3><a href="https://www.ibanez.com/usa/">Ibanez' website</a></h3>
@@ -128,21 +137,24 @@
                 <h3>About background contents</h3>
                 <p>While it shouldn't represent the major part of what catches the eye, your background - be it colors, image(s), gif(s) - gives the general colorscheme of your page (mostly, but this is about styling),
                     and fills space in its own way. This way you can exploit your page's background to fill in space, but always keep in mind what you want that general description of you to feel.
+                    This is kind of like what your wallpaper says about you
                 </p>
                 <h3>About side blanks</h3>
                 <p>Side blanks are everywhere, like just look at a random page listed on neocities and there'll be side blanks :</p>
                 <div class="example">
                     <h3><a href="https://sadgrl.online">sadgrl.online</a></h3>
                     <img src="images/sadgrl.png">
+                    <hr>
                     <h3><a href="https://fauux.neocities.org">Wired sound for wired people</a></h3>
                     <img src="images/fauux.png">
+                    <hr>
                     <h3><a href="https://anlucas.neocities.org/">A.N Lucas</a></h3>
                     <img src="images/lucas.png">
                 </div>
                 <p>You get the point. While it kinda feels like unfilled space (obviously as long as you don't overdo it), using thse side blanks unpacks your page, and makes it more readable, while concentrating content on one part of it (easier on the eyes). Plus you can add some goofy gifs in this newly allocated space !
                     This brings us to the next point: It <u>is</u> ok to leave blank spaces.
                 </p>
-                <h2>Why it's okay to leave blank spaces - <small>and why it's supposed to take time</small></h2>
+                <h2>Why it's okay to leave blank spaces - <small>And why it's supposed to take time</small></h2>
                 <p>As said above, leaving unfilled space is ok, if you chose a fitting background, you can leave empty space and free your page of
                     packed together content and unreadable sections. Example:
                 </p>
@@ -161,8 +173,15 @@
                     Can you imagine defining yourself and sticking and relating to that description of yourself forever ? I know I couldn't, and I'm glad there's room for improvement, modification, fine tuning, adjustments, completely starting over if want to !
                     And more than that, I know there's time.
                 </p>
-                <h2 id="conclusion">Conclusion - <small>was I good ?</small></h2>
-                <p>To finish off this article, I want to</p>
+                <h2 id="conclusion">Conclusion - <small>Was I good ?</small></h2>
+                <p>To finish off this article, I want to emphasize the important points:
+                    Always keep in mind that the content of your website is what represents you, this can serve as a guideline when you are creating it.
+                    How you fill space also illustrate how you exist and how you think, so take that into account.
+                    Because this is yourself you are painting on that canvas, I do think that matter should come naturally/instinctively, and that it <s>may</s> will take time.
+                    More importantly, the content of your website <u>is</u> supposed to evolve over time.
+                    This space might bring you to a new judgement of yourself, so be ready to accept this vision of yourself.
+                </p>
+                <p>This is a lot of serious talk, but most of all, just take it easy !</p>
             </article>
         </div>
         <!-- <audio autoplay loop>