API tools faq
paste
dylanohelps

Home Page #2

dylanohelps
Jun 29th, 2013
2,905
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------
  4.  
  5. HOME PAGE #2 by JAKEHELPS
  6. Rules ad Regulations:
  7. #1: Please DO NOT commit thievery and steal this theme/page. I've worked hard on in so I'd appreciate if you didn't.
  8.  
  9. #2: DO NOT redistribute this theme/page, I will not care if it's an "Edited Theme". There is no difference with "redistributing but giving full credit to the owner." It's still violating the general rules of theme-making.
  10.  
  11. #3: I will find out if you've copied the complete code and redisribute it because I know my codes, and I know how they're formatted.
  12.  
  13. #4: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.
  14.  
  15. ---------------------------->
  16.  
  17. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18. <head>
  19. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  20.  
  21. <title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}" />
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
  25.  
  26. <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  27.  
  28. <link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>
  29.  
  30. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31. <script type="text/javascript">
  32. $("#slideshow > div:gt(0)").hide();
  33.  
  34. setInterval(function() {
  35. $('#slideshow > div:first')
  36. .fadeOut(1000)
  37. .next()
  38. .fadeIn(1000)
  39. .end()
  40. .appendTo('#slideshow');
  41. }, 3000);
  42.  
  43. </script>
  44.  
  45.  
  46. </head>
  47. <style type="text/css">
  48. body {
  49. padding: 0;
  50. margin: auto;
  51. list-style: none;
  52. background-color: #FEFEFE;
  53. background-attachment: fixed;
  54. }
  55.  
  56. a {
  57. text-decoration: none;
  58. color: black;
  59. }
  60.  
  61. b,i,strong,em {
  62. color: #299999;
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb:vertical {
  66. height:10px;
  67. background-color: #299999;
  68. border-radius: 10px;
  69. opacity: 0.5;}
  70.  
  71. ::-webkit-scrollbar-thumb:horizontal {
  72. height:10px: transparent;
  73. border-radius: 10px;
  74. opacity: 0.5; }
  75.  
  76. ::-webkit-scrollbar {
  77. height: 10px;
  78. width: 6px;
  79. background-color: transparent;
  80. opacity: 0.5;
  81. }
  82.  
  83. #slideshow {
  84. margin: 0px auto;
  85. position: relative;
  86. width: 1361px;
  87. height: 400px;
  88. background-color: #202020;
  89. }
  90.  
  91. #slideshow img {
  92. width: 1361px;
  93. height: 400px;
  94. }
  95.  
  96. #slideshow > div {
  97. position: absolute;
  98. }
  99.  
  100. #navigation {
  101. width: 1000px;
  102. height: auto;
  103. padding: 18px;
  104. margin: auto;
  105. text-align: center;
  106. }
  107.  
  108. .links {
  109. margin: auto;
  110. text-align: center;
  111. }
  112.  
  113. .links a {
  114. font-family: century gothic;
  115. font-size: 12px;
  116. color: #299999;
  117. text-transform: uppercase;
  118. padding: 5px 15px;
  119. }
  120.  
  121. .links a:hover {
  122. background-color: #202020;
  123. color: #299999;
  124. }
  125.  
  126. .links {
  127. margin: auto;
  128. text-align: center;
  129. }
  130.  
  131. #information {
  132. width: 100%;
  133. height: 400px;
  134. }
  135.  
  136. #information .title {
  137. margin: auto;
  138. width: 800px;
  139. font-family: berkshire swash;
  140. font-size: 30px;
  141. text-align: center;
  142. padding: 20px;
  143. color: #299999;
  144. letter-spacing: 3px;
  145. border-bottom: 3px solid #299999;
  146. margin-bottom: 5px;
  147. }
  148.  
  149. #description {
  150. width: 100%;
  151. display: block;
  152. margin: auto;
  153. text-align: center;
  154. }
  155.  
  156. #description .info {
  157. margin: auto;
  158. width: 500px;
  159. height: 250px;
  160. padding: 20px;
  161. margin-top: 10px;
  162. overflow: auto;
  163. font-family: cambria;
  164. font-size: 12px;
  165. color: #202020;
  166. line-height: 120%;
  167. letter-spacing: 1px;
  168. text-align: justify;
  169. }
  170.  
  171. .info:first-letter {
  172. float: left;
  173. display: inline-block;
  174. font-family: berkshire swash;
  175. font-size: 30px;
  176. text-transform:uppercase;
  177. color: #FFFFFF;
  178. background-color: #299999;
  179. padding: 22px;
  180. margin-right: 5px;
  181. border: 3px double #FFFFFF;
  182. }
  183.  
  184. #characters {
  185. width: 1361px;
  186. padding: 20px 0px;
  187. margin: auto;
  188. text-align: center;
  189. height: auto;
  190. }
  191.  
  192. .charinfo1 {
  193. width: 307px;
  194. height: 400px;
  195. display: inline-block;
  196. margin-left: 10px;
  197. margin-bottom: 10px;
  198. padding: 10px;
  199. float: left;
  200. }
  201.  
  202. .picture {
  203. display: block;
  204. text-align: center;
  205. }
  206.  
  207. .picture img {
  208. width: 128px;
  209. height: 128px;
  210. border-radius: 128px;
  211. border: 3px double #202020;
  212. padding: 5px;
  213. }
  214.  
  215. .charname {
  216. display: block;
  217. font-family: cambria;
  218. font-size: 16px;
  219. color: #202020;
  220. text-align: center;
  221. text-transform: uppercase;
  222. margin-top: 5px;
  223. padding-bottom: 5px;
  224. border-bottom: 3px double #CCCCCC;
  225. }
  226.  
  227. .charinfo {
  228. display: block;
  229. padding: 20px;
  230. height: 180px;
  231. font-family: cambria;
  232. font-size: 12px;
  233. color: #202020;
  234. overflow: auto;
  235. text-align: justify;
  236.  
  237. }
  238.  
  239. .charinfo:first-letter {
  240. float: left;
  241. display: inline-block;
  242. font-family: berkshire swash;
  243. font-size: 16px;
  244. text-transform:uppercase;
  245. color: #FFFFFF;
  246. background-color: #299999;
  247. padding: 10px 16px;
  248. margin-right: 5px;
  249. border: 3px double #FFFFFF;
  250. }
  251.  
  252. #more {
  253. display: block;
  254. width: 100%;
  255. margin-top: 30px;
  256. margin: auto;
  257. text-align: center;
  258. margin-bottom: 30px;
  259. }
  260.  
  261. #more a {
  262. padding: 10px 18px;
  263. background-color: #299999;
  264. font-family: cambria;
  265. font-size: 14px;
  266. color: #FFFFFF;
  267. text-transform: uppercase;
  268. display: inline-block;
  269. width: 300px;
  270. text-align: left;
  271. }
  272.  
  273. #bottomnav {
  274. margin: auto;
  275. width: 1361px;
  276. height: 400px;
  277. display: block;
  278. margin-top: 50px;
  279. }
  280.  
  281. .columns {
  282. width: 900px;
  283. columns:180px 3;
  284. -webkit-columns:100px 3;
  285. -moz-columns:100px 3;
  286. margin: auto;
  287. height: 300px;
  288. }
  289.  
  290. .heading {
  291. display: block;
  292. padding: 20px;
  293. font-family: cambria;
  294. font-size: 14px;
  295. color: #FFFFFF;
  296. background-color: #299999;
  297. }
  298.  
  299. .navlinks {
  300. margin-bottom: 20px;
  301. }
  302.  
  303. #bottomnav a {
  304. display: block;
  305. padding: 5px;
  306. font-family: cambria;
  307. font-size: 10px;
  308. color: #299999;
  309. text-transform: uppercase;
  310. text-align: left;
  311. }
  312.  
  313. #bottomnav a:hover {
  314. background-color: #CCCCCC;
  315. color: #FFFFFF;
  316. }
  317.  
  318. </style>
  319. <body>
  320. <div id="navigation">
  321. <div class="links">
  322.  
  323.  
  324. <a href="#">Main</a>
  325. <a href="#">About</a>
  326. <a href="#">Characters</a>
  327. <a href="#">Archive</a>
  328. <a href="#">Plotline</a>
  329. <a href="#">Link 1</a>
  330. <a href="#">Link 2</a>
  331. <a href="#">Link 3</a>
  332. <a href="#">Link 4</a>
  333. <a href="http://jakehelps.tumblr.com">&copy;</a>
  334.  
  335. </div>
  336. </div>
  337. <div id="slideshow">
  338. <div>
  339. <!----- SLIDESHOW IMAGE (1361x400) ---->
  340. <img src="http://static.tumblr.com/kamm2qy/Oiymp5x7g/percy-jackson-trailer.png">
  341. </div>
  342.  
  343. <div>
  344. <!----- SLIDESHOW IMAGE (1361x400) ---->
  345. <img src="http://static.tumblr.com/kamm2qy/s1gmp5xij/percy-jackson-and-olympians-lightning-thief-2029.png">
  346. </div>
  347. </div>
  348.  
  349. <div id="information">
  350. <div class="title">TITLE</div>
  351. <div id="description">
  352.  
  353. <div class="info">
  354. SUMMARY/DESCRIPTION
  355. </div>
  356.  
  357. </div>
  358. </div>
  359.  
  360. <div id="characters">
  361.  
  362. <!-- CHARACTER BOX TYPE 1 -->
  363. <div class="charinfo1">
  364. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  365. <div class="charname">CHARACTER NAME</div>
  366. <div class="charinfo">
  367. DESCRIPTION
  368. </div>
  369. </div>
  370. <!-- CHARACTER BOX TYPE 1 -->
  371. <div class="charinfo1">
  372. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  373. <div class="charname">CHARACTER NAME</div>
  374. <div class="charinfo">
  375. DESCRIPTION
  376. </div>
  377. </div>
  378. <!-- CHARACTER BOX TYPE 1 -->
  379. <div class="charinfo1">
  380. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  381. <div class="charname">CHARACTER NAME</div>
  382. <div class="charinfo">
  383. DESCRIPTION
  384. </div>
  385. </div>
  386. <!-- CHARACTER BOX TYPE 1 -->
  387. <div class="charinfo1">
  388. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  389. <div class="charname">CHARACTER NAME</div>
  390. <div class="charinfo">
  391. DESCRIPTION
  392. </div>
  393. </div>
  394. <!-- CHARACTER BOX TYPE 1 -->
  395. <div class="charinfo1">
  396. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  397. <div class="charname">CHARACTER NAME</div>
  398. <div class="charinfo">
  399. DESCRIPTION
  400. </div>
  401. </div>
  402. <!-- CHARACTER BOX TYPE 1 -->
  403. <div class="charinfo1">
  404. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  405. <div class="charname">CHARACTER NAME</div>
  406. <div class="charinfo">
  407. DESCRIPTION
  408. </div>
  409. </div>
  410. <!-- CHARACTER BOX TYPE 1 -->
  411. <div class="charinfo1">
  412. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  413. <div class="charname">CHARACTER NAME</div>
  414. <div class="charinfo">
  415. DESCRIPTION
  416. </div>
  417. </div>
  418. <!-- CHARACTER BOX TYPE 1 -->
  419. <div class="charinfo1">
  420. <div class="picture"><img src="http://static.tumblr.com/kamm2qy/xMCmp5umm/fdsf.png" /></div>
  421. <div class="charname">CHARACTER NAME</div>
  422. <div class="charinfo">
  423. DESCRIPTION
  424. </div>
  425. </div>
  426.  
  427. <!-- INSERT NEW CHARACTER SECTION UNDER THIS LINE -->
  428.  
  429.  
  430.  
  431.  
  432. <div id="more"><a href="#">More Characters <div style="float: right;">></div></a></div>
  433. </div>
  434.  
  435. <div id="bottomnav">
  436. <div class="columns">
  437.  
  438. <div class="heading">General</div>
  439. <div class="navlinks">
  440. <a href="#">Home</a>
  441. <a href="#">Contact</a>
  442. <a href="#">Archives</a>
  443. <a href="#">Likes</a>
  444. <a href="#">Updates</a>
  445. </div>
  446.  
  447. <div class="heading">About</div>
  448. <div class="navlinks">
  449. <a href="#">Plotline</a>
  450. <a href="#">Map</a>
  451. <a href="#">Characters</a>
  452. <a href="#">Creatures</a>
  453. <a href="#">Gods</a>
  454. <a href="#">Prophecies</a>
  455. </div>
  456.  
  457. <div class="heading">Applications</div>
  458. <div class="navlinks">
  459. <a href="#">Rules & Regulations</a>
  460. <a href="#">Application Page</a>
  461. <a href="#">FAQ</a>
  462. <a href="#">Important Notices</a>
  463. </div>
  464.  
  465. <div class="heading">Campers</div>
  466. <div class="navlinks">
  467. <a href="#">Activities</a>
  468. <a href="#">Writing Prompts</a>
  469. <a href="#">The Forges</a>
  470. <a href="#">Ampitheatre</a>
  471. <a href="#">Arena</a>
  472. <a href="#">Lava Wall</a>
  473. <a href="#">Camp Schedule</a>
  474. <a href="#">Report Cards</a>
  475. </div>
  476.  
  477.  
  478.  
  479.  
  480. </div>
  481. </div>
  482.  
  483.  
  484.  
  485. </body>
  486. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!