API tools faq
paste
Advertisement
Guest User

Homepage

a guest
Sep 16th, 2015
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.84 KB | None | 0 0
raw download clone embed print report
  1. http://www.filedropper.com/homepage << The images and javascript
  2. HTML
  3.  
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <title>Homepage</title>
  8. <link rel="stylesheet" type="text/css" href="style.css">
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  10. <script type="text/javascript" src="js/gulpfile.js"></script>
  11. <script type="text/javascript" src="js/jquery.simpleWeather.js"></script>
  12.  
  13. <script type="text/javascript" src="script.js"></script>
  14. <script type="text/javascript">
  15. $(document).ready(function() {
  16. $.simpleWeather({
  17. location: 'Vriezenveen, Netherlands',
  18. woeid: 'NLXX0504',
  19. unit: 'c',
  20. success: function(weather) {
  21. html = '<i class="icon-'+weather.code+'"></i><br> '+weather.temp+'&deg;'+weather.units.temp+'';
  22.  
  23. $("#weather").html(html);
  24. },
  25. error: function(error) {
  26. $("#weather").html('<p>'+error+'</p>');
  27. }
  28. });
  29. });
  30. </script>
  31. </head>
  32. <div id="server">Connecting to homeserver</div>
  33. <div id="weather"></div>
  34. <div id="background"></div>
  35. <div class="wrapper">
  36. <div id="clock"></div>
  37. <div id="search">
  38. <form method="get" id="form" action='https://google.com/search'>
  39. <input type="text" name="q" maxlength="255" value="">
  40. </form>
  41.  
  42. <div id="radio_buttons">
  43. <input type="radio" onclick="document.getElementById('form').action='https://google.com/search';" name="SearchEngine" value="google" checked> Google
  44. <input type="radio" onclick="document.getElementById('form').action='https://torrentz.eu/search';" name="SearchEngine" value="torents"> Torrentz
  45. <input type="radio" onclick="document.getElementById('form').action='https://www.youtube.com/results';" name="SearchEngine" value="youtube"> Youtube
  46. </div>
  47. </div>
  48. <div id="boxes_center">
  49. <div class="box" >
  50. <div class="box_header">
  51. <div class="center_box">
  52. <img src="4chan.png" height="100px">
  53. </div>
  54. </div>
  55. <div class="box_content">
  56. <a href="https://boards.4chan.org/g/"> /g/ </a>
  57. <a href="https://boards.4chan.org/b/"> /b/ </a>
  58. <a href="https://boards.4chan.org/diy/"> /diy/ </a>
  59. <a href="https://boards.4chan.org/fit/"> /fit/ </a>
  60. <a href="https://boards.4chan.org/trv/"> /trv/ </a>
  61. </div>
  62. </div>
  63.  
  64. <div class="box" >
  65. <div class="box_header">
  66. <div class="center_box">
  67. <img src="reddit.png" height="100px">
  68. </div>
  69. </div>
  70. <div class="box_content">
  71. <a href="https://www.reddit.com/r/videos"> /r/videos </a>
  72. <a href="https://www.reddit.com/r/wtf"> /r/wtf </a>
  73. <a href="https://www.reddit.com/r/funny"> /r/funny </a>
  74. <a href="https://www.reddit.com/r/pics"> /r/pics </a>
  75. <a href="https://www.reddit.com/r/cringeAnarchy"> /r/cringeAnarchy </a>
  76. </div>
  77. </div>
  78.  
  79. <div class="box" >
  80. <div class="box_header">
  81. <div class="center_box">
  82. <img src="news.png" height="100px">
  83. </div>
  84. </div>
  85. <div class="box_content">
  86. <a href="http://www.wired.co.uk/"> Wired </a>
  87. <a href="http://www.nu.nl/tech"> Nu.nl </a>
  88. <a href="https://news.ycombinator.com/"> Hacker news </a>
  89. <a href="#"> </a>
  90. <a href="#"> </a>
  91. </div>
  92. </div>
  93.  
  94. <div class="box" >
  95. <div class="box_header">
  96. <div class="center_box">
  97. <img src="social.png" height="100px">
  98. </div>
  99. </div>
  100. <div class="box_content">
  101. <a href="https://www.facebook.com/"> Facebook </a>
  102. <a href="https://mail.google.com/mail/u/0/#inbox"> Gmail </a>
  103. <a href="#"> </a>
  104. <a href="#"> </a>
  105. <a href="#"> </a>
  106. </div>
  107. </div>
  108.  
  109. <div class="box" >
  110. <div class="box_header">
  111. <div class="center_box">
  112. <img src="server.png" height="100px">
  113. </div>
  114. </div>
  115. <div class="box_content">
  116. <a href="http://overthewire.org/wargames/"> Over the wire </a>
  117. <a href=""> Homeserver </a>
  118. <a href=""> Webmin </a>
  119. <a href=""> Raspberry pi </a>
  120. <a href="#"> </a>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </body>
  127. </html>
  128.  
  129.  
  130. CSS
  131. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
  132. body{
  133. font-family: 'Open Sans', sans-serif;
  134. margin: 0;
  135. background: #e0e0e0;
  136. }
  137.  
  138. @font-face {
  139. font-family: 'weather';
  140. src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
  141. src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
  142. url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
  143. url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
  144. url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
  145. font-weight: normal;
  146. font-style: normal;
  147. }
  148. .icon-0:before { content: ":"; }
  149. .icon-1:before { content: "p"; }
  150. .icon-2:before { content: "S"; }
  151. .icon-3:before { content: "Q"; }
  152. .icon-4:before { content: "S"; }
  153. .icon-5:before { content: "W"; }
  154. .icon-6:before { content: "W"; }
  155. .icon-7:before { content: "W"; }
  156. .icon-8:before { content: "W"; }
  157. .icon-9:before { content: "I"; }
  158. .icon-10:before { content: "W"; }
  159. .icon-11:before { content: "I"; }
  160. .icon-12:before { content: "I"; }
  161. .icon-13:before { content: "I"; }
  162. .icon-14:before { content: "I"; }
  163. .icon-15:before { content: "W"; }
  164. .icon-16:before { content: "I"; }
  165. .icon-17:before { content: "W"; }
  166. .icon-18:before { content: "U"; }
  167. .icon-19:before { content: "Z"; }
  168. .icon-20:before { content: "Z"; }
  169. .icon-21:before { content: "Z"; }
  170. .icon-22:before { content: "Z"; }
  171. .icon-23:before { content: "Z"; }
  172. .icon-24:before { content: "E"; }
  173. .icon-25:before { content: "E"; }
  174. .icon-26:before { content: "3"; }
  175. .icon-27:before { content: "a"; }
  176. .icon-28:before { content: "A"; }
  177. .icon-29:before { content: "a"; }
  178. .icon-30:before { content: "A"; }
  179. .icon-31:before { content: "6"; }
  180. .icon-32:before { content: "1"; }
  181. .icon-33:before { content: "6"; }
  182. .icon-34:before { content: "1"; }
  183. .icon-35:before { content: "W"; }
  184. .icon-36:before { content: "1"; }
  185. .icon-37:before { content: "S"; }
  186. .icon-38:before { content: "S"; }
  187. .icon-39:before { content: "S"; }
  188. .icon-40:before { content: "M"; }
  189. .icon-41:before { content: "W"; }
  190. .icon-42:before { content: "I"; }
  191. .icon-43:before { content: "W"; }
  192. .icon-44:before { content: "a"; }
  193. .icon-45:before { content: "S"; }
  194. .icon-46:before { content: "U"; }
  195. .icon-47:before { content: "S"; }
  196.  
  197. i {
  198. text-align: center;
  199. color: #fff;
  200. font-size: 50px;
  201. font-family: weather;
  202. font-weight: lighter;
  203. font-style: normal;
  204. }
  205.  
  206.  
  207. #rss{
  208. text-align: center;
  209. margin: 0 auto;
  210. border: 1px solid #B3B3B3;
  211. border-bottom: none !important;
  212. }
  213.  
  214. #weather{
  215. color: white;
  216. top: 15px;
  217. left :15px;
  218. position: absolute;
  219. }
  220. #rss a{
  221. border-bottom: 1px solid #B3B3B3;
  222. color: #303030;
  223. padding: 5px 0;
  224. width: 100%;
  225. display: inline-block;
  226. text-decoration: none;
  227. }
  228. #rss a:hover{
  229. background: rgba(144, 144, 144,0.1); ;
  230. }
  231.  
  232. #rss li{
  233. list-style-type: none;
  234. }
  235. #background{
  236. z-index: -1;
  237. top: 0;
  238. right: 0;
  239. height: calc(50vh - 25px);
  240. position: fixed;
  241. padding: 25px 0;
  242. margin: 0;
  243. width: 100vw;
  244. background: #0067b0;
  245. border-bottom: 25px solid #00528D;
  246. }
  247.  
  248. .wrapper{
  249. width: 65vw;
  250. margin:0 auto;
  251. }
  252.  
  253. .wrapper h1{
  254. color: #303030;
  255. text-align: center;
  256. }
  257.  
  258. #clock{
  259. height: 150px;
  260. line-height: 150px;
  261. width: 100%;
  262. text-align: center;
  263. color: white;
  264. font-size: 38px;
  265. }
  266.  
  267. #server{
  268. position: absolute;
  269. color: white;
  270. right: 30px;
  271. top: 15px;
  272. }
  273. #search{
  274. margin-top: 25px;
  275. margin-bottom: 50px;
  276. width: 100%;
  277. }
  278.  
  279. #search input[type='text']{
  280. width: calc(100% - 55px);
  281. height: 50px;
  282. padding: 5px 45px 5px 5px;
  283. font-size: 28px;
  284. color: white;
  285. background: #0067B0 url('search-icon.png') no-repeat right 10px center;
  286. border: 1px solid white;
  287. }
  288. #boxes_center{
  289. text-align: center;
  290. letter-spacing: 25px;
  291. line-height: 60px;
  292. }
  293.  
  294. .box{
  295. display: inline-block;
  296. transition: 0.8s all ease;
  297. overflow: hidden;
  298. width: 200px;
  299. height: 200px;
  300. }
  301.  
  302.  
  303. #radio_buttons{
  304. width: 100%;
  305. padding: 5px 0 0 0 ;
  306. color: white;
  307. }
  308.  
  309. .box:hover .box_header, .box:hover .box_content{
  310. transition: 0.4s all ease;
  311. top: -200px;
  312. }
  313.  
  314. .box_header{
  315. transition: 0.4s all ease;
  316. position: relative;
  317. top: 0;
  318. width: 200px;
  319. height: 200px;
  320. background:#1ebc61 ;
  321. }
  322.  
  323. .box_content{
  324. transition: 0.4s all ease;
  325. top: 0;
  326. position: relative;
  327. width: 200px;
  328. height: 200px;
  329. background:white; ;
  330. }
  331.  
  332. .center_box{
  333. width: 100px;
  334. margin: 0 auto;
  335. position: relative;
  336. top: 50px;
  337. }
  338.  
  339. .box a{
  340. letter-spacing: normal;
  341. display: block;
  342. width: 100%;
  343. height: 40px;
  344. line-height: 40px;
  345. text-decoration: none;
  346. color: #2c3e50;
  347. }
  348.  
  349. .box a:hover{
  350. background:rgba(189, 195, 199,0.2);
  351. }
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!