From a6a68a852a69506adddf0ab58e65a21bff7e6b89 Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+rpi3@gmail.com>
Date: Tue, 22 Nov 2022 04:46:18 -0500
Subject: [PATCH] Make some snippet changes fro your-first-webpage

Wanted the site to look a tiny bit nicer, and add some
additional functionality (in form on layout-wrapper div)
---
 guides/your-first-webpage.html | 39 +++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/guides/your-first-webpage.html b/guides/your-first-webpage.html
index 54f2607..0b4d0a9 100644
--- a/guides/your-first-webpage.html
+++ b/guides/your-first-webpage.html
@@ -65,19 +65,21 @@
 				<p>So now we'll add some visible content, to make a <em>real</em> webpage, and not just a blank page.</p>
 
 				<p>Between the <b>body</b> tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.</p>
-<pre><code>&lt;h1&gt;Hi, I'm &lt;em&gt;Aney&lt;/em&gt;&lt;/h1&gt;
-&lt;p&gt;Welcome to my site, it's pretty cool!&lt;/p&gt;
-&lt;h2&gt;Skills&lt;/h2&gt;
-&lt;p&gt;I have an assortment of &lt;em&gt;skills&lt;/em&gt;, including:&lt;/p&gt;
-&lt;ul&gt;
-	&lt;li&gt;Being swag&lt;/li&gt;
-	&lt;li&gt;Getting the bag&lt;/li&gt;
-&lt;/ul&gt;
-&lt;h2&gt;Portfolio&lt;/h2&gt;
-<!-- Any image on the internet can go here -->
-&lt;img src="https://via.placeholder.com/200x200/"&gt;
-&lt;img src="https://via.placeholder.com/200x200/"&gt;
-&lt;img src="https://via.placeholder.com/200x200/"&gt;</pre></code>
+<pre><code>&lt;div class="layout-wrapper"&gt;
+	&lt;h1&gt;Hi, I'm &lt;em&gt;Aney&lt;/em&gt;&lt;/h1&gt;
+	&lt;p&gt;Welcome to my site, it's pretty cool!&lt;/p&gt;
+	&lt;h2&gt;Skills&lt;/h2&gt;
+	&lt;p&gt;I have an assortment of &lt;em&gt;skills&lt;/em&gt;, including:&lt;/p&gt;
+	&lt;ul&gt;
+		&lt;li&gt;Being swag&lt;/li&gt;
+		&lt;li&gt;Getting the bag&lt;/li&gt;
+	&lt;/ul&gt;
+	&lt;h2&gt;Portfolio&lt;/h2&gt;
+	<!-- Any image on the internet can go here -->
+	&lt;img src="https://via.placeholder.com/200x200/"&gt;
+	&lt;img src="https://via.placeholder.com/200x200/"&gt;
+	&lt;img src="https://via.placeholder.com/200x200/"&gt;
+&lt;/div&gt;</pre></code>
 
 				<p>Now if you refresh the webpage, tada! We have content.</p>
 
@@ -94,15 +96,18 @@
 	height: 100%;
 	font-size: 12px;
 	background: #67aacc;
-	background: linear-gradient(0, #020024 0%, #10106b 10%, #67aacc 35%, #8cecf5 60%, #fff 100%);
+	background: linear-gradient(0, #67aacc 0%, #8cecf5 35%, #8cecf5 55%, #fff 100%);
 }
 body{
-	margin: 0 auto;
-	max-width: 980px;
-	padding: 4px 12px;
+	margin: 0;
 	text-align: center;
 	font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
 }
+.layout-wrapper{
+	margin: 0 auto;
+	padding: 4px 12px;
+	max-width: 980px;
+}
 h1{
 	font-size: 22px;
 	background-color: #10106b;