diff options
| author | kennethcheo <kennethcheo1@gmail.com> | 2021-09-25 16:52:10 +0800 |
|---|---|---|
| committer | kennethcheo <kennethcheo1@gmail.com> | 2021-09-25 16:52:10 +0800 |
| commit | fcd352dfa70ed9e9950738552727910689d25739 (patch) | |
| tree | 839ac2e1ade884a6d98a3dce99bc78db16049606 | |
| download | startpage-fcd352dfa70ed9e9950738552727910689d25739.tar.xz startpage-fcd352dfa70ed9e9950738552727910689d25739.zip | |
Initial commit
| -rw-r--r-- | README.md | 7 | ||||
| -rw-r--r-- | cat.gif | bin | 0 -> 22152753 bytes | |||
| -rw-r--r-- | index.html | 70 | ||||
| -rw-r--r-- | screenshot.JPG | bin | 0 -> 83430 bytes | |||
| -rw-r--r-- | style.css | 141 |
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. + + Binary files differdiff --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 Binary files differnew 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; + } +} |
