API tools faq
paste
Advertisement
dylanohelps

2.4 GRANDEUR

dylanohelps
Apr 3rd, 2015
1,949
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---------------
  4.  
  5.  
  6.  
  7.  
  8. 2.4 - "GRANDEUR" by DOMINICWRITES
  9. Rules and Regulations:
  10. #1: Please DO NOT commit thievery and steal this theme/page. I've worked hard on it so I'd appreciate if you didn't.
  11.  
  12. #2: DO NOT redistribute this theme/page.
  13.  
  14. #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.
  15.  
  16. CREDITS:
  17.  
  18. Modal Window by Tympanus's CoDrops
  19. Backgrounds and photos credited to their respective owners
  20. Fonts by Google Fonts
  21.  
  22. ---------------->
  23.  
  24. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  25. <head>
  26. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  27.  
  28. <title>{Title}</title>
  29.  
  30. <meta charset="utf-8">
  31.  
  32. <meta name="description" content="{MetaDescription}" />
  33.  
  34. <link rel="shortcut icon" href="{Favicon}" />
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  36.  
  37. <!-- FONT SCRIPT CODES -->
  38.  
  39. <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
  40. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  41. <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800' rel='stylesheet' type='text/css'>
  42. <link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
  43. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  44.  
  45.  
  46. <!-- JAVASCRIPT CODES -->
  47. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  48. <script type="text/javascript" src="http://static.tumblr.com/kamm2qy/toRnm2adj/scroll.js"></script>
  49.  
  50.  
  51.  
  52.  
  53. </head>
  54. <style type="text/css">
  55. body {
  56. margin: 0px;
  57. padding: 0px;
  58. width: 100%;
  59. height: 100%;
  60. list-style: none;
  61. background-color: #FFFFFF;
  62. font-family: 'Roboto', sans-serif;
  63. font-weight: 300;
  64. font-size: 10px;
  65. color: #877b76;
  66.  
  67.  
  68. }
  69.  
  70. a {
  71. text-decoration: none;
  72. color: #0195ab;
  73. }
  74.  
  75. b,i,strong,em {
  76. color: #cbd165;
  77. }
  78.  
  79. ::-webkit-scrollbar-thumb:vertical {
  80. background-color: #e1a5a3;
  81. height: 10px;
  82. }
  83. ::-webkit-scrollbar-thumb:horizontal {
  84. background-color: #e1a5a3;
  85. height: 7px!important;
  86. }
  87. ::-webkit-scrollbar {
  88. background-color: transparent;
  89. height: px;
  90. width: 4px;
  91. }
  92.  
  93. content {
  94. width: 100%;
  95. height: 100%;
  96. position: absolute;
  97. }
  98.  
  99. #sidenav {
  100. display: table;
  101. position: fixed;
  102. float: left;
  103. padding: 10px;
  104. height: 100%;
  105. width: auto;
  106. z-index: 999;
  107. }
  108.  
  109. #sidenav .nav {
  110. vertical-align: middle;
  111. display: table-cell;
  112. }
  113.  
  114. #sidenav .nav a {
  115. display: block;
  116. vertical-align: middle;
  117. padding: 7px 7px;
  118. background-color: #FFFFFF;
  119. margin: 5px 0px;
  120. border-radius: 7px;
  121. }
  122.  
  123. .nav .name {
  124. position: absolute;
  125. margin-left: 10px;
  126. background-color: #FFFFFF;
  127. padding: 2px 5px;
  128. font-family: 'calibri';
  129. font-size: 8px;
  130. color: #404040;
  131. text-align: center;
  132. width: 150px;
  133. max-width: 200px;
  134. font-weight: 700;
  135. text-transform: uppercase;
  136. opacity: 0;
  137. -webkit-transition: all 0.4s ease-in-out;
  138. -moz-transition: all 0.4s ease-in-out;
  139. -o-transition: all 0.4s ease-in-out;
  140. -ms-transition: all 0.4s ease-in-out;
  141. transition: all 0.4s ease-in-out;
  142. }
  143.  
  144. .link:hover .name {
  145. opacity: 1;
  146. margin-left: 40px;
  147. }
  148.  
  149. /* ALL LARGE BOXES */
  150. .box {
  151. width: 100%;
  152. height: 100%;
  153. position: relative;
  154. display: table;
  155. }
  156.  
  157. .info {
  158. display: table-cell;
  159. vertical-align: middle;
  160. width: 900px;
  161. }
  162.  
  163. .charname {
  164. font-family: 'Oranienbaum';
  165. font-size: 24px;
  166. color: #FFFFFF;
  167. width: 200px;
  168. vertical-align: middle;
  169. text-align: center;
  170. text-transform: uppercase;
  171. padding: 10px 20px 7px 20px;
  172. border: 3px solid #FFFFFF;
  173. margin: auto;
  174. -webkit-transition: all 0.4s ease-in-out;
  175. -moz-transition: all 0.4s ease-in-out;
  176. -o-transition: all 0.4s ease-in-out;
  177. -ms-transition: all 0.4s ease-in-out;
  178. transition: all 0.4s ease-in-out;
  179. }
  180.  
  181. .charname:hover {
  182. background-color: #FFFFFF;
  183. border: 3px solid #FFFFFF;
  184. color: #202020;
  185. cursor: pointer;
  186. }
  187.  
  188. /* MODAL WINDOW CSS */
  189.  
  190. .md-modal {
  191. position: fixed;
  192. top: 50%;
  193. left: 50%;
  194. width: 50%;
  195. width: 600px;
  196. max-height: 500px;
  197. overflow: auto;
  198. z-index: 2000;
  199. visibility: hidden;
  200. vertical-align: middle;
  201. -webkit-backface-visibility: hidden;
  202. -moz-backface-visibility: hidden;
  203. backface-visibility: hidden;
  204. -webkit-transform: translateX(-50%) translateY(-50%);
  205. -moz-transform: translateX(-50%) translateY(-50%);
  206. -ms-transform: translateX(-50%) translateY(-50%);
  207. transform: translateX(-50%) translateY(-50%);
  208. }
  209.  
  210. .md-show {
  211. visibility: visible;
  212. }
  213.  
  214. .md-overlay {
  215. position: fixed;
  216. width: 100%;
  217. height: 100%;
  218. visibility: hidden;
  219. top: 0;
  220. left: 0;
  221. z-index: 1000;
  222. opacity: 0;
  223. background: rgba(255,255,255,0.8); /* WHITE BACKGROUND W/ OPACITY */
  224. -webkit-transition: all 0.3s;
  225. -moz-transition: all 0.3s;
  226. transition: all 0.3s;
  227. }
  228.  
  229. .md-show ~ .md-overlay {
  230. opacity: 1;
  231. visibility: visible;
  232. }
  233.  
  234. /* Content styles */
  235. .md-content {
  236. color: #fff;
  237. background: #EEEEEE;
  238. position: relative;
  239. border-radius: 3px;
  240. margin: auto;
  241. padding-top: 40px;
  242. }
  243.  
  244. .md-content > div {
  245. padding: 15px 40px 30px;
  246. margin: 0;
  247. font-weight: 300;
  248. font-size: 1.15em;
  249. }
  250.  
  251. .md-close {
  252. text-align: center;
  253. text-transform: uppercase;
  254. font-family: 'Oranienbaum';
  255. font-size: 12px;
  256. color: #202020;
  257. background-color: #FFFFFF;
  258. padding: 5px 10px;
  259. margin-top: 20px;
  260. width: 40px;
  261. }
  262.  
  263. /* Effect 1: Fade in and scale up */
  264. .md-effect-1 .md-content {
  265. -webkit-transform: scale(0.7);
  266. -moz-transform: scale(0.7);
  267. -ms-transform: scale(0.7);
  268. transform: scale(0.7);
  269. opacity: 0;
  270. -webkit-transition: all 0.3s;
  271. -moz-transition: all 0.3s;
  272. transition: all 0.3s;
  273. }
  274.  
  275. .md-show.md-effect-1 .md-content {
  276. -webkit-transform: scale(1);
  277. -moz-transform: scale(1);
  278. -ms-transform: scale(1);
  279. transform: scale(1);
  280. opacity: 1;
  281. }
  282.  
  283. .top {
  284. width: 500px;
  285. height: auto;
  286. margin-bottom: 20px;
  287. display: flex;
  288. display: -webkit-flex;
  289. flex-direction: row;
  290. -webkit-flex-direction: row;
  291. margin: auto;
  292. }
  293.  
  294. .portrait {
  295. width: 500px;
  296. height: 250px;
  297. padding: 30px;
  298. background-color: #FFFFFF;
  299. display: inline-block;
  300. }
  301.  
  302. .portrait img {
  303. width: 440px;
  304. height: 250px;
  305. }
  306.  
  307. .name {
  308. width: 440px;
  309. height: auto;
  310. padding: 10px 30px 8px 30px;
  311. background-color: #AAAAAA;
  312. color: #FFFFFF;
  313. font-family: "Oranienbaum";
  314. font-size: 24px;
  315. text-transform: uppercase;
  316. text-align: right;
  317. margin: auto;
  318. }
  319.  
  320. .bio {
  321. width: 500px;
  322. padding: 20px 0px;
  323. font-family: "libre Baskerville";
  324. font-size: 10px;
  325. font-style: italic;
  326. color: #202020;
  327. text-align: justify;
  328. margin-top: 20px;
  329. margin: auto;
  330. }
  331.  
  332. .links {
  333. display: block;
  334. width: 500px;
  335. margin: auto;
  336. background-color: #202020;
  337. display: flex;
  338. display: -webkit-flex;
  339. flex-direction: row;
  340. -webkit-flex-direction: row;
  341. }
  342.  
  343. .linka {
  344. width: 160px;
  345. height: auto;
  346. padding: 20px;
  347. background-color: #FFFFFF;
  348. display: inline-block;
  349. }
  350.  
  351. .linka a {
  352. display: block;
  353. padding: 5px;
  354. margin-bottom: 5px;
  355. background-color: #EEEEEE;
  356. color: #202020;
  357. font-family: "Oranienbaum";
  358. font-size: 12px;
  359. text-transform: uppercase;
  360. text-align: center;
  361. }
  362.  
  363. .connections {
  364. width: 260px;
  365. height: auto;
  366. padding: 20px;
  367. background-color: #DDDDDD;
  368. display: inline-block;
  369. }
  370.  
  371. .contitle {
  372. display: block;
  373. width: 280px;
  374. margin-left: -20px;
  375. margin-top: -20px;
  376. padding: 10px;
  377. font-family: "Oranienbaum";
  378. font-size: 16px;
  379. text-align: center;
  380. text-transform: uppercase;
  381. color: #202020;
  382. background-color: #FFFFFF;
  383. margin-bottom: 20px;
  384. }
  385.  
  386. .conbox {
  387. display: block;
  388. width: 240px;
  389. height: auto;
  390. padding: 10px;
  391. margin-bottom: 10px;
  392. }
  393.  
  394. .contop {
  395. display: flex;
  396. display: -webkit-flex;
  397. flex-direction: row;
  398. -webkit-flex-direction: row;
  399. width: 240px;
  400. height: auto;
  401. background-color: #FFFFFF;
  402. }
  403.  
  404. .conpic {
  405. width: 30px;
  406. height: 30px;
  407. background-color: #AAAAAA;
  408. display: inline-block;
  409. }
  410.  
  411. .conpic img {
  412. width: 30px;
  413. height: 30px;
  414. }
  415.  
  416. .conname {
  417. display: inline-block;
  418. width: 190px;
  419. height: auto;
  420. padding: 7px 7px 0px 7px;
  421. background-color: #FFFFFF;
  422. font-family: "Oranienbaum";
  423. font-size: 14px;
  424. text-align: right;
  425. text-transform: uppercase;
  426. color: #202020;
  427. }
  428.  
  429. .condesc {
  430. display: block;
  431. background-color: #FFFFFF;
  432. font-family: "Libre Baskerville";
  433. font-size: 10px;
  434. font-style: italic;
  435. color: #000000;
  436. text-align: justify;
  437. padding: 20px;
  438. }
  439.  
  440. </style>
  441. <body>
  442.  
  443. <!-- SIDE NAVIGATION -->
  444. <nav id="sidenav">
  445. <div class="nav">
  446. <div class="link"><div class="name">CHARACTER NAME</div><a class="scroll" href="#CHARACTERIDANCHOR"></a></div>
  447. <!-- PASTE NEW LINKS UNDER HERE -->
  448.  
  449. <div class="link"><div class="name">Theme Credit</div><a href="http://dominicwrites.tumblr.com"></a></div>
  450. </div>
  451. </nav>
  452.  
  453.  
  454. <!-- CHARACTER CONTENT -->
  455. <content>
  456. <!-- CHARACTER BOX -->
  457. <div class="box" id="CHARACTERIDANCHOR" style="background:url('BACKGROUND URL HERE')no-repeat center top fixed; background-color: #EEEEEE; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"> <!-- BACKGROUND URL = 1920X1280 FOR BEST RESOLUTION -->
  458. <div class="info">
  459. <div class="charname md-trigger" data-modal="modal-1">CHARACTER FULL NAME</div><!-- REMEMBER TO CHANGE "MODAL-1" TO "MODAL-2" AFTER MAKING THE SECOND BOX -->
  460. <div class="md-modal md-effect-1" id="modal-1"><!-- REMEMBER TO CHANGE "MODAL-1" TO "MODAL-2" AFTER MAKING THE SECOND BOX -->
  461. <div class="md-content">
  462. <div>
  463. <div class="top">
  464. <div class="portrait"><img src="CHARACTER PORTRAIT HEADER URL" /></div> <!-- PORTRAIT = 440X250 -->
  465.  
  466. </div>
  467. <div class="name">CHARACTER FULL NAME</div>
  468.  
  469. <div class="bio">
  470. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel ex placerat, auctor elit in, pellentesque dui. Sed facilisis lacus sed felis blandit, sodales gravida ligula porta. Vestibulum orci diam, hendrerit sit amet turpis id, sagittis tempus dolor. Proin tempor mi et augue viverra, sed facilisis arcu dignissim. Cras risus dolor, pharetra maximus arcu non, finibus bibendum nisl. Suspendisse ut lobortis nunc. Etiam varius massa nulla, vitae vulputate sapien molestie vel. Aenean nec orci velit. Integer vitae vulputate leo. Ut non tempor elit. Donec accumsan porttitor urna, et eleifend ipsum finibus ut. In cursus et mi a viverra.
  471. <br /><br />
  472. Fusce non ultricies tortor. In tempor ex quis tellus bibendum, in varius lorem tincidunt. Ut dictum tristique risus, pretium pulvinar augue porta sit amet. Duis vel est iaculis eros efficitur mattis. Duis et pellentesque ipsum. Nunc efficitur libero quis neque ultricies, eu pellentesque lorem imperdiet. Etiam iaculis leo sed quam pharetra, ut efficitur sem aliquet. Donec at ligula vitae augue pharetra euismod. Suspendisse ornare imperdiet erat, non sollicitudin mi eleifend eget. Curabitur molestie semper ligula quis sagittis. Etiam justo ipsum, pharetra non consectetur sodales, condimentum vitae dolor. Nullam quis dictum est.
  473. <br /><br />
  474. Maecenas quam est, sagittis nec aliquet et, pulvinar ac elit. Proin imperdiet lectus quis auctor scelerisque. Praesent commodo a turpis nec varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dapibus magna ac metus hendrerit pellentesque. Aenean vitae sem sit amet quam auctor aliquet eu non massa. Aliquam blandit lorem rhoncus malesuada euismod. Fusce rutrum fringilla lacus, a cursus nibh tempor eu. Sed non ultrices ipsum, eget rutrum nunc.
  475. </div>
  476. <div class="links">
  477. <div class="linka">
  478. <a href="#">Link 1</a>
  479. <a href="#">Link 2</a>
  480. <a href="#">Link 3</a>
  481. <a href="#">Link 4</a>
  482. </div>
  483. <div class="connections">
  484. <div class="contitle">Connections</div>
  485. <div class="conbox">
  486. <div class="contop">
  487. <div class="conpic"><img src="SMALL ICON URL - 30X30" /></div> <!-- CONPIC IS 30X30 -->
  488. <div class="conname">CONNECTION NAME</div>
  489. </div>
  490. <div class="condesc">
  491. Maecenas quam est, sagittis nec aliquet et, pulvinar ac elit. Proin imperdiet lectus quis auctor scelerisque. Praesent commodo a turpis nec varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dapibus magna ac metus hendrerit pellentesque. Aenean vitae sem sit amet quam auctor aliquet eu non massa. Aliquam blandit lorem rhoncus malesuada euismod. Fusce rutrum fringilla lacus, a cursus nibh tempor eu. Sed non ultrices ipsum, eget rutrum nunc.
  492. </div>
  493. </div>
  494.  
  495. <div class="conbox">
  496. <div class="contop">
  497. <div class="conpic"><img src="SMALL ICON URL - 30X30" /></div>
  498. <div class="conname">CONNECTION NAME</div>
  499. </div>
  500. <div class="condesc">
  501. Maecenas quam est, sagittis nec aliquet et, pulvinar ac elit. Proin imperdiet lectus quis auctor scelerisque. Praesent commodo a turpis nec varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dapibus magna ac metus hendrerit pellentesque. Aenean vitae sem sit amet quam auctor aliquet eu non massa. Aliquam blandit lorem rhoncus malesuada euismod. Fusce rutrum fringilla lacus, a cursus nibh tempor eu. Sed non ultrices ipsum, eget rutrum nunc.
  502. </div>
  503. </div>
  504.  
  505. </div>
  506. </div>
  507. <div class="md-close">Close</div>
  508. </div>
  509. </div>
  510. </div>
  511. <div class="md-overlay"></div>
  512. </div>
  513. </div>
  514. <!-- END BOX CODE -->
  515.  
  516.  
  517.  
  518.  
  519.  
  520.  
  521.  
  522.  
  523.  
  524. <!-- STEP BY STEP ON CREATING A NEW CHARACTER BOX THAT WORKS
  525.  
  526. In order for the scrolling, modal window, and navigation link to work, you must carefully follow each step and make sure you don't skip.
  527.  
  528. 1: Copy the box code where it indicates where it starts to where it ends (aka the "END BOX CODE" comment).
  529. 2: After pasting it into the blank space above, it's time to change some things.
  530. 3: First, look for the "modal-1" IDs (there are two of these that need to be changed). Since you just copied the "second" character box,
  531. you change the "modal-1" to "modal-2" in order for the data inside of the modal window box to be different. This is to prevent the stuff
  532. inside of the pop up boxes from being the same thing.
  533. 4: After you have changed the number, go to the top of the new box code and change the CHARACTERIDANCHOR in the "id='CHARACTERIDANCHOR'" to the next character name. So, for example,
  534. if your next character's name is "Jane", you could change the id of the box to "id='jane'".
  535. 5: In the "sidenav" divs up at the very top of the <body> code, copy and paste a new anchor link so that when you click on the small circles on the left,
  536. it will scroll down to the character's box. After you have done this, change the "#CHARACTERIDANCHOR" to "#jane" or #your-character's-name.
  537. 6: All the other information for editing should be self explanatory. There are the portraits, the biography section, and the links and connections section.
  538.  
  539. If you have more questions, feel free to contact me.
  540. -->
  541.  
  542.  
  543.  
  544. </content>
  545.  
  546.  
  547. <!-- DO NOT REMOVE -->
  548. <script type="text/javascript" src="http://static.tumblr.com/kamm2qy/gianm80c2/classie.js"></script>
  549. <script type="text/javascript" src="http://static.tumblr.com/kamm2qy/NY8nm80dc/cssparser.js"></script>
  550. <script type="text/javascript" src="http://static.tumblr.com/kamm2qy/7O5nm80e3/modaleffects.js"></script>
  551. <script type="text/javascript" src="http://static.tumblr.com/kamm2qy/qHUnm80fi/modernizr.custom.js"></script>
  552. </body>
  553. </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!