feat: wrote new content

9 files changed, 77 insertions, 12 deletions

diff --git a/images/article.png b/images/article.png
new file mode 100644
index 0000000..fb2d2ba
--- /dev/null
+++ b/images/article.png
diff --git a/images/castor.png b/images/castor.png
new file mode 100644
index 0000000..e3af33c
--- /dev/null
+++ b/images/castor.png
diff --git a/images/ch4d.png b/images/ch4d.png
new file mode 100644
index 0000000..e7a9a71
--- /dev/null
+++ b/images/ch4d.png
diff --git a/images/fauux.png b/images/fauux.png
new file mode 100644
index 0000000..db858b2
--- /dev/null
+++ b/images/fauux.png
diff --git a/images/lucas.png b/images/lucas.png
new file mode 100644
index 0000000..16a0d08
--- /dev/null
+++ b/images/lucas.png
diff --git a/images/mesoscale.png b/images/mesoscale.png
new file mode 100644
index 0000000..0d8fa28
--- /dev/null
+++ b/images/mesoscale.png
diff --git a/images/sadgrl.png b/images/sadgrl.png
new file mode 100644
index 0000000..6e398b9
--- /dev/null
+++ b/images/sadgrl.png
diff --git a/index.css b/index.css
index 9b227ac..dad0ba9 100644
--- a/index.css
+++ b/index.css
@@ -12,9 +12,16 @@ h1 {
 }
 
 h2 {
+    padding: 10px;
     font-family: tintin;
 }
 
+h3 {
+    padding: 20px;
+}
+
+
+
 img {
     /* Ensured images don't go oversize */
     max-width: 80%;
@@ -32,8 +39,8 @@ p {
 
 #wrapper {
     /* This bit styles the content area and gives it a blur */
-    background-color: #2030e5;
-    box-shadow: 0px 0px 40px 40px #2030e5;
+    background-color: #206cb8;
+    box-shadow: 0px 0px 40px 40px #206cb8;
     padding: 10px;
     /* This bit makes it centred on big screens */
     max-width: 900px;
diff --git a/index.html b/index.html
index 43a761b..0d20377 100644
--- a/index.html
+++ b/index.html
@@ -14,12 +14,7 @@
 
             <article>
                 <!--TABLE OF CONTENTS ??-->
-                <!--goofy gifs-->
-                <!--random facts-->
-                <!--random quote(s)-->
-                <!--examples (links)-->
-                <!--vides/epuré bof bof paske pas de contenu-->
-                <!--ok not to have a lot of content + might take time-->
+
                 <h2 id="intro">Introduction - Have you ever been in front of a blank page ?</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,
@@ -27,7 +22,7 @@
                      your personal website.</p>
                 <p>In this guide I want to give tips about coming up with the content of your personal webpage.
                     Styling your website is something covered in many guides, and you can find plenty of inspiration just by lurking at other sites.
-                    + I think it's a lot more fun to fiddle with css for hours
+                    + I think it's a lot more fun to fiddle with css for hours.
                     But when it comes to writing some material, I'm back to school writing an essay, like what the hell this isn't school I should be having fun urgh
                 </p>
                 <p>Anyways I hope this will prove to be helpful, happy creating your online home !</p>
@@ -37,8 +32,8 @@
                     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></h2>
-                <h2>Okay see this is a great example:</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>
                     <p>I recently learned that it is possible to put bread in a magic box and thus doing so it can be found to be the case that indeed! Toast! TOAST! Its born from the box, its created from that firefly shadow realm of grooves and grids. My guide leads your forth, it shows the way to the toast and tells of times that may yet to come.</p>
@@ -80,6 +75,32 @@
                     <h4>Pasta - an example (sadly these aren't mine...):</h4>
                     <img src="images/pasta.jpeg" />
                 </div>
+                <p>If you prefer rice, or spinach, you can put mom's signature recipe (or your own) and share it to your online neighbors.</p>
+                <p>Recipes are just an example of what you can (should) put (I think Melon really wants Bob's almond tart recipe).
+                    Here's an uncurated list of things that fill space in a good way
+                </p>
+                <ul>
+                    <li>Recipes</li>
+                    <li>Goofy images and gifs (see <a href="https://momg.neocities.org">the Museum Of Modern Gifs</a> for an unlimited amount of public domain gifs)</li>
+                    <li>Random facts, about you, about stuff you know about (yes you do know sutff)</li>
+                    <li>Random quotes you like, or quotes that define you</li>
+                    <li>Links to your friends' and online neighbors' webpages</li>
+                    <li>Stuff you have made, like articles about stuff you wrote, showing off that cool computer magic thingy you've made work,
+                         that song you've composed (please send me the guitar tab hehe)...</li>
+                    <li>...</li>
+                </ul>
+
+                <h3>No way ?! Examples !!</h3>
+                <div class="example">
+                    <h3><a href="https://mesoscale.neocities.org/">mesoscale</a> - This one illustrates several point wow</h3>
+                    <img src="images/mesoscale.png" alt="mesoscale's website">
+                    <p>Here you have gifs, songs at the bottom, links to other people !!</p>
+                    <hr>
+                    <h3><a href="https://ratakor.com">Ratakor's website</a> - He's a friend of mine !</h3>
+                    <img src="images/article.png" alt="ratakor's website">
+                    <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>
                 <p>Let's first take some examples:</p>
                 <div class="example">
@@ -101,10 +122,47 @@
                 <p>I think the answer to "How much 'blank' space should there be ?" is debatable. Generally speaking,
                     there seems to be a tendency for big company websites to use some rather simplistic designs,
                     prefering some big empty pages with few huge texts and plain backgrounds, but I don't know, there's something wrong and unfriendly to it.
-                    On the contrary, if your website is supposed to be an expression of yourself, you wouldn't want the place to be mostly empty.</p>
+                    On the contrary, if your website is supposed to be an expression of yourself, you wouldn't want the place to be mostly empty.
+                    Always keep in mind that this space is you, so the process of building it is complex and the result tells you and the others about yourself.
+                </p>
                 <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.
+                </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">
+                    <h3><a href="https://fauux.neocities.org">Wired sound for wired people</a></h3>
+                    <img src="images/fauux.png">
+                    <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>
+                <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>
+                <div class="example">
+                    <h3><a href="https://mrchad.neocities.org/">Ch4d's page</a></h3>
+                    <img src="images/ch4d.png" alt="ch4d's site">
+                    <p>So this one's insanely goofy but see how much empty space there is and how un-empty this feels ?</p>
+                    <hr>
+                    <h3><a href="https://castorisdead.xyz">Castor's page</a></h3>
+                    <img src="images/castor.png" alt="castor's page">
+                    <p>Again, but more serious this time, notice spaces left and how normal it feels.</p>
+                </div>
+                <p>With those examples, you see that 'real'/relevant content isn't that important if you can substitute with useful blanks.</p>
+                <p>In addition to all that, remember that Rome wasn't built in a day, and so won't your page. Remember that
+                    this page is yours, this space is yours, this space is <big>YOU</big>, can you imagine if you had to build yourself first try ??
+                    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>
             </article>
         </div>
         <!-- <audio autoplay loop>