diff options
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | css/ShareTechMono-Regular.ttf | bin | 0 -> 23976 bytes | |||
| -rw-r--r-- | css/style.css | 64 | ||||
| -rw-r--r-- | imgs/favicon.png | bin | 0 -> 4976 bytes | |||
| -rw-r--r-- | imgs/lain.gif | bin | 0 -> 186783 bytes | |||
| -rw-r--r-- | index.html | 87 |
6 files changed, 155 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..cc4dfee --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +# Netsphere +Netsphere is a minimal web page that serves as a personal home page with all your important links. + +You can see an example of how it looks by following this [link](https://bicker.github.io/netsphere/). diff --git a/css/ShareTechMono-Regular.ttf b/css/ShareTechMono-Regular.ttf Binary files differnew file mode 100644 index 0000000..8e6e84b --- /dev/null +++ b/css/ShareTechMono-Regular.ttf diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..adf5a71 --- /dev/null +++ b/css/style.css @@ -0,0 +1,64 @@ +@font-face { + font-family: Share Tech Mono; + src: url(ShareTechMono-Regular.ttf); +} + +body { + letter-spacing: 0.1px; + font-family: 'Share Tech Mono', Monospace, Courier; + font-weight: 400; + font-size: 17px; + color: #c8c8c8; + min-height: 100%; + background: #222; +} + +a { + color: #c8c8c8; + text-decoration: none; +} + +hr { + border: 1px dashed #c8c8c8; +} + +.banner { + margin: 5% 20% 0 18%; + display:block; + margin-left:auto; + margin-right:auto; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + padding: 10px; + margin: 3% 18%; +} + +.grid-item { + padding: 0 1rem; +} + +.title { + display: inline-block; + margin-top: 20px; + text-transform: uppercase; +} + +ul { + list-style: none; + margin-top: 3px; + margin-left: -16px; + padding-left: 0; +} + +li { + padding-left: 1em; + text-transform: lowercase; +} + +li:before { + content: "×"; + padding-right: 5px; +}
\ No newline at end of file diff --git a/imgs/favicon.png b/imgs/favicon.png Binary files differnew file mode 100644 index 0000000..64b1b94 --- /dev/null +++ b/imgs/favicon.png diff --git a/imgs/lain.gif b/imgs/lain.gif Binary files differnew file mode 100644 index 0000000..fd98dea --- /dev/null +++ b/imgs/lain.gif diff --git a/index.html b/index.html new file mode 100644 index 0000000..eed82d8 --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> + <head> + <title>Home</title> + <link rel="shortcut icon" type="image/png" href="imgs/favicon.png"/> + <link rel="stylesheet" href="css/style.css" type="text/css"> + </head> + + <body> + <img src="imgs/lain.gif" class="banner"> + + <div class="grid-container"> + <div class="grid-item"> + <div class="title">Net00</div> + <hr> + <ul> + <li><a href="https://www.example.org/">link00</a></li> + <li><a href="https://www.example.org/">link01</a></li> + <li><a href="https://www.example.org/">link02</a></li> + <li><a href="https://www.example.org/">link03</a></li> + <li><a href="https://www.example.org/">link04</a></li> + </ul> + </div> + + <div class="grid-item"> + <div class="title">NET01</div> + <hr> + <ul> + <li><a href="https://www.example.org/">link00</a></li> + <li><a href="https://www.example.org/">link01</a></li> + <li><a href="https://www.example.org/">link02</a></li> + <li><a href="https://www.example.org/">link03</a></li> + <li><a href="https://www.example.org/">link04</a></li> + </ul> + </div> + + <div class="grid-item"> + <div class="title">NET02</div> + <hr> + <ul> + <li><a href="https://www.example.org/">link00</a></li> + <li><a href="https://www.example.org/">link01</a></li> + <li><a href="https://www.example.org/">link02</a></li> + <li><a href="https://www.example.org/">link03</a></li> + <li><a href="https://www.example.org/">link04</a></li> + </ul> + </div> + + <div class="grid-item"> + <div class="title">NET03</div> + <hr> + <ul> + <li><a href="https://www.example.org/">link00</a></li> + <li><a href="https://www.example.org/">link01</a></li> + <li><a href="https://www.example.org/">link02</a></li> + <li><a href="https://www.example.org/">link03</a></li> + <li><a href="https://www.example.org/">link04</a></li> + </ul> + </div> + + <div class="grid-item"> + <div class="title">NET04</div> + <hr> + <ul> + <li><a href="https://www.example.org/">link00</a></li> + <li><a href="https://www.example.org/">link01</a></li> + <li><a href="https://www.example.org/">link02</a></li> + <li><a href="https://www.example.org/">link03</a></li> + <li><a href="https://www.example.org/">link04</a></li> + </ul> + </div> + + <div class="grid-item"> + <div class="title">NET05</div> + <hr> + <ul> + <li><a href="https://www.example.org/">link00</a></li> + <li><a href="https://www.example.org/">link01</a></li> + <li><a href="https://www.example.org/">link02</a></li> + <li><a href="https://www.example.org/">link03</a></li> + <li><a href="https://www.example.org/">link04</a></li> + </ul> + </div> + + </div> + </body> +</html> |
