feat: Finished about page layout

public/css/about.css

@@ -0,0 +1,48 @@
+.title {
+  display: flex;
+  flex-direction: column;
+}
+.title h1 {
+  font-size: 3rem;
+  font-weight: 300;
+  text-align: center;
+  margin: 0 2rem 2rem 2rem;
+}
+.title img {
+  width: 100%;
+}
+.content {
+  padding: 2rem 2rem;
+  font-size: 1.25rem;
+}
+
+.alternating-background-container > :nth-child(2n-1) {
+  background-color: var(--primary-alternating-color);
+}
+.alternating-background-container > :nth-child(2n) {
+  background-color: var(--secondary-alternating-color);
+}
+.alternating-background-container > div {
+  padding: 2rem 0;
+}
+.alternating-primary-brown {
+  --primary-alternating-color: rgba(var(--brown), .21);
+}
+
+@media (min-width: 992px) {
+  .title {
+    flex-direction: row;
+  }
+  .title-reverse {
+    flex-direction: row-reverse;
+  }
+  .title > div {
+    width: 50%;
+  }
+  .content {
+    padding: 0 2rem;
+  }
+  .alternating-background-container > div {
+    padding: 4rem 0;
+  }
+}

public/css/style.css

@@ -340,6 +340,11 @@ footer ul li:last-child {
   margin-left: 2rem;
 }
 
+.super-center {
+  display: grid;
+  place-items: center;
+}
+
 /* -xs */
 @media (min-width: 576px) {
   .container {

src/about.liquid

@@ -3,11 +3,37 @@ layout: layout.liquid
 title: About Cyper
 css: about.css
 ---
+<div class="alternating-background-container alternating-primary-brown">
   <div>
-  <div class="container">
+    <div class="title container">
-    <h1>What is this place?</h1>
+      <div class="super-center">
+        <h1>What Is This Place?</h1>
+      </div>
+      <div>
+        <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Placeholder">
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="content container">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit cum aperiam quibusdam quia repellat iste,
+      inventore magnam nesciunt consectetur? Quidem, ducimus qui quis velit repellendus exercitationem distinctio fuga a necessitatibus!
+    </div>
+  </div>
+  <div>
+    <div class="title title-reverse container">
+      <div class="super-center">
+        <h1>About Me</h1>
+      </div>
+      <div>
+        <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Placeholder">
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="content container">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit cum aperiam quibusdam quia repellat iste,
+      inventore magnam nesciunt consectetur? Quidem, ducimus qui quis velit repellendus exercitationem distinctio fuga a necessitatibus!
     </div>
-  <div class="container">
-    <h1>About me</h1>
   </div>
 </div>