API tools faq
paste
silbrigthemes

Charakter (Page 26, Dark Version)

silbrigthemes
Feb 23rd, 2020
2,148
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta charset="utf-16">
  6. <!-- Change title here: {Your Blog Title} | Page Title -->
  7. <title>{Title} | Charakter</title>
  8. {block:Description}
  9. <meta name="description" content="{MetaDescription}" />
  10. {/block:Description}
  11. <link rel="shortcut icon" href="{Favicon}"/>
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  13. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  14.  
  15. <!-- Necessary for the theme to be responsive. -->
  16. <meta name="viewport" content="width=device-width, initial-scale=1">
  17.  
  18. <!-- Icon font, by fontawesome -->
  19. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  20.  
  21. <!-- Necessary for the scripts to work. -->
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  23.  
  24. <!-- Changes the toolbar color on mobile. -->
  25. <meta name="theme-color" content="#1de"/>
  26.  
  27. <!-- Title Font -->
  28. <link href="https://fonts.googleapis.com/css?family=Orbitron:400,700&display=swap" rel="stylesheet">
  29. <!-- Subtitle Font -->
  30. <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39&display=swap" rel="stylesheet">
  31. <!-- Text Font -->
  32. <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap&subset=latin-ext" rel="stylesheet">
  33.  
  34. <!-- Other Fonts -->
  35. <!-- Roboto Mono -->
  36. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  37. <!-- Cormorant Garamond -->
  38. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  39. <!-- Dancing Script -->
  40. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  41.  
  42. <style>
  43.  
  44. body {
  45. margin:0;
  46. top:0;
  47. left:0;
  48. color:#fff; /* text color */
  49. font-size:1em; /* font size */
  50. font-family:"Raleway", Verdana; /* font, fallback */
  51. overflow-x:hidden;
  52. text-align:justify; /* alt.: left, center, right */
  53. background-color:#111; /* background color */
  54. }
  55.  
  56. *,*:before,*:after {
  57. box-sizing:inherit;
  58. }
  59.  
  60. html {
  61. box-sizing:border-box;
  62. }
  63.  
  64. /* Particle Background */
  65. #background {
  66. position:fixed;
  67. top:0;
  68. z-index:-1;
  69. overflow:hidden;
  70. width:100%;
  71. height:100%;
  72. background-color:inherit;
  73. background-image:url("");
  74. background-repeat:no-repeat;
  75. background-size:cover;
  76. background-position:50% 50%;
  77. }
  78.  
  79. /* Custom Scrollbar */
  80. ::-webkit-scrollbar {
  81. width:10px;
  82. }
  83.  
  84. ::-webkit-scrollbar-thumb {
  85. width:10px;
  86. background-color:#1de; /* thumb color */
  87. }
  88.  
  89. /* Custom Text Selection */
  90. ::selection {
  91. background-color:#1de; /* background color */
  92. color:#000; /* text color */
  93. }
  94.  
  95. ::-moz-selection {
  96. background-color:#1de; /* background color */
  97. color:#000; /* text color */
  98. }
  99.  
  100. ::-o-selection {
  101. background-color:#1de; /* background color */
  102. color:#000; /* text color */
  103. }
  104.  
  105. ::-webkit-selection {
  106. background-color:#1de; /* background color */
  107. color:#000; /* text color */
  108. }
  109.  
  110. /* Custom Tooltips */
  111. .tippy-tooltip.charakter-theme {
  112. background-color:#1de; /* background color */
  113. color:#000; /* text color */
  114. text-align:left; /* alt.: center, right, justify */
  115. text-transform:lowercase; /* alt.: uppercase, normal */
  116. }
  117.  
  118. .tippy-tooltip.charakter-theme .tippy-svg-arrow {
  119. fill:#1de; /* background color */
  120. }
  121.  
  122. /* ––– END GENERAL | START TEXT STYLES ––– */
  123.  
  124. /* Bold Text */
  125. b, strong {
  126. font-weight:bold;
  127. font-weight:700; /* bold text */
  128. }
  129.  
  130. /* Italic Text */
  131. i, em {
  132. font-weight:300; /* thin text */
  133. font-style:italic; /* cursive text */
  134. }
  135.  
  136. /* Marked Text */
  137. mark {
  138. background-color:#e7f91d; /* background color */
  139. color:#000; /* text color */
  140. padding:0 4px;
  141. }
  142.  
  143. /* Preformatted Text */
  144. pre {
  145. background-color:#333; /* background color */
  146. color:#51f91d; /* text color */
  147. padding:1em;
  148. font-family:"Roboto Mono", Courier; /* font-family */
  149. font-size:calc(1em - 2px);
  150. word-wrap:break-all;
  151. white-space:pre-wrap;
  152. }
  153.  
  154. /* Small Text */
  155. small {
  156. font-size:calc(1em - 4px);
  157. }
  158.  
  159. /* Underlined Text */
  160. u {
  161. text-decoration:none;
  162. border-bottom:2px solid #fff; /* width style color */
  163. }
  164.  
  165. /* Blockquote */
  166. blockquote {
  167. border-left:4px solid #fff; /* width style color */
  168. padding-left:1em;
  169. }
  170.  
  171. /* Empty Paragraphs */
  172. p:empty {
  173. display:none;
  174. }
  175.  
  176. /* Text Line */
  177. hr {
  178. width:80%;
  179. height:2px;
  180. border:none;
  181. background-color:#fff; /* background color */
  182. }
  183.  
  184. /* LINKS */
  185. /* Link */
  186. a {
  187. text-decoration:none;
  188. color:#1de; /* text color */
  189. border-bottom:2px solid #1de; /* width style color */
  190. }
  191.  
  192. /* Link | Hover */
  193. a:hover {
  194. color:#5ea; /* text color */
  195. border-bottom:2px solid #5ea; /* width style color */
  196. }
  197.  
  198. /* Link | Transitions */
  199. a, a:hover {
  200. transition:0.5s;
  201. -moz-transition:0.5s;
  202. -o-transition:0.5s;
  203. -webkit-transition:0.5s;
  204. }
  205.  
  206. /* LISTS */
  207. /* Ordered List */
  208. ol {
  209. list-style-type:decimal-leading-zero;
  210. /* alt.: upper roman, decimal, lower alpha, etc. */
  211. }
  212.  
  213. /* Unordered List */
  214. ul {
  215. list-style-type:square; /* alt.: disc, circle */
  216. }
  217.  
  218. /* COLORED TEXT */
  219. /* Red Text */
  220. .npf_color_joey {
  221. color:#f91d1d; /* text color */
  222. }
  223.  
  224. /* Orange Text */
  225. .npf_color_monica {
  226. color:#f9881d; /* text color */
  227. }
  228.  
  229. /* Yellow Text */
  230. .npf_color_phoebe {
  231. color:#f9f21d; /* text color */
  232. }
  233.  
  234. /* Green Text */
  235. .npf_color_ross {
  236. color:#1df933; /* text color */
  237. }
  238.  
  239. /* Blue Text */
  240. .npf_color_rachel {
  241. color:#1d4df9; /* text color */
  242. }
  243.  
  244. /* Purple Text */
  245. .npf_color_chandler {
  246. color:#bf1df9; /* text color */
  247. }
  248.  
  249. /* Pink Text */
  250. .npf_color_niles {
  251. color:#f91d93; /* text color */
  252. }
  253.  
  254. /* SPECIAL FONTS */
  255. /* Quirky Font */
  256. .npf_quirky {
  257. font-family: "Dancing Script", cursive; /* font-family */
  258. font-size:1.5em;
  259. }
  260.  
  261. /* Chat Font */
  262. .npf_chat {
  263. font-family:"Roboto Mono", Courier; /* font-family */
  264. }
  265.  
  266. /* Quote Font */
  267. .npf_quote {
  268. font-family:"Cormorant Garamond", "Palatino"; /* font */
  269. font-size:1.25em;
  270. }
  271.  
  272. /* HEADINGS */
  273. /* First Heading */
  274. h1{
  275. font-size:1.75em;
  276. font-weight:400; /* normal, alt.: 300 (thin), 700 (bold) */
  277. }
  278.  
  279. /* Second Heading */
  280. h2{
  281. font-size:1.5em;
  282. font-weight:300; /* thin text */
  283. }
  284.  
  285. /* Third Heading */
  286. h3{
  287. font-size:1.25em;
  288. }
  289.  
  290. /* Fourth Heading */
  291. h4{
  292. font-size:1em;
  293. }
  294.  
  295. /* Fifth Heading */
  296. h5{
  297. font-size:calc(1em - 2px);
  298. text-transform:uppercase; /* alt.: lowercase, capitalize */
  299. }
  300.  
  301. /* Sixth Heading */
  302. h6{
  303. font-size:calc(1em - 4px);
  304. text-transform:uppercase; /* alt.: lowercase, capitalize */
  305. }
  306.  
  307. /* ––– END TEXT STYLES | START LAYOUT ––– */
  308.  
  309. /* MAIN CONTAINER */
  310. #container {
  311. padding:2em;
  312. width:calc(100vw - 12em);
  313. height:auto;
  314. margin:4em;
  315. background-color:#111; /* background color */
  316. background:rgba(17, 17, 17, 0.85); /* opaque bg */
  317. display:grid;
  318. grid-template-columns:96px calc(100vw - (12em + 2 * 96px + 0.5em + 4 * 1em + 40vw + 4em)) 96px 0.5em 40vw;
  319. grid-column-gap:1em;
  320. grid-template-rows:3.5em calc(2 * 96px + 8px) calc(2 * 96px + 8px) auto auto;
  321. grid-row-gap:1em;
  322. }
  323.  
  324. /* TITLES */
  325. #titles {
  326. grid-column-start:1;
  327. grid-column-end:4;
  328. grid-rows:1/2;
  329. }
  330.  
  331. /* Main Title */
  332. #title {
  333. font-family:"Orbitron", Impact; /* font-family */
  334. font-size:2em;
  335. }
  336.  
  337. /* Main Subtitle */
  338. #subtitle {
  339. font-family:"Libre Barcode 39", "Courier New", Courier;
  340. /* font-family */
  341. font-size:calc(1em + 4px);
  342. }
  343.  
  344. /* ABOUT */
  345. #about {
  346. grid-column-start:5;
  347. grid-column-end:6;
  348. grid-row-start:1;
  349. grid-row-end:6;
  350. }
  351.  
  352. /* Section Title */
  353. .sect-title {
  354. font-family:"Orbitron", Impact; /* font-family */
  355. font-size:calc(1em + 4px);
  356. }
  357.  
  358. /* Section Subtitle */
  359. .sect-subtitle {
  360. font-family:"Libre Barcode 39", "Courier New", Courier;
  361. /* font-family */
  362. }
  363.  
  364. /* QUICK INFO */
  365. #quick-info{
  366. grid-column-start:2;
  367. grid-column-end:4;
  368. grid-row-start:2;
  369. grid-row-end:3;
  370. }
  371.  
  372. /* STATS */
  373. #stats {
  374. grid-column-start:1;
  375. grid-column-end:3;
  376. grid-row-start:3;
  377. grid-row-end:4;
  378. }
  379.  
  380. /* Table */
  381. table {
  382. width:100%;
  383. }
  384.  
  385. /* 1st Table Cell */
  386. #stats td:first-child {
  387. width:30%;
  388. }
  389.  
  390. /* Last Table Cell */
  391. #stats td:last-child {
  392. width:10%;
  393. }
  394.  
  395. /* Stats */
  396. /* Sets the style for stats. */
  397. .stat {
  398. width:100%;
  399. background-color:#333; /* background color */
  400. height:20px;
  401. }
  402.  
  403. /* Skills */
  404. /* Sets the style for all skills. */
  405. .skill {
  406. background-color:#1de; /* background color */
  407. color:#000; /* text color */
  408. height:20px;
  409. }
  410.  
  411. /* These set the length of the skillbars. **/
  412. .skill1 {
  413. width:90%; /* 9 out of 10 = 90% width */
  414. }
  415.  
  416. .skill2 {
  417. width:80%; /* 8 out of 10 = 80% width */
  418. }
  419.  
  420. .skill3 {
  421. width:70%; /* 7 out of 10 = 70% width */
  422. }
  423.  
  424. .skill4 {
  425. width:80%; /* 8 out of 10 = 80% width */
  426. }
  427.  
  428. .skill5 {
  429. width:0%; /* 0 out of 10 = 0% width */
  430. }
  431.  
  432. .skill6 {
  433. width:80%; /* 8 out of 10 = 80% width */
  434. }
  435.  
  436. /* ICONS */
  437. #icons, #icons2 {
  438. display:flex;
  439. flex-direction:column;
  440. justify-content:space-between;
  441. align-items:center;
  442. }
  443.  
  444. /* ICONS 1 */
  445. #icons {
  446. grid-columns:1/2;
  447. grid-row-start:2;
  448. grid-row-end:3;
  449. }
  450.  
  451. /* ICONS 2 */
  452. #icons2 {
  453. grid-column-start:3;
  454. grid-column-end:4;
  455. grid-row-start:3;
  456. grid-row-end:4;
  457. }
  458.  
  459. /* Icon Images */
  460. .image img {
  461. width:96px;
  462. height:96px;
  463. }
  464.  
  465. /* Delete if you don't want grayscale images */
  466. /* Images */
  467. img {
  468. filter:grayscale(100%); /* value between 0% and 100% */
  469. -webkit-filter:grayscale(100%);
  470. -o-filter:grayscale(100%);
  471. -moz-filter:grayscale(100%);
  472. }
  473.  
  474. /* Images | Hover */
  475. img:hover {
  476. filter:grayscale(0%); /* value between 0% and 100% */
  477. -webkit-filter:grayscale(0%);
  478. -o-filter:grayscale(0%);
  479. -moz-filter:grayscale(0%);
  480. }
  481.  
  482. /* Image | Transitions */
  483. img, img:hover {
  484. transition:0.5s;
  485. -moz-transition:0.5s;
  486. -o-transition:0.5s;
  487. -webkit-transition:0.5s;
  488. }
  489.  
  490. /* QUOTE */
  491. #quote {
  492. grid-column-start:1;
  493. grid-column-end:4;
  494. grid-row-start:4;
  495. grid-row-end:5;
  496. }
  497.  
  498. /* APPEAREANCES */
  499. #appeareances {
  500. grid-column-start:1;
  501. grid-column-end:4;
  502. grid-row-start:5;
  503. grid-row-end:6;
  504. }
  505.  
  506. /* SLIDER */
  507. /* Slider Images */
  508. img {
  509. vertical-align:middle;
  510. max-width:100%;
  511. }
  512.  
  513. /* Slider Container */
  514. #sliderwrap {
  515. margin:0 auto;
  516. max-width:100%;
  517. }
  518.  
  519. /* Position the image container (needed to position the left and right arrows) */
  520. .container {
  521. position:relative;
  522. }
  523.  
  524. /* Hide the images by default */
  525. .mySlides {
  526. display:none;
  527. }
  528.  
  529. /* Add a pointer when hovering over the thumbnail images */
  530. .demo:hover {
  531. cursor:pointer;
  532. }
  533.  
  534. /* Next & previous buttons */
  535. .prev, .next {
  536. opacity:.6;
  537. border-bottom:none;
  538. cursor:pointer;
  539. position:absolute;
  540. top:40%;
  541. width:auto;
  542. padding:16px;
  543. margin-top:-50px;
  544. color:#1de; /* text color */
  545. background-color:rgba(17,17,17,0.2); /* background color */
  546. font-weight:bold; /* bold text */
  547. font-size:calc(1em + 4px);
  548. border-radius:0 3px 3px 0;
  549. -webkit-user-select:none;
  550. -o-user-select:none;
  551. -moz-user-select:none;
  552. user-select:none;
  553. -webkit-transition:0.5s ease-in;
  554. -o-transition:0.5s ease-in;
  555. -moz-transition:0.5s ease-in;
  556. transition:0.5s ease-in;
  557. }
  558.  
  559. /* Position the "next button" to the right */
  560. .next {
  561. right:0;
  562. border-radius:3px 0 0 3px;
  563. }
  564.  
  565. /* On hover, add a black background color with a little bit see-through */
  566. .prev:hover, .next:hover {
  567. opacity:1;
  568. -webkit-transition: 0.5s ease-out;
  569. -o-transition:0.5s ease-out;
  570. -moz-transition:0.5s ease-out;
  571. transition:0.5s ease-out;
  572. background-color:rgba(17, 17, 17, 0.7); /* background */
  573. color:#1de; /* text color */
  574. border-bottom:none;
  575. }
  576.  
  577. /* Number text (1/3 etc) */
  578. .numbertext {
  579. color:#fff; /* text color */
  580. font-size:calc(1em - 4px);
  581. padding:8px 12px;
  582. position:absolute;
  583. top:0;
  584. }
  585.  
  586. /* Caption text */
  587. .caption {
  588. background:#111; /* background color */
  589. color:#fff; /* text color */
  590. font-size:1em;
  591. padding:8px 12px;
  592. text-align:center;
  593. margin:0 auto;
  594. top:70%;
  595. }
  596.  
  597. .row:after {
  598. content:"";
  599. display:table;
  600. clear:both;
  601. }
  602.  
  603. /* Six columns side by side */
  604. .column {
  605. float:left;
  606. width:calc(100% / 6); /* 100% / number of slides */
  607. }
  608.  
  609. /* Add a transparency effect for thumnbail images */
  610. .demo {
  611. -webkit-transition:0.5s ease-in;
  612. -o-transition:0.5s ease-in;
  613. -moz-transition:0.5s ease-in;
  614. transition:0.5s ease-in;
  615. opacity:0.5;
  616. }
  617.  
  618. .active, .demo:hover{
  619. -webkit-transition:0.5s ease-out;
  620. -o-transition:0.5s ease-out;
  621. -moz-transition:0.5s ease-out;
  622. transition:0.5s ease-out;
  623. opacity:1;
  624. }
  625.  
  626. /* Fading animation */
  627. .fade {
  628. -webkit-animation-name:fade;
  629. -o-animation-name:fade;
  630. -moz-animation-name:fade;
  631. animation-name:fade;
  632. -webkit-animation-duration:1.5s;
  633. -o-animation-duration:1.5s;
  634. -moz-animation-duration:1.5s;
  635. animation-duration:1.5s;
  636. }
  637.  
  638. @-webkit-keyframes fade {
  639. 0%{
  640. opacity:0.5;
  641. }
  642.  
  643. 100%{
  644. opacity:1;
  645. }
  646. }
  647.  
  648. @keyframes fade {
  649. 0%{
  650. opacity:0.5;
  651. }
  652.  
  653. 100%{
  654. opacity:1;
  655. }
  656. }
  657.  
  658. /* ––– END LAYOUT | START EXTRAS ––– */
  659.  
  660. /* Hides the tumblr app button, by @yeoli-thm */
  661. .tmblr-iframe--app-cta-button {
  662. display:none!important;
  663. }
  664.  
  665. /* CUSTOM CONTROLS */
  666. /* Container */
  667. #custom-controls {
  668. position:fixed;
  669. top:8px;
  670. right:8px;
  671. width:calc(2 * 36px + 4px);
  672. height:calc(2 * 36px + 8px);
  673. display:flex;
  674. flex-wrap:wrap;
  675. justify-content:space-between;
  676. align-items:space-between;
  677. }
  678.  
  679. /* Control Link */
  680. a.conlink {
  681. border-bottom:none;
  682. box-shadow:none;
  683. text-decoration:none;
  684. }
  685.  
  686. /* Control Element */
  687. .cont {
  688. background-color:#1de; /* background color */
  689. color:#000; /* text color */
  690. font-size:calc(1em - 2px);
  691. width:36px;
  692. height:36px;
  693. display:flex;
  694. align-items:center;
  695. justify-content:center;
  696. }
  697.  
  698. /* Control Element on Hover */
  699. .cont:hover {
  700. transform:scale(0.98) rotate(360deg); /* smaller, rotate */
  701. }
  702.  
  703. /* Transitions */
  704. .cont, .cont:hover {
  705. transition:0.5s;
  706. -moz-transition:0.5s;
  707. -o-transition:0.5s;
  708. -webkit-transition:0.5s;
  709. }
  710.  
  711. /* Hides standard tumblr controls */
  712. body > iframe:first-child {
  713. display: none!important;
  714. }
  715.  
  716. /* Credit – Don't touch! */
  717. #cd {
  718. position:fixed;
  719. bottom:8px;
  720. left:8px;
  721. }
  722.  
  723. /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
  724.  
  725. /* LARGE SCREENS | DESKTOP */
  726. @media only screen and (min-width:800px) {
  727. /* MOBILE FOOTER */
  728. #mobile-footer {
  729. display:none;
  730. }
  731. }
  732.  
  733. /* SMALL SCREENS | TABLETS */
  734. @media only screen and (max-width:800px) {
  735. /* MAIN CONTAINER */
  736. #container {
  737. width:calc(100vw - 4em);
  738. margin:2em;
  739. margin-bottom:calc(10vh + 2em);
  740. display:grid;
  741. grid-template-columns:96px 96px auto 96px 96px;
  742. grid-template-rows:auto auto auto auto auto auto;
  743. }
  744.  
  745. /* TITLES, ABOUT, QUOTE, APPEAREANCES */
  746. #titles, #about, #quote, #appeareances {
  747. grid-column-start:1;
  748. grid-column-end:6;
  749. }
  750.  
  751. /* TITLES */
  752. #titles {
  753. grid-row-start:1;
  754. grid-row-end:2;
  755. }
  756.  
  757. /* ABOUT */
  758. #about {
  759. grid-row-start:6;
  760. grid-row-end:7;
  761. }
  762.  
  763. /* QUICK INFO */
  764. #quick-info{
  765. grid-row-start:2;
  766. grid-row-end:3;
  767. grid-column-start:2;
  768. grid-column-end:6;
  769. }
  770.  
  771. /* STATS */
  772. #stats {
  773. grid-row-start:3;
  774. grid-row-end:4;
  775. grid-column-start:1;
  776. grid-column-end:5;
  777. }
  778.  
  779. /* ICONS 1 */
  780. #icons {
  781. grid-column-start:1;
  782. grid-column-end:2;
  783. }
  784.  
  785. /* ICONS 2 */
  786. #icons2 {
  787. grid-column-start:5;
  788. grid-column-end:6;
  789. }
  790.  
  791. /* QUOTE */
  792. #quote {
  793. grid-row-start:4;
  794. grid-row-end:5;
  795. }
  796.  
  797. /* APPEAREANCES */
  798. #appeareances {
  799. grid-row-start:5;
  800. grid-row-end:6;
  801. }
  802.  
  803. /* Section Title */
  804. .sect-title {
  805. margin-top:8px;
  806. }
  807.  
  808. /* MOBILE FOOTER */
  809. #mobile-footer {
  810. display:flex;
  811. align-items:center;
  812. justify-content:space-evenly;
  813. background-color:#1de; /* background color */
  814. position:fixed;
  815. bottom:0;
  816. left:0;
  817. width:100vw;
  818. height:10vh;
  819. }
  820.  
  821. /* Navigation Element */
  822. .mf-nav {
  823. width:36px;
  824. height:36px;
  825. font-size:calc(1em - 2px);
  826. background-color:#000; /* background color */
  827. color:#fff; /* text color */
  828. display:flex;
  829. align-items:center;
  830. justify-content:center;
  831. }
  832.  
  833. /* Navigation Element on Hover */
  834. .mf-nav:hover {
  835. color:#1de; /* text color */
  836. cursor:pointer;
  837. transform:scale(0.98) rotate(360deg); /* smaller */
  838. }
  839.  
  840. /* Navigation Element Transitions */
  841. .mf-nav, .mf-nav:hover {
  842. transition:0.5s;
  843. -moz-transition:0.5s;
  844. -o-transition:0.5s;
  845. -webkit-transition:0.5s;
  846. }
  847.  
  848. /* Navigation Link */
  849. a.mf-link {
  850. border-bottom:none;
  851. }
  852.  
  853. /* Custom Controls, Credit */
  854. #custom-controls, #cd {
  855. display:none;
  856. }
  857. }
  858.  
  859. /* SMALL SCREENS | PHONES */
  860. @media only screen and (max-width:500px) {
  861. /* MAIN CONTAINER */
  862. #container {
  863. margin:0;
  864. width:calc(100vw - 10px);
  865. margin-bottom:10vh;
  866. display:block;
  867. }
  868.  
  869. /* ICONS 1, ICONS 2 */
  870. #icons, #icons2 {
  871. display:flex;
  872. flex-direction:row;
  873. margin-top:1em;
  874. margin-bottom:1em;
  875. }
  876.  
  877. /* Slider Container */
  878. #sliderwrap {
  879. margin-bottom:1em;
  880. }
  881.  
  882. /* Tables */
  883. table {
  884. text-align:left;
  885. }
  886. }
  887.  
  888. </style>
  889. </head>
  890.  
  891. <body>
  892.  
  893. <!-- MAIN CONTAINER -->
  894. <div id="container">
  895. <!-- TITLES -->
  896. <div id="titles">
  897. <!-- Main Title -->
  898. <div id="title">Charakter</div>
  899. <!-- Main Subtitle -->
  900. <div id="subtitle">Charakter</div>
  901. </div> <!-- // end titles -->
  902.  
  903. <!-- QUICK INFO -->
  904. <div id="quick-info">
  905. <!-- Section Title -->
  906. <div class="sect-title">Quick Info</div>
  907. <!-- Section Subtitle -->
  908. <div class="sect-subtitle">Quick Info</div>
  909. <!-- Table -->
  910. <table>
  911. <!-- 1st Row -->
  912. <tr>
  913. <td>X:</td>
  914. <td>Y</td>
  915. </tr>
  916. <!-- 2nd Row -->
  917. <tr>
  918. <td>X:</td>
  919. <td>Y</td>
  920. </tr>
  921. <!-- 3rd Row -->
  922. <tr>
  923. <td>X:</td>
  924. <td>Y</td>
  925. </tr>
  926. <!-- 4th Row -->
  927. <tr>
  928. <td>X:</td>
  929. <td>Y</td>
  930. </tr>
  931. <!-- 5th Row -->
  932. <tr>
  933. <td>X:</td>
  934. <td>Y</td>
  935. </tr>
  936. <!-- 6th Row -->
  937. <tr>
  938. <td>X:</td>
  939. <td>Y</td>
  940. </tr>
  941. </table> <!-- // end table -->
  942. </div> <!-- // end quick info -->
  943.  
  944. <!-- ICONS 1 -->
  945. <div id="icons">
  946. <!-- 1st Icon -->
  947. <div class="image">
  948. <img src="https://66.media.tumblr.com/b6d5125726a05d81b7e3310772fb52f2/tumblr_pdvo5vlqQP1wsskx3o5_r1_1280.png" alt="first image"/>
  949. </div>
  950. <!-- 2nd Icon -->
  951. <div class="image">
  952. <img src="https://66.media.tumblr.com/fffea87e467017d6fd885bf45af016e4/tumblr_pdvo5vlqQP1wsskx3o1_1280.png" alt="second image"/>
  953. </div>
  954. </div> <!-- // end icons 1 -->
  955.  
  956. <!-- STATS -->
  957. <div id="stats">
  958. <!-- Section Title -->
  959. <div class="sect-title">Stats</div>
  960. <!-- Section Subtitle -->
  961. <div class="sect-subtitle">Stats</div>
  962. <!-- Table -->
  963. <table>
  964. <!-- 1st Row -->
  965. <tr>
  966. <td>Skill 1</td>
  967. <td>
  968. <div class="stat">
  969. <div class="skill skill1"></div>
  970. </div>
  971. </td>
  972. <td>9/10</td>
  973. </tr>
  974. <!-- 2nd Row -->
  975. <tr>
  976. <td>Skill 2</td>
  977. <td>
  978. <div class="stat">
  979. <div class="skill skill2"></div>
  980. </div>
  981. </td>
  982. <td>7/10</td>
  983. </tr>
  984. <!-- 3rd Row -->
  985. <tr>
  986. <td>Skill 3</td>
  987. <td>
  988. <div class="stat">
  989. <div class="skill skill3"></div>
  990. </div>
  991. </td>
  992. <td>8/10</td>
  993. </tr>
  994. <!-- 4th Row -->
  995. <tr>
  996. <td>Skill 4</td>
  997. <td>
  998. <div class="stat">
  999. <div class="skill skill4"></div>
  1000. </div>
  1001. </td>
  1002. <td>8/10</td>
  1003. </tr>
  1004. <!-- 5th Row -->
  1005. <tr>
  1006. <td>Skill 5</td>
  1007. <td>
  1008. <div class="stat">
  1009. <div class="skill skill5"></div>
  1010. </div>
  1011. </td>
  1012. <td>0/10</td>
  1013. </tr>
  1014. <!-- 6th Row -->
  1015. <tr>
  1016. <td>Skill 6</td>
  1017. <td>
  1018. <div class="stat">
  1019. <div class="skill skill6"></div>
  1020. </div>
  1021. </td>
  1022. <td>8/10</td>
  1023. </tr>
  1024. </table> <!-- // end table -->
  1025. </div> <!-- // end stats -->
  1026.  
  1027. <!-- ICONS 2 -->
  1028. <div id="icons2">
  1029. <!-- 1st Icon -->
  1030. <div class="image">
  1031. <img src="https://66.media.tumblr.com/dcb6808e46fa47f1b6e24cd1975dc17f/tumblr_pdvo5vlqQP1wsskx3o6_r1_1280.png" alt="third image"/>
  1032. </div>
  1033. <!-- 2nd Icon -->
  1034. <div class="image">
  1035. <img src="https://66.media.tumblr.com/d70d9cf668ce772fecb914229a0cb38d/tumblr_pdvo5vlqQP1wsskx3o2_1280.png" alt="fourth image"/>
  1036. </div>
  1037. </div> <!-- // end icons 2 -->
  1038.  
  1039. <!-- QUOTE -->
  1040. <div id="quote">
  1041. <!-- Section Title -->
  1042. <div class="sect-title">Quote</div>
  1043. <!-- Section Subtitle -->
  1044. <div class="sect-subtitle">Quote</div>
  1045. <!-- Text -->
  1046. <div class="text">
  1047. [Insert a quote here.]
  1048. </div> <!-- // end text -->
  1049. </div> <!-- // end quote -->
  1050.  
  1051. <!-- APPEAREANCES -->
  1052. <div id="appeareances">
  1053. <!-- Section Title -->
  1054. <div class="sect-title">Appeareance</div>
  1055. <!-- Section Subtitle -->
  1056. <div class="sect-subtitle">Appeareance</div>
  1057. <div id="sliderwrap">
  1058. <!-- Container for the image gallery -->
  1059. <div class="container">
  1060.  
  1061. <!-- SLIDES -->
  1062. <!-- 1st Slide -->
  1063. <div class="mySlides fade">
  1064. <!-- Slide Number -->
  1065. <div class="numbertext">1 / 6</div>
  1066. <!-- Slide Image -->
  1067. <img src="https://66.media.tumblr.com/e63229b67212d4e9ac0213ed8cf715b4/8a526ff833cb69f4-76/s1280x1920/7fe3d53d58a9d99cfeb5d4e1368faf9c883af4cd.png" style="width:100%">
  1068. <!-- Slide Caption -->
  1069. <div class="caption">1st Slide</div>
  1070. </div>
  1071.  
  1072. <!-- 2nd Slide -->
  1073. <div class="mySlides fade">
  1074. <!-- Slide Number -->
  1075. <div class="numbertext">2 / 6</div>
  1076. <!-- Slide Image -->
  1077. <img src="https://66.media.tumblr.com/9e8d4216f1e264bbce059f2f3cd8b075/8a526ff833cb69f4-44/s1280x1920/67f3b1bdb394904e80ddd354be48a75f9b2074df.png" style="width:100%">
  1078. <!-- Slide Caption -->
  1079. <div class="caption">2nd Slide</div>
  1080. </div>
  1081.  
  1082. <!-- 3rd Slide -->
  1083. <div class="mySlides fade">
  1084. <!-- Slide Number -->
  1085. <div class="numbertext">3 / 6</div>
  1086. <!-- Slide Image -->
  1087. <img src="https://66.media.tumblr.com/878695d37e4a918e54343a45c5bc1202/8a526ff833cb69f4-3c/s1280x1920/b7aa201ff74bb34b6a27ff6ab695380cfdad1b9f.png" style="width:100%">
  1088. <!-- Slide Caption -->
  1089. <div class="caption">3rd Slide</div>
  1090. </div>
  1091.  
  1092. <!-- 4th Slide -->
  1093. <div class="mySlides fade">
  1094. <!-- Slide Number -->
  1095. <div class="numbertext">4 / 6</div>
  1096. <!-- Slide Image -->
  1097. <img src="https://66.media.tumblr.com/ac68ccd754aa74dfdfbb09df55ebdb8a/8a526ff833cb69f4-6e/s1280x1920/872de7524c13b7dd8eff96acf39c4919b1fce2de.png" style="width:100%">
  1098. <!-- Slide Caption -->
  1099. <div class="caption">4th Slide</div>
  1100. </div>
  1101.  
  1102. <!-- 5th Slide -->
  1103. <div class="mySlides fade">
  1104. <!-- Slide Number -->
  1105. <div class="numbertext">5 / 6</div>
  1106. <!-- Slide Image -->
  1107. <img src="https://66.media.tumblr.com/5715d3fc84c52aa10e2e46d3b9ffb787/8a526ff833cb69f4-75/s1280x1920/5a5fa399c7ed73f2a980c69624151d61ae8fa40c.png" style="width:100%">
  1108. <!-- Slide Caption -->
  1109. <div class="caption">5th Slide</div>
  1110. </div>
  1111.  
  1112. <!-- 6th Slide -->
  1113. <div class="mySlides fade">
  1114. <!-- Slide Number -->
  1115. <div class="numbertext">6 / 6</div>
  1116. <!-- Slide Image -->
  1117. <img src="https://66.media.tumblr.com/dc24e16e3a1b936c3749650e3ec9d1b3/8a526ff833cb69f4-69/s1280x1920/a2f15194bb821b5c0a83ed9d5ef5b8ca910b6d3c.png" style="width:100%">
  1118. <!-- Slide Caption -->
  1119. <div class="caption">6th Slide</div>
  1120. </div>
  1121.  
  1122. <!-- If you need more, add them here and remember to
  1123. change the numbers in the code further down below! -->
  1124.  
  1125. <!-- BUTTONS -->
  1126. <!-- Previous Slide -->
  1127. <a class="prev" onclick="plusSlides(-1)">
  1128. <span class="fas fa-chevron-left"></span>
  1129. </a>
  1130. <!-- Next Slide -->
  1131. <a class="next" onclick="plusSlides(1)">
  1132. <span class="fas fa-chevron-right"></span>
  1133. </a>
  1134.  
  1135. <!-- THUMBNAIL IMAGES -->
  1136. <div class="row">
  1137. <!-- 1st Column -->
  1138. <div class="column">
  1139. <img class="demo" src="https://66.media.tumblr.com/e63229b67212d4e9ac0213ed8cf715b4/8a526ff833cb69f4-76/s1280x1920/7fe3d53d58a9d99cfeb5d4e1368faf9c883af4cd.png" style="width:100%" onclick="currentSlide(1)" alt="1st Slide">
  1140. </div>
  1141.  
  1142. <!-- 2nd Column -->
  1143. <div class="column">
  1144. <img class="demo" src="https://66.media.tumblr.com/9e8d4216f1e264bbce059f2f3cd8b075/8a526ff833cb69f4-44/s1280x1920/67f3b1bdb394904e80ddd354be48a75f9b2074df.png" style="width:100%" onclick="currentSlide(2)" alt="2nd Slide">
  1145. </div>
  1146.  
  1147. <!-- 3rd Column -->
  1148. <div class="column">
  1149. <img class="demo" src="https://66.media.tumblr.com/878695d37e4a918e54343a45c5bc1202/8a526ff833cb69f4-3c/s1280x1920/b7aa201ff74bb34b6a27ff6ab695380cfdad1b9f.png" style="width:100%" onclick="currentSlide(3)" alt="3rd Slide">
  1150. </div>
  1151.  
  1152. <!-- 4th Column -->
  1153. <div class="column">
  1154. <img class="demo" src="https://66.media.tumblr.com/ac68ccd754aa74dfdfbb09df55ebdb8a/8a526ff833cb69f4-6e/s1280x1920/872de7524c13b7dd8eff96acf39c4919b1fce2de.png" style="width:100%" onclick="currentSlide(4)" alt="4th Slide">
  1155. </div>
  1156.  
  1157. <!-- 5th Column -->
  1158. <div class="column">
  1159. <img class="demo" src="https://66.media.tumblr.com/5715d3fc84c52aa10e2e46d3b9ffb787/8a526ff833cb69f4-75/s1280x1920/5a5fa399c7ed73f2a980c69624151d61ae8fa40c.png" style="width:100%" onclick="currentSlide(5)" alt="5th Slide">
  1160. </div>
  1161.  
  1162. <!-- 6th Column -->
  1163. <div class="column">
  1164. <img class="demo" src="https://66.media.tumblr.com/dc24e16e3a1b936c3749650e3ec9d1b3/8a526ff833cb69f4-69/s1280x1920/a2f15194bb821b5c0a83ed9d5ef5b8ca910b6d3c.png" style="width:100%" onclick="currentSlide(6)" alt="6th Slide">
  1165. </div>
  1166. </div> <!-- // end thumbnail images -->
  1167. </div> <!-- // end slider container -->
  1168. </div> <!-- // end sliderwrap -->
  1169. </div> <!-- // end appeareances -->
  1170.  
  1171. <!-- ABOUT SECTION -->
  1172. <div id="about">
  1173. <!-- Section Title -->
  1174. <div class="sect-title">About</div>
  1175. <!-- Section Subtitle -->
  1176. <div class="sect-subtitle">About</div>
  1177. <!-- Text -->
  1178. <div class="text">
  1179. [Insert a long text here.]
  1180. </div> <!-- // end text -->
  1181. </div> <!-- // end about -->
  1182. </div> <!-- // end main container -->
  1183.  
  1184. <!-- SCRIPTS -->
  1185. <!-- Particle Background, by Zhiming Zhou -->
  1186. <!--
  1187. INFO:
  1188. There are three color values that you can change.
  1189. I have marked them with comments for you.
  1190. Don't change anything else, just those; it'll be enough.
  1191. The empty background element is necessary to apply the effect.
  1192. -->
  1193. <div id="background"></div>
  1194. <script>
  1195. function F__ID(){
  1196. $.getScript('https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js',function(){
  1197. particlesJS("background", {
  1198. "particles": {
  1199. "number": {
  1200. "value": 100,
  1201. "density": {
  1202. "enable": true,
  1203. "value_area": 800
  1204. }
  1205. },
  1206. "color": {
  1207. "value": "#1de" /* change color here */
  1208. },
  1209. "shape": {
  1210. "type": "circle",
  1211. "stroke": {
  1212. "width": 0,
  1213. "color": "#111" /* change color here */
  1214. },
  1215. "polygon": {
  1216. "nb_sides": 5
  1217. },
  1218. "image": {
  1219. "src": "img/github.svg",
  1220. "width": 100,
  1221. "height": 100
  1222. }
  1223. },
  1224. "opacity": {
  1225. "value": 0.5,
  1226. "random": false,
  1227. "anim": {
  1228. "enable": false,
  1229. "speed": 1,
  1230. "opacity_min": 0.1,
  1231. "sync": false
  1232. }
  1233. },
  1234. "size": {
  1235. "value": 3,
  1236. "random": true,
  1237. "anim": {
  1238. "enable": false,
  1239. "speed": 40,
  1240. "size_min": 0.1,
  1241. "sync": false
  1242. }
  1243. },
  1244. "line_linked": {
  1245. "enable": true,
  1246. "distance": 150,
  1247. "color": "#1de", /* change color here */
  1248. "opacity": 0.4,
  1249. "width": 1
  1250. },
  1251. "move": {
  1252. "enable": true,
  1253. "speed": 1,
  1254. "direction": "none",
  1255. "random": false,
  1256. "straight": false,
  1257. "out_mode": "out",
  1258. "bounce": false,
  1259. "attract": {
  1260. "enable": false,
  1261. "rotateX": 600,
  1262. "rotateY": 1200
  1263. }
  1264. }
  1265. },
  1266. "interactivity": {
  1267. "detect_on": "canvas",
  1268. "events": {
  1269. "onhover": {
  1270. "enable": true,
  1271. "mode": "grab"
  1272. },
  1273. "onclick": {
  1274. "enable": true,
  1275. "mode": "push"
  1276. },
  1277. "resize": true
  1278. },
  1279. "modes": {
  1280. "grab": {
  1281. "distance": 140,
  1282. "line_linked": {
  1283. "opacity": 1
  1284. }
  1285. },
  1286. "bubble": {
  1287. "distance": 400,
  1288. "size": 40,
  1289. "duration": 2,
  1290. "opacity": 8,
  1291. "speed": 3
  1292. },
  1293. "repulse": {
  1294. "distance": 200,
  1295. "duration": 0.4
  1296. },
  1297. "push": {
  1298. "particles_nb": 4
  1299. },
  1300. "remove": {
  1301. "particles_nb": 2
  1302. }
  1303. }
  1304. },
  1305. "retina_detect": true
  1306. });
  1307. });
  1308. }
  1309. </script>
  1310. <script>
  1311. F__ID();
  1312. </script>
  1313.  
  1314. <!-- CUSTOM CONTROLS -->
  1315. <div id="custom-controls">
  1316. <!-- Dashboard Link -->
  1317. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  1318. <div class="cont">
  1319. <span class="fab fa-tumblr" aria-hidden="true"></span>
  1320. </div>
  1321. </a>
  1322.  
  1323. <!-- Message -->
  1324. <!-- Takes people to dashboard to send you a message. -->
  1325. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  1326. <div class="cont">
  1327. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  1328. </div>
  1329. </a>
  1330.  
  1331. <!-- Customize -->
  1332. <!-- Takes you, the blog owner, to the customization. -->
  1333. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="conlink">
  1334. <div class="cont">
  1335. <span class="fas fa-palette" aria-hidden="true"></span>
  1336. </div>
  1337. </a>
  1338.  
  1339. <!-- Follow -->
  1340. <!-- Takes people to a page so that they can follow you. -->
  1341. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  1342. <div class="cont">
  1343. <span class="fas fa-plus" aria-hidden="true"></span>
  1344. </div>
  1345. </a>
  1346. </div> <!-- // end custom controls -->
  1347.  
  1348. <!-- MOBILE FOOTER -->
  1349. <div id="mobile-footer">
  1350. <!-- Desktop Link -->
  1351. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mf-link">
  1352. <div class="mf-nav">
  1353. <span class="fab fa-tumblr" aria-hidden="true"></span>
  1354. </div>
  1355. </a>
  1356.  
  1357. <!-- Message -->
  1358. <!-- Takes people to dashboard to send you a message. -->
  1359. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="mf-link">
  1360. <div class="mf-nav">
  1361. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  1362. </div>
  1363. </a>
  1364.  
  1365. <!-- Home Link -->
  1366. <a href="/" title="return to blog" class="mf-link">
  1367. <div class="mf-nav">
  1368. <span class="fas fa-home" aria-hidden="true"></span>
  1369. </div>
  1370. </a>
  1371.  
  1372. <!-- Follow -->
  1373. <!-- Takes people to a page so that they can follow you. -->
  1374. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="mf-link">
  1375. <div class="mf-nav">
  1376. <span class="fas fa-plus" aria-hidden="true"></span>
  1377. </div>
  1378. </a>
  1379.  
  1380. <!-- Credit – Do not touch! -->
  1381. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
  1382. <div class="mf-nav">
  1383. <span class="fas fa-code" aria-hidden="true"></span>
  1384. </div>
  1385. </a>
  1386. </div> <!-- // end mobile footer -->
  1387.  
  1388. <!-- CREDIT -->
  1389. <!-- Do not touch! -->
  1390. <div id="cd">
  1391. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="conlink">
  1392. <div class="cont">
  1393. <span class="fas fa-code" aria-hidden="true"></span>
  1394. </div>
  1395. </a>
  1396. </div>
  1397.  
  1398. <!-- SLIDER GALLERY -->
  1399. <!-- Tutorial by w3schools. -->
  1400. <!-- Huge thanks to coffeestainedbooks for fixing this! -->
  1401. <script>
  1402. var slideIndex = 1;
  1403. showSlides(slideIndex);
  1404.  
  1405. function plusSlides(n) {
  1406. showSlides(slideIndex = slideIndex + n);
  1407. }
  1408.  
  1409. function currentSlide(n) {
  1410. showSlides(slideIndex = n);
  1411. }
  1412.  
  1413. function showSlides(n) {
  1414. var slides = document.getElementsByClassName("mySlides");
  1415. var thumbnail = document.getElementsByClassName("demo");
  1416. if (n > 6) { /* change depending on number of slides */
  1417. slideIndex = 1
  1418. }
  1419. if (n < 1) {
  1420. slideIndex = 6
  1421. /* change depending on number of slides */
  1422. }
  1423. slides[0].style.display = "none";
  1424. slides[1].style.display = "none";
  1425. slides[2].style.display = "none";
  1426. slides[3].style.display = "none";
  1427. slides[4].style.display = "none";
  1428. slides[5].style.display = "none";
  1429. /* add or delete depending on number of slides */
  1430. slides[slideIndex - 1].style.display = "block";
  1431.  
  1432. for (i = 0; i < thumbnail.length; i++) {
  1433. thumbnail[i].className = thumbnail[i].className.replace(" active", "");
  1434. }
  1435. thumbnail[slideIndex-1].className += " active";
  1436. }
  1437. </script>
  1438.  
  1439. <!-- Tooltips, TippyJs -->
  1440. <script src="https://unpkg.com/popper.js@1"></script>
  1441. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1442. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1443.  
  1444. <script>
  1445. tippy('a[title]', {
  1446. theme: 'charakter',
  1447. arrow: tippy.roundArrow,
  1448. zIndex: 9999999999,
  1449. maxWidth: 300,
  1450.  
  1451. content(reference) {
  1452. const title = reference.getAttribute('title');
  1453. reference.removeAttribute('title');
  1454. return title;
  1455. },
  1456. });
  1457. </script>
  1458.  
  1459. </body>
  1460. </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!