Updated colored/shaded tutorial images, css adjustments

views/tutorial/html/10.erb

@@ -2,7 +2,7 @@
   <div class="dialogue">
     And that's it for Chapter One! Here's a new badge for your first ever version of victoria.neocities.org!
   </div>
-  <div class="dialogue" style="top: 60px;left:560px">
+  <div class="dialogue" style="top: 60px;left:580px; width:180px;">
     But you're not done yet! There's much in store for you: Adding colors, fonts, backgrounds, and more, all in chapter 2!
   </div>
 </div>

views/tutorial/html/3.erb

@@ -19,12 +19,12 @@
 
   <pre>
     <code class="html">
-      &lt;h1&gt;derpie test!&lt;/h1&gt;
-      &lt;h2&gt;&lt;/h2&gt;
-      &lt;h3&gt;&lt;/h3&gt;
-      &lt;h4&gt;&lt;/h4&gt;
-      &lt;h5&gt;&lt;/h5&gt;
-      &lt;h6&gt;&lt;/h6&gt;
+      &lt;h1&gt;Really important heading!&lt;/h1&gt;
+      &lt;h2&gt;Secondary heading&lt;/h2&gt;
+      &lt;h3&gt;Tertiary heading&lt;/h3&gt;
+      &lt;h4&gt;Other heading&lt;/h4&gt;
+      &lt;h5&gt;Minor heading&lt;/h5&gt;
+      &lt;h6&gt;Very minor heading&lt;/h6&gt;
     </code>
   </pre>
 </div>

views/tutorial/html/4.erb

@@ -1,8 +1,8 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png); background-size: 489px;">
-  <div class="dialogue">
-    Now let's add a paragraph of text below the heading (h1). Perhaps "Welcome to my website" or your favorite quote.
+<div class="comic" style="height: 600px; margin-top:1em; background-image: url(/img/tutorial/ch1pg4.png); background-size: 489px;">
+  <div class="dialogue" style="left: 70px; width: 170px">
+    Now let's add a paragraph of text below the <strong>h1</strong> heading. Perhaps "Welcome to my website" or your favorite quote.
   </div>
-  <div class="dialogue" style="left: 300px; top: 0px">
+  <div class="dialogue" style="left: 295px; top: -10px">
     To make a paragraph, surround your text with the <strong>&lt;p&gt;</strong> tag. So it should look something like
     <strong>&lt;p&gt;Hello!&lt;/p&gt;</strong>
   </div>

views/tutorial/html/5.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em; background-size: 476px;">
+<div class="comic" style="height: 540px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em; background-size: 476px;">
   <div class="dialogue">
     You're writing HTML! You're doing it! Everything you need to know is just another tag!
   </div>
@@ -7,7 +7,7 @@
 
     <p><strong>&lt;a href="http://neocities.org"&gt;Check out Neocities!&lt;/a&gt;</strong></p>
 
-    <p>Add a link to your favorite site to the end of the paragraph, right before the &lt;/p&gt; closing tag!</p>
+    <p>Add a link to your favorite site to<br> the end of the paragraph, right<br> before the &lt;/p&gt; closing tag!</p>
   </div>
 </div>
 

views/tutorial/html/7.erb

@@ -1,5 +1,5 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:4em">
-  <div class="dialogue" style="left: 0;top:-20px;">
+<div class="comic" style="height: 550px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:7em">
+  <div class="dialogue" style="left: 0;top:-50px;">
     Now maybe your website needs a list. Here's how an unordered list looks:
     <div style="text-align: left; font-weight: bold">
     &lt;ul&gt;<br>
@@ -9,10 +9,10 @@
     &lt;/ul&gt;
     </div>
   </div>
-  <div class="dialogue" style="left: 350px; top: 0;">
+  <div class="dialogue" style="left: 300px; top: -10px;">
     First, add a list to your page, but replace my favorite activities with your own!
   </div>
-  <div class="dialogue" style="left: 440px; top: 120px;">
+  <div class="dialogue" style="left: 400px; top: 90px;">
     Second, put an h2 header above the list with some kind of title, like "Interests."
   </div>
 </div>

views/tutorial/html/8.erb

@@ -1,5 +1,5 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg8.png); background-size: 489px;">
-  <div class="dialogue">
+<div class="comic" style="height: 530px; background-image: url(/img/tutorial/ch1pg8.png); background-size: 489px; margin-top:1em">
+  <div class="dialogue" style="top: 50px; left: 0; width: 380px">
     Now add a link to one of your list items. If nested properly, it should look something like this:
 <br><strong>&lt;li&gt;&lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;&lt;/li&gt;</strong>
   </div>

views/tutorial/html/9.erb

@@ -1,12 +1,12 @@
-<div class="comic" style="height: 650px; background-image: url(/img/tutorial/ch1pg9.png); background-size: 481px">
-  <div class="dialogue">
+<div class="comic" style="margin-top: 3em; height: 650px; background-image: url(/img/tutorial/ch1pg9.png); background-size: 481px">
+  <div class="dialogue" style="top: 0px; width: 200px">
     Good work! Everything you've written has been saved to index.html, which is the first web page people see when they <a href="<%= current_site.uri %>">visit your site</a>.
   </div>
   <div class="dialogue" style="left: 275px;top: 190px">
     You can find and edit index.html by visiting your <a href="/dashboard">Neocities dashboard</a>.
   </div>
   <div class="dialogue" style="left: 280px;top: 580px">
-    A cheat sheet of all the tags you've learned can be found in the tutorial section.
+    <!-- A cheat sheet of all the tags you've learned can be found in the tutorial section. -->
   </div>
 </div>