dylanohelps

Roleplay Info Theme #2

Apr 28th, 2013
1,505
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.99 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <!--------
  3.  
  4. ROLEPLAY INFO THEME #2 - DYLANOHELPS
  5. #1: Don't remove the credit.
  6. #2: Don't redistribute and claim as your own.
  7. #3: Customize as you like!
  8.  
  9. © Copyright 2013 - Dylan O. Helps | Tumblr
  10.  
  11. --------->
  12.  
  13. <html>
  14. <head>
  15. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}" />
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  23.  
  24. <meta name="color:Background" content="#a40202" />
  25. <meta name="color:Text" content="#FFFFFF" />
  26. <meta name="color:Main Title" content="#FFFFFF" />
  27. <meta name="color:Plot Title" content="#FFFFFF" />
  28. <meta name="color:Updates Title" content="#FFFFFF" />
  29. <meta name="color:FAQ Title" content="#FFFFFF" />
  30. <meta name="color:Nav Link Hover" content="#930202" />
  31. <meta name="color:Update Link" content="#FFFFFF" />
  32. <meta name="color:Update Link Text" content="#930202" />
  33. <meta name="color:Update Link Hover" content="#930202" />
  34. <meta name="color:Update Link Text Hover" content="#FFFFFF" />
  35. <meta name="color:Scrollbar" content="#FFFFFF" />
  36. <meta name="color:Scrollbar BG" content="#930202" />
  37. <meta name="color:Section Title" content="#FFFFFF" />
  38. <meta name="color:Section Title Text" content="#930202" />
  39. <meta name="color:Accents" content="#FFFFFF" />
  40.  
  41. <meta name="text:First Title" content="" />
  42. <meta name="text:Updates Title" content="" />
  43. <meta name="text:FAQ Title" content="" />
  44.  
  45. <meta name="text:Nav1" content="" />
  46. <meta name="text:Nav1 URL" content="" />
  47. <meta name="text:Nav2" content="" />
  48. <meta name="text:Nav2 URL" content="" />
  49. <meta name="text:Update Link 1" content="" />
  50. <meta name="text:Update Link 1 URL" content="" />
  51. <meta name="text:Update Link 2" content="" />
  52. <meta name="text:Update Link 2 URL" content="" />
  53. <meta name="text:Update Link 3" content="" />
  54. <meta name="text:Update Link 3 URL" content="" />
  55. <meta name="text:Update Link 4" content="" />
  56. <meta name="text:Update Link 4 URL" content="" />
  57. <meta name="text:Ask Box URL" content="" />
  58.  
  59. <meta name="image:Portrait" content="" />
  60. <meta name="image:Background" content="" />
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68. </head>
  69. <style type="text/css">
  70. body {
  71. padding: 0;
  72. margin: 0;
  73. list-style: none;
  74. background-color: {color:Background};
  75. background-image:url('{image:Background}');
  76. background-attachment: fixed;
  77. margin-bottom: 50px;
  78. }
  79.  
  80. a {
  81. text-decoration: none;
  82. color: black;
  83. }
  84.  
  85. ::-webkit-scrollbar-thumb:vertical {
  86. height:10px;
  87. background-color: {color:Scrollbar}; }
  88.  
  89. ::-webkit-scrollbar-thumb:horizontal {
  90. height:30px;
  91. background-color: {color:Scrollbar}; }
  92.  
  93. ::-webkit-scrollbar {
  94. height: 10px;
  95. width: 5px;
  96. background-color: {color:Scrollbar BG}; }
  97.  
  98. /* NAVIGATION */
  99.  
  100. #heaven {
  101. display: block;
  102. position: fixed;
  103. width: 1100px;
  104. height: 110px;
  105. background-color: #a40202;
  106. background-image:url('{image:Background}');
  107. margin-left: 140px;
  108. border-bottom: 2px solid {color:Accents};
  109. }
  110.  
  111. .title {
  112. font-family: 'quicksand';
  113. font-size: 36px;
  114. color: {color:Main Title};
  115. margin-top: 50px;
  116. margin-left: 20px;
  117. float: left;
  118. }
  119.  
  120. .links {
  121. float: right;
  122. margin-top: 65px;
  123. margin-right: 20px;
  124. }
  125.  
  126. .links a {
  127. font-family: 'arial unicode ms';
  128. font-size: 10px;
  129. padding: 10px 20px;
  130. color: #FFFFFF;
  131. text-transform: uppercase;
  132. -webkit-transition: all 0.2s ease-in-out;
  133. -moz-transition: all 0.2s ease-in-out;
  134. -o-transition: all 0.2s ease-in-out;
  135. -ms-transition: all 0.2s ease-in-out;
  136. transition: all 0.2s ease-in-out;
  137. }
  138.  
  139. .links a:hover {
  140. background-color: {color:Nav Link Hover};
  141. }
  142.  
  143. /* SUMMARY */
  144.  
  145. #mainshow {
  146. display: inline-block;
  147. width: 1000px;
  148. height: 500px;
  149. background-color: #930202;
  150. margin-left: 185px;
  151. margin-top: 130px;
  152. }
  153.  
  154. #plot {
  155. width: 350px;
  156. height: auto;
  157. background-color: transparent;
  158. margin-top: 40px;
  159. margin-left: 25px;
  160. float: left;
  161. padding: 5px;
  162. }
  163.  
  164. .heading {
  165. font-family: 'quicksand';
  166. font-size: 25px;
  167. text-align: right;
  168. color: {color:Plot Title};
  169. padding-bottom: 5px;
  170. border-bottom: 1px solid {color:Accents};
  171. }
  172.  
  173. .description {
  174. width: 340px;
  175. height: 350px;
  176. background-color: transparent;
  177. font-family: arial unicode ms;
  178. font-size: 11px;
  179. color: {color:Text};
  180. overflow: auto;
  181. margin-top: 5px;
  182. padding: 5px;
  183. }
  184.  
  185. .portrait img {
  186. float: right;
  187. margin-right: 20px;
  188. width: 550px;
  189. height: 460px;
  190. background-color: #a40202;
  191. margin-top: 20px;
  192. border: 0px;
  193. }
  194.  
  195. /* UPDATES */
  196.  
  197. #updates {
  198. display: inline-block;
  199. width: 980px;
  200. height: 480px;
  201. background-color: #930202;
  202. margin-left: 185px;
  203. margin-top: 20px;
  204. padding: 10px;
  205. }
  206.  
  207. #updateboxtitle {
  208. font-family: 'quicksand';
  209. font-size: 30px;
  210. color: {color:Updates Title};
  211. padding-bottom: 5px;
  212. border-bottom: 1px solid {color:Accents};
  213. width: 100%;
  214. height: auto;
  215. }
  216.  
  217. .update_information {
  218. float: left;
  219. overflow: auto;
  220. width: 500px;
  221. height: 400px;
  222. padding: 10px;
  223. margin-top: 10px;
  224. border: 1px solid {color:Accents};
  225. }
  226.  
  227. .utitle {
  228. font-family: 'quicksand';
  229. font-size: 18px;
  230. color: #FFFFFF;
  231. padding-bottom: 5px;
  232. border-bottom: 1px solid {color:Accents};
  233. }
  234.  
  235. .ucaption {
  236. font-family: arial unicode ms;
  237. font-size: 11px;
  238. color: {color:Text};
  239. margin-bottom: 10px;
  240. margin-top: 3px;
  241. }
  242.  
  243. .section_title {
  244. width: 432px;
  245. height: auto;
  246. font-family: 'quicksand';
  247. font-size: 16px;
  248. color: {color:Section Title Text};
  249. margin-top: 10px;
  250. float: right;
  251. background-color: {color:Section Title};
  252. padding: 5px;
  253. }
  254.  
  255. .member_updates {
  256. float: right;
  257. width: 420px;
  258. height: 200px;
  259. border: 1px solid {color:Accents};
  260. margin-top: 10px;
  261. padding: 10px;
  262. overflow: auto;
  263. }
  264.  
  265. .ulinks {
  266. width: 440px;
  267. height: 150px;
  268. float: right;
  269. margin-top: 10px;
  270. }
  271.  
  272. .ulinks a {
  273. display: block;
  274. background-color: {color:Update Link};
  275. font-family: arial unicode ms;
  276. font-size: 10px;
  277. text-transform: uppercase;
  278. color: {color:Update Link Text};
  279. text-align: center;
  280. padding: 10px;
  281. margin-top: 3px;
  282. -webkit-transition: all 0.2s ease-in-out;
  283. -moz-transition: all 0.2s ease-in-out;
  284. -o-transition: all 0.2s ease-in-out;
  285. -ms-transition: all 0.2s ease-in-out;
  286. transition: all 0.2s ease-in-out;
  287. }
  288.  
  289. .ulinks a:hover {
  290. background-color: {color:Update Link Hover};
  291. color: {color:Update Link Text Hover};
  292. }
  293.  
  294. /* FAQ SECTION */
  295.  
  296. #faq {
  297. display: inline-block;
  298. width: 980px;
  299. height: 480px;
  300. background-color: #930202;
  301. margin-left: 185px;
  302. margin-top: 20px;
  303. padding: 10px;
  304. }
  305.  
  306. .faq_info {
  307. width: 450px;
  308. height: 450px;
  309. float: left;
  310. padding: 10px;
  311. font-family: arial unicode ms;
  312. font-size: 12px;
  313. color: #FFFFFF;
  314. overflow: auto;
  315. }
  316.  
  317. .askbox {
  318. width: 450px;
  319. height: 480px;
  320. float: right;
  321. padding: 10px;
  322. }
  323.  
  324. .ask_title {
  325. font-family: 'quicksand';
  326. font-size: 14px;
  327. color: {color:Text};
  328. margin-bottom: 10px;
  329. }
  330.  
  331. .faq_mega {
  332. font-family: 'quicksand';
  333. font-size: 72px;
  334. text-align: center;
  335. color: {color:FAQ Title};
  336. margin-bottom: 5px;
  337. border-bottom: 1px solid {color:Accents};
  338. }
  339.  
  340. .answer {
  341. margin-top: 10px;
  342. margin-bottom: 7px;
  343. margin-left: 10px;
  344. font-family: arial unicode ms;
  345. font-size: 11px;
  346. color: {color:Text};
  347. }
  348.  
  349.  
  350. </style>
  351. <body>
  352. <div id="heaven">
  353. <div class="title">{Title}</div>
  354. <div class="links">
  355. <a href="#">Home</a>
  356. <a href="#updates">Updates</a>
  357. <a href="#faq">FAQ</a>
  358. <a href="{text:Nav1 URL}">{text:Nav1}</a>
  359. <a href="http://dylanohelps.tumblr.com">Credit</a>
  360. </div>
  361. </div>
  362.  
  363. <div id="mainshow">
  364. <div id="plot">
  365. <div class="heading">{text:First Title}</div>
  366. <div class="description">
  367. {Description}
  368. </div>
  369. </div>
  370. <div class="portrait">
  371. <img src="{image:Portrait}" />
  372. </div>
  373. </div>
  374.  
  375. <div id="updates">
  376. <div id="updateboxtitle">{text:Updates Title}</div>
  377. <!------- M A I N - U P D A T E S ------->
  378. <div class="update_information">
  379.  
  380. <!----- UPDATE ----->
  381. <div class="utitle">Update 4.26.13</div>
  382. <div class="ucaption">
  383. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  384. </div>
  385. <!----- UPDATE ----->
  386. <div class="utitle">Update 4.14.13</div>
  387. <div class="ucaption">
  388. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  389. </div>
  390. <!----- UPDATE ----->
  391. <div class="utitle">Update 4.05.13</div>
  392. <div class="ucaption">
  393. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  394. </div>
  395. <!----- UPDATE ----->
  396. <div class="utitle">Update 4.01.13</div>
  397. <div class="ucaption">
  398. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  399. </div>
  400. <!----- UPDATE ----->
  401. <div class="utitle">Update 3.28.13</div>
  402. <div class="ucaption">
  403. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  404. </div>
  405. <!----- UPDATE ----->
  406. <div class="utitle">Update 3.26.13</div>
  407. <div class="ucaption">
  408. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  409. </div>
  410.  
  411. </div>
  412.  
  413. <!------ M E M B E R U P D A T E S ----->
  414. <div class="section_title">Member Updates</div>
  415. <div class="member_updates">
  416.  
  417. <!----- UPDATE ----->
  418. <div class="utitle">Follow our Newest Member!</div>
  419. <div class="ucaption">
  420. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  421. </div>
  422. <!----- UPDATE ----->
  423. <div class="utitle">Please Unfollow</div>
  424. <div class="ucaption">
  425. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  426. </div>
  427. <!----- UPDATE ----->
  428. <div class="utitle">The following are on Hiatus</div>
  429. <div class="ucaption">
  430. If you think you're ready to be our next top Model, then come in today and sign up today for your first photoshoot! And, if you are able to make the cut, welcome to Models Inc, where you next photoshoot might probably be your first of many or your last.
  431. </div>
  432.  
  433. </div>
  434.  
  435. <div class="ulinks">
  436. <a href="{text:Update Link 1 URL}">{text:Update Link 1}</a>
  437. <a href="{text:Update Link 2 URL}">{text:Update Link 2}</a>
  438. <a href="{text:Update Link 3 URL}">{text:Update Link 3}</a>
  439. <a href="{text:Update Link 4 URL}">{text:Update Link 4}</a>
  440. </div>
  441. </div>
  442.  
  443. <div id="faq">
  444. <div class="faq_info">
  445.  
  446. <div class="section_title">Are original characters accepted?</div>
  447. <div class="answer">Only when stated.</div>
  448.  
  449. <div class="section_title">How many characters are we limited to?</div>
  450. <div class="answer">Everyone is only limited to ONE character, unless proven really active then we will discuss on a second character.</div>
  451.  
  452. <div class="section_title">Who are the admins of this roleplay?</div>
  453. <div class="answer">You can find everything about the admins on the Admins page.</div>
  454.  
  455. <div class="section_title">When are you making the next batch of character bios?</div>
  456. <div class="answer">We are still working on the biographies at the moment because we really want to have them become unique even though this is just a fashion and modeling roleplay. We are currently doing the 5th bio our of the 10 we are set to release.</div>
  457.  
  458. <div class="section_title">Hey, we're a new roleplay and we would love it if you ave us a shoutout!</div>
  459. <div class="answer">We're terribly sorry but we don't do those here in this roleplay. That is why there are RPC/H/As out there willing to give your roleplays a shoutout or a promotion. We are a roleplay just like you but you have to advertise in the appropiate way, which is going to a RPC/H/A for promotions. Thank you.</div>
  460.  
  461. <div class="section_title">Where are the rest of the posts?</div>
  462. <div class="answer">As you might have noticed, this page is specifically for information on the roleplay and everything revolving around it. If you'd like to follow us on our main account for all the posts, click on the navigation link above.</div>
  463. </div>
  464.  
  465. <div class="askbox">
  466. <div class="faq_mega">{text:FAQ Title}</div>
  467. <div style="margin-top: 50px;">
  468. <div class="ask_title">If you've read our FAQ, proceed:</div>
  469. <iframe src="http://www.tumblr.com/ask_form/{text:Ask Box URL}.tumblr.com" id="ask_form" height="190" width="450" scrolling="no"></iframe>
  470. <!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  471. <div id="ask_h" onClick="apagar(); this.style.display='none';">
  472. </div>
  473. </div>
  474.  
  475.  
  476.  
  477. </body>
  478. </html>
Advertisement
Add Comment
Please, Sign In to add comment