aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md7
-rw-r--r--cat.gifbin0 -> 22152753 bytes
-rw-r--r--index.html70
-rw-r--r--screenshot.JPGbin0 -> 83430 bytes
-rw-r--r--style.css141
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
Binary files differ
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
Binary files differ
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;
+ }
+}