API tools faq
paste
Advertisement
cvndythemes

NoJS Challenge

cvndythemes
Oct 28th, 2018
1,403
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.42 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <title>{Title}</title>
  6.  
  7. <link rel="shortcut icon" href="{favicon}">
  8.  
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12.  
  13.  
  14.  
  15. <!--
  16.  
  17. >> ETHEREAL THEMES // #NoJSChallenge
  18.  
  19. Designed by etherealthemes
  20. ⓒ 2016 - 2018
  21.  
  22. >> CREDITS
  23.  
  24. icons by victorerixon
  25.  
  26. >> THEME HELP
  27.  
  28. Theme - All colors customizable
  29. Multiple font size options
  30.  
  31. Topbar -
  32. Add up to 8 links
  33. Leave the link names and urls blank to auto-center topbar links
  34.  
  35. Header - 1280X450 Image
  36. Header image will auto-center ; Header psd available at
  37. ethereal-themes
  38.  
  39. Slide-Out Sidebar - Reminder section search "Reminder" to edit
  40. Latest Photos 120X120 with session title, info and link on hover
  41. Updates - search "Updates" to edit
  42.  
  43. Sidebar - 300X340 sidebar image
  44. Welcome will auto-fill with description
  45. Fill in official links
  46. Schedule - search "Schedule" to find and edit
  47. Photos 150X150, but will auto size any image size
  48. Projects 150X150 image, fill in details by searching "Projects"
  49. Members won't show while editing, but if this is a sideblog, it will auto-fill with your memebrs
  50. Search "Affiliates" to change the 50X75 images
  51. There's an additional section if you need it, add the title, content and choose a title icon
  52. Search "Stats" to fill in info
  53. Simplified Permalink Page - hides most of the sidebar items so the page isn't overly long on permalink pages
  54.  
  55. Posts - 300/350/400/450/500/540px posts
  56. Show/Hide post author
  57.  
  58. Footer - Auto-Fill blog name
  59.  
  60. -->
  61.  
  62.  
  63.  
  64.  
  65. <!-- COLORS -->
  66. <meta name="color:Background" content="#ffffff" />
  67. <meta name="color:Text" content="#000000" />
  68. <meta name="color:Links" content="#000000" />
  69. <meta name="color:Gray" content="#e7e7e7" />
  70.  
  71.  
  72. <meta name="color:Name" content="#5aa5b3" />
  73. <meta name="color:Accent One" content="#5aa5b3" />
  74. <meta name="color:Accent Two" content="#c14342" />
  75. <meta name="color:Accent Three" content="#c5bd72" />
  76.  
  77. <meta name="color:Topbar Links" content="#000000" />
  78. <meta name="color:Topbar Background" content="#ffffff" />
  79.  
  80. <meta name="color:Content" content="#ffffff" />
  81.  
  82. <meta name="color:Welcome Background" content="#ffffff" />
  83. <meta name="color:Welcome Text" content="#000000" />
  84.  
  85.  
  86.  
  87.  
  88. <!-- IMAGES -->
  89. <meta name="image:Header" content="http://placehold.it/1280X450"/>
  90. <meta name="image:Sidebar" content="http://placehold.it/300X340"/>
  91.  
  92.  
  93.  
  94.  
  95. <!-- SELECT -->
  96. <meta name="select:Lightbox" content="0,0,0," title="Black">
  97. <meta name="select:Lightbox" content="255,255,255," title="White">
  98.  
  99. <meta name="select:Post Size" content="300px" title="300">
  100. <meta name="select:Post Size" content="350px" title="350">
  101. <meta name="select:Post Size" content="400px" title="400">
  102. <meta name="select:Post Size" content="450px" title="450">
  103. <meta name="select:Post Size" content="500px" title="500">
  104. <meta name="select:Post Size" content="540px" title="540">
  105.  
  106. <meta name="select:Font Size" content="11px" title="Default">
  107. <meta name="select:Font Size" content="10px" title="Small">
  108. <meta name="select:Font Size" content="12px" title="Medium">
  109. <meta name="select:Font Size" content="13px" title="Large">
  110.  
  111.  
  112. <meta name="select:Extra Content Icon" content="bubble" title="Bubble">
  113. <meta name="select:Extra Content Icon" content="folder" title="Folder">
  114. <meta name="select:Extra Content Icon" content="sound" title="Sound">
  115. <meta name="select:Extra Content Icon" content="map-marker" title="Location">
  116. <meta name="select:Extra Content Icon" content="store" title="Store">
  117. <meta name="select:Extra Content Icon" content="chart" title="Chart">
  118.  
  119.  
  120.  
  121. <!-- IF -->
  122. <meta name="if:Sidebar Left" content="1"/>
  123. <meta name="if:Sidebar Image" content="1"/>
  124. <meta name="if:Sidebar Navigation" content="1"/>
  125. <meta name="if:Schedule" content="1"/>
  126. <meta name="if:Projects" content="1"/>
  127. <meta name="if:Members" content="1"/>
  128. <meta name="if:Affiliates" content="1"/>
  129. <meta name="if:Extra Container" content="0"/>
  130. <meta name="if:Stats" content="1"/>
  131. <meta name="if:Disclaimer" content="1"/>
  132. <meta name="if:Simplified Permalink Page" content="1"/>
  133. <meta name="if:Post Author" content="1"/>
  134.  
  135.  
  136.  
  137.  
  138. <!-- TEXT -->
  139. <meta name="text:Title" content="blog title" />
  140. <meta name="text:Tagline" content="Tagline" />
  141. <meta name="text:Welcome Top Position" content="260" />
  142. <meta name="text:Welcome Left Position" content="430" />
  143.  
  144. <meta name="text:Link One" content="" />
  145. <meta name="text:Link One URL" content="" />
  146. <meta name="text:Link Two" content="" />
  147. <meta name="text:Link Two URL" content="" />
  148. <meta name="text:Link Three" content="" />
  149. <meta name="text:Link Three URL" content="" />
  150. <meta name="text:Link Four" content="" />
  151. <meta name="text:Link Four URL" content="" />
  152. <meta name="text:Link Five" content="" />
  153. <meta name="text:Link Five URL" content="" />
  154. <meta name="text:Link Six" content="" />
  155. <meta name="text:Link Six URL" content="" />
  156.  
  157. <meta name="text:Website" content="Website URL" />
  158. <meta name="text:Twitter" content="Twitter URL" />
  159. <meta name="text:Instagram" content="Instagram URL" />
  160. <meta name="text:Tumblr" content="Tumblr URL" />
  161. <meta name="text:Facebook" content="Facebook URL" />
  162. <meta name="text:Youtube" content="Youtube URL" />
  163.  
  164. <meta name="text:Extra Content Title" content="Extra Content Title" />
  165. <meta name="text:Extra Content" content="Extra Content" />
  166.  
  167.  
  168.  
  169.  
  170. <!-- STYLESHEET -->
  171.  
  172. <link href="//dl.dropbox.com/s/3cuvb6iwzyoi2sa/etherealv1.css" rel="stylesheet">
  173.  
  174. <link href="//dl.dropbox.com/s/s49sxpja6tggrrn/nojs.css" rel="stylesheet">
  175.  
  176. <style type="text/css">
  177.  
  178. @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i')
  179.  
  180. @font-face {
  181. font-family: "October Twilight";
  182. src: url("https://static.tumblr.com/zvesamf/fo4pcbd56/octobertwilight-webfont.ttf") format("tff"),
  183. url("https://static.tumblr.com/zvesamf/vpQpcbd57/octobertwilight-webfont.eot") format("eot");
  184. }
  185.  
  186. /* --- SCROLLBAR ---*/
  187.  
  188. ::-webkit-scrollbar {height:15px;width:15px;background-color:{color:Background};}
  189.  
  190.  
  191. ::-webkit-scrollbar-track {background-color:{color:Gray};border:7px solid {color:Background};}
  192.  
  193. ::-webkit-scrollbar-thumb {min-height:25px;min-width:25px;background-color:{color:Text};border:7px solid {color:Background};}
  194.  
  195. /* --- SELECTION ---*/
  196.  
  197. ::-moz-selection {
  198. color:{color:Background};
  199. background:{color:Accent One};
  200. opacity:1;
  201. }
  202.  
  203. ::selection {
  204. color:{color:Background};
  205. background:{color:Accent One};
  206. opacity:1;
  207. }
  208.  
  209. /* --- TUMBLR TOOLS --- */
  210.  
  211. {block:IndexPage}
  212. iframe.tmblr-iframe {
  213. position:fixed;
  214. z-index:10!important;
  215. top:23px!important;
  216. right:5px!important;
  217. opacity:0;
  218. padding-right:60px;
  219. transform:scale(0.5);
  220. transform-origin:100% 0;
  221. -webkit-transform:scale(0.5);
  222. -webkit-transform-origin:100% 0;
  223. -o-transform:scale(0.5);
  224. -o-transform-origin:100% 0;
  225. -moz-transform:scale(0.5);
  226. -moz-transform-origin:100% 0;
  227. -ms-transform:scale(0.5);
  228. -ms-transform-origin:100% 0;
  229. filter:invert(1);
  230. -webkit-filter:invert(1);
  231. -o-filter:invert(1);
  232. -moz-filter:invert(1);
  233. -ms-filter:invert(1);
  234. transition:.2s ease-in-out;
  235. -webkit-transition:.2s ease-in-out;
  236. -moz-transition:.2s ease-in-out;
  237. }
  238.  
  239. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  240.  
  241. .tcontrols {
  242. position:fixed;
  243. top:30px;
  244. right:20px;
  245. z-index:9;
  246. transition:.2s ease-in-out;
  247. -webkit-transition:.2s ease-in-out;
  248. -moz-transition:.2s ease-in-out;
  249. }
  250.  
  251. .tcontrols i {color:{color:Topbar Links};font-size:calc({select:Font Size} + 1px);}
  252.  
  253. {/block:IndexPage}
  254.  
  255.  
  256. {block:PermalinkPage}
  257. iframe.tmblr-iframe {
  258. position:fixed;
  259. z-index:10!important;
  260. top:23px!important;
  261. right:0!important;
  262. opacity:0.5;
  263. padding-right:10px;
  264. transform:scale(0.5);
  265. transform-origin:100% 0;
  266. -webkit-transform:scale(0.5);
  267. -webkit-transform-origin:100% 0;
  268. -o-transform:scale(0.5);
  269. -o-transform-origin:100% 0;
  270. -moz-transform:scale(0.5);
  271. -moz-transform-origin:100% 0;
  272. -ms-transform:scale(0.5);
  273. -ms-transform-origin:100% 0;
  274. filter:invert(1);
  275. -webkit-filter:invert(1);
  276. -o-filter:invert(1);
  277. -moz-filter:invert(1);
  278. -ms-filter:invert(1);
  279. transition:.2s ease-in-out;
  280. -webkit-transition:.2s ease-in-out;
  281. -moz-transition:.2s ease-in-out;
  282. }
  283. {/block:PermalinkPage}
  284.  
  285. /* --- BODY --- */
  286.  
  287. body {
  288. margin:0px;
  289. padding:0px;
  290. font-family: 'Open Sans',serif;
  291. color:{color:Text};
  292. font-size:calc({select:Font Size} + 1px);
  293. font-weight:400;
  294. line-height:150%;
  295. font-weight:normal;
  296. word-wrap:normal;
  297. text-align:left;
  298. background:{color:Background};
  299. -webkit-font-smoothing: antialiased;
  300. -moz-osx-font-smoothing: grayscale;
  301. overflow-x:hidden;
  302. }
  303.  
  304. a {
  305. color:{color:Links};
  306. text-decoration:none;
  307. border:0;
  308. }
  309.  
  310. b,strong {font-weight:700;}
  311. i,italic {font-style:italic;}
  312. small {font-size:{select:Font Size};}
  313. big {font-size:{select:Font Size};}
  314.  
  315. hr.divider, hr, hr.separator {
  316. display: block;
  317. margin-top: 0.5em;
  318. margin-bottom: 0.5em;
  319. margin-left: auto;
  320. margin-right: auto;
  321. border-style: inset;
  322. border-color:{color:Text};
  323. border-bottom: 1px;
  324. }
  325.  
  326. pre {
  327. white-space: pre-wrap;
  328. white-space: -moz-pre-wrap;
  329. white-space: -pre-wrap;
  330. white-space: -o-pre-wrap;
  331. word-wrap: break-word;
  332. }
  333.  
  334. /* --- TOPBAR --- */
  335.  
  336. .topbar {
  337. position:fixed!important;
  338. margin:0 auto;
  339. top:0;
  340. left:0;
  341. width:100%;
  342. height:50px;
  343. padding-top:30px;
  344. background:{color:Topbar Background};
  345. text-align:center;
  346. z-index:5;
  347. }
  348.  
  349. .topbar a {
  350. display:inline-block;
  351. color:{color:Topbar Links};
  352. font-size:calc({select:Font Size} + 1px);
  353. text-transform:lowercase;
  354. font-style:italic;
  355. margin:0px 15px;
  356. padding:0px 10px;
  357. text-decoration:none;
  358. border:0;
  359. height:14px;
  360. background-size:0 4px, auto;
  361. background-repeat:no-repeat;
  362. background-position:center bottom;
  363. transition:all .1s ease-out;
  364. }
  365.  
  366. .topbar a:nth-of-type(3n+1) {background-image:linear-gradient({color:Accent One}, {color:Accent One}), linear-gradient(transparent, transparent);}
  367.  
  368. .topbar a:nth-of-type(3n+2) {background-image:linear-gradient({color:Accent Two}, {color:Accent Two}), linear-gradient(transparent, transparent);}
  369.  
  370. .topbar a:nth-of-type(3n+3) {background-image:linear-gradient({color:Accent Three}, {color:Accent Three}), linear-gradient(transparent, transparent);}
  371.  
  372. .topbar a:hover {
  373. background-size:100% 4px, auto;
  374. }
  375.  
  376. /* --- CONTAINER --- */
  377.  
  378. .content {
  379. position:relative;
  380. margin:0 auto;
  381. width:1280px;
  382. top:0px;
  383. left:50%;
  384. right:50%;
  385. background:transparent;
  386. margin-left:-640px;
  387. transition:250ms ease-in-out;
  388. -webkit-transition:250ms ease-in-out;
  389. -moz-transition:250ms ease-in-out;
  390. }
  391.  
  392. .content:after, .content:before {
  393. content:" ";
  394. display:table;
  395. clear:both;
  396. }
  397.  
  398. input[type="checkbox"]:checked ~ .content {margin-left:-340px;}
  399.  
  400. .container {
  401. margin:0 auto;
  402. width: calc(320px + {select:Post Size} + 25px + 20px + 40px + 75px);
  403. /* -- Sidebar + Post =/Padding Width + Padding + Left/Right Margin + Middle Margin --- */
  404. padding:10px;
  405. }
  406.  
  407. #end {
  408. clear:both;
  409. text-align:center;
  410. }
  411.  
  412. /* --- HEADER --- */
  413.  
  414. .header {
  415. position:absolute;
  416. top:80px;
  417. height:450px;
  418. width:1280px;
  419. background-image: url('{image:Header}');
  420. background-position:center top;
  421. background-repeat:no-repeat;
  422. }
  423.  
  424. .welcome {
  425. margin-left:{text:Welcome Left Position}px;
  426. width:400px;
  427. margin-top:{text:Welcome Top Position}px;
  428. background:{color:Welcome Background};
  429. padding:10px;
  430. text-align:center;
  431. line-height:150%;
  432. font-style:italic;
  433. animation:fadein 2s;
  434. -moz-animation:fadein 2s;
  435. -webkit-animation:fadein 2s;
  436. -o-animation:fadein 2s;
  437. }
  438.  
  439. @keyframes fadein {
  440. from {opacity:0;}
  441. to {opacity:1;}
  442. }
  443.  
  444. @-moz-keyframes fadein {
  445. from {opacity:0;}
  446. to {opacity:1;}
  447. }
  448.  
  449. @-webkit-keyframes fadein {
  450. from {opacity:0;}
  451. to {opacity:1;}
  452. }
  453.  
  454. @-o-keyframes fadein {
  455. from {opacity:0;}
  456. to {opacity: 1;}
  457. }
  458.  
  459. .welcome b {text-transform:uppercase;font-weight:600;}
  460.  
  461. .welcome i {
  462. font-family: 'Open Sans',serif!important;
  463. font-size:calc({select:Font Size} + 1px)!important;
  464. display:inline-block;
  465. padding:0px 2px;
  466. height:13px;
  467. }
  468.  
  469. .welcome i:nth-of-type(3n+1) {box-shadow:inset 0px -3px {color:Accent One};}
  470. .welcome i:nth-of-type(3n+2) {box-shadow:inset 0px -3px {color:Accent Two};}
  471. .welcome i:nth-of-type(3n+3) {box-shadow:inset 0px -3px {color:Accent Three};}
  472.  
  473. .welcomename {
  474. font-size:calc({select:Font Size} + 20px);
  475. font-family: 'October Twilight';
  476. color:{color:Text};
  477. background: linear-gradient(270deg, {color:Name} 50%, white 100%);
  478. -webkit-background-clip:text;
  479. -webkit-text-fill-color:transparent;
  480. padding:5px;
  481. height:35px;
  482. }
  483.  
  484. .welcometag {margin:-18px 0 5px 0;font-size:calc({select:Font Size} + 2px);text-transform:lowercase;}
  485.  
  486.  
  487.  
  488. .welcome span {font-size:calc({select:Font Size} + 10px);}
  489.  
  490. /* --- SIDEBAR --- */
  491.  
  492. .sidebar {
  493. position:fixed;
  494. width:280px;
  495. height:100%;
  496. transform:translateX(-300px);
  497. transition:transform 250ms ease-in-out;
  498. z-index:6;
  499. }
  500.  
  501. .slidetitle {
  502. font-size:calc({select:Font Size} + 2px);
  503. text-align:left;
  504. color:{color:Text};
  505. text-transform:lowercase;
  506. font-style:italic;
  507. padding:5px 5px 4px 0px;
  508. margin-bottom:10px;
  509. font-family: 'Open Sans',serif!important;
  510. }
  511.  
  512. .slidetitle i {
  513. font-size:calc({select:Font Size} + 2px);
  514. color:{color:Text};
  515. padding:5px;
  516. margin-right:10px;
  517. font-weight:400!important;
  518. }
  519.  
  520. .sidebar-panel {
  521. position:fixed;
  522. background:{color:Content};
  523. color:{color:Text};
  524. width:280px;
  525. height:100%;
  526. padding:10px;
  527. top:0px;
  528. left:0px;
  529. }
  530.  
  531. .slide {text-align:center;vertical-align:middle;}
  532.  
  533. #sidebarToggle {display:none;}
  534.  
  535. .sidebar-toggle {
  536. color:{color:Topbar Links};
  537. display:inline-block;
  538. background:{color:Content};
  539. position:fixed;
  540. z-index:99;
  541. top:32px;
  542. left:20px;
  543. margin-left:0;
  544. transition:margin-left 250ms ease-in-out;
  545. transform: rotate(0deg);
  546. }
  547.  
  548. .sidebar-toggle i {color:{color:Topbar Links};font-size:15px;}
  549.  
  550. input[type="checkbox"]:checked + .sidebar-toggle {transform: rotate(-180deg);background-color:{color:Content};margin-left: 300px;margin-top:1px;}
  551.  
  552. input[type="checkbox"]:checked ~ .sidebar {transform:translateX(0);}
  553.  
  554. .slideside {margin-bottom:30px;color:{color:Text}!important;font-size:{select:Font Size};}
  555.  
  556. /* --- SLIDEBAR REMINDER --- */
  557.  
  558. .reminder {text-align:left; line-height:150%;}
  559.  
  560. .reminder b {font-weight:600;color:{color:Accent One};}
  561.  
  562. .reminder i {
  563. font-style:italic;
  564. font-family: 'Open Sans',serif!important;
  565. color:{color:Accent Three};
  566. }
  567.  
  568. /* --- SLIDEBAR PHOTOS --- */
  569.  
  570. .phototags {text-align:center}
  571.  
  572. .phototags img {margin:2px 2px 2px 3px!important;}
  573.  
  574. .phototagin {display:inline-block;}
  575.  
  576. .tphoto img {height:120px;width:120px}
  577.  
  578. .phototagin:hover .tphotocap {opacity:1;border:1px solid {color:Gray};}
  579.  
  580. .tphotocap {
  581. opacity:0;
  582. position:absolute;
  583. margin:-127px 0px 140px 3px;
  584. height:100px;
  585. font-size:calc({select:Font Size} - 1px);
  586. width:100px;
  587. padding:10px!important;
  588. background:{color:Content};
  589. text-align:center;
  590. border:1px solid {color:Content};
  591. transition:.2s ease-in-out;
  592. -webkit-transition:.2s ease-in-out;
  593. -moz-transition:.2s ease-in-out;
  594. }
  595.  
  596. .tphotocap b {font-weight:600;text-transform:uppercase;}
  597.  
  598. .tphotocap a {
  599. text-transform:lowercase;
  600. display:inline-block;
  601. border:0;
  602. text-decoration:none;
  603. color:{color:Text};
  604. padding:0px 2px;
  605. height:13px;
  606. box-shadow:inset 0px -3px {color:Accent One};
  607. transition:.2s ease-in-out;
  608. -webkit-transition:.2s ease-in-out;
  609. -moz-transition:.2s ease-in-out;
  610. }
  611.  
  612. .tphotocap a:hover {box-shadow:inset 0px -3px {color:Content};}
  613.  
  614. .tphotocap p {line-height:100%;}
  615.  
  616. /* --- SLIDEBAR UPDATES --- */
  617.  
  618. .update {
  619. text-align:left;
  620. margin-bottom:10px;
  621. line-height:150%;
  622. }
  623.  
  624. .update b {
  625. color:{color:Content};
  626. display:inline-block;
  627. font-family: 'Open Sans', sans-serif!important;
  628. background:{color:Accent Two};
  629. padding:2px 5px;
  630. text-transform:uppercase;
  631. font-weight:600;
  632. }
  633.  
  634. /* --- MAIN SIDEBAR --- */
  635.  
  636. .fixedsidebar {
  637.  
  638. {block:IfSidebarLeft}
  639. float:left;
  640. margin-left:20px;
  641. {/block:IfSidebarLeft}
  642.  
  643. {block:IfNotSidebarLeft}
  644. float:right;
  645. margin-right:20px;
  646. {/block:IfNotSidebarLeft}
  647.  
  648. margin-top:580px;
  649. width:320px;
  650. padding:5px;
  651. background:{color:Content};
  652. }
  653.  
  654. .side {
  655. background:{color:Content};
  656. padding:10px;
  657. margin-bottom:50px;
  658. }
  659.  
  660. {block:PermalinkPage}
  661. .sidebarconthidden {
  662. display:hidden;
  663. -webkit-backface-visibility:hidden;
  664. margin-bottom:-10px;
  665. height:0px;
  666. overflow:hidden;
  667. opacity:0;
  668. }
  669. {/block:PermalinkPage}
  670.  
  671. .sidetitle {
  672. font-size:calc({select:Font Size} + 2px);
  673.  
  674. {block:IfSidebarLeft}
  675. text-align:left;
  676. {/block:IfSidebarLeft}
  677.  
  678. {block:IfNotSidebarLeft}
  679. text-align:right;
  680. {/block:IfNotSidebarLeft}
  681.  
  682. color:{color:Text};
  683. background:{color:Content};
  684. text-transform:lowercase;
  685. font-style:italic;
  686. padding:0px;
  687. margin-bottom:10px;
  688. font-family: 'Open Sans',serif!important;
  689. }
  690.  
  691. .sidetitle i, .scroll i {font-family: 'etherealv1'!important;font-style:normal!important;speak:none;}
  692.  
  693. .sidetitle i {
  694. position:relative;
  695. top:2px;
  696. left:0px;
  697. font-size:calc({select:Font Size} + 2px);
  698. color:{color:Text};
  699. background:{color:Content};
  700. padding:5px 5px 5px 0px;
  701. margin-right:10px;
  702. font-weight:400!important;
  703. }
  704.  
  705. /* --- MAIN SIDEBAR EXTRAS --- */
  706.  
  707. .mainsbimage {text-align:center;}
  708.  
  709. .mainsbimage img {
  710. width:300px;
  711. padding:0;
  712. margin:0;
  713. outline:1px solid {color:Content};
  714. outline-offset:5px;
  715. }
  716.  
  717. .mainsbimage img:hover {
  718. outline:1px solid {color:Gray};
  719. outline-offset:5px;
  720. transition:.2s ease-in-out;
  721. -webkit-transition:.2s ease-in-out;
  722. -moz-transition:.2s ease-in-out;
  723. }
  724.  
  725. .sidenavigation {text-transform:lowercase;color:{color:Text};}
  726.  
  727. .sidenavigation a {
  728. display:block;
  729. text-align:center;
  730. margin-bottom:5px;
  731. text-decoration:none;
  732. border:0;
  733. font-style:italic;
  734. padding:0px 2px;
  735. height:13px;
  736. box-shadow:inset 0px -3px {color:Accent One};
  737. transition:.2s ease-in-out;
  738. -webkit-transition:.2s ease-in-out;
  739. -moz-transition:.2s ease-in-out;
  740. }
  741.  
  742. .sidenavigation a:hover {box-shadow:inset 0px -3px {color:Accent Three};}
  743.  
  744. .scheduledate {
  745. display:block;
  746. color:{color:Text};
  747. margin-bottom:15px;
  748. }
  749.  
  750. .scheduledate b {
  751. color:{color:Content};
  752. display:inline-block;
  753. padding:3px 6px;
  754. text-transform:uppercase;
  755. font-weight:600;
  756. background:{color:Accent Three};
  757. margin-right:5px;
  758. }
  759.  
  760. /* --- MAIN SIDEBAR EXTRAS ; PROJECTS --- */
  761.  
  762. .projects {margin-bottom:45px;text-align:justify;line-height:160%;}
  763.  
  764. .projects img {
  765. height:150px;
  766. width:150px;
  767. border:0;
  768. margin:0px 13px 0px 0px;
  769. outline:1px solid {color:Content};
  770. outline-offset:5px;
  771. transition:.2s ease-in-out;
  772. -webkit-transition:.2s ease-in-out;
  773. -moz-transition:.2s ease-in-out;
  774. }
  775.  
  776. .projects img:hover {
  777. outline:1px solid {color:Gray};
  778. outline-offset:5px;
  779. }
  780.  
  781. .projects h2 {
  782. display:block;
  783. font-size:calc({select:Font Size} + 2px);
  784. text-align:left;
  785. color:{color:Text};
  786. text-transform:uppercase;
  787. font-style:italic;
  788. margin-bottom:3px;
  789. font-family: 'Open Sans',serif!important;
  790. }
  791.  
  792. .projects b {
  793. font-weight:600;
  794. color:{color:Accent Two};
  795. }
  796.  
  797. .projects i {
  798. color:{color:Accent One};
  799. font-family: 'Open Sans',serif!important;
  800. }
  801.  
  802. .projects a {
  803. background:{color:Accent One};
  804. color:{color:Content};
  805. padding:2px 4px;
  806. margin:0px 3px;
  807. }
  808.  
  809.  
  810. /* --- MAIN SIDEBAR EXTRAS ; MEMBERS --- */
  811.  
  812. .member {margin-bottom:0px;}
  813.  
  814. .memberavatar {display:inline-block;}
  815.  
  816. .memberavatar img {height:68px;width:68px;}
  817.  
  818. .names {
  819. position:relative;
  820. top:-23px;
  821. margin-bottom:23px;
  822. margin-left:10px;
  823. display:inline-block;
  824. }
  825.  
  826. .membername {text-transform:uppercase;font-weight:600;font-size:calc({select:Font Size} + 2px);}
  827.  
  828. /* --- MAIN SIDEBAR EXTRAS ; AFFILIATES --- */
  829.  
  830. .affiliates {max-width:300px;text-align:center;padding-left:1px;}
  831.  
  832. .affiliates img {
  833. width:50px!important;
  834. height:75px;
  835. padding:2px;
  836. margin:0px 1px!important;
  837. border:0;
  838. border:1px solid {color:Content};
  839. }
  840.  
  841. .affiliates img:hover {
  842. border:1px solid {color:Gray};
  843. }
  844.  
  845. .affiliates span {white-space:nowrap;}
  846.  
  847. .affiliates span:after {text-align:center;}
  848.  
  849. .affietool {position:relative;}
  850.  
  851. .affietool::before, .affietool::after {
  852. left:25px;
  853. opacity:0;
  854. position:absolute;
  855. z-index:-7;
  856. }
  857.  
  858. .affietool:hover::before, .affietool:focus::before, .affietool:hover::after, .affietool:focus::after {opacity:1;transform:scale(1) translateY(0);z-index: 7;}
  859.  
  860. .affietool::after {
  861. display:inline-block;
  862. background:{color:Accent Three};
  863. bottom:50px;
  864. color:{color:Background};
  865. content:attr(data-tip);
  866. padding:3px 6px;
  867. transition:.2s ease-in-out;
  868. -webkit-transition:.2s ease-in-out;
  869. -moz-transition:.2s ease-in-out;
  870. }
  871.  
  872. /* --- POSTS --- */
  873.  
  874. .posts {
  875.  
  876. {block:IfSidebarLeft}
  877. float:right;
  878. margin-right:20px;
  879. {/block:IfSidebarLeft}
  880.  
  881. {block:IfNotSidebarLeft}
  882. float:left;
  883. margin-left:20px;
  884. {/block:IfNotSidebarLeft}
  885.  
  886. margin-top:580px;
  887. width: calc({select:Post Size} + 10px);
  888. background:{color:Content};
  889. }
  890.  
  891. .iposts {
  892. width:{select:Post Size};
  893. padding:0px 5px 10px 5px;
  894. background:{color:Content}f;
  895. }
  896.  
  897. .iposts img, .ipostpxu, .ipostpxu img, iframe, img, embed, object, video {max-width:100%;}
  898.  
  899.  
  900. /* --- POST INFO --- */
  901.  
  902. .postinfo {
  903. padding:10px;
  904. text-align:center;
  905. text-transform:lowercase;
  906. background:{color:Content};
  907. }
  908.  
  909. .postlinks {display:inline-block;}
  910. .postlinks a {margin:0px;}
  911.  
  912. .postdates {display:inline-block;}
  913. .postdates a {margin:0px 5px 0px 7px;}
  914.  
  915. .postlinks a, .postnotes a, .postdates a {
  916. font-style:italic;
  917. display:inline-block;
  918. color:{color:Text};
  919. font-family: 'Open Sans',serif;
  920. }
  921.  
  922. .postnotes {display:inline-block;}
  923. .postnotes a {margin:0px;}
  924.  
  925. /* --- POST END --- */
  926.  
  927. .postend {
  928. padding:0px;
  929. background:{color:Content};
  930. text-align:right;
  931. }
  932.  
  933. .posttags {
  934. background:{color:Content};
  935. text-align:center;
  936. padding:35px 10px 20px 10px;
  937. margin-bottom:100px;
  938. }
  939.  
  940. .posttags a {
  941. font-style:italic;
  942. display:inline-block;
  943. color:{color:Text};
  944. font-size:calc({select:Font Size} - 1px);
  945. margin:0px 2px;
  946. font-family: 'Open Sans',serif;
  947. padding:0px 6px;
  948. height:14px;
  949. box-shadow:inset 0px -5px {color:Content};
  950. transition:.2s ease-in-out;
  951. -webkit-transition:.2s ease-in-out;
  952. -moz-transition:.2s ease-in-out;
  953. }
  954.  
  955. .posttags a:nth-child(3n + 1):hover {box-shadow:inset 0px -4px {color:Accent One};}
  956. .posttags a:nth-child(3n + 2):hover {box-shadow:inset 0px -4px {color:Accent Two};}
  957. .posttags a:nth-child(3n + 3):hover {box-shadow:inset 0px -4px {color:Accent Three};}
  958.  
  959. /* --- POST CONTROL --- */
  960.  
  961. .postcontrol {
  962. float:right;
  963. margin-top:4px;
  964. }
  965.  
  966. .postcontrol i {
  967. color:{color:Text};
  968. height:auto;
  969. padding:1px;
  970. display:block;
  971. overflow:visible;
  972. height:auto;
  973. }
  974.  
  975. .postcontrol a {
  976. position:relative;
  977. display:inline-block;
  978. overflow:hidden;
  979. padding:0px;
  980. }
  981.  
  982. .postcontrol .reblog {
  983. opacity:1;
  984. }
  985.  
  986. .postcontrol .reblog i {
  987. font-size:{select:Font Size};
  988. font-weight:400!important;
  989. }
  990.  
  991. .reblog i {
  992. color:{color:Text};
  993. transition:0.2s ease-in-out;
  994. -webkit-transition:0.2s ease-in-out;
  995. -moz-transition:0.2s ease-in-out;
  996. }
  997.  
  998. .postcontrol .like .liked + i {
  999. color:{color:Text};
  1000. opacity:1;
  1001. }
  1002.  
  1003. .like {
  1004. position:relative;
  1005. top:-1px;
  1006. }
  1007.  
  1008. .like i {
  1009. color:{color:Text};
  1010. font-weight:400!important;
  1011. font-size:calc({select:Font Size} - 1px);
  1012. transition:0.2s ease-in-out;
  1013. -webkit-transition:0.2s ease-in-out;
  1014. -moz-transition:0.2s ease-in-out;
  1015. }
  1016.  
  1017. .postcontrol .like .liked + i {
  1018. color:{color:Accent Two};
  1019. font-weight:400!important;
  1020. }
  1021.  
  1022. .postcontrol .like .like_button {
  1023. position:relative;
  1024. }
  1025.  
  1026. .postcontrol .like .like_button iframe {
  1027. position:absolute;
  1028. top:0;
  1029. left:0;
  1030. bottom:0;
  1031. right:0;
  1032. z-index:2;
  1033. opacity:0.000001;
  1034. }
  1035.  
  1036. /* --- POST STYLES --- */
  1037.  
  1038. h1, h2 {
  1039. display:block;
  1040. font-size:calc({select:Font Size} + 1px);
  1041. color:{color:Text};
  1042. text-transform:uppercase;
  1043. font-style:bold;
  1044. font-weight:500;
  1045. }
  1046.  
  1047. blockquote {
  1048. display:block;
  1049. border-left:1px solid {color:Gray};
  1050. padding:1px 5px;
  1051. margin-left:5px;
  1052. margin-right:-6px;
  1053. }
  1054.  
  1055. blockquote img {
  1056. max-width:100%;
  1057. display:block;
  1058. margin-bottom:5px;
  1059. }
  1060.  
  1061. .user_1 .label {font-weight: 700;}
  1062. .user_2 .label {font-weight: 400;}
  1063. .user_3 .label {font-weight: 700;}
  1064. .user_4 .label {font-weight: 400;}
  1065. .user_5 .label {font-weight: 700;}
  1066. .user_6 .label {font-weight: 400;}
  1067. .user_7 .label {font-weight: 700;}
  1068. .user_8 .label {font-weight: 400;}
  1069.  
  1070. ul.chat {list-style:none; margin: 0px 0px 0px 0px; padding: 0px;}
  1071.  
  1072. .chat li {
  1073. list-style: none;
  1074. margin: 0px;
  1075. padding: 2px;
  1076. border: none;
  1077. }
  1078.  
  1079. .chat li:first-child {border:none;}
  1080.  
  1081. /* --- AUDIO --- */
  1082.  
  1083. .audio { background:{color:Content};}
  1084.  
  1085. .player {
  1086. position:absolute;
  1087. margin-top:-69px;
  1088. margin-left:35px;
  1089. opacity:0.6;
  1090. }
  1091.  
  1092. .audiop, .player {display:inline-block;}
  1093.  
  1094. .trackname {
  1095. margin-left:120px;
  1096. margin-top:-75px;
  1097. color:{color:Text};
  1098. text-transform:uppercase;
  1099. }
  1100.  
  1101. .artist {
  1102. margin-left:120px;
  1103. margin-top:-5px;
  1104. color:{color:Text};
  1105. }
  1106.  
  1107. .albuname {
  1108. margin-left:120px;
  1109. margin-top:0px;
  1110. color:{color:Text};
  1111. }
  1112.  
  1113. .audiop {
  1114. position:absolute;
  1115. display:block;
  1116. margin-top:4px
  1117. margin-top:-109px;
  1118. }
  1119.  
  1120. .audioimg img {
  1121. margin-top:10px;
  1122. height:100px;
  1123. width:100px;
  1124. }
  1125.  
  1126. .tumblr_audio_player {
  1127. width:30px;
  1128. height:27px;
  1129. overflow:hidden;
  1130. }
  1131.  
  1132. .soundcloud_audio_player {padding-top:15px;}
  1133.  
  1134. /* --- QUESTIONS --- */
  1135.  
  1136. .question {
  1137. opacity:0.6!important;
  1138. transition:.2s ease-in-out;
  1139. -webkit-transition:.2s ease-in-out;
  1140. -moz-transition:.2s ease-in-out;
  1141. }
  1142.  
  1143. .question:hover {opacity:1;color:{color:Text};}
  1144.  
  1145. .question a {color:{color:Text};}
  1146.  
  1147. /* --- LIGHTBOXES ---*/
  1148.  
  1149. .vignette, #vignette {opacity:0;}
  1150.  
  1151. .lightbox-image, #tumblr_lightbox img {
  1152. box-shadow:none !important;
  1153. border-radius:0 !important;
  1154. max-width:none;
  1155. -moz-box-sizing:border-box;
  1156. box-sizing:border-box;
  1157. }
  1158.  
  1159. .tmblr-lightbox, #tumblr_lightbox {
  1160. background-color:rgba({select:Lightbox}.90) !important;
  1161. }
  1162.  
  1163. .lightbox-caption, #tumblr_lightbox_caption {visibility:hidden;}
  1164.  
  1165. /* --- PAGINATION --- */
  1166.  
  1167. .pagination {
  1168. width:calc({select:Post Size} + 10px);
  1169. float:right;
  1170. background:{color:Content};
  1171. font-size:{select:Font Size};
  1172. padding:10px;
  1173. text-align:center;
  1174. margin:0px 0px 0px 0px;
  1175. color:{color:Text};
  1176. word-spacing:10px;
  1177. }
  1178.  
  1179. .pagination a {
  1180. display:inline-block;
  1181. color:{color:Text};
  1182. min-width:15px;
  1183. }
  1184.  
  1185. .pagination .current {
  1186. display:inline-block;
  1187. margin:8px;
  1188. color:{color:Text};
  1189. min-width:15px;
  1190. }
  1191.  
  1192. .pagination a.jump {
  1193. font-size:{select:Font Size};
  1194. line-height:10px;
  1195. color:{color:Text};
  1196. min-width:15px;
  1197. }
  1198.  
  1199. /* ---PERMALINK NOTES --- */
  1200.  
  1201. #permanote::-webkit-scrollbar {height:0px;width:3px;background:{color:Background};}
  1202. #permanote::-webkit-scrollbar-track {border:0px;background:{color:Background};}
  1203. #permanote::-webkit-scrollbar-thumb {border:0px;background:{color:Gray};}
  1204.  
  1205. #permanote {
  1206. width:{select:Post Size};
  1207. max-height:500px;
  1208. margin:-50px 0 20px 2px;
  1209. background:transparent;
  1210. padding:0px 0px 0px 9px;
  1211. text-align:center;
  1212. overflow-x:hidden;
  1213. overflow-y:scroll;
  1214. }
  1215.  
  1216. ol.notes {
  1217. display:inline-block;
  1218. padding:0px;
  1219. margin:15px 0px;
  1220. background:transparent;
  1221. list-style-type:none;
  1222. text-align:center;
  1223. border-bottom:0px;
  1224. }
  1225.  
  1226. .notes a {display:inline-block;text-align:center;}
  1227.  
  1228. ol.notes li.note {padding:0px;float:left;text-align:center;}
  1229.  
  1230. ol.notes li.note img.avatar {
  1231. width:32px;
  1232. height:32px;
  1233. margin:0px 2px 0px 2px;
  1234. }
  1235.  
  1236. ol.notes li.note span.action {display:none;}
  1237.  
  1238. ol.notes li.note .answer_content {display:none;}
  1239.  
  1240. ol.notes li.note blockquote {display:none;}
  1241.  
  1242. ol.notes li.note blockquote a {display:none;}
  1243.  
  1244. ol.notes li.note.more_notes_link_container {
  1245. display:block;
  1246. position:relative;
  1247. text-align:center;
  1248. display:block;
  1249. width:100%;
  1250. padding-top:10px;
  1251. }
  1252.  
  1253. /* --- FOOTER --- */
  1254.  
  1255. footer {
  1256. margin:0 auto;
  1257. width:786px;
  1258. height:33px;
  1259. font-size:calc({select:Font Size} + 1px);
  1260. margin-top:50px;
  1261. padding:20px 82px 5px 82px;
  1262. font-size{select:Font Size}!important;
  1263. font-style:italic;
  1264. line-height:150%;
  1265. text-transform:uppercase;
  1266. font-weight:400;
  1267. color:{color:Welcome Text};
  1268. text-align:center;
  1269. background:transparent;
  1270. }
  1271.  
  1272. footer b {color:{color:Accent One};font-weight:400;}
  1273.  
  1274. /* --- SCROLL TO TOP --- */
  1275.  
  1276. .scrollfade {
  1277. position:absolute;
  1278. top:0px;
  1279. right:11px;
  1280. width:10px;
  1281. height:2760px;
  1282. background-image: url('https://static.tumblr.com/zvesamf/sl2pch4oy/scrollfade.png');
  1283. background-position:top center;
  1284. background-repeat:no-repeat;
  1285. z-index:2;
  1286. }
  1287.  
  1288. .scroll {
  1289. position:fixed;
  1290. bottom:10px;
  1291. right:10px;
  1292. z-index:1;
  1293. }
  1294.  
  1295. .slidetitle i {
  1296. font-size:calc({select:Font Size} + 2px);
  1297. color:{color:Text};
  1298. padding:5px;
  1299. margin-right:10px;
  1300. font-weight:400!important;
  1301. }
  1302.  
  1303. {CustomCSS}
  1304. </style>
  1305.  
  1306. </head>
  1307. <body>
  1308.  
  1309. <a name="top"></a>
  1310.  
  1311. <!-- START TUMBLR TOOLS -->
  1312. {block:IndexPage}
  1313. <div class="tcontrols">
  1314. <i class="eticon-cog"></i>
  1315. </div>
  1316. {/block:IndexPage}
  1317. <!-- END TUMBLR TOOLS -->
  1318.  
  1319.  
  1320.  
  1321.  
  1322. <!-- START TOPBAR -->
  1323. <div class="topbar">
  1324.  
  1325. <a href="/">index</a>
  1326. <a href="/ask">contact</a>
  1327. <a href="{text:Link One URL}">{text:Link One}</a>
  1328. <a href="{text:Link Two URL}">{text:Link Two}</a>
  1329. <a href="{text:Link Three URL}">{text:Link Three}</a>
  1330. <a href="{text:Link Four URL}">{text:Link Four}</a>
  1331. <a href="{text:Link Five URL}">{text:Link Five}</a>
  1332. <a href="{text:Link Six URL}">{text:Link Six}</a>
  1333.  
  1334. </div>
  1335. <!-- END TOPBAR -->
  1336.  
  1337.  
  1338.  
  1339.  
  1340. <!-- START SLIDE SIDEBAR -->
  1341. <input type="checkbox" id="sidebarToggle">
  1342. <label class="sidebar-toggle" for="sidebarToggle">
  1343. <i class="icon-slide"></i>
  1344. </label>
  1345.  
  1346.  
  1347.  
  1348.  
  1349.  
  1350. <div class="sidebar">
  1351.  
  1352.  
  1353.  
  1354. <!-- START SLIDE OUT -->
  1355. <nav class="sidebar-panel">
  1356.  
  1357. <div class="slide">
  1358.  
  1359.  
  1360.  
  1361.  
  1362. <!-------- START REMINDERS -------->
  1363. <div class="slideside">
  1364. <div class="slidetitle">
  1365. <i class="eticon-pin"></i>Reminder
  1366. </div>
  1367.  
  1368. <div class="reminder">
  1369.  
  1370. Lorem <b>ipsum</b> dolor sit <i>amet</i>, consectetur adipiscing elit. Aliquam <i>pretium</i> magna et velit <b>dignissim</b>, a placerat nisi rutrum. Vestibulum odio ipsum, <i>rutrum</i> a ex ac, fringilla fermentum ante. Donec <b>nec</b> elit molestie massa finibus <i>pulvinar</i> non nec lacus. Nullam ipsum nulla.
  1371.  
  1372. </div>
  1373.  
  1374.  
  1375. </div>
  1376. <!-------- END REMINDERS -------->
  1377.  
  1378.  
  1379.  
  1380.  
  1381.  
  1382.  
  1383.  
  1384. <!-------- START PHOTO TAGS -------->
  1385. <div class="slideside">
  1386. <div class="slidetitle">
  1387. <i class="eticon-camera"></i>Latest Photos
  1388. </div>
  1389. <div class="phototags">
  1390.  
  1391.  
  1392. <!-- Photo Start -->
  1393. <div class="phototagin">
  1394. <div class="tphoto"><img src="http://placehold.it/120X120"></div>
  1395.  
  1396. <div class="tphotocap">
  1397. <b>Harper's Bazaar</b>
  1398. <p>
  1399. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1400. <p>
  1401. <a href="#">view photos</a>
  1402. </div>
  1403.  
  1404. </div>
  1405. <!-- Photo End -->
  1406.  
  1407.  
  1408.  
  1409. <!-- Photo Start -->
  1410. <div class="phototagin">
  1411. <div class="tphoto"><img src="http://placehold.it/120X120"></div>
  1412.  
  1413. <div class="tphotocap">
  1414. <b>Mama Mia Press Conference</b>
  1415. <p>
  1416. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1417. <p>
  1418. <a href="#">view photos</a>
  1419. </div>
  1420.  
  1421. </div>
  1422. <!-- Photo End -->
  1423.  
  1424.  
  1425.  
  1426.  
  1427. <!-- Photo Start -->
  1428. <div class="phototagin">
  1429. <div class="tphoto"><img src="http://placehold.it/120X120"></div>
  1430.  
  1431. <div class="tphotocap">
  1432. <b>Allure Magazine</b>
  1433. <p>
  1434. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1435. <p>
  1436. <a href="#">view photos</a>
  1437. </div>
  1438.  
  1439. </div>
  1440. <!-- Photo End -->
  1441.  
  1442.  
  1443.  
  1444.  
  1445. <!-- Photo Start -->
  1446. <div class="phototagin">
  1447. <div class="tphoto"><img src="http://placehold.it/120X120"></div>
  1448.  
  1449. <div class="tphotocap">
  1450. <b>Audi Polo Challenge</b>
  1451. <p>
  1452. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1453. <p>
  1454. <a href="#">view photos</a>
  1455. </div>
  1456.  
  1457. </div>
  1458. <!-- Photo End -->
  1459.  
  1460.  
  1461.  
  1462. </div>
  1463.  
  1464. </div><!-------- END PHOTO TAGS -------->
  1465.  
  1466.  
  1467.  
  1468.  
  1469.  
  1470.  
  1471.  
  1472.  
  1473.  
  1474. <!-------- START PDATES -------->
  1475. <div class="slideside">
  1476. <div class="slidetitle">
  1477. <i class="eticon-bell"></i>Updates
  1478. </div>
  1479.  
  1480.  
  1481.  
  1482. <!-- Update Start -->
  1483. <div class="update"><b>07.24</b> Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi.
  1484. </div>
  1485. <!-- Update End -->
  1486.  
  1487. <!-- Update Start -->
  1488. <div class="update"><b>07.24</b> Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi.
  1489. </div>
  1490. <!-- Update End -->
  1491.  
  1492.  
  1493. <!-- Update Start -->
  1494. <div class="update"><b>07.24</b> Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi.
  1495. </div>
  1496. <!-- Update End -->
  1497.  
  1498.  
  1499.  
  1500. </div>
  1501. <!-------- END UPDATES -------->
  1502.  
  1503.  
  1504.  
  1505. </div>
  1506.  
  1507. </nav>
  1508. <!-- END SLIDE SIDEBAR -->
  1509.  
  1510. </div>
  1511.  
  1512.  
  1513.  
  1514.  
  1515.  
  1516.  
  1517.  
  1518.  
  1519.  
  1520.  
  1521.  
  1522.  
  1523. <!-- START CONTENT -->
  1524. <div class="content">
  1525.  
  1526.  
  1527. <!-- START HEADER -->
  1528. <div class="header">
  1529.  
  1530. <div class="welcome">
  1531.  
  1532. <div class="welcomename">{text:Title}</div>
  1533. <div class="welcometag">-{text:Tagline}-</div>
  1534.  
  1535. <b>Welcome</b> this is the welcome container. Add your <i>intro</i>, links, etc. It will <i>grow</i> to fit your info, but I <i>recommend</i> you keep it to three lines. You can also <i>move</i> this container with the <i>"welcome margin"</i> settings.
  1536.  
  1537. </div>
  1538.  
  1539. </div>
  1540. <!-- END HEADER -->
  1541.  
  1542.  
  1543.  
  1544.  
  1545.  
  1546.  
  1547. <!-------- START MAIN CONTAINER -------->
  1548. <div class="container">
  1549.  
  1550.  
  1551.  
  1552.  
  1553.  
  1554.  
  1555. <!-------- START MAIN SIDEBAR -------->
  1556. <div class="fixedsidebar">
  1557.  
  1558.  
  1559.  
  1560. <!-- Start Sidebar Photo -->
  1561. {block:IfSidebarImage}
  1562.  
  1563. {block:IfSimplifiedPermalinkPage}
  1564. <div class="sidebarconthidden">
  1565. {/block:IfSimplifiedPermalinkPage}
  1566.  
  1567. <div class="side">
  1568. <div class="mainsbimage">
  1569.  
  1570. <a href="/"><img src="{image:Sidebar}"></a>
  1571.  
  1572. </div>
  1573. </div>
  1574.  
  1575. {block:IfSimplifiedPermalinkPage}
  1576. </div>
  1577. {/block:IfSimplifiedPermalinkPage}
  1578.  
  1579. {/block:IfSidebarImage}
  1580. <!-- End Sidebar Photo -->
  1581.  
  1582.  
  1583.  
  1584.  
  1585.  
  1586.  
  1587.  
  1588.  
  1589. <!-- Start Navigation -->
  1590. {block:IfSidebarNavigation}
  1591. <div class="side">
  1592. <div class="sidetitle">
  1593. <i class="eticon-tag"></i>Navigation
  1594. </div>
  1595.  
  1596. <div class="sidenavigation">
  1597. <center>
  1598.  
  1599. <table width="80%" cellpadding="1" cellspacing="0" border="0">
  1600. <tr><td width="35%" valign="top">
  1601.  
  1602. <a href="{text:Website}">Website</a>
  1603. <a href="{text:Twitter}">Twitter</a>
  1604. <a href="{text:Instagram}">Instagram</a>
  1605.  
  1606. </td><td><td width="35%" valign="top">
  1607.  
  1608. <a href="{text:Tumblr}">Tumblr</a>
  1609. <a href="{text:Facebook}">Facebook</a>
  1610. <a href="{text:Youtube}">Youtube</a>
  1611.  
  1612. </td></tr></table>
  1613.  
  1614. </center>
  1615. </div>
  1616.  
  1617. </div>
  1618. <!-- End Navigation -->
  1619. {/block:IfSidebarNavigation}
  1620.  
  1621.  
  1622.  
  1623.  
  1624.  
  1625.  
  1626.  
  1627. <!-- Start Schedule -->
  1628. {block:IfSchedule}
  1629.  
  1630. {block:IfSimplifiedPermalinkPage}
  1631. <div class="sidebarconthidden">
  1632. {/block:IfSimplifiedPermalinkPage}
  1633.  
  1634. <div class="side">
  1635. <div class="sidetitle">
  1636. <i class="eticon-pin"></i>Schedule
  1637. </div>
  1638.  
  1639.  
  1640.  
  1641. <!-- Date Start -->
  1642. <div class="scheduledate">
  1643. <b>07/23</b> Lorem ipsum dolor sit amet.
  1644. </div>
  1645. <!-- Date End -->
  1646.  
  1647.  
  1648. <!-- Date Start -->
  1649. <div class="scheduledate">
  1650. <b>07/23</b> Lorem ipsum dolor sit amet.
  1651. </div>
  1652. <!-- Date End -->
  1653.  
  1654.  
  1655. <!-- Date Start -->
  1656. <div class="scheduledate">
  1657. <b>07/23</b> Lorem ipsum dolor sit amet.
  1658. </div>
  1659. <!-- Date End -->
  1660.  
  1661.  
  1662. <!-- Date Start -->
  1663. <div class="scheduledate">
  1664. <b>07/23</b> Lorem ipsum dolor sit amet.
  1665. </div>
  1666. <!-- Date End -->
  1667.  
  1668.  
  1669. </div>
  1670.  
  1671. {block:IfSimplifiedPermalinkPage}
  1672. </div>
  1673. {/block:IfSimplifiedPermalinkPage}
  1674.  
  1675. {/block:IfSchedule}
  1676. <!-- End Schedule -->
  1677.  
  1678.  
  1679.  
  1680.  
  1681.  
  1682.  
  1683.  
  1684.  
  1685. <!-- Start Projects -->
  1686. {block:IfProjects}
  1687.  
  1688. {block:IfSimplifiedPermalinkPage}
  1689. <div class="sidebarconthidden">
  1690. {/block:IfSimplifiedPermalinkPage}
  1691.  
  1692. <div class="side">
  1693. <div class="sidetitle">
  1694. <i class="eticon-video-camera"></i>Projects
  1695. </div>
  1696.  
  1697.  
  1698. <!-- Project Start -->
  1699. <div class="projects">
  1700. <img src="http://placehold.it/150X150" align="left" />
  1701. <h2>Project Title</h2>
  1702. <b>Project Date</b>
  1703. <br>
  1704. <i>as Character</i>
  1705. <p>
  1706. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam ipsum nulla, sodales non ornare et, accumsan.
  1707. <br><center>
  1708. <a href="#">Trailer</a> <a href="#">Website</a> <a href="#">IMDB</a>
  1709. </center>
  1710. </div>
  1711. <!-- Project End -->
  1712.  
  1713.  
  1714.  
  1715.  
  1716. <!-- Project Start -->
  1717. <div class="projects">
  1718. <img src="http://placehold.it/150X150" align="left" />
  1719. <h2>Project Title</h2>
  1720. <b>Project Date</b>
  1721. <br>
  1722. <i>as Character</i>
  1723. <p>
  1724. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam ipsum nulla, sodales non ornare et, accumsan.
  1725. <br><center>
  1726. <a href="#">Trailer</a> <a href="#">Website</a> <a href="#">IMDB</a>
  1727. </center>
  1728. </div>
  1729. <!-- Project End -->
  1730.  
  1731.  
  1732. </div>
  1733.  
  1734. {block:IfSimplifiedPermalinkPage}
  1735. </div>
  1736. {/block:IfSimplifiedPermalinkPage}
  1737.  
  1738. {/block:IfProjects}
  1739. <!-- End Projects -->
  1740.  
  1741.  
  1742.  
  1743.  
  1744.  
  1745.  
  1746.  
  1747.  
  1748. <!-- Start Members -->
  1749. {block:IfMembers}
  1750. <div class="side">
  1751. <div class="sidetitle">
  1752. <i class="eticon-user"></i>Members
  1753. </div>
  1754.  
  1755. {block:GroupMembers}
  1756. {block:GroupMember}
  1757. <div class="member">
  1758.  
  1759. <div class="memberavatar">
  1760. <img src="{GroupMemberPortraitURL-96}">
  1761. </div>
  1762.  
  1763. <div class="names">
  1764. <a href="{GroupMemberURL}" class="membername">{GroupMemberName}</a>
  1765. <div class="membertitle">{GroupMemberTitle}</div>
  1766. </div>
  1767.  
  1768. </div>
  1769. {/block:GroupMember}
  1770. {/block:GroupMembers}
  1771.  
  1772. </div>
  1773. {/block:IfMembers}
  1774. <!-- End Members -->
  1775.  
  1776.  
  1777.  
  1778.  
  1779.  
  1780.  
  1781.  
  1782.  
  1783. <!-- Start Affiliates -->
  1784. {block:IfAffiliates}
  1785. <div class="side">
  1786. <div class="sidetitle">
  1787. <i class="eticon-heart"></i>Affiliates
  1788. </div>
  1789.  
  1790. <div class="affiliates">
  1791.  
  1792.  
  1793. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1794.  
  1795. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1796.  
  1797. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1798.  
  1799. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1800.  
  1801. <!-- IMPORTANT ; ADD BETWEEN EVERY FIVE AFFILIATES --><br>
  1802.  
  1803. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1804.  
  1805. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1806.  
  1807. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1808.  
  1809. <span class="affietool" data-tip="blog name" tabindex="1"><a href="#"><img src="http://placehold.it/50X75"></a></span>
  1810.  
  1811.  
  1812. <!-- IMPORTANT ; ADD BETWEEN EVERY FIVE AFFILIATES --><br>
  1813.  
  1814.  
  1815. </div>
  1816.  
  1817. </div>
  1818. {/block:IfAffiliates}
  1819. <!-- End Affiliates -->
  1820.  
  1821.  
  1822.  
  1823.  
  1824.  
  1825.  
  1826.  
  1827.  
  1828. <!-- Start Extra Content -->
  1829. {block:IfExtraContainer}
  1830.  
  1831. {block:IfSimplifiedPermalinkPage}
  1832. <div class="sidebarconthidden">
  1833. {/block:IfSimplifiedPermalinkPage}
  1834.  
  1835. <div class="side">
  1836. <div class="sidetitle">
  1837. <i class="eticon-{select:Extra Content Icon}"></i>{text:Extra Content Title}
  1838. </div>
  1839.  
  1840. {text:Extra Content}
  1841.  
  1842. </div>
  1843.  
  1844. {block:IfSimplifiedPermalinkPage}
  1845. </div>
  1846. {/block:IfSimplifiedPermalinkPage}
  1847.  
  1848. {/block:IfExtraContainer}
  1849. <!-- End Extra Content -->
  1850.  
  1851.  
  1852.  
  1853.  
  1854.  
  1855.  
  1856.  
  1857. <!-- Start Stats -->
  1858. {block:IfStats}
  1859. <div class="side">
  1860. <div class="sidetitle">
  1861. <i class="eticon-bookmark"></i>Statistics
  1862. </div>
  1863.  
  1864. <b>About:</b> <br>
  1865. <b>Established:</b> <br>
  1866. <b>Admin:</b> <br>
  1867. <b>Theme:</b> <a href="http://ethereal-themes.tumblr.com">ethereal</a><br>
  1868.  
  1869. {block:IfDisclaimer}
  1870. <p>
  1871. Our site claims no credit for any videos posted on this site unless stated otherwise. information on this blog are copyright to their respectful owners. If there is any content appearing on this blog that belongs to you and do not wish for it appear on this site, please message us with a link to say which post and it will be promptly removed.
  1872. {/block:IfDisclaimer}
  1873.  
  1874. </div>
  1875. {/block:IfStats}
  1876. <!-- End Stats -->
  1877.  
  1878.  
  1879.  
  1880.  
  1881.  
  1882. </div>
  1883. <!-------- END MAIN SIDEBAR -------->
  1884.  
  1885.  
  1886.  
  1887.  
  1888.  
  1889.  
  1890.  
  1891.  
  1892.  
  1893.  
  1894.  
  1895.  
  1896.  
  1897.  
  1898. <!-------- START POSTS -------->
  1899. <div class="posts">
  1900. {block:Posts}
  1901.  
  1902.  
  1903.  
  1904.  
  1905. <!-- START POST INFO -->
  1906. <div class="postinfo">
  1907.  
  1908. <div class="postlinks">
  1909. {block:IfPostAuthor}<a href="{PostAuthorURL}">{PostAuthorName}</a>{/block:IfPostAuthor}
  1910.  
  1911. {block:RebloggedFrom}
  1912. <a title="{ReblogParentName}" href="{ReblogParentURL}"> via</a>{block:ContentSource}<a title="{ReblogRootName}" href="{SourceURL}">/src</a>{/block:ContentSource}
  1913. {/block:RebloggedFrom}
  1914. </div>
  1915.  
  1916. <div class="postdates">
  1917. {block:Date}
  1918. <a href="{Permalink}">{Month} {DayOfMonthWithZero}, {Year}</a>
  1919. {/block:Date}
  1920. </div>
  1921.  
  1922. {block:NoteCount}
  1923. <div class="postnotes"><a href="{Permalink}">{NoteCountWithLabel}</a></div>
  1924. {/block:NoteCount}
  1925.  
  1926. </div>
  1927. <!-- END POST INFO -->
  1928.  
  1929.  
  1930.  
  1931.  
  1932. <!-- POST STYLES START -->
  1933. <div class="iposts">
  1934.  
  1935. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1936.  
  1937. {block:Link}<i><a href="{URL}"><h1>{Name}</h1></a></i>
  1938. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  1939.  
  1940. {block:Quote}<h1>“{Quote}”</h1><br>-{Source}</b>{/block:Quote}
  1941.  
  1942. {block:Photo}<center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1943. </center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1944.  
  1945. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1946.  
  1947. {block:Chat}
  1948. <ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>
  1949. {/block:Chat}
  1950.  
  1951. {block:Audio}
  1952. <div class="audio">
  1953.  
  1954. {block:AlbumArt}
  1955. <div class="audioimg">
  1956. <img src="{AlbumArtURL}" />
  1957. </div>
  1958. {block:AlbumArt}
  1959.  
  1960. {block:AudioPlayer}
  1961. <div class="player">
  1962. {AudioPlayerBlack}
  1963. </div>
  1964. {/block:AudioPlayer}
  1965.  
  1966. <div class="audiop">
  1967. {block:TrackName}
  1968. <div class="trackname">
  1969. {TrackName}
  1970. </div>
  1971. {/block:TrackName}
  1972. {block:Artist}
  1973. <div class="artist">
  1974. by {Artist}
  1975. </div>
  1976. {/block:Artist}
  1977. </div>
  1978. {block:Caption}{Caption}{/block:Caption}
  1979. </div>
  1980. {/block:Audio}
  1981.  
  1982.  
  1983. {block:Video}<center>{Video-500}{block:Caption}{Caption}{/block:Caption}</center>{/block:Video}
  1984.  
  1985. {block:Answer}
  1986. {Asker} asked:<br>
  1987. <div class="question">{Question}</div>
  1988. {Answer}{/block:Answer}
  1989.  
  1990. </div>
  1991. <!-- POST STYLES END -->
  1992.  
  1993.  
  1994.  
  1995.  
  1996. <!-- POST END START -->
  1997. <div class="postend">
  1998.  
  1999. {block:IndexPage}
  2000. <div class="postcontrol">
  2001. <a href="{ReblogURL}" target="_blank" class="reblog"><i class="icon-reblog"></i></a>
  2002. <a href="#" class="like">{LikeButton}<i class="icon-like"></i></a>
  2003. </div>
  2004. {/block:IndexPage}
  2005.  
  2006. </div>
  2007. <!-- POST END-->
  2008.  
  2009.  
  2010.  
  2011.  
  2012. <!-- POST TAGS START -->
  2013. <div class="posttags">{block:HasTags}
  2014. {block:Tags}
  2015. <a href="{TagURL}">{Tag}</a>&nbsp;
  2016. {/block:Tags}
  2017. {/block:HasTags}
  2018. </div>
  2019. <!-- POST TAGS END -->
  2020.  
  2021.  
  2022.  
  2023.  
  2024. <!-- PERMALINK NOTES -->
  2025. {block:PostNotes}
  2026. <div id="permanote"><center>{PostNotes-64}</center></div>
  2027. {/block:PostNotes}
  2028.  
  2029.  
  2030.  
  2031. {/block:Posts}
  2032. <!-------- END POSTS -------->
  2033.  
  2034.  
  2035.  
  2036.  
  2037. <!-- START PAGINATION -->
  2038. {block:IndexPage}
  2039. {block:Pagination}
  2040. <div class="pagination">
  2041. {block:PreviousPage}
  2042. <a href="{PreviousPage}">previous</a>
  2043. {/block:PreviousPage}
  2044.  
  2045. {block:JumpPagination length="5"}
  2046. {block:CurrentPage}
  2047. <span class="current_page">{PageNumber}</span>
  2048. {/block:CurrentPage}
  2049.  
  2050. {block:JumpPage}
  2051. <a class="jump_page" href="{URL}">{PageNumber}</a>
  2052. {/block:JumpPage}
  2053. {/block:JumpPagination}
  2054.  
  2055. {block:NextPage}
  2056. <a class="next" href="{NextPage}">next</a>
  2057. {/block:NextPage}
  2058. </div>
  2059.  
  2060. {/block:Pagination}
  2061. {/block:IndexPage}
  2062. <!-- END PAGINATION -->
  2063.  
  2064.  
  2065.  
  2066.  
  2067. <div id="end"></div>
  2068. </div><!-------- END MAIN CONTAINER -------->
  2069.  
  2070.  
  2071.  
  2072. </div>
  2073. <!-- END CONTENT -->
  2074.  
  2075.  
  2076.  
  2077.  
  2078.  
  2079. </div></div>
  2080. <!-- END SLIDE SIDEBAR -->
  2081.  
  2082.  
  2083.  
  2084. <!-- START FOOTER -->
  2085. <footer>
  2086. copyright <b>{Name}</b> 2018
  2087. </footer>
  2088. <!-- END FOOTER -->
  2089.  
  2090.  
  2091.  
  2092. <div class="scrollfade"></div>
  2093. <div class="scroll"><a href="#TOP"><i class="icon-scroll"></i></a></div>
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!