diff --git a/index.html b/index.html
new file mode 100755
index 0000000..f7cb2ab
--- /dev/null
+++ b/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>IACS CSS Zen Garden Starter</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<body id="css-zen-garden">
+  <div class="page-wrapper">
+    <header role="banner">
+      <h1><span class="iacs">IACS</span> CSS Zen Garden</h1>
+      <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
+    </header>
+    <section class="intro" id="zen-intro">
+
+      <div class="summary" id="zen-summary" role="article">
+        <p>
+          This project is inspired by David Shea's
+          <a href="http://www.csszengarden.com/">CSS Zen Garden</a>,
+          a webpage from the early days of CSS that sought
+          to show designers just how powerful this new
+          language was.
+        </p>
+        <p>As you work on this project, you can create up
+          to 3 different designs for this template, showing
+          off your design skills. Once we are done, your
+          teacher will work to put all of the class designs
+          into a single gallery so we can enjoy them
+          as a class.</p>
+      </div>
+
+      <div class="preamble" id="zen-preamble" role="article">
+        <h3>The Road to Enlightenment</h3>
+        <p>In your early projects, you inserted style directly into your
+          HTML with <code>style=</code> tags. In the early days of the web,
+          coders were forced to abuse the <code>&lt;table&gt;</code> tag to
+          create side-by-side layouts.</p>
+        <p>We must clear the mind of the past.</p>
+        <p>The CSS Zen Garden invites you to relax and focus all your efforts
+          on a single <code>style.css</code> file, working in a single
+          language: <b style="css">Cascading Style Sheets</b>.</p>
+        </p>
+        <p>Create a dynamic and beautiful layout using only CSS and
+          show it off to your friends.
+        </p>
+      </div>
+    </section>
+
+    <main class="main supporting" id="zen-supporting" role="main">
+      <div class="explanation" id="zen-explanation" role="article">
+        <h3>So What is This About?</h3>
+        <p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen
+          Garden aims to excite, inspire, and encourage participation.</p>
+        <p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and
+          total control over the style of a hypertext document. This page is
+          designed so that clicking on one of the links to a stylesheet will change
+          the CSS, but leave the HTML intact.
+        </p>
+        <p>When we are done, we will have radically different designs
+          achieved with identical HTML. We will be many and also one.
+          Diverse and yet the same. United, but distinct.
+        </p>
+      </div>
+
+      <div class="participation" id="zen-participation" role="article">
+        <h3>Rules of the Garden</h3>
+        <p>You may modify the style sheet in any way you wish, but not the
+          <abbr title="HyperText Markup Language">HTML</abbr>.
+          This may seem daunting at
+          first, but breathe deeply, study CSS, and you will find the way to web
+          enlightenment.
+        </p>
+      </div>
+
+      <div class="requirements" id="zen-requirements" role="article">
+        <h3>Requirements</h3>
+        <p>To complete this project, you must do the following:</p>
+        <ul>
+          <li>Create at least one beautiful design.</li>
+          <li>Make the design selector menu beautiful and usable.</li>
+          <li>Use images and color wisely in your design.</li>
+
+        </ul>
+        <h4>Honors requirements</h4>
+        <ul>
+          <li>Make your designs
+            <a class="responsive" href="https://www.w3schools.com/html/html_responsive.asp">responsive</a>.
+          </li>
+          <li>Create 3 unique designs using at least two different approaches
+            to layout.</li>
+        </ul>
+
+      </div>
+    </main>
+
+    <aside class="sidebar" role="complementary">
+      <div class="wrapper">
+
+        <div class="design-selection" id="design-selection">
+          <h3 class="select">Select a Design:</h3>
+          <nav role="navigation">
+            <ul>
+              <li>
+                <a href="#default" class="design-name">
+                  Boring Default
+                </a> by
+                <a href="https://www.tomhinkle.net">
+                  Mr. Hinkle
+                </a>
+              </li>
+              <li>
+                <a href="#avery-space" class="design-name">
+                  Space
+                </a> by
+                <a href="#">
+                  Avery K
+                </a>
+              </li>
+              <li>
+                <a href="#owenk" class="design-name">
+                  Bold Lines
+                </a> by
+                <a href="#">
+                  Owen K
+                </a>
+              </li>
+              <li>
+                <a href="#23-julian-cyberpunk" class="design-name">
+                  Cyberpunk
+                </a> by
+                <a href="https://remarkable-pithivier-572d14.netlify.app/">
+                  julian-henry
+                </a>
+              </li>
+              <li>
+                <a href="#ar-tree" class="design-name">
+                  Fall Tree
+                </a> by
+                <a href="#">
+                  Aarav Patel
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <div class="design-archives" id="design-archives">
+          <h3 class="archives">Archives:</h3>
+          <nav role="navigation">
+            <ul>
+              <li class="next">
+                <a href="#next">
+                  Next Designs <span class="indicator">&rsaquo;</span>
+                </a>
+              </li>
+              <li class="viewall">
+                <a href="#all" title="View every submission to the Zen Garden.">
+                  View All Designs </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <div class="zen-resources" id="zen-resources">
+          <h3 class="resources">Resources:</h3>
+          <ul>
+            <li class="view-css">
+              <a id="csslink" href="style.css" title="View the source CSS file of the currently-viewed design.">
+                View This Design&#8217;s <abbr title="Cascading Style Sheets">CSS</abbr> </a>
+            </li>
+            <li>
+              <a href="https://www.w3schools.com/css/css_intro.asp">
+                W3 Schools Intro to CSS
+              </a>
+            </li>
+            <li>
+              <a href="https://www.w3schools.com/css/css_grid.asp">
+                A guide to the grid
+              </a>
+            </li>
+            <li>
+              <a href="https://fonts.google.com">
+                Google Fonts
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </aside>
+  </div>
+</body>
+<!-- partial -->
+  
+</body>
+</html>
diff --git a/style.css b/style.css
new file mode 100755
index 0000000..a2b4f6f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,90 @@
+@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+@font-face {
+  font-family: GoD;
+  src: url(https://git.lainiwakura.xyz/uncreativecultist/PersonalStorage/raw/branch/main/GoodOldDos/Good%20Old%20DOS.ttf);
+}
+
+.iacs {
+  color: #0033a0;
+  text-shadow: 3px 3px 3px #c6093b;
+}
+h1 {
+  font-family: "Oswald", sans-serif;
+  text-decoration: underline;
+  text-decoration-color: #0033a0;
+  color: #c6093b;
+}
+
+h2 {
+  font-family: "Oswald", sans-serif;
+}
+
+body {
+  /* no idea where this image originally came from, but as far as i can tell, the oldest instance of it is from angelfire back in 2008.*/
+  background-image: url("https://rivendell.neocities.org/backgrounds/abstract1.jpg");
+}
+
+.page-wrapper {
+  max-width: 950px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #c5e9fa;
+  border-style: solid;
+  border-color: #83bede;
+  padding: 25px 25px 25px 25px;
+}
+
+.sidebar {
+  background-color: lightblue;
+  border-style: dotted;
+  border-color: #6ca5c4;
+  padding: 25px 25px 25px 25px;
+}
+
+.page-wrapper {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "content  sidebar"
+    "content2 content2";
+}
+
+header {
+  grid-area: header;
+}
+.intro {
+  grid-area: content;
+}
+main {
+  grid-area: content2;
+}
+aside {
+  grid-area: sidebar;
+}
+
+/* The following is the CSS for buttons at the bottom of the site. Made with assistance from GPT-4o by OpenAI. https://chatgpt.com/share/67532b75-75f0-8009-951a-798c927c13e4 */
+
+#zen-requirements::after {
+  content: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
+  color: #000;
+  color: rgba(0, 0, 0, 0);
+  /* this is a HORRIBLE solution, but forwhatever godforsaken reason, this WONT display without text in the content. So we give it what it wants, but then hide it. */
+  font-size: 25px;
+  position: relative;
+  bottom: 0;
+  right: 0;
+  width: 900px;
+  height: 31px;
+  background-image: url("https://git.lainiwakura.xyz/uncreativecultist/PersonalStorage/raw/branch/main/Gifs/gif.gif"); /* Set your image URL */
+  background-size: contain; /* Ensures the image retains its original size */
+  background-repeat: no-repeat; /* Prevents the image from repeating */
+  image-rendering: pixelated; /* Preserves pixel art sharpness */
+  z-index: 9999; /* Ensures it is above all other elements */
+}
+
+/* ATTRIBUTIONS:
+
+"Good Old DOS" typeface is created by morderdrakonovich and was labeled as Public Domain, however, It's a good font and he deserves credit.
+
+*/
\ No newline at end of file
