Nice home page, cool stuffs.

public/about.html

@@ -36,7 +36,7 @@
             </li>
         </ul>
     </div>
-    <div id="main">
+    <div>
         <div id="content" class="container">
             <div id="content-title">
                 <h1 class="big-title text-center">What is this?</h1>

public/index.html

@@ -35,9 +35,20 @@
             </li>
         </ul>
     </div>
-    <div class="main">
-        <div id="content" class="container">
-
+    <div class="main container">
+        <div class="row">
+            <div class="side-txt">
+                <div class="text-title text-center" style="padding-top: 15px;">
+                    <h1 class="m-title">How to get started:</h1>
+                </div>
+                <div class="text-content">
+                    <p style="position: relative; padding-left: 10px; padding-right: 10px;">
+                        Head over to the 'Generate graphs' page and enter the username of the user you want to generate your graph around.
+                    </p>
+                </div>
+            </div>
+            <img class="side-img img-fluid" src="./img/graphExample.png" />
         </div>
+    </div>
 </body>
 </html>

public/style.css

@@ -51,6 +51,16 @@
     font-weight: normal;
     font-size: 150%;
 }
+.text-title {
+    height: 60px;
+    background-color: rgb(208, 208, 208);
+    border-radius: 20px 0px 0px 0px;
+}
+.text-content {
+    height: 335px;
+    background-color: rgb(242, 242, 242);
+    border-radius: 0px 0px 0px 20px;
+}
 .nav-sep {
     position: relative;
     left: 10px;
@@ -71,6 +81,21 @@
     color: rgb(250, 152, 33);
     text-decoration: none;
 }
+.side-img {
+    display: grid;
+    position: relative;
+    width: 50%;
+    border-radius: 0px 20px 20px 0px;
+}
+.side-txt {
+    display: grid;
+    position: relative;
+    width: 50%;
+}
+.main {
+    position: relative;
+    top: 20px;
+}
 body {
     background-color: #232323;
 }