API tools faq
paste
Advertisement
septims

Box Page Theme

septims
Apr 8th, 2014
6,376
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. [[gollum voice]]
  5.  
  6. leave now and never come back
  7.  
  8. -->
  9.  
  10.  
  11.  
  12.  
  13. <!DOCTYPE html>
  14. <head>
  15.  
  16. <title>{Title}</title>
  17.  
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21.  
  22.  
  23. <!-- jquery -->
  24. <script src="http://tympanus.net/Development/FullscreenLayoutPageTransitions/js/modernizr.custom.js"></script>
  25.  
  26. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  27.  
  28. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29.  
  30. <script>
  31.  
  32. (function($){
  33.  
  34. $(document).ready(function(){
  35.  
  36. $("a[title]").style_my_tooltips({
  37.  
  38. tip_follows_cursor:true,
  39.  
  40. tip_delay_time:20,
  41.  
  42. tip_fade_speed:400,
  43.  
  44. attribute:"title"
  45.  
  46. });
  47.  
  48. });
  49.  
  50. })(jQuery);
  51.  
  52. </script>
  53.  
  54. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
  55.  
  56.  
  57. <!--CSS customization here. -->
  58.  
  59. <style type="text/css">
  60.  
  61.  
  62.  
  63. #s-m-t-tooltip{
  64. font-size:12px;
  65. position:absolute;
  66. font-weight:bold;
  67. margin:15px 25px;
  68. letter-spacing:2px;
  69. z-index:9999;
  70. background:#C8D4A9;
  71. font-family:open sans;
  72. text-transform:uppercase;
  73. padding:8px 12px;
  74. }
  75.  
  76.  
  77.  
  78. body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
  79.  
  80. #codrops-ad-wrapper {
  81. top: auto !important;
  82. bottom: 10px;
  83. }
  84.  
  85. *,
  86. *:after,
  87. *:before {
  88. -webkit-box-sizing: border-box;
  89. -moz-box-sizing: border-box;
  90. box-sizing: border-box;
  91. }
  92.  
  93. body {
  94. font-family:georgia;
  95. color: #f2ede3;
  96. background: #333;
  97. font-size: 0.9em;
  98. font-weight: 300;
  99. }
  100. #bar {width:100%;
  101. z-index:999;
  102. position:fixed;
  103. bottom:0;
  104. background:rgba(0,0,0,.2);
  105. padding:5px 0;
  106. }
  107. #bar a {font-size:10px;
  108. margin-left:10px;
  109. font-weight:bold;
  110. color:#f2ede3;
  111. text-decoration:none;
  112. font-family:open sans;
  113. text-transform:uppercase;
  114. letter-spacing:2px;}
  115. #bar a:hover {color:rgba(0,0,0,.4);}
  116. .bl-main a {
  117. color: #f0f0f0;
  118. text-decoration: none;
  119. font-weight: 700;
  120. letter-spacing: 2px;
  121. padding: 0 5px;
  122. text-transform: uppercase;
  123. font-size: 80%;
  124. }
  125.  
  126. .bl-main a:hover {
  127. color: #fff;
  128. }
  129.  
  130. .container { height: 100%; }
  131.  
  132. .bl-main {
  133. position: absolute;
  134. width: 100%;
  135. height: 100%;
  136. overflow: hidden;
  137. }
  138.  
  139. .bl-main > section {
  140. position: absolute;
  141. width: 50%;
  142. height: 50%;
  143. }
  144.  
  145. .bl-main > section:first-child {
  146. top: 0;
  147. left: 0;
  148. background: #9DC2BA;
  149. }
  150.  
  151. .bl-main > section:nth-child(2) {
  152. top: 0;
  153. left: 50%;
  154. background: #B6CEC1;
  155. }
  156.  
  157. .bl-main > section:nth-child(3) {
  158. top: 50%;
  159. left: 0;
  160. background: #B0ADA9;
  161. }
  162.  
  163. .bl-main > section:nth-child(4) {
  164. top: 50%;
  165. left: 50%;
  166. background: #F39899;
  167. }
  168.  
  169. .bl-box {
  170. position: relative;
  171. width: 100%;
  172. height: 100%;
  173. cursor: pointer;
  174. opacity: 1;
  175. /* Centering with flexbox */
  176. display: -webkit-box;
  177. display: -moz-box;
  178. display: -ms-flexbox;
  179. display: -webkit-flex;
  180. display: flex;
  181. -webkit-flex-direction: row;
  182. -ms-flex-direction: row;
  183. flex-direction: row;
  184. -webkit-flex-wrap: wrap;
  185. -ms-flex-wrap: wrap;
  186. flex-wrap: wrap;
  187. -webkit-box-pack: center;
  188. -moz-box-pack: center;
  189. -webkit-justify-content: center;
  190. -ms-flex-pack: center;
  191. justify-content: center;
  192. -webkit-box-align: center;
  193. -moz-box-align: center;
  194. -webkit-align-items: center;
  195. -ms-flex-align: center;
  196. align-items: center;
  197. }
  198.  
  199. .bl-box h2 {
  200. text-align: center;
  201. font-family: 'open sans';
  202. font-weight: bold;
  203. margin: 0;
  204. padding: 20px;
  205. width: 100%;
  206. font-size:14px;
  207. letter-spacing: 2px;
  208. text-transform: uppercase;
  209. }
  210. .bl-box span {border-top:1px solid #f2ede3;
  211. width:125px;
  212. padding-top:10px;
  213. letter-spacing:0;
  214. font-weight:normal;
  215. font-size:12px;
  216. margin:10px auto 0 auto;
  217. text-transform:none;
  218. display:block;
  219. font-family:georgia;
  220. font-style:italic;}
  221.  
  222.  
  223. .bl-main > section .bl-icon-close {
  224. position: absolute;
  225. top: 30px;
  226. right: 30px;
  227. cursor: pointer;
  228. z-index: 100;
  229. opacity: 0;
  230. pointer-events: none;
  231. }
  232.  
  233. .bl-icon-close img{
  234. width: 30px;
  235. -webkit-filter:invert(1);
  236. opacity:.8;
  237. }
  238.  
  239. .bl-content {
  240. opacity: 0;
  241. pointer-events: none;
  242. position: absolute;
  243. top: 60px;
  244. left: 15%;
  245. right: 15%;
  246. bottom: 30px;
  247. padding: 0 20px;
  248. overflow: hidden;
  249. overflow-y: auto;
  250. }
  251.  
  252. /* Custom content */
  253.  
  254. .bl-content p {
  255. margin: 0 auto;
  256. padding-bottom: 15px;
  257. font-size:16px;
  258. line-height: 2;
  259. font-family:open sans;
  260. }
  261.  
  262. .bl-content h2 {
  263. font-size: 24px;
  264. font-family:open sans;
  265. text-transform:uppercase;
  266. letter-spacing:2px;
  267. font-weight:bold;
  268. margin: 0 0 20px 0;
  269. }
  270.  
  271. .bl-content article {
  272. padding: 20px 40px 20px 0px;
  273. }
  274.  
  275. .bl-content article h3 {
  276. font-weight: 700;
  277. letter-spacing: 2px;
  278. text-transform: uppercase;
  279. text-shadow:2px 2px #999;
  280. margin: 0 0 10px 0;
  281. padding-top: 20px;
  282. font-size: 1.4em;
  283. }
  284.  
  285. .bl-content article a {
  286. color: rgba(242,237,227,1);
  287. text-transform:none;
  288. letter-spacing:0;
  289. font-size:14px;
  290. font-weight:normal;
  291. font-style:italic;
  292. font-family:georgia;
  293. margin-left:0;
  294. padding-left:0;
  295. }
  296. .bl-content article a:hover { color: rgba(0,0,0,0.2);}
  297. .bl-content > ul {
  298. list-style: none;
  299. padding: 0;
  300. margin: 0;
  301. margin-top:25px;
  302. }
  303.  
  304. .bl-content > ul li {
  305. display:inline-block;
  306. width:300px;
  307. margin:0 50px 100px 0;
  308. position:relative;
  309. }
  310. .bl-content > ul li div {margin-left:135px;
  311. display:inline-block;
  312. }
  313. .bl-content > ul li a {
  314. display: block;
  315. margin-bottom:10px;
  316. padding: 0;
  317. color:#f2ede3;
  318. font-family:open sans;
  319. font-weight:bold;
  320. text-transform:uppercase;
  321. letter-spacing:2px;
  322. font-size:14px;
  323. }
  324. .bl-content > ul li a:hover {color:rgba(0,0,0,.2);}
  325. .bl-content > ul li img {
  326. display:block;
  327. position:absolute;
  328. margin-left:15px;
  329. width: 100px;
  330. height:100px;
  331. border:10px solid rgba(0,0,0,.2);
  332. }
  333. .bl-content > ul li span {font-size:12px;
  334. font-style:italic;
  335. width:150px;
  336. display:block;
  337. border-top:1px solid #f2ede3;
  338. padding-top:7px;
  339. }
  340.  
  341.  
  342. /* Transition classes and properties */
  343. /* Separated for a better overview and control */
  344.  
  345. .bl-main > section {
  346. -webkit-transition: all 0.5s ease-in-out;
  347. -moz-transition: all 0.5s ease-in-out;
  348. transition: all 0.5s ease-in-out;
  349. }
  350.  
  351. .bl-main > section.bl-expand {
  352. width: 100%;
  353. height: 100%;
  354. top: 0;
  355. left: 0;
  356. }
  357.  
  358. .bl-main > section.bl-expand-top {
  359. z-index: 100;
  360. }
  361.  
  362. .bl-main > section:first-child.bl-expand {
  363. background: #9DC2BA;
  364. }
  365. .bl-main > section:nth-child(2).bl-expand {
  366. background: #B6CEC1;
  367. }
  368. .bl-main > section:nth-child(3).bl-expand {
  369. background: #B0ADA9;
  370. }
  371. .bl-main > section:nth-child(4).bl-expand {
  372. background: #F39899;
  373. }
  374.  
  375. .bl-main.bl-expand-item > section:not(.bl-expand),
  376. .bl-main.bl-expand-item > section.bl-scale-down {
  377. -webkit-transform: scale(0.5);
  378. -moz-transform: scale(0.5);
  379. -ms-transform: scale(0.5);
  380. transform: scale(0.5);
  381. opacity: 0;
  382. }
  383.  
  384. .bl-box {
  385. -webkit-transition: opacity 0.2s linear 0.5s;
  386. -moz-transition: opacity 0.2s linear 0.5s;
  387. transition: opacity 0.2s linear 0.5s;
  388. }
  389.  
  390. section.bl-expand .bl-box {
  391. opacity: 0;
  392. -webkit-transition: opacity 0s linear;
  393. -moz-transition: opacity 0s linear;
  394. transition: opacity 0s linear;
  395. }
  396.  
  397. .bl-box h2 {
  398. -webkit-transition: all 0.2s ease-in-out;
  399. -moz-transition: all 0.2s ease-in-out;
  400. transition: all 0.2s ease-in-out;
  401. }
  402.  
  403. #contact h1 {font-size:18px;
  404. text-shadow:2px 2px rgba(0,0,0,.2);}
  405. #contact p {font-size:14px;
  406. text-align:justify;
  407. }
  408.  
  409. #contact span {float:right;
  410. display:block;
  411. margin-left:50px;
  412. border:15px solid rgba(0,0,0,.2);
  413. margin-top:15px;
  414. margin-bottom:10px;}
  415. #contact iframe {display:block;}
  416.  
  417. .no-touch section:not(.bl-expand) .bl-box:hover h2 {
  418. letter-spacing:5px;
  419. }
  420.  
  421. .bl-content,
  422. .bl-icon-close {
  423. -webkit-transition: opacity 0.1s linear 0s;
  424. -moz-transition: opacity 0.1s linear 0s;
  425. transition: opacity 0.1s linear 0s;
  426. }
  427.  
  428. section.bl-expand .bl-content,
  429. section.bl-expand .bl-icon-close {
  430. pointer-events: auto;
  431. opacity: 1;
  432. -webkit-transition: opacity 0.3s linear 0.5s;
  433. -moz-transition: opacity 0.3s linear 0.5s;
  434. transition: opacity 0.3s linear 0.5s;
  435. }
  436.  
  437. blockquote {font-size:24px;
  438. font-style:italic;
  439. font-weight:bold;
  440. text-shadow:2px 2px #999;
  441. margin:25px 50px 25px 80px;
  442. }
  443. blockquote:before {content:'“';
  444. font-size:50px;
  445. position:absolute;
  446. margin-left:-40px;
  447. margin-top:-10px;
  448. }
  449. hr {
  450. outline:0;
  451. background:transparent;
  452. margin:50px;
  453. height:0px;
  454. border:0;
  455. border-top:2px dashed #F2EDE3;
  456. text-shadow:0px;
  457. }
  458. </style>
  459.  
  460.  
  461.  
  462.  
  463. </head>
  464.  
  465. <body>
  466. <div id="bar"><a href="/">Home</a><a href="http://tumblr.com/dashboard">Dash</a><a href="http://farahmir.tumblr.com" target="_blank">Theme by septim</a></div>
  467.  
  468. <div class="container">
  469.  
  470. <div id="bl-main" class="bl-main">
  471. <section>
  472. <div class="bl-box">
  473. <!-- about title -->
  474. <h2 class="bl-icon bl-icon-about">About
  475. <!-- about subtitle -->
  476. <span>everything you'd ever want to know</span>
  477. </h2>
  478. </div>
  479. <div class="bl-content">
  480. <!-- your about goes here chicas -->
  481. <h2>About</h2>
  482. <p>Here you can write all that you desire. Make sure to wrap your content with paragraph separators. I wouldn't use this theme unless you are comfortable editing both CSS and HTML. This basically goes on and on. Add horizontal lines if you want to section off things. You can also add a quote in blockquotes to make it stand out. Be creative!</p>
  483. <hr>
  484. <blockquote>Do what you can, with what you have, where you are.</blockquote>
  485. <hr>
  486. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
  487. </div>
  488. <span class="bl-icon bl-icon-close"><img src="http://static.tumblr.com/sas2ex2/aaMn3pvg6/delete.png"></span>
  489. </section>
  490. <section>
  491. <div class="bl-box">
  492. <!-- friends title -->
  493. <h2 class="bl-icon-works">Friends
  494. <!-- friends subtitle -->
  495. <span>they are pretty lame though</span>
  496. </h2>
  497. </div>
  498. <div class="bl-content">
  499. <h2>My Friends</h2>
  500. <p>Without these lunatics I'd be more lonely than I already am, if that is even possible.</p>
  501. <ul>
  502.  
  503. <li><img src="http://media.tumblr.com/fcae0f6cf18fbd881465ed70e7ae0797/tumblr_inline_mrvwoy9yxM1rhgi30.png" />
  504. <div><a href="blog url" title="username">friend name</a> <span>short description</span>
  505. </div>
  506. </li>
  507.  
  508. <li><img src="http://media.tumblr.com/8b182084424c313bc066aee4bfb951af/tumblr_inline_mrvwp75oJd1rhgi30.png" />
  509. <div><a href="blog url" title="username">friend name</a> <span>short description</span>
  510. </div>
  511. </li>
  512.  
  513. <li><img src="http://media.tumblr.com/320c3d4d79d8072d3db2ab524d25b887/tumblr_inline_mp0h94Qm0G1rhgi30.png" />
  514. <div><a href="blog url" title="username">friend name</a> <span>short description</span>
  515. </div>
  516. </li>
  517.  
  518. <li>
  519. <img src="http://media.tumblr.com/ea0e5e4040d852f9e660f86712703d3f/tumblr_inline_mp0ha7Xfw81rhgi30.png" />
  520. <div><a href="blog url" title="username">friend name</a> <span>short description</span>
  521. </div>
  522. </li>
  523.  
  524. <li><img src="http://media.tumblr.com/cbb25b24f8a121e5226044318391bcbc/tumblr_inline_mrvwo2cQzt1rhgi30.png" />
  525. <div><a href="blog url" title="username">friend name</a> <span>short description</span>
  526. </div>
  527. </li>
  528. </ul>
  529. </div>
  530. <span class="bl-icon bl-icon-close"><img src="http://static.tumblr.com/sas2ex2/aaMn3pvg6/delete.png"></span>
  531. </section>
  532. <section>
  533. <div class="bl-box">
  534. <!-- Links title -->
  535. <h2 class="bl-icon-blog">Links
  536. <!-- links subtitle -->
  537. <span>some desperate order in the chaos</span>
  538. </h2>
  539. </div>
  540. <div class="bl-content">
  541. <h2>Links</h2>
  542. <article>
  543. <h3>Art & Photography</h3>
  544. <p><a href="">Musings -- I'm too lazy to write out a ton of tags.</a> <a href="">Do you hear me, over there?</a><a href="">Hello, this is me speaking.</a><a href="">I seem to have lost my way in this strange place.</a><a href="">The road goes ever on and on, down from the door where it began.</a><a href="">I swear to god I don't want to get questions from this theme.</a></p>
  545. </article>
  546. <article>
  547. <h3>Films & TV</h3>
  548. <p><a href="">Musings -- I'm too lazy to write out a ton of tags.</a> <a href="">Do you hear me, over there?</a><a href="">Hello, this is me speaking.</a><a href="">I seem to have lost my way in this strange place.</a><a href="">The road goes ever on and on, down from the door where it began.</a><a href="">I swear to god I don't want to get questions from this theme.</a></p>
  549. </article>
  550. <article>
  551. <h3>People</h3>
  552. <p><a href="">Musings -- I'm too lazy to write out a ton of tags.</a> <a href="">Do you hear me, over there?</a><a href="">Hello, this is me speaking.</a><a href="">I seem to have lost my way in this strange place.</a><a href="">The road goes ever on and on, down from the door where it began.</a><a href="">I swear to god I don't want to get questions from this theme.</a></p>
  553. </article>
  554. <article>
  555. <h3>Miscellaneous</h3>
  556. <p><a href="">Musings -- I'm too lazy to write out a ton of tags.</a> <a href="">Do you hear me, over there?</a><a href="">Hello, this is me speaking.</a><a href="">I seem to have lost my way in this strange place.</a><a href="">The road goes ever on and on, down from the door where it began.</a><a href="">I swear to god I don't want to get questions from this theme.</a></p>
  557. </article>
  558. <article>
  559. <h3>Animals</h3>
  560. <p><a href="">Musings -- I'm too lazy to write out a ton of tags.</a> <a href="">Do you hear me, over there?</a><a href="">Hello, this is me speaking.</a><a href="">I seem to have lost my way in this strange place.</a><a href="">The road goes ever on and on, down from the door where it began.</a><a href="">I swear to god I don't want to get questions from this theme.</a></p>
  561. </article>
  562. <article>
  563. <h3>Dead Things</h3>
  564. <p><a href="">Musings -- I'm too lazy to write out a ton of tags.</a> <a href="">Do you hear me, over there?</a><a href="">Hello, this is me speaking.</a><a href="">I seem to have lost my way in this strange place.</a><a href="">The road goes ever on and on, down from the door where it began.</a><a href="">I swear to god I don't want to get questions from this theme.</a></p>
  565. </article>
  566. </div>
  567. <span class="bl-icon bl-icon-close"><img src="http://static.tumblr.com/sas2ex2/aaMn3pvg6/delete.png"></span>
  568. </section>
  569. <section>
  570. <div class="bl-box">
  571. <!-- ask title -->
  572. <h2 class="bl-icon-contact">Contact
  573. <!-- ask subtitle -->
  574. <span>FAQ and guidelines for messages</span>
  575.  
  576. </h2>
  577. </div>
  578. <div class="bl-content" id="contact">
  579. <h2>Frequently Asked</h2>
  580. <p>Here is where your FAQ can go. Be sure to put your url in the code, or else the ask box won't work. You got that? You can put some general guidelines here. Extra filler text because it looks better when it's longer, don't you think?</p>
  581. <hr>
  582. <!-- PUT YOUR URL WHERE IT SAYS URL HERE -->
  583. <span><iframe frameborder="0" height="230"scrolling="no" id="ask_form" src="http://www.tumblr.com/ask_form/URLHERE.tumblr.com" width="400"></iframe> </span>
  584. <div>
  585. <h1>Common Question</h1>
  586. <p>Here is a long, lazy answer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  587. <h1>Common Question</h1>
  588. <p>Here is a long, lazy answer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  589. <h1>Common Question</h1>
  590. <p>Here is a long, lazy answer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  591. </div>
  592. </div>
  593. <span class="bl-icon bl-icon-close"><img src="http://static.tumblr.com/sas2ex2/aaMn3pvg6/delete.png"></span>
  594. </section>
  595.  
  596. </div>
  597. </div><!-- /container -->
  598. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  599. <script src="http://tympanus.net/Development/FullscreenLayoutPageTransitions/js/boxlayout.js"></script>
  600. <script>
  601. $(function() {
  602. Boxlayout.init();
  603. });
  604. </script>
  605. </body>
  606.  
  607.  
  608.  
  609. </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!