├── LICENSE ├── README.md ├── background.png ├── index.html └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Start 2 | ================= 3 | [Demo](https://alecdtatum.github.io/start/) 4 | 5 | Fonts 6 | ================= 7 | * Roboto 8 | * Roboto Condensed 9 | * Lobster 10 | -------------------------------------------------------------------------------- /background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alecdtatum/start/0391d8aa3a1587ac6ebe6202e013f6a66c2b1411/background.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Start 8 | 9 | 15 | 16 | 17 | 18 |

Welcome to the Web.

19 |
20 | 21 |

Group #1

22 | 33 |
34 | 35 |

Group #2

36 | 47 |
48 | 49 | 50 | 51 |

Search

52 | 53 | 54 | 55 | 56 | 60 | 61 | 62 | 63 | 64 | 68 | 69 | 70 | 71 | 72 | 76 | 77 | 78 | 79 | 80 | 84 | 85 | 86 | 87 | 88 | 92 | 93 | 94 | 95 | 96 | 100 | 101 | 102 | 103 | 104 | 108 | 109 | 110 | 111 | 112 | 116 | 117 | 118 | 119 | 120 | 124 | 125 | 126 | 127 |
128 | 129 | 130 |

Group #3

131 | 142 |
143 | 144 | 145 |

Group #4

146 | 157 |
158 | 159 |
160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Body */ 2 | body { 3 | background: url("background.png"); 4 | font: 1.2em 'Roboto', sans-serif; 5 | font-weight: 300; 6 | color: #FFF; 7 | } 8 | .preload { 9 | transition: none; 10 | } 11 | h1 { 12 | font: 4.0em 'Lobster', cursive; 13 | text-align: center; 14 | } 15 | 16 | 17 | /* Links */ 18 | ul { 19 | list-style-type: none; 20 | margin-top: 8px; 21 | padding-left: 0; 22 | } 23 | li { 24 | padding-left: 16px; 25 | border-radius: 20px; 26 | height: 24px; 27 | } 28 | li:hover { 29 | background: #EEE; 30 | box-shadow: 0 0 6px #FFF; 31 | transition: 0.15s linear; 32 | } 33 | li a { 34 | margin-left: -16px; 35 | padding: 0 8px; 36 | } 37 | a { 38 | display: block; 39 | width: 100%; 40 | color: #FFF; 41 | text-decoration: none; 42 | cursor: default; 43 | } 44 | a:hover { 45 | color: #000; 46 | transition: 0.15s linear; 47 | } 48 | 49 | 50 | /* Containers */ 51 | #boxes { 52 | width: 99%; 53 | margin: 0 1%; 54 | } 55 | .box { 56 | float: left; 57 | width: 18%; 58 | margin: 0 3px; 59 | opacity: 0.5; 60 | transition: 0.15s linear; 61 | } 62 | .box:hover, .sbox:hover { 63 | opacity: 1.0; 64 | transition: 0.15s linear; 65 | } 66 | .box h4, .sbox h4 { 67 | margin: 0 0 0 0; 68 | font: 1.5em 'Roboto Condensed', sans-serif; 69 | text-align: center; 70 | border-bottom: 1px #FFF solid; 71 | } 72 | 73 | 74 | /* Search Boxes */ 75 | .sbox { 76 | float: left; 77 | width: 25%; 78 | margin: 0 3px; 79 | opacity: 0.9; 80 | transition: 0.15s linear; 81 | } 82 | #search { 83 | width: 100%; 84 | margin-top: 8px; 85 | border-spacing: 1px; 86 | } 87 | form { 88 | height: 25px; 89 | } 90 | td a { 91 | font-size: 1.2em; 92 | font-weight: 300; 93 | border-radius: 20px; 94 | line-height: 25px; 95 | } 96 | td:hover a { 97 | background: #EEE; 98 | box-shadow: 0 0 4px #FFF; 99 | color: #000; 100 | transition: 0.15s linear; 101 | } 102 | td { 103 | padding: 0 0 0 0; 104 | min-height: 25px; 105 | max-height: 25px; 106 | margin-top: -2px; 107 | } 108 | td:nth-child(1) { 109 | float: left; 110 | width: 30%; 111 | text-align: center; 112 | } 113 | td:nth-child(2) { 114 | float: right; 115 | width: 65%; 116 | } 117 | input { 118 | height: 20px; 119 | width: 80%; 120 | margin-top: 2px; 121 | padding: 0 0 0 8px; 122 | border: none; 123 | border-radius: 20px; 124 | opacity: 0.8; 125 | cursor: default; 126 | transition: 0.15s linear; 127 | } 128 | input:hover, input:focus { 129 | width: 100%; 130 | opacity: 1.0; 131 | box-shadow: 0 0 4px #FFF; 132 | } 133 | --------------------------------------------------------------------------------