diff options
| author | squibid <me@zacharyscheiman.com> | 2023-03-17 12:45:54 -0400 |
|---|---|---|
| committer | squibid <me@zacharyscheiman.com> | 2023-03-17 12:45:54 -0400 |
| commit | d4820f3a3bcaed29015d884008a075219e0953cb (patch) | |
| tree | 3f3a36519c80c37f09d975f20a75cf8707914c9c /startpage/index.html | |
| download | qutebrowser-d4820f3a3bcaed29015d884008a075219e0953cb.tar.gz qutebrowser-d4820f3a3bcaed29015d884008a075219e0953cb.tar.bz2 qutebrowser-d4820f3a3bcaed29015d884008a075219e0953cb.zip | |
Diffstat (limited to '')
| -rw-r--r-- | startpage/index.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/startpage/index.html b/startpage/index.html new file mode 100644 index 0000000..9a2eece --- /dev/null +++ b/startpage/index.html @@ -0,0 +1,198 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <title>Startpage</title> + </head> + <style> + :root { + --background-color: rgb(27, 27, 27); + --link-hover: rgb(250, 145, 142); + --link-heading: rgb(240, 92, 87); + --background-glow: 0px 0px 30px rgb(235, 68, 63); + } + * { + padding: 0; + margin: 0; + } + html { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + body { + background-color: rgb(36, 36, 36); + font-family: "Source Code Pro", monospace; + display: flex; + align-items: center; + justify-content: center; + } + .wrapper { + display: flex; + justify-content: center; + align-items: center; + margin-left: 4rem; + margin-top: -1rem; + } + .maincard { + display: flex; + flex-direction: column; + background-color: rgba(35, 35, 35, 0.902); + margin-top: 10%; + height: 800px; + width: 700px; + backdrop-filter: blur(7px); + box-shadow: 0px 0px 40px rgb(0, 0, 0); + } + .content { + display: flex; + gap: 3rem; + } + .image { + max-width: 50%; + margin-right: 60px; + } + img { + max-height: 680px; + max-width: 400px; + height: 680px; + padding-left: 10px; + width: 400px; + padding-top: 15px; + } + section { + display: flex; + flex-direction: column; + gap: 1rem; + } + .links { + display: flex; + flex-direction: column; + justify-content: space-evenly; + gap: 1.5rem; + width: 300px; + margin-top: 1rem; + padding-top: 5px; + margin-left: 40px; + color: aliceblue; + font-size: 20px; + font-weight: 100; + border-color: rgba(255, 255, 255, 0); + border-style: solid; + border-width: 2px; + } + .links ul { + display: flex; + flex-direction: column; + gap: 0.12rem; + } + .links h3 { + color: var(--link-heading); + font-weight: 600; + align-items: center; + display: flex; + } + a:hover { + color: var(--link-hover); + transform: scale(2); + margin-bottom: 2px; + font-weight: 500; + } + + a { + padding: 0px; + text-decoration: none; + color: aliceblue; + } + form { + font-size: 2.0rem; + font-weight: 900; + margin-bottom: 0px; + padding-top: 0px; + border: none; + color: var(--link-heading); + } + form input { + border: none; + background-color: rgba(107, 102, 255, 0); + color: #aaa; + font-size: 25px; + font-weight: 500; + } + form input:focus { + outline: none; + } + .search { + display: flex; + align-items: center; + margin-top: 1.5rem; + margin-left: 1rem; + } + .bg { + height: 780px; + position: fixed; + width: 700px; + margin-left: -5rem; + margin-top: -2rem; + background-color: var(--background-color); + box-shadow: var(--background-glow); + } + </style> + + <body> + <div class="wrapper"> + <div class="bg"></div> + <div class="maincard"> + <div class="content", tabindex="-1"> + <div class="image"> + <img src="images/gif.gif" alt="No image"/> + </div> + <div id="links" class="links"> + <section> + <h3>General</h3> + <ul> + <li> + <a href="https://www.yewtu.be/">Youtube</a> + </li> + <li> + <a href="https://github.com">Github</a> + </li> + <li> + <a href="https://voidlinux.org">Void</a> + </li> + <li> + <a href="https://archlinux.org">Arch</a> + </li> + </ul> + </section> + <section> + <h3>Qutebrowser</h3> + <ul> + <li> + <a href="https://www.qutebrowser.org/doc/changelog.html">Changelog</a> + </li> + <li> + <a href="https://www.qutebrowser.org/doc/faq.html">FAQ</a> + </li> + <li> + <a href="qute://settings">Settings</a> + </li> + <li> + <a href="qute://version">Version</a> + </li> + </ul> + </section> + </div> + </div> + <div class="search"> + <form action="https://searx.be/search"> + <label for="q" autofocus="autofocus">> </label> + <input type="text" placeholder="SearXNG search" name="q" autocomplete="off" autofocus="autofocus"/> + </form> + </div> + </div> + </div> + </body> +</html> |