Merge pull request #3 from mogrene/first-draft

*
mogrene · Dec 20, 2024 · 852714a · 852714a
2 parents a970e81 + 2fbf764
commit 852714a
Show file tree

Hide file tree

Showing 7 changed files with 401 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/index.html b/index.html
@@ -0,0 +1,99 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./media/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Mogrene</title>
+  </head>
+  <body>
+    <header>
+      <nav>
+        <a href="/">Mogrene</a>
+
+        <corner>
+            <a href="#about">About</a>
+            <a href="#services">Services</a>
+            <a href="#projects">Projects</a>
+            <a href="#contact">Contact</a>
+        </corner>
+      </nav>
+    </header>
+
+    <main>
+        <section class="home">
+        <h1>
+            Transforming digital experiences with mogrene solutions
+        </h1>
+        </section>
+
+        <p class="section-title" id="about">About</p>
+        <section class="about">
+        <h2>
+            The internet has a huge environmental impact. We're working to reduce it and helping others to do the same.
+        </h2>
+        <h5>
+            Mogrene is a small research and development studio focused on delivering resource-sensitive tools and minimally 
+            designed systems with low carbon intensity. We aim to contribute to building a more resilient future.
+        </h5>
+        </section>
+
+        <p class="section-title" id="services">Services</p>
+        <section class="services">
+            <h3>Product and service design</h3>
+            <h3>Research and development</h3>
+            <h3>System optimisation</h3>
+            <h3>Technical consultation</h3>
+        </section>
+
+        <p class="section-title" id="projects">Projects</p>
+        <section class="projects">
+            <a class="project" href="https://cssential.mogrene.com/" target="_blank">
+                <div class="project-box">
+                    <div class="cssential-icon"></div>
+                </div>
+                <h4>CSSential</h4>
+                <p>Minimally designed, CSS-only UI components that developers can easily copy and paste into their apps.</p>
+            </a>
+            <a class="project" href="https://ecoloader.com/" target="_blank">
+                <div class="project-box">
+                    <div class="ecoloader-icon"></div>
+                </div>
+                <h4>Ecoloader</h4>
+                <p>A website plugin designed to reduce data transfer and energy consumption.</p>
+            </a>
+            <a class="project" href="https://ecoreader.mogrene.com/" target="_blank">
+                <div class="project-box">
+                    <div class="ecoreader-icon"></div>
+                </div>
+                <h4>Ecoreader</h4>
+                <p>A browser extension that reduces CPU energy consumption during web navigation.</p>
+            </a>
+        </section>
+
+        <p class="section-title" id="contact">Contact</p>
+        <section class="contact">
+            <h4 class="highlight">
+                hello [at] mogrene [dot] com
+            </h4>
+        </section>
+    </main>
+
+    <footer>
+      <container>
+        <div class="left-corner">
+            <p>3.04 kB</p>
+            <p>~ 0.001 g CO2e</p>
+        </div>
+        <div>
+            <p>&copy; 2024 Mogrene</p>
+        </div>
+        <div class="right-corner">
+            <p>[<a href="https://github.com/mogrene" target="_blank">GitHub</a>]</p>
+            <p>[<a href="https://ecologi.com/mogrene" target="_blank">Ecologi</a>]</p>
+            <p>[<a href="https://www.linkedin.com/company/mogrene" target="_blank">LinkedIn</a>]</p>
+        </div>
+      </container>
+    </footer>
+  </body>
+</html>
diff --git a/media/favicon.png b/media/favicon.png
diff --git a/media/icons/cssential.svg b/media/icons/cssential.svg
diff --git a/media/icons/ecoloader.svg b/media/icons/ecoloader.svg
diff --git a/media/icons/ecoreader.svg b/media/icons/ecoreader.svg