├── Iosevka.ttf
├── README.md
├── general.css
├── homepg.png
├── img
    ├── side1.gif
    ├── side2.gif
    ├── side3.gif
    ├── side4.gif
    ├── side5.gif
    └── side6.gif
└── index.html


/Iosevka.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/Iosevka.ttf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Startpage
 2 | ========
 3 | 
 4 | A simple startpage to meet my needs.
 5 | 
 6 | ![alt tag](homepg.png "Startpage preview")
 7 | 
 8 | This repository contains a custom startpage made using HTML, CSS and a little Javascript. I'm not a web developer, this was a simple project I worked on to refresh my basic understanding of HTML and CSS.
 9 | 
10 | 
11 | Don't hesitate to fork and modify to your liking.
12 | 
13 | Updates:
14 | ----
15 | * Added searchbar *21/08/20*
16 | * Corrected Japanese - Thanks to [Silgrond](https://www.reddit.com/user/Silgrond) for correcting Hiragana *29/09/20*
17 | 
18 | Possible future updates:
19 | ----
20 | * Fix scaling issue
21 | * ~~Add search bar~~
22 | * Light theme
23 | * Random sidebar image cycle
24 | 
25 | Credits
26 | ----
27 | Images used in the sidebar are by background artist [Waneella](https://twitter.com/waneella_).
28 | 
29 | Based by [tayumpee's starpage 2](//github.com/tayumpee/start_page2_firefox_and_chrome) inspired by [Vallodes](https://www.reddit.com/u/vallode/) tutorial.
30 | 


--------------------------------------------------------------------------------
/general.css:
--------------------------------------------------------------------------------
  1 | @font-face
  2 | {
  3 |     font-family:'Iosevka';
  4 |     src: url('Iosevka.ttf');
  5 | }
  6 | body{
  7 | 	font-family: 'Iosevka', monospace;
  8 | 	font-size:15px;
  9 | 	background-color:#0F0F12;
 10 | 	background-image: url("img/");
 11 | 	background-repeat: repeat;
 12 | 	width:672px;
 13 | 	height:319px;
 14 | 	position: absolute;
 15 | 	top: 0px;
 16 | 	bottom:100px;
 17 |     left: 0px;
 18 |     right: 0px;
 19 |     margin: auto;
 20 |     --search-bg: rgba(255, 255, 255, 0);
 21 | 
 22 | }
 23 | 
 24 | h1 {
 25 | 	font-weight:normal;
 26 | 	color: #FEFFFA;
 27 | }
 28 | 
 29 | .flair{
 30 | 	color: #0972D6;
 31 | }
 32 | 
 33 | .litequote {
 34 | 	font-weight:normal;
 35 | 	font-size: 12px;
 36 | 	color: #FEFFFA;
 37 | 	padding: 0px 20px;
 38 | }
 39 | 
 40 | .main {
 41 | 	display: block;
 42 | 	border-style: solid;
 43 | 	border-width: 1px;
 44 | 	border-color: #232328;
 45 | 	position: absolute;
 46 | 	top: -2px;
 47 | 	width: 536px;
 48 | 	height: 300px;
 49 |     left: -2px;
 50 |     right: 190px;
 51 |     margin: auto;
 52 | 	background-color:#18181D;
 53 | 	text-align:center;
 54 | }
 55 | 
 56 | .button {
 57 | 	width:10px;
 58 | 	height:10px;
 59 | 	float: left;
 60 | 	margin-right:2px;
 61 | 	border-style: solid;
 62 | 	border-width: 2px;
 63 | 	border-color: #232328;
 64 | 	border-radius: 50%;
 65 | 	background-color:#FFFFFF;
 66 | }
 67 | 
 68 | .button:first-of-type {
 69 | 	background-color: #0972D6
 70 | }
 71 | 
 72 | .button:hover {
 73 | 	background-color:#aaaaaa!important;
 74 | 	cursor: pointer;
 75 | 
 76 | }
 77 | .bottomcontainer {
 78 | 	width:540px;
 79 | 	height:12px;
 80 | 	position:absolute;
 81 | 	left:-2px;
 82 | 	top:305px;
 83 | }
 84 | 
 85 | .image-wrapper {
 86 | 	border-style: solid;
 87 | 	border-width: 1px;
 88 | 	border-color: #232328;
 89 | 	position: absolute;
 90 | 	top: -2px;
 91 | 	bottom:200px;
 92 |     width: 150px;
 93 | 	height: 300px;
 94 |     left: 541px;
 95 | 	background-color:#18181D;
 96 | 	background-position: center center;
 97 | 	background-repeat: no-repeat;
 98 | 	background-size: cover;
 99 | }
100 | 
101 | .time {
102 | 	color:#FFFFFF;
103 | 	font-family: Iosevka, monospace;
104 | 	font-size:11px;
105 | 	position: absolute;
106 |     width: auto;
107 | 	height: auto;
108 |     left: 35px;
109 |     position: absolute;
110 | }
111 | 
112 | nav {
113 | 	color: #BFBFBF;
114 | 	font-size:10px;
115 | 	text-align: center;
116 | 	padding-left:125px;
117 | 	padding-right:125px;
118 | 	top: 50px;
119 | 	width: auto;
120 |     left: auto;
121 |     right: auto;
122 |     margin: auto;
123 |     position: relative;
124 | }
125 | 
126 | ul {
127 |     display: table-cell;
128 |     text-align: center;
129 |     height: 100%;
130 |     border-color: #232328;
131 |     border-right-width: 1px;
132 |     border-right-style: solid;
133 |     padding: 2px 10px;
134 |     transition: all 0.8s;
135 |     cursor: default;
136 |     list-style-type: none;
137 | 
138 | }
139 | 
140 | ul:last-of-type {
141 |     border-right-width: 0;
142 | }
143 | 
144 | ul[class=green]:hover {
145 | 	color: #4FAE0F;
146 | }
147 | 
148 | ul[class=blue]:hover {
149 | 	color: #0972D6;
150 | }
151 | ul[class=red]:hover {
152 | 	color: #ed3434;
153 | }
154 | ul[class=yellow]:hover {
155 | 	color: #edd934;
156 | }
157 | 
158 | ul > li:first-of-type{
159 | 	padding-top: 5px
160 | }
161 | 
162 | 
163 | ul > li > a {
164 | 	text-decoration:none;
165 | 	color: #BFBFBF;
166 | 	transition: all 0.8s;
167 | }
168 | 
169 | ul[class=green] > li > a:hover {
170 | 	color: #4FAE0F;
171 | 	transition: all 0.5s;
172 | }
173 | 
174 | ul[class=blue] > li > a:hover {
175 | 	color: #0972D6;
176 | 	transition: all 0.5s;
177 | }
178 | 
179 | ul[class=red] > li > a:hover {
180 | 	color: #ed3434;
181 | 	transition: all 0.5s;
182 | }
183 | 
184 | ul[class=yellow] > li > a:hover {
185 | 	color: #edd934;
186 | 	transition: all 0.5s;
187 | }
188 | 
189 | p {
190 | 	font-size: 10px;
191 | 	padding : 10px;
192 | 	color: #FFFFFF;
193 | }
194 | 
195 | div[class=lovetext]{
196 | 	font-family: Iosevka, monospace;
197 | 	color: #0972D6;
198 | 	display: block;
199 | 	width:auto;
200 | 	position:absolute;
201 | 	left:430px;
202 | 	font-size: 11px;
203 | }
204 | 
205 | form {
206 | 	position: relative;
207 | 	width: auto;
208 |     left: auto;
209 |     right: auto;
210 |     margin: auto;
211 |     padding-left:175px;
212 | 	padding-right:160px;
213 | 	top: 15px;
214 | }
215 | 
216 | form input[type="search"] {
217 | 	background-color: var(--search-bg);
218 | 	border: none;
219 | 	box-sizing: border-box;
220 | 	font: inherit;
221 | 	font-size: 13px;
222 | 	margin-left: 12px;
223 | 	width: 85%;
224 | 	color: #FEFFFA;
225 | 	transition: all 0.2s;
226 | }	
227 | 
228 | form label {
229 | 	color: #0972D6;
230 | 	position: absolute;
231 | 	transition: all 0.4s;
232 | }
233 | 
234 | form:focus-within input::placeholder {
235 | 	opacity: 0;
236 | }
237 | 
238 | 


--------------------------------------------------------------------------------
/homepg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/homepg.png


--------------------------------------------------------------------------------
/img/side1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/img/side1.gif


--------------------------------------------------------------------------------
/img/side2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/img/side2.gif


--------------------------------------------------------------------------------
/img/side3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/img/side3.gif


--------------------------------------------------------------------------------
/img/side4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/img/side4.gif


--------------------------------------------------------------------------------
/img/side5.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/img/side5.gif


--------------------------------------------------------------------------------
/img/side6.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m0ddr/startpage/1cce4589ad5fb628d8fa1979b9fab9fff74ebb44/img/side6.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--Starpage by -->
  3 | <html>
  4 | 	<head>
  5 | 		<title>~</title>
  6 | 		<meta charset="UTF-8">
  7 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 | 		<link rel="stylesheet" style="text/css" href="general.css" />
 10 | 	</head>
 11 | 
 12 | 	<body>	
 13 | 		<div class="main" id="main1" style="display: block">
 14 | 			<img class="image-wrapper" src="img/side4.gif"/>
 15 | 			<header>
 16 |             	<h1>Welcome to the wired, <span class="flair">K</span></h1>
 17 |                 <h2 class="litequote">He who is not bold enough to be stared at from across the abyss is not bold enough to stare into it <span class="flair">himself</span></h2>
 18 | 			</header>
 19 | 
 20 |             <nav>
 21 |             	<ul class="blue">
 22 |             		<a>Frequent</a>
 23 |             			<li><a href="https://github.com/Kierstro">Github</a></li>
 24 |             			<li><a href="https://twitter.com/home">Twitter</a></li>
 25 |             	</ul>
 26 | 
 27 |             	<ul class="green">
 28 |             		<a>4Chan</a>
 29 |             			<li><a href="http://boards.4chan.org/g/">/g/</a></li>
 30 |                     		<li><a href="http://boards.4chan.org/v/">/v/</a></li>
 31 |                     		<li><a href="http://boards.4chan.org/a/">/a/</a></li>
 32 |                     		<li><a href="https://boards.4chan.org/wg/">/wg/</a></li>
 33 |                 </ul>
 34 | 
 35 |                 <ul class="red">
 36 |             		<a>Entertainment</a>
 37 |             			<li><a href="https://www.youtube.com/">Youtube</a></li>
 38 |             			<li><a href="https://www.twitch.tv/">Twitch</a></li>
 39 |             			<li><a href="https://www.reddit.com/">Reddit</a></li>
 40 |             			<li><a href="https://soundcloud.com/">SoundCloud</a></li>
 41 | 
 42 |             	</ul>
 43 | 
 44 |                 <ul class="yellow">
 45 |             		<a>Miscellaneous</a>
 46 |             			<li><a href="https://proton.me/mail/">Mail</a></li>
 47 |             			<li><a href="https://nyaa.si/">Nyaa</a></li>
 48 |             			<li><a href="https://lainchan.org/">Lainchan</a>
 49 |             			<li><a href="https://pastebin.com/">Pastebin</a></li>
 50 |             	</ul>
 51 | 
 52 |             </nav>
 53 |     	</div>
 54 | 
 55 |         <div class="main" id="main2" style="display: none;">
 56 |         	<img class="image-wrapper" src="img/side5.gif"/>
 57 | 
 58 |         	<iframe  src="https://www.youtube.com/embed/DrxJCOVsV1E?list=PLNqBorCQlYFPf4cvVUi-1pet0tO_J1x-9" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 59 |         </div>
 60 |         
 61 |         <div class="bottomcontainer">
 62 | 
 63 |         	<!--Button script-->
 64 | 			<script type="text/javascript">
 65 | 			function show( show1 ) {
 66 | 			  document.getElementById(show1).style.display="block";
 67 | 			}
 68 | 			function hide( hide1 ) {
 69 | 			  document.getElementById(hide1).style.display="none";
 70 | 			}
 71 | 			function tog( tog1 ) {
 72 | 			  document.getElementById(tog1).style.backgroundColor="#0972D6";
 73 | 			}
 74 | 			function toh( toh1 ) {
 75 | 			  document.getElementById(toh1).style.backgroundColor="#FFFFFF";
 76 | 			}
 77 | 			</script>
 78 | 
 79 | 			<div class="button" id="btn1" onclick = "show('main1');hide('main2');tog('btn1');toh('btn2');"></div>
 80 | 			<div class="button" id="btn2" onclick = "show('main2');hide('main1');tog('btn2');toh('btn1');"></div>
 81 | 
 82 | 			<!--Live clock script-->
 83 | 			<div class="time" id="time">
 84 | 				<script>
 85 | 					//document.getElementById("main").innerHTML = Date();
 86 | 					function updateClock() {
 87 | 						var days = ['SUNDAY','MONDAY','TUESDAY','WEDNESDAY','THURSDAY','FRIDAY','SATURDAY'];
 88 | 						var m = new Date();
 89 | 						var dateString =
 90 | 						  (days[ m.getDay() ]) + " " +
 91 | 						  ("0" + m.getDate()).slice(-2) + "/" +
 92 | 						  ("0" + (m.getMonth()+1)).slice(-2) +"/"+
 93 | 						  m.getFullYear() +" "+
 94 | 						  ("0" + m.getHours()).slice(-2) + ":" +
 95 | 						  ("0" + m.getMinutes()).slice(-2) + ":" +
 96 | 						  ("0" + m.getSeconds()).slice(-2);
 97 | 						
 98 | 						// set the content of the element with the ID time to the formatted string
 99 | 						document.getElementById('time').innerHTML = dateString;
100 | 
101 | 						// call this function again in 1000ms
102 | 						setTimeout(updateClock, 1000);
103 | 					}
104 | 					updateClock(); // initial call
105 | 				</script>
106 |         </div>
107 |         <div class="lovetext">愛を込めて作られた</div>
108 |     </div>
109 | 


--------------------------------------------------------------------------------