API tools faq
paste
Advertisement
irwie

[ retired ] starlight

irwie
Mar 29th, 2015
1,210
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!----------------------------------------------- PAGE 01: STARLIGHT
  5.  
  6. ยป do not remove credit
  7. ยป do not steal anything
  8. ยป do not redistribute
  9. ยป edit as much as you want
  10.  
  11. i've included small comments throughout the code to help you customize it, just skim through and look for the gray text
  12.  
  13. CREDIT: REGERI.TUMBLR.COM ----------------------------------------->
  14.  
  15. <title>starlight</title> <!-- the title of your page -->
  16. <link rel="shortcut icon" href="{Favicon}" />
  17.  
  18. <!----------------------------------------------------------------->
  19.  
  20. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  21. <script src="http://static.tumblr.com/eekqh2v/movnlxfj3/jquery-starfield.js"></script>
  22. <script type="text/javascript">
  23. $(document).ready(function(){
  24. $('#starlight').starfield({
  25. starDensity:1.0,
  26. mouseScale:1.0,
  27. seedMovement:true
  28. });
  29. });
  30. </script>
  31.  
  32. <!----------------------------------------------------------------->
  33.  
  34. <style type="text/css">
  35.  
  36. html {
  37. height:100%;
  38. }
  39.  
  40. body {
  41. width:100%;
  42. height:100%;
  43. margin:0;
  44. font-family:arial; /* font */
  45. font-size:10px; /* text size */
  46. color:#333; /* text color */
  47. }
  48.  
  49. h1 { /* controls section headers i.e. "basics", "links", "about" */
  50. text-align:center;
  51. font-size:11px;
  52. text-transform:uppercase;
  53. letter-spacing:2px;
  54. margin-bottom:8px;
  55. padding:7px;
  56. color:#fff;
  57. height:11px;
  58. }
  59.  
  60. a {
  61. text-decoration:none;
  62. color:#a0a0a0; /* color of links */
  63. -webkit-transition:all 0.6s ease;
  64. -moz-transition:all 0.6s ease;
  65. -o-transition:all 0.6s ease;
  66. transition:all 0.6s ease;
  67. }
  68.  
  69. a:hover {
  70. color:#ddd; /* color of links on hover */
  71. -webkit-transition:all 0.6s ease;
  72. -moz-transition:all 0.6s ease;
  73. -o-transition:all 0.6s ease;
  74. transition:all 0.6s ease;
  75. }
  76.  
  77. /*-----------------------------select-----------------------------*/
  78.  
  79. ::selection {
  80. color:#000; /* color of selected text */
  81. background:#fff; /* background color of selected text */
  82. }
  83.  
  84. ::-moz-selection {
  85. color:#000; /* color of selected text */
  86. background:#fff; /* background color of selected text */
  87. }
  88.  
  89. /*----------------------------scrollbar----------------------------*/
  90.  
  91. ::-webkit-scrollbar-thumb {
  92. border:3px solid rgba(0, 0, 0, 0);
  93. background-clip:padding-box;
  94. background-color:#bbb; /* color of webkit scrollbar */
  95. height:6px;
  96. }
  97.  
  98. ::-webkit-scrollbar {
  99. width:7px;
  100. height:18px;
  101. }
  102.  
  103. /*-----------------------------content-----------------------------*/
  104.  
  105. #starlight {
  106. height:100%;
  107. width:100%;
  108. background-color:#000;
  109. }
  110.  
  111. #about {
  112. height:316px;
  113. width:500px;
  114. left:50%;
  115. margin-left:-250px;
  116. top:50%;
  117. margin-top:-158px;
  118. position:fixed;
  119. }
  120.  
  121. #left {
  122. width:49%;
  123. float:left;
  124. height:100%;
  125. }
  126.  
  127. ul#statcon {
  128. margin:0;
  129. padding:0;
  130. list-style-type:none;
  131. font-size:9px;
  132. background-color:#f4f4f4;
  133. height:140px;
  134. }
  135.  
  136. h1#stat {
  137. margin-top:0;
  138. margin-bottom:-2px;
  139. border:8px solid #f4f4f4;
  140. }
  141.  
  142. ul#statcon li {
  143. width:205px;
  144. height:9px;
  145. border-bottom:1px solid #ddd;
  146. padding:0 10px;
  147. padding-bottom:7px;
  148. margin:auto;
  149. margin-bottom:10px;
  150. text-transform:uppercase;
  151. letter-spacing:1px;
  152. }
  153.  
  154. ul#statcon li:first-child {
  155. padding-top:5px;
  156. }
  157.  
  158. ul#lcon {
  159. margin:0;
  160. padding:8px 0;
  161. height:94px;
  162. list-style-type:none;
  163. text-align:center;
  164. font-size:9px;
  165. background-color:#f4f4f4;
  166. }
  167.  
  168. h1#link {
  169. margin-top:-10px;
  170. margin-bottom:0;
  171. border-top:10px solid #f4f4f4;
  172. border-left:8px solid #f4f4f4;
  173. border-right:8px solid #f4f4f4;
  174. border-bottom:1px solid #f4f4f4;
  175. }
  176.  
  177. ul#lcon li {
  178. width:110px;
  179. height:28px;
  180. display:inline-block;
  181. text-transform:uppercase;
  182. letter-spacing:1px;
  183. margin-bottom:3px;
  184. margin-left:0;
  185. background-color:#efefef; /* background color of links */
  186. -webkit-transition:all 0.6s ease;
  187. -moz-transition:all 0.6s ease;
  188. -o-transition:all 0.6s ease;
  189. transition:all 0.6s ease;
  190. }
  191.  
  192. ul#lcon li a {
  193. width:110px;
  194. height:28px;
  195. padding:9px 0;
  196. color:#555; /* text color of links */
  197. display:inline-block;
  198. }
  199.  
  200. ul#lcon li:hover {
  201. background:#e4e4e4; /* background color of links on hover */
  202. -webkit-transition:all 0.6s ease;
  203. -moz-transition:all 0.6s ease;
  204. -o-transition:all 0.6s ease;
  205. transition:all 0.6s ease;
  206. }
  207.  
  208. ul#lcon li a:hover {
  209. color:#333; /* text color of links on hover */
  210. }
  211.  
  212. #right {
  213. width:49%;
  214. height:100%;
  215. float:right;
  216. line-height:150%;
  217. text-align:justify;
  218. }
  219.  
  220. #right h1 {
  221. margin-top:0;
  222. line-height:110%;
  223. margin-bottom:0;
  224. border:8px solid #f4f4f4;
  225. }
  226.  
  227. #desc {
  228. height:266px;
  229. overflow:auto;
  230. margin-top:-8px;
  231. padding:0 6px;
  232. border:8px solid #f4f4f4;
  233. background-color:#f4f4f4;
  234. }
  235.  
  236. #desc p:first-child {
  237. margin-top:0;
  238. }
  239.  
  240. #desc p:last-child {
  241. margin-bottom:0;
  242. }
  243.  
  244. a#c {
  245. position:fixed;
  246. right:5px;
  247. bottom:5px;
  248. color:#fff;
  249. }
  250.  
  251. a#c:hover {
  252. color:#ccc;
  253. }
  254.  
  255. </style>
  256. </head>
  257. <body>
  258.  
  259. <div id="starlight"></div>
  260. <a href="http://regeri.tumblr.com" target="_blank" id="c">R</a>
  261. <div id="about">
  262. <div id="left">
  263. <h1 id="stat">basics</h1>
  264. <ul id="statcon"> <!-- there MUST be five of these -->
  265. <li><b>name</b> name</li> <!-- write whatever you want but keep it short -->
  266. <li><b>gender</b> gender</li>
  267. <li><b>age</b> age</li>
  268. <li><b>location</b> location</li>
  269. <li><b>occupation</b> occupation</li>
  270. </ul>
  271. <h1 id="link">links</h1>
  272. <ul id="lcon"> <!-- there MUST be six of these -->
  273. <li><a href="/">home</a></li>
  274. <li><a href="/ask">ask</a></li>
  275. <li><a href="/archive">archive</a></li>
  276. <li><a href="/">link</a></li> <!-- custom link -->
  277. <li><a href="/">link</a></li> <!-- custom link -->
  278. <li><a href="/">link</a></li> <!-- custom link -->
  279. </ul>
  280. </div>
  281. <div id="right">
  282. <h1>about</h1>
  283. <div id="desc"> <!-- be sure to wrap paragraphs in <p> </p> -->
  284. <p>this is the preview of <b>page 01. starlight</b> by regeri. write as much as you want in this space; long descriptions look better and a scrollbar will appear. i've included instructions in the code itself so it's super easy to customize. <b>bold.</b> <i>italic.</i> <u>underline.</u> <strike>strike.</strike> <a href="/">link.</a></p>
  285. <p style="text-transform:lowercase;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at ligula enim. Donec ultrices ullamcorper viverra. Ut ac tincidunt mauris. In semper risus ac bibendum laoreet. Phasellus sagittis orci et ex sollicitudin sodales. Maecenas ipsum neque, volutpat ac mollis a, cursus laoreet velit.</p>
  286. <p style="text-transform:lowercase;">Nullam nec blandit lacus, at lobortis sapien. Ut pulvinar convallis tincidunt. Fusce finibus dolor ut ultrices consequat. Ut ullamcorper, velit id hendrerit egestas, arcu nulla luctus leo, sit amet dignissim lectus quam a ligula. Mauris rhoncus porttitor tempor. Aliquam erat volutpat.</p>
  287. </div>
  288. </div>
  289. </div>
  290. </body>
  291. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!