API tools faq
paste
silbrigthemes

Comic (Page #15)

silbrigthemes
Aug 11th, 2018
4,834
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. COMIC
  7. Page #15 by silbrigthemes
  8.  
  9. A simple about page, accompanying "Mondrian" (Theme #4).
  10.  
  11. Rules:
  12. 1) Do not use as a base code.
  13. 2) Do not edit beyond recognition.
  14. 3) Do not delete / alter the credit.
  15. 4) Do not steal (parts of) the code.
  16. 5) Do not claim as your own.
  17.  
  18. The code has been annotated for easier customization.
  19.  
  20. If you have any problems, please feel free to send me a message.
  21.  
  22. Have fun!
  23.  
  24. -->
  25.  
  26. <head>
  27.  
  28. <meta charset="utf-16">
  29. <title>{Title} | About</title> <!-- change title here -->
  30. <link rel="shortcut icon" href="{Favicon}"/>
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  32. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  33.  
  34. <!-- Necessary for the page to be responsive. -->
  35. <meta name="viewport" content="width=device-width, initial-scale=1">
  36.  
  37. <!-- Necessary for the icon font to work. -->
  38. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  39.  
  40. <!-- Changes the toolbar color on mobile. -->
  41. <meta name="theme-color" content="{color:Color 4}"/>
  42.  
  43. <!-- Necessary for the scripts to work. -->
  44. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  45.  
  46. <!-- Tooltip Script -->
  47. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title]").style_my_tooltips({
  52. tip_follows_cursor:true,
  53. tip_delay_time:200,
  54. tip_fade_speed:300
  55. }
  56. );
  57. });
  58. })(jQuery);
  59. </script>
  60.  
  61. <!-- Body Font -->
  62. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  63.  
  64. <style>
  65.  
  66. body{
  67. margin:0;
  68. top:0;
  69. left:0;
  70. font-size:1em; /* 1em = 16px */
  71. color:black; /* text color */
  72. background:white; /* body background */
  73. font-family:"Roboto Mono", Verdana;
  74. /* custom font, fallback font */
  75. text-align:justify;
  76. /* alt.: left, center, right */
  77. }
  78.  
  79. /* Hides the tumblr app button. By @yeoli-thm */
  80. .tmblr-iframe--app-cta-button {
  81. display: none!important;
  82. }
  83.  
  84. /* Custom Text Selection */
  85. ::selection{
  86. background-color:black; /* background color */
  87. color:white; /* text color */
  88. }
  89.  
  90. ::-moz-selection{
  91. background-color:black;
  92. color:white;
  93. }
  94.  
  95. ::-o-selection{
  96. background-color:black;
  97. color:white;
  98. }
  99.  
  100. ::-webkit-selection{
  101. background-color:black;
  102. color:white;
  103. }
  104.  
  105. /* Custom Scrollbar */
  106. ::-webkit-scrollbar{
  107. width:8px;
  108. background-color:black; /* scrollbar background */
  109. border:3px solid white; /* scrollbar border */
  110. }
  111.  
  112. ::-webkit-scrollbar-thumb{
  113. width:8px;
  114. background-color:white; /* scrollbar thumb background */
  115. border:3px solid black; /* scrollbar thumb border */
  116. }
  117.  
  118. /* Custom Tooltips */
  119. #s-m-t-tooltip{
  120. max-width:300px;
  121. margin:15px;
  122. padding:0.25em 0.5em;
  123. background:white; /* tooltip background color */
  124. color:black; /* toolip color */
  125. z-index:999999;
  126. font-size:12px; /* tooltip font size */
  127. text-transform:uppercase; /* alt.: normal, lowercase */
  128. font-weight:bold; /* alt.: 300 (thin), 400 (normal) */
  129. border:4px solid black;
  130. }
  131.  
  132. /* Links */
  133. a{
  134. color:black; /* black text color */
  135. text-decoration:none;
  136. border-bottom:4px solid blue; /* blue bottom border */
  137. transition:0.5s;
  138. -moz-transition:0.5s;
  139. -o-transition:0.5s;
  140. -webkit-transition:0.5s;
  141. }
  142.  
  143. /* Links on Hover */
  144. a:hover{
  145. color:black; /* black text color */
  146. text-decoration:none;
  147. border-bottom:4px solid red; /* red bottom border */
  148. transition:0.5s;
  149. -moz-transition:0.5s;
  150. -o-transition:0.5s;
  151. -webkit-transition:0.5s;
  152. }
  153.  
  154. /* Bold */
  155. b, strong{
  156. font-weight:700; /* 700 = bold */
  157. }
  158.  
  159. /* Italic */
  160. i, em{
  161. font-weight:300; /* 300 = thin */
  162. font-style:italic;
  163. }
  164.  
  165. /* Marked Text */
  166. mark{
  167. padding:0 0.25em;
  168. background-color:#ffe300; /* yellow background */
  169. color:black; /* black text color */
  170. }
  171.  
  172. /* Underlined Text */
  173. u{
  174. text-decoration:none;
  175. border-bottom:4px solid black; /* black bottom border */
  176. }
  177.  
  178. /* Line Break */
  179. hr{
  180. width:80%;
  181. height:4px;
  182. border:none;
  183. background-color:black;
  184. }
  185.  
  186. /* Container for Everything */
  187. #all{
  188. width:80vw;
  189. height:80vh;
  190. margin-left:10vw;
  191. margin-top:10vh;
  192. display:flex;
  193. align-items:center;
  194. justify-content:center;
  195. }
  196.  
  197. /* Container for icon, quick info and about section */
  198. #main-container{
  199. width:400px;
  200. height:80vh;
  201. display:flex;
  202. align-items:center;
  203. justify-content:center;
  204. flex-direction:column;
  205. }
  206.  
  207. /* Container for icon and quick info */
  208. #head-container{
  209. width:auto;
  210. height:auto;
  211. display:flex;
  212. align-items:center;
  213. justify-content:center;
  214. }
  215.  
  216. /* Icon */
  217. #one{
  218. width:100px;
  219. height:100px;
  220. border:4px solid black;
  221. margin-right:4px;
  222. }
  223.  
  224. #one img{
  225. width:100px;
  226. height:100px;
  227. }
  228.  
  229. /* Quick Info */
  230. #two{
  231. width:250px;
  232. height:100px;
  233. border:4px solid black;
  234. margin-left:4px;
  235. background-color:white;
  236. }
  237.  
  238. #two ul{
  239. list-style-type:none;
  240. }
  241.  
  242. #two li{
  243. margin-left:-2em;
  244. line-height:1.5em;
  245. }
  246.  
  247. #two-title{
  248. display:none;
  249. }
  250.  
  251. /* About Section */
  252. #three{
  253. width:364px;
  254. height:400px;
  255. max-height:400px;
  256. overflow-y:scroll;
  257. border:4px solid black;
  258. margin-top:8px;
  259. background-color:white;
  260. }
  261.  
  262. #three p{
  263. padding-left:1em;
  264. padding-right:1em;
  265. }
  266.  
  267. /* Container for Navigation Links */
  268. #side-container{
  269. width:calc(36px + 2 * 19.2px);
  270. height:calc(400px + 100px + 8px + 8px);
  271. border:4px solid black;
  272. background-color:white;
  273. display:flex;
  274. align-items:center;
  275. justify-content:space-evenly;
  276. flex-direction:column;
  277. }
  278.  
  279. .sidelink{
  280. width:36px;
  281. height:36px;
  282. border:4px solid black;
  283. background-color:white;
  284. display:flex;
  285. align-items:center;
  286. justify-content:center;
  287. transition:0.5s;
  288. -moz-transition:0.5s;
  289. -o-transition:0.5s;
  290. -webkit-transition:0.5s;
  291. }
  292.  
  293. .alpha:hover{
  294. background-color:#ffe300; /* yellow hover background */
  295. transition:0.5s;
  296. -moz-transition:0.5s;
  297. -o-transition:0.5s;
  298. -webkit-transition:0.5s;
  299. }
  300.  
  301. .beta:hover{
  302. background-color:red; /* red hover background */
  303. transition:0.5s;
  304. -moz-transition:0.5s;
  305. -o-transition:0.5s;
  306. -webkit-transition:0.5s;
  307. }
  308.  
  309. a.side{
  310. border-bottom:none;
  311. text-decoration:none;
  312. color:black;
  313. }
  314.  
  315. i.fa{
  316. font-size:24px;
  317. color:black;
  318. }
  319.  
  320. /* Hide standard tumblr controls */
  321. body > iframe:first-child {
  322. display: none !important;
  323. }
  324.  
  325. /** RESPONSIVE LAYOUT **/
  326. /* Responsive Layout for large screens */
  327. @media only screen and (min-width:1600px){
  328. body{
  329. font-size:20px;
  330. }
  331.  
  332. #one, #one img{
  333. width:150px;
  334. height:150px;
  335. }
  336.  
  337. #two{
  338. width:calc(350px - 0.5em);
  339. height:150px;
  340. padding:0 0.5em;
  341. }
  342.  
  343. #three{
  344. width:calc(150px + 350px + 8px + 8px + 8px);
  345. height:500px;
  346. max-height:500px;
  347. }
  348.  
  349. #side-container{
  350. height:calc(500px + 150px + 8px + 8px);
  351. margin-left:4em;
  352. }
  353. }
  354.  
  355. /* Responsive Layout for Tablets */
  356. @media only screen and (max-width:800px){
  357. body{
  358. font-size:1em;
  359. }
  360.  
  361. #all{
  362. width:80vw;
  363. height:80vh;
  364. margin-left:10vw;
  365. margin-top:10vh;
  366. display:flex;
  367. align-items:center;
  368. justify-content:center;
  369. }
  370.  
  371. #main-container{
  372. width:60vw;
  373. height:80vh;
  374. display:flex;
  375. align-items:center;
  376. justify-content:center;
  377. flex-direction:column;
  378. }
  379. }
  380.  
  381. /* Responsive Layout for Mobile Phones */
  382. @media only screen and (max-width:500px){
  383. body{
  384. font-size:1em;
  385. }
  386.  
  387. #all{
  388. width:100vw;
  389. height:100vh;
  390. margin-top:0;
  391. margin-left:0;
  392. display:flex;
  393. align-items:center;
  394. justify-content:center;
  395. }
  396.  
  397. #one, #one img{
  398. width:75px;
  399. height:75px;
  400. }
  401.  
  402. #two{
  403. height:75px;
  404. width:calc(200px - 0.5em);
  405. display:flex;
  406. align-items:center;
  407. justify-content:center;
  408. padding:0 0.5em;
  409. }
  410.  
  411. #two ul{
  412. display:none;
  413. }
  414.  
  415. #three{
  416. width:calc(75px + 200px + 8px + 8px + 8px);
  417. }
  418.  
  419. #side-container{
  420. display:none;
  421. }
  422.  
  423. #two-title{
  424. display:block;
  425. font-size:2em;
  426. text-transform:uppercase;
  427. font-weight:700;
  428. color:black;
  429. }
  430. }
  431.  
  432. </style>
  433. </head>
  434.  
  435. <body>
  436.  
  437. <div id="all">
  438. <div id="main-container">
  439.  
  440. <div id="head-container">
  441. <div id="one">
  442. <img src="https://78.media.tumblr.com/731f39bdb3be2c0a4b11ad88ba7fcf23/tumblr_osi9bgneFx1u5nu6fo1_500.jpg" alt="icon">
  443. </div>
  444.  
  445. <div id="two">
  446. <div id="two-title">About</div>
  447.  
  448. <ul>
  449. <li><mark>Name:</mark> Julia</li>
  450. <li><mark>Age:</mark> 20</li>
  451. <li><mark>Country:</mark> Germany</li>
  452. </ul>
  453. </div>
  454. </div>
  455.  
  456. <div id="three">
  457. <p>
  458. This is an accompanying page to the theme "<i>Mondrian</i>", made to be used as an about page. You can get the code <a href="https://pastebin.com/jxFngwg6" title="code on pastebin">here on pastebin</a>.
  459. </p>
  460. <hr>
  461. <p>
  462. <b>Lorem ipsum</b> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <mark>eirmod tempor</mark> invidunt ut <i>labore et dolore</i> magna aliquyam erat, <u>sed diam voluptua</u>.
  463.  
  464. <ol>
  465. <li>lorem</li>
  466. <li>ipsum</li>
  467. <li>dolor</li>
  468. </ol>
  469. </p>
  470. <p>
  471. <a href="/" title="example link">At vero eos</a> et accusam et justo duo dolores et ea rebum. <sup>Stet clita</sup> kasd <sub>gubergren</sub>, no sea takimata sanctus est <small>Lorem ipsum dolor</small> sit amet.
  472. </p>
  473. <hr>
  474. <p>
  475. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  476. <ul>
  477. <li>lorem</li>
  478. <li>ipsum</li>
  479. <li>dolor</li>
  480. </ul>
  481. </p>
  482. </div>
  483.  
  484. </div>
  485.  
  486. <div id="side-container">
  487. <a href="/" title="return to index" class="side">
  488. <div class="sidelink alpha">
  489. <i class="fa fa-home"></i>
  490. </div>
  491. </a>
  492.  
  493. <a href="/ask" title="send a message" class="side">
  494. <div class="sidelink beta">
  495. <i class="fa fa-envelope"></i>
  496. </div>
  497. </a>
  498.  
  499. <a href="/archive" title="go to archive" class="side">
  500. <div class="sidelink alpha">
  501. <i class="fa fa-archive"></i>
  502. </div>
  503. </a>
  504.  
  505. <a href="/" title="custom link" class="side">
  506. <div class="sidelink beta">
  507. <i class="fa fa-link"></i>
  508. </div>
  509. </a>
  510.  
  511. <a href="/" title="custom link" class="side">
  512. <div class="sidelink alpha">
  513. <i class="fa fa-link"></i>
  514. </div>
  515. </a>
  516.  
  517. <a href="/" title="custom link" class="side">
  518. <div class="sidelink beta">
  519. <i class="fa fa-link"></i>
  520. </div>
  521. </a>
  522.  
  523. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="side">
  524. <div class="sidelink alpha">
  525. <i class="fa fa-plus"></i>
  526. </div>
  527. </a>
  528.  
  529. <a href="https://www.tumblr.com/message/mondriantheme" title="chat with {Name}" class="side">
  530. <div class="sidelink beta">
  531. <i class="fa fa-comment"></i>
  532. </div>
  533. </a>
  534.  
  535. <!-- Do not delete or alter this credit! -->
  536. <a href="https://silbrigthemes.tumblr.com/" title="page by @silbrigthemes" class="side">
  537. <div class="sidelink alpha">
  538. <i class="fa fa-code"></i>
  539. </div>
  540. </a>
  541. </div>
  542. </div>
  543.  
  544. </body>
  545. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!