API tools faq
paste
Advertisement
b0rn-to-be-wild

All in one VII monochrome

b0rn-to-be-wild
Mar 28th, 2015
360
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | "All in One VII monochrome"
  7.  
  8. + Please do not redistribute this theme or remove credits.
  9. + You are allowed to make changes as long as you keep our credits.
  10. + If you have any questions or concerns, just contact us.
  11. + Thanks for using our page! We hope that you enjoy it!
  12.  
  13. ---->
  14.  
  15.  
  16. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  17.  
  18. <!--Google fonts-->
  19.  
  20. <link href="//fonts.googleapis.com/css?family=Dosis:400" rel="stylesheet" type="text/css">
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  25.  
  26. <style type="text/css">
  27.  
  28. /* ------ GENERAL -------*/
  29.  
  30. body {
  31. font-family:Dosis;
  32. color:#000;
  33. height:100%;
  34. overflow-x:hidden;
  35. background-color:#fff;
  36. font-size:18px;
  37. line-height:25px;
  38. margin:0;
  39. }
  40.  
  41. h1{
  42. font-family:Great Vibes;
  43. background:url('http://i62.tinypic.com/122yr6t.jpg');
  44. background-repeat: no-repeat;
  45. background-position: center;
  46. }
  47.  
  48. h2{
  49. font-family:Poiret One;
  50. }
  51.  
  52. a {
  53. color:#000;
  54. text-decoration:none;
  55. -webkit-transition:0.5s;
  56. -moz-transition:0.5s;
  57. -ms-transition:0.5s;
  58. -o-transition:0.5s;
  59. transition:0.5s;
  60. }
  61.  
  62. #s-m-t-tooltip {
  63. position:absolute;
  64. max-width:300px;
  65. font-size:12px;
  66. color:#fff;
  67. z-index:100000;
  68. margin-top:20px;
  69. text-transform:uppercase;
  70. padding:5px;
  71. background-color:#000;
  72. }
  73.  
  74. /* Webkit scrollbar */
  75.  
  76. ::-webkit-scrollbar-thumb {
  77. background: #000;
  78. height: auto;
  79. border: 3px solid #eee;
  80. }
  81.  
  82. ::-webkit-scrollbar {
  83. height:10px;
  84. width:12px;
  85. background: #000;
  86. height: auto;
  87. border: 5px solid #eee;
  88. }
  89.  
  90. /* Selection */
  91.  
  92. ::selection {
  93. background-color:#000;
  94. color:#fff;
  95. }
  96.  
  97. ::-moz-selection {
  98. background-color:#000;
  99. color:#fff;
  100. }
  101.  
  102. /* Links */
  103.  
  104. #links {
  105. position:fixed;
  106. top:35%;
  107. right:0px;
  108. padding:60px 20px 20px 45px;
  109. text-align:right;
  110. z-index:5;
  111. font-size:15px;
  112. }
  113.  
  114. #links a {
  115. display:block;
  116. width:5px;
  117. height:5px;
  118. padding:5px;
  119. margin-top:5px;
  120. border-radius:100%;
  121. border:1px solid #000;
  122. }
  123.  
  124. #links a:hover {
  125. background:#000;
  126. }
  127.  
  128. /* Main container */
  129.  
  130. .content {
  131. position:absolute;
  132. width:100%;
  133. height:100%;
  134. text-align:center;
  135. }
  136.  
  137. .container{
  138. width:80%;
  139. height:80%;
  140. margin-top:5%;
  141. padding:20px;
  142. margin-left:auto;
  143. margin-right:auto;
  144. }
  145.  
  146. .innercontainer{
  147. height:70%;
  148. padding-right:10px;
  149. padding-left:10px;
  150. overflow-y:auto;
  151. }
  152.  
  153. /* About */
  154.  
  155. #about{
  156. background:#fff;
  157. position: absolute;
  158. width: 100%;
  159. height: 100%;
  160. left: 0;
  161. top: 0;
  162. }
  163.  
  164. #about h1 {
  165. font-size:35px;
  166. color:#000;
  167. }
  168.  
  169. .portrait {
  170. width:55px;
  171. height:55px;
  172. border:5px double #000;
  173. float:left;
  174. margin:5px;
  175. -webkit-filter: grayscale(1);
  176. }
  177.  
  178. /* Faq */
  179.  
  180. #faq{
  181. background:#fff;
  182. position: absolute;
  183. width: 100%;
  184. height: 100%;
  185. left: 0;
  186. top: 100%;
  187. }
  188.  
  189. #faq h1 {
  190. font-size:35px;
  191. color:#000;
  192. }
  193.  
  194. #faq h2 {
  195. font-size:20px;
  196. font-style:italic;
  197. color:#333; /* CHANGE THE COLOR OF THE FAQ QUESTIONS */
  198. padding-top:10px;
  199. }
  200.  
  201. #faq p {
  202. line-height:100%;
  203. }
  204.  
  205. /* Navigation */
  206.  
  207. #navigation{
  208. background:#fff;
  209. position: absolute;
  210. width: 100%;
  211. height: 100%;
  212. left: 0;
  213. top: 200%;
  214. }
  215.  
  216. #navigation h1 {
  217. font-size:35px;
  218. color:#000;
  219. }
  220.  
  221. /* General style of the links in the navigation section */
  222.  
  223. #navigation a {
  224. display:inline-block;
  225. padding:2px 6px 2px 6px;
  226. margin:5px;
  227. font-size:16px;
  228. background:#000;
  229. }
  230.  
  231. .linkbox, .pagebox, tagbox{
  232. padding-bottom:10px;
  233. }
  234.  
  235. /* Style of links in he faq section*/
  236.  
  237. .linkbox a{
  238. color:#fff;
  239. }
  240.  
  241. /* Style of page links in he faq section*/
  242.  
  243. .pagebox a{
  244. color:#fff;
  245. }
  246.  
  247. /* Style of tags in he navigation section*/
  248.  
  249. .tagbox a{
  250. color:#fff;
  251. }
  252.  
  253. /* Blogroll */
  254.  
  255. #blogroll{
  256. background:#fff;
  257. position: absolute;
  258. width: 100%;
  259. height: 100%;
  260. left: 0;
  261. top: 300%;
  262. }
  263.  
  264. #blogroll h1{
  265. font-size:35px;
  266. color:#000;
  267. }
  268.  
  269. #blogroll img {
  270. width:60px;
  271. height:60px;
  272. margin:5px;
  273. border:5px double #000;
  274. -webkit-filter: grayscale(1);
  275. }
  276.  
  277. #blogroll img:hover {
  278. filter: none;
  279. -webkit-filter: grayscale(0);
  280. -webkit-transition:0.5s;
  281. -moz-transition:0.5s;
  282. -ms-transition:0.5s;
  283. -o-transition:0.5s;
  284. transition:0.5s;
  285. }
  286.  
  287. /* Dividers */
  288.  
  289. .divider{
  290. height:46px;
  291. margin-left:auto;
  292. margin-right:auto;
  293. background:url('http://i62.tinypic.com/2e207it.jpg');
  294. background-repeat: no-repeat;
  295. background-position: center;
  296. }
  297.  
  298. .divider2{
  299. height:27px;
  300. margin-top:10px;
  301. margin-left:auto;
  302. margin-right:auto;
  303. background:url('http://i58.tinypic.com/2vvjsev.jpg');
  304. background-repeat: no-repeat;
  305. background-position: center;
  306. }
  307.  
  308. /* ----------------------- CREDITS ----------------------------- */
  309.  
  310. #credits {
  311. position:fixed;
  312. right:10px;
  313. top:35px;
  314. z-index:100000;
  315. }
  316.  
  317. #credits img{
  318. border:1px solid #000;
  319. }
  320.  
  321. </style>
  322.  
  323. </head>
  324.  
  325. <!--Style my tooltips-->
  326.  
  327. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  328. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  329. <script>
  330. (function($){
  331. $(document).ready(function(){
  332. $("a[title]").style_my_tooltips({
  333. tip_follows_cursor:true,
  334. tip_delay_time:30,
  335. tip_fade_speed:300,
  336. attribute:"title"
  337. });
  338. });
  339. })(jQuery);
  340. </script>
  341.  
  342. <script>
  343. $(function() {
  344. $('a[href*=#]:not([href=#])').click(function() {
  345. if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
  346.  
  347. var target = $(this.hash);
  348. target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  349. if (target.length) {
  350. $('html,body').animate({
  351. scrollTop: target.offset().top
  352. }, 1000);
  353. return false;
  354. }
  355. }
  356. });
  357. });
  358. </script>
  359.  
  360. <title>{Title}</title>
  361. <link rel="shortcut icon" href="{Favicon}">
  362.  
  363. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  364.  
  365. <body>
  366.  
  367. <!--Links-->
  368.  
  369. <div id="links">
  370. <a href="/" title ="Home"></a>
  371. <a href="#about" title="About"></a>
  372. <a href="#faq" title="FAQ"></a>
  373. <a href="#navigation" title="Navigation"></a>
  374. <a href="#blogroll" title="Blogroll"></a>
  375. </div>
  376.  
  377. <div class="content" id="about">
  378. <div class="container">
  379. <h1>About me</h1>
  380.  
  381. <div class="innercontainer">
  382. <!-- CHANGE ABOUT IMAGE -->
  383. <img src="http://24.media.tumblr.com/tumblr_mbbm0oaVar1rdkoleo1_500.jpg"
  384. class="portrait" />
  385. <div align="justify">
  386.  
  387. <!-- CHANGE DESCRIPTION -->
  388.  
  389. Lorem ipsum dolor sit amet, malis impetus fabellas ne sit, vel quaestio democritum te. Cu scaevola ocurreret per, sed at <u>possit</u> mollis. Iudicabit sadipscing appellantur at <b>vim</b>. Te mea nobis vidisse. Ne assum <b>ancillae</b> vel, cibo facete persequeris vix at. Ius te doming audire, quo error soluta efficiendi ei. Ex iudico aeterno laboramus sea, solet perfecto mediocrem at sed. Tantas <b>invidunt</b> ea nec, aliquip vocibus <u>principes</u> eos et. Tota propriae quaestio no sit, suavitate liberavisse id nec, ea atqui invenire euripidis eam. Viris decore intellegat duo ut, eu cum aliquip laboramus. Usu postea quaerendum ne, pri at scripta disputando accommodare. Ne rebum falli ornatus ius, omnes ullamcorper ut duo.<p>
  390.  
  391. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<p>
  392.  
  393. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
  394.  
  395. </div>
  396. <!--End justify-->
  397.  
  398. </div>
  399. <!--End inner container-->
  400.  
  401. <div class="divider"></div>
  402.  
  403. </div>
  404. <!--End container-->
  405.  
  406. </div>
  407. <!--End about-->
  408.  
  409. <!-- faq starts -->
  410. <div class="content" id="faq">
  411. <div class="container">
  412. <h1>F.A.Q.</h1>
  413.  
  414. <div class="innercontainer">
  415.  
  416. <h2>THIS IS A QUESTION</h2>
  417. <p>THIS IS AN ANSWER</p>
  418.  
  419. <div class="divider2"></div>
  420.  
  421. <h2>THIS IS A QUESTION</h2>
  422. <p>THIS IS AN ANSWER</p>
  423.  
  424. <div class="divider2"></div>
  425.  
  426. <h2>THIS IS A QUESTION</h2>
  427. <p>THIS IS AN ANSWER</p>
  428.  
  429. <div class="divider2"></div>
  430.  
  431. <h2>THIS IS A QUESTION</h2>
  432. <p>THIS IS AN ANSWER</p>
  433.  
  434. </div>
  435. <!--End inner container-->
  436.  
  437. <div class="divider"></div>
  438.  
  439. </div>
  440. <!--End container-->
  441.  
  442. </div>
  443. <!--End faq-->
  444.  
  445. <!--Navigation start-->
  446. <div class="content" id="navigation">
  447. <div class="container">
  448. <h1>Navigation</h1>
  449.  
  450. <div class="innercontainer">
  451.  
  452. <!--First link box-->
  453. <div class="linkbox">
  454.  
  455. <a href="/">link 1</a>
  456. <a href="/">link 2</a>
  457. <a href="/">link 3</a>
  458. <a href="/">link 4</a>
  459. <a href="/">link 5</a>
  460. <br>
  461. <a href="/">link 6</a>
  462. <a href="/">link 7</a>
  463. <a href="/">link 8</a>
  464. <a href="/">link 9</a>
  465. <a href="/">link 10</a>
  466. </div>
  467.  
  468. <div class="divider2"></div>
  469.  
  470. <!--Second link box-->
  471. <div class="pagebox">
  472.  
  473. <a href="/">title 1</a>
  474. <a href="/">title 2</a>
  475. <a href="/">title 3</a>
  476. <a href="/">title 4</a>
  477. <a href="/">title 5</a>
  478. <br>
  479. <a href="/">title 6</a>
  480. <a href="/">title 7</a>
  481. <a href="/">title 8</a>
  482. <a href="/">title 9</a>
  483. <a href="/">title 10</a>
  484. </div>
  485.  
  486. <div class="divider2"></div>
  487.  
  488. <!--Third link box-->
  489. <div class="tagbox">
  490.  
  491. <a href="/"># tag 1</a>
  492. <a href="/"># tag 2</a>
  493. <a href="/"># tag 3</a>
  494. <a href="/"># tag 4</a>
  495. <a href="/"># tag 5</a>
  496. <br>
  497. <a href="/"># tag 6</a>
  498. <a href="/"># tag 7</a>
  499. <a href="/"># tag 8</a>
  500. <a href="/"># tag 9</a>
  501. <a href="/"># tag 10</a>
  502. </div>
  503.  
  504. </div>
  505. <!--End inner container-->
  506.  
  507. <div class="divider"></div>
  508.  
  509. </div>
  510. <!--End container-->
  511.  
  512. </div>
  513. <!--End tags-->
  514.  
  515. <!--Blogroll start-->
  516. <div class="content" id="blogroll">
  517. <div class="container">
  518. <h1>Blogroll</h1>
  519.  
  520. <div class="innercontainer">
  521.  
  522. {block:Following}
  523. {block:Followed}
  524. <a title="{FollowedName}" href="{FollowedURL}"><img src="{FollowedPortraitURL-128}" /></a>
  525. {/block:Followed}
  526. {/block:Following}
  527.  
  528. </div>
  529. <!--End inner container-->
  530.  
  531. <div class="divider"></div>
  532.  
  533. </div>
  534. <!--End container-->
  535.  
  536. </div>
  537. <!--End blogroll-->
  538.  
  539. </div>
  540.  
  541. <a href="http://borntobewildthemes.tumblr.com" title="Page ALL IN ONE VII by borntobewildthemes"><div id="credits">
  542. <img src="http://i57.tinypic.com/301g6eg.jpg"></div></a>
  543.  
  544. </body>
  545.  
  546. </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!