5 files changed, 218 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4ac30e5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+# Startpage
+
+Custom minimalist browser startpage. Heavily borrowed from [Prismatic-Night](https://github.com/3r3bu5x9/Prismatic-Night).
+
+Feel free to fork.
+
+![screenshot](screenshot.JPG)
diff --git a/cat.gif b/cat.gif
new file mode 100644
index 0000000..4bc8c34
--- /dev/null
+++ b/cat.gif
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..253275f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>HOME</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="gif">
+            <img src="cat.gif" />
+        </div>
+        <div class="head">
+            <p>> cd ~/<span class="blinking">_</span></p>
+        </div>
+
+        <!-- <div class="search_box">
+            <form action="https://duckduckgo.com/" method="get">
+                <input class="input_box" type="text" placeholder="ddg" autocomplete="off">
+            </form>
+        </div> -->
+
+        <div class="bookmark">
+
+            <div class="category">
+                <div class="bookmarks">
+                    <li class="title">work</li>
+                    <li><a href="https://gmail.com" target="_blank" rel="noopener noreferrer">gmail</a></li>
+                    <li><a href="https://outlook.office.com">outlook</a></li>
+                    <li><a href="https://linkedin.com">linkedin</a></li>
+                </div>
+            </div>
+
+            <div class="category">
+                <div class="bookmarks">
+                    <li class="title">dev</li>
+                    <li><a href="https://github.com/">github</a></li>
+                    <li><a href="https://github.com/">lobste.rs</a></li>
+                    <li><a href="https://mankier.com/">mankier</a></li>
+                    <li><a href="https://devdocs.io/">devdocs</a></li>
+                </div>
+            </div>
+
+            <div class="category">
+                <div class="bookmarks">
+                    <li class="title"><a style="color: #EADBB2" href="https://reddit.com">reddit</a></li>
+                    <li><a href="https://reddit.com/r/programming/">programming</a></li>
+                    <li><a href="https://reddit.com/r/selfhosted/">selfhosted</a></li>
+                    <li><a href="https://reddit.com/r/unixporn/">unixporn</a></li>
+                    <li><a href="https://reddit.com/r/mechanicalkeyboards/">mk</a></li>
+                </div>
+            </div>
+
+            <div class="category">
+                <div class="bookmarks">
+                    <li class="title">play</li>
+                    <li><a href="https://monkeytype.com/">monkeytype</a></li>
+                    <li><a href="https://youtube.com/">youtube</a></li>
+                    <li><a href="https://twitch.tv/">twitch</a></li>
+                    <li><a href="https://netflix.com/">netflix</a></li>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/screenshot.JPG b/screenshot.JPG
new file mode 100644
index 0000000..597cbfa
--- /dev/null
+++ b/screenshot.JPG
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..cd70df2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,141 @@
+html{
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background:#282828;
+  font-family: "Fira Code";
+    }
+
+body {
+  background: #282828;
+  color: #EADBB2;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.gif {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 500px;
+  width: 500px;
+}
+
+.gif img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 40px;
+}
+
+/* form {
+  margin: 0px;
+  padding: 0px;
+}
+
+.search_box {
+  display: flex;
+  align-self: center;
+  border: 4px solid;
+  border-color: rgba(234, 219, 178,0.6);
+  border-radius: 10px;
+  width: 400px;
+  height: 48px;
+  margin-bottom: 40px;
+}
+
+.input_box {
+  border: none;
+  outline: none;
+  background: none;
+  width: 380px;
+  padding-top: 12px;
+
+  text-align:center;
+  font-family: "Fira Code";
+  font-size: 20px;
+  color: #EADBB2;
+} */
+
+.category {
+  display: flex;
+  flex-direction: column;
+  width: 180px;
+}
+
+.bookmark {
+  display: flex;
+  justify-content: center;
+}
+
+.bookmarks {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.title {
+  font-size: 20px;
+}
+
+li {
+  font-size: 16px;
+  list-style-type: none;
+  padding: 5px
+}
+
+a:link {
+  text-decoration: none;
+  color: #8F9191;
+}
+
+a:visited {
+  color: #668F8B;
+}
+
+a:hover {
+  color: #FA7921;
+}
+
+.blinking {
+  animation: opacity 1s ease-in-out infinite;
+  opacity: 1;
+}
+
+@keyframes opacity {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}