API tools faq
paste
Advertisement
kosmique

page: rígel

kosmique
Sep 15th, 2021 (edited)
4,063
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 39.32 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. rígel by kosmique.tumblr.com
  4.  
  5. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  6.  
  7. * inspiration: https://dribbble.com/shots/16384637-Smart-Dashboard-Overview-Weekly-UI
  8. * tabler icons: https://tabler-icons.io
  9. * music player: https://blogs.perficient.com/2017/12/19/how-to-customize-your-own-html5-audio-player/
  10.  
  11. full credits list at kosmique.tumblr.com/credits
  12.  
  13. ------------------------------------------------------------------------
  14.  
  15. list of fonts you can use both as main font or title font:
  16.  
  17. > arimo
  18. > barolow
  19. > hind
  20. > lora
  21. > merrieweather
  22. > pt sans
  23. > pt serif
  24. > roboto
  25.  
  26. ------------------------------------------------------------------------
  27.  
  28. colors use rgb system. please, do not use hex colors.
  29.  
  30. > numbers only
  31. > if you don't know how to get rgb colors, check this website: https://htmlcolors.com/google-color-picker
  32.  
  33. ------------------------------------------------------------------------
  34.  
  35. if you don't know how to change the music player audio, check this tutorial: https://glenthemes.tumblr.com/post/164215965424/hosting-files-on-dropbox
  36.  
  37. -->
  38.  
  39. <!DOCTYPE html>
  40. <html>
  41. <head>
  42.  
  43. <title>{Title}</title>
  44.  
  45. <link rel="shortcut icon" href="{favicon}">
  46. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  47.  
  48. <meta charset="utf-8"/>
  49. <meta name="viewport" content="width=device-width, initial-scale=1">
  50.  
  51. <!--============================== links ==============================-->
  52. <link rel="preconnect" href="https://fonts.googleapis.com">
  53. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  54. <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;600;700&family=Barlow:wght@400;600;700&family=Hind:wght@400;600;700&family=Lora:wght@400;600;700&family=Merriweather:wght@400;700&family=PT+Sans:wght@400;700&family=PT+Serif:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  55. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css"/>
  56.  
  57. <!--============================== scripts ==============================-->
  58. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  59. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  60. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  61. <script src="https://static.tumblr.com/dj2anrv/ZVmq8svlk/jquery.style-my-tooltips.js"></script>
  62. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  63.  
  64. <!--============================== css ==============================-->
  65.  
  66. <style type="text/css">
  67.  
  68. *{box-sizing:border-box}
  69.  
  70. :root{
  71. --Background:40, 40, 40; /* body background */
  72. --Text:215,215,215; /* texts color */
  73. --Link:255,255,255; /* links color */
  74. --Title:255,255,255; /* titles color */
  75. --Borders:65,65,65; /* borders color */
  76. --Scrollbar:100,100,100; /* scrollbar color */
  77. --Shadows:0,0,0; /* shadows color */
  78. --Accent:245, 182, 81; /* accent color */
  79. --Boxes:50,50,50; /* boxes background */
  80.  
  81. --Menu-link:58,58,58; /* menu background */
  82. --Menu-link-text:255,255,255; /* menu link*/
  83. --Menu-link-active:245, 182, 81; /* menu link background when active */
  84. --Menu-link-active-text:255, 255, 255; /* menu link color when active */
  85.  
  86. --Skill-bar-border:255,255,255; /* skill bar border color */
  87. --Skill-bar-1:255, 200, 112; /* first skill progress background */
  88. --Skill-bar-2:255, 208, 133; /* second skill progress background */
  89. --Skill-bar-3:255, 217, 156; /* third skill progress background */
  90.  
  91. /* list of fonts that can be used above <!DOCTYPE html> */
  92.  
  93. --Font-size:17px; /* font size */
  94. --Main-font:'hind'; /* body font / keep the quotes */
  95. --Title-font:'merriweather'; /* title font / keep the quotes */
  96.  
  97. --Song-cover:url(https://dl.dropbox.com/s/hx2z90kqposi2a1/unnamed.jpg); /* song image */
  98. --Audio-text:255,255,255; /* audio text */
  99. --Audio-controls:255,255,255; /* audio buttons */
  100. }
  101.  
  102. .icon {
  103. speak:none;
  104. line-height:1;
  105. font-style:normal;
  106. font-weight:normal;
  107. font-variant:normal;
  108. text-transform:none;
  109. font-family:'feather' !important;
  110. -webkit-font-smoothing:antialiased;
  111. -moz-osx-font-smoothing:grayscale;
  112. }
  113.  
  114. body{
  115. margin:0;
  116. width:100%;
  117. height:100%;
  118. overflow-x:hidden;
  119. word-break:break-word;
  120. color:rgb(var(--Text));
  121. background-color:rgb(var(--Background));
  122. font:400 var(--Font-size)/1.6 var(--Main-font), sans-serif;
  123. }
  124.  
  125. :focus{outline:0;}
  126.  
  127. a,
  128. a:hover{
  129. cursor:pointer;
  130. transition:ease .3s;
  131. text-decoration:none;
  132. -moz-transition:ease .3s;
  133. -webkit-transition:ease .3s;
  134. }
  135.  
  136. a{color:rgb(var(--Link))}
  137.  
  138. b,
  139. strong{font-weight:700;}
  140.  
  141. small,
  142. sub,
  143. sup{font-size:.7em;}
  144.  
  145. big{font-size:1.1em;}
  146.  
  147. p {margin:.7em 0;}
  148. p:first-of-type {margin-top:0;}
  149. p:last-of-type {margin-bottom:0;}
  150.  
  151. h1,
  152. h2,
  153. h3,
  154. h4 {
  155. margin:1em 0;
  156. font-weight:700;
  157. font-size:1.05em;
  158. }
  159.  
  160. blockquote{
  161. margin:.5em 0;
  162. padding:2px 10px;
  163. font-style:italic;
  164. border-left:2px solid rgb(var(--Accent));
  165. }
  166.  
  167. h1:first-of-type,
  168. h2:first-of-type,
  169. h3:first-of-type,
  170. h4:first-of-type {margin-top:0;}
  171.  
  172. ul,ol{
  173. padding:0;
  174. margin:0;
  175. list-style:none;
  176. }
  177.  
  178. svg{
  179. width:1em;
  180. height:1em;
  181. }
  182.  
  183. img{
  184. height:auto;
  185. display:block;
  186. max-width:100%;
  187. }
  188.  
  189. a.credits svg{
  190. width:22px;
  191. height:22px;
  192. transition:all .3s;
  193. -moz-transition:all .3s;
  194. -webkit-transition:all .3s;
  195. }
  196.  
  197. a.credits:hover svg{
  198. fill:rgb(255, 249, 64);
  199. color:rgb(255, 249, 64);
  200. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  201. }
  202.  
  203. /*scrollbar*/
  204.  
  205. ::-webkit-scrollbar{
  206. width:11px;
  207. height:11px;
  208. border:5px solid rgb(var(--Background));
  209. background-color:rgba(var(--Scrollbar),.3);
  210. }
  211.  
  212. ::-webkit-scrollbar-thumb {
  213. background:rgb(var(--Scrollbar));
  214. border:5px solid rgb(var(--Background));
  215. }
  216.  
  217. article::-webkit-scrollbar{border:5px solid rgb(var(--Boxes));}
  218.  
  219. article::-webkit-scrollbar-thumb {border:5px solid rgb(var(--Boxes));}
  220.  
  221.  
  222. /*tooltip*/
  223.  
  224. #s-m-t-tooltip{
  225. z-index:9999999;
  226. max-width:300px;
  227. position:relative;
  228. border-radius:5px;
  229. padding:.25em 1em;
  230. margin:0 14px 7px 30px;
  231. -moz-border-radius:5px;
  232. color:rgb(var(--Title));
  233. text-transform:lowercase;
  234. -webkit-border-radius:5px;
  235. background:rgb(var(--Accent));
  236. }
  237.  
  238. /*tumblr controls*/
  239.  
  240. iframe.iframe-controls--desktop {
  241. top:15px!important;
  242. right:15px!important;
  243. z-index:12!important;
  244. transform:scale(0.7);
  245. position:fixed!important;
  246. -moz-transform:scale(0.7);
  247. transform-origin:right top;
  248. -webkit-transform:scale(0.7);
  249. -moz-transform-origin:right top;
  250. -webkit-transform-origin:right top;
  251. }
  252.  
  253.  
  254. .tmblr-iframe--follow-teaser, .tmblr-iframe--app-cta-button{display:none !important;}
  255.  
  256. /*============================== menu ==============================*/
  257.  
  258. #left{
  259. top:0;
  260. left:0;
  261. gap:25px;
  262. width:100px;
  263. height:100vh;
  264. display:flex;
  265. position:fixed;
  266. align-items:center;
  267. flex-direction:column;
  268. justify-content:center;
  269. background:rgb(var(--Boxes));
  270. }
  271.  
  272. #left a{
  273. width:45px;
  274. height:45px;
  275. display:grid;
  276. font-size:22px;
  277. border-radius:4px;
  278. place-items:center;
  279. color:rgb(var(--Menu-link-text));
  280. background:rgb(var(--Menu-link));
  281. box-shadow:3px 3px 1px rgba(var(--Shadows),.05);
  282. }
  283.  
  284. #left a.active{
  285. color:rgb(var(--Menu-link-active-text));
  286. background:rgb(var(--Menu-link-active));
  287. }
  288.  
  289. /*============================== header ==============================*/
  290.  
  291. header{
  292. margin-left:100px;
  293. padding:70px 70px 0;
  294. width:calc(100% - 100px);
  295. }
  296.  
  297. /*header info*/
  298.  
  299. .blog{
  300. gap:20px;
  301. display:flex;
  302. align-items:center;
  303. }
  304.  
  305. .blog-icon{
  306. width:55px;
  307. height:55px;
  308. border-radius:100%;
  309. border:4px solid rgb(var(--Title));
  310. }
  311.  
  312. .blog ul{line-height:1.4;}
  313.  
  314. .blog-title{
  315. font-weight:600;
  316. font-size:1.1em;
  317. color:rgb(var(--Title));
  318. }
  319.  
  320. .section-title{font-size:.85em;}
  321.  
  322. header .menu{
  323. width:70%;
  324. margin-top:30px;
  325. }
  326.  
  327. header .menu a{
  328. height:1.1em;
  329. position:relative;
  330. margin-right:20px;
  331. display:inline-block;
  332. }
  333.  
  334. header .menu a:hover{box-shadow: inset 0 -8px 0 rgba(var(--Accent),.5);}
  335.  
  336. header .menu a::after{
  337. left:0;
  338. width:100%;
  339. height:1px;
  340. content:'';
  341. bottom:0;
  342. position:absolute;
  343. background:transparent;
  344. transition:background .3s;
  345. }
  346.  
  347. header .menu a:hover::after{background:rgb(var(--Accent));}
  348.  
  349. /*============================== main ==============================*/
  350.  
  351. main{
  352. padding:70px;
  353. display:block;
  354. margin-left:100px;
  355. width:calc(100% - 100px);
  356. }
  357.  
  358. main > section{
  359. gap:30px;
  360. width:100%;
  361. display:flex;
  362. flex-flow:row wrap;
  363. }
  364.  
  365. /*rows*/
  366.  
  367. article{
  368. flex-grow:1;
  369. padding:30px;
  370. height:350px;
  371. overflow-y:auto;
  372. overflow-x:hidden;
  373. border-radius:5px;
  374. counter-increment:li;
  375. background:rgb(var(--Boxes));
  376. }
  377.  
  378. article > .title{
  379. gap:25px;
  380. font-size:1.15em;
  381. font-weight:700;
  382. margin-bottom:30px;
  383. align-items:center;
  384. display:inline-flex;
  385. color:rgb(var(--Title));
  386. font-family:var(--Title-font);
  387. }
  388.  
  389. article > .title::before{
  390. width:40px;
  391. height:40px;
  392. display:grid;
  393. place-items:center;
  394. border-radius:100%;
  395. content:counter(li);
  396. background:rgb(var(--Accent));
  397. }
  398.  
  399. /*============================== about section ==============================*/
  400.  
  401. .about{width:calc(60% - 30px);}
  402.  
  403. /*audio player*/
  404.  
  405. article.music-player{
  406. width:40%;
  407. position:relative;
  408. overflow:hidden!important;
  409. background-size:cover!important;
  410. background-position:center!important;
  411. background-image:var(--Song-cover)!important;
  412. }
  413.  
  414. article.music-player::before{
  415. top:0;
  416. left:0;
  417. width:100%;
  418. content:'';
  419. height:100%;
  420. position:absolute;
  421. background:rgba(0,0,0,.65);
  422. backdrop-filter:blur(40px);
  423. }
  424.  
  425. article.music-player > div{
  426. z-index:1;
  427. height:100%;
  428. position:relative;
  429. text-align:center;
  430. }
  431.  
  432. .audio{
  433. gap:25px;
  434. height:100%;
  435. display:flex;
  436. align-items:center;
  437. flex-flow:column wrap;
  438. justify-content:space-around;
  439. }
  440.  
  441. .song-cover{
  442. width:90px;
  443. height:90px;
  444. object-fit:cover;
  445. border-radius:5px;
  446. }
  447.  
  448. .audio-info{
  449. max-width:100%;
  450. color:rgb(var(--Audio-text));
  451. }
  452.  
  453. .audio-info > div{
  454. display:block;
  455. overflow:hidden;
  456. white-space:nowrap;
  457. text-overflow:ellipsis;
  458. }
  459.  
  460. .track{
  461. font-weight:600;
  462. font-size:1.15em;
  463. }
  464.  
  465. .audio-controls{
  466. gap:20px;
  467. width:100%;
  468. display:flex;
  469. padding:0 30px;
  470. align-items:center;
  471. justify-content:center;
  472. color:rgb(var(--Audio-controls));
  473. }
  474.  
  475. .player{
  476. width:40px;
  477. height:40px;
  478. display:grid;
  479. flex-shrink:0;
  480. font-size:1.2em;
  481. place-items:center;
  482. border-radius:100%;
  483. background:rgb(var(--Accent));
  484. }
  485.  
  486. .ti-repeat,
  487. .ti-arrows-shuffle{opacity:.5;}
  488.  
  489. /*likes, dislikes, skills*/
  490.  
  491. .likes,
  492. .dislikes,
  493. .skills{width:calc(100%/3 - 20px);}
  494.  
  495. /*likes and dislikes*/
  496.  
  497. .likes ul li:not(:last-of-type),
  498. .dislikes ul li:not(:last-of-type){margin-bottom:15px;}
  499.  
  500. .likes ul li,
  501. .dislikes ul li{
  502. gap:25px;
  503. display:flex;
  504. align-items:center;
  505. }
  506.  
  507. .likes ul li::before,
  508. .dislikes ul li::before{
  509. color:rgb(var(--Accent));
  510. font-family:'tabler-icons';
  511. }
  512.  
  513. .likes ul li::before{content:"\eb3c";}
  514. .dislikes ul li::before{content:"\eb3b";}
  515.  
  516. /*skills*/
  517. .skills > div[class^="skill-"]:not(:last-of-type){margin-bottom:30px;}
  518.  
  519. .skill-bar{
  520. height:20px;
  521. padding:3px;
  522. display:flex;
  523. position:relative;
  524. border-radius:3px;
  525. align-items:center;
  526. border:1px solid rgb(var(--Skill-bar-border));
  527. }
  528.  
  529. .skill-progress{
  530. width:0;
  531. height:14px;
  532. display:block;
  533. border-radius:3px;
  534. transition:width 1s;
  535. }
  536.  
  537. .skill-percent{
  538. right:0;
  539. top:-35px;
  540. opacity:0;
  541. line-height:1;
  542. font-size:.8em;
  543. padding:4px 8px;
  544. position:absolute;
  545. text-align:center;
  546. border-radius:3px;
  547. color:rgb(var(--Title));
  548. transform:translatey(4px);
  549. transition:opacity .4s, transform .4s;
  550. }
  551.  
  552. .skill-bar:hover .skill-percent{
  553. opacity:1;
  554. transform:translatey(0);
  555. }
  556.  
  557. .skill-percent::after{
  558. width:0;
  559. height:0;
  560. content:'';
  561. bottom:-5px;
  562. position:absolute;
  563. border-style:solid;
  564. left:calc(50% - 5px);
  565. border-width:5px 5px 0 5px;
  566. border-color:transparent transparent transparent transparent;
  567. }
  568.  
  569. .skill-1 .skill-percent::after{border-top-color:rgb(var(--Skill-bar-1));}
  570. .skill-2 .skill-percent::after{border-top-color:rgb(var(--Skill-bar-2));}
  571. .skill-3 .skill-percent::after{border-top-color:rgb(var(--Skill-bar-3));}
  572.  
  573. .skill-1 .skill-progress{background:rgb(var(--Skill-bar-1));}
  574. .skill-2 .skill-progress{background:rgb(var(--Skill-bar-2));}
  575. .skill-3 .skill-progress{background:rgb(var(--Skill-bar-3));}
  576.  
  577. .skill-1 .skill-percent{background:rgb(var(--Skill-bar-1));}
  578. .skill-2 .skill-percent{background:rgb(var(--Skill-bar-2));}
  579. .skill-3 .skill-percent{background:rgb(var(--Skill-bar-3));}
  580.  
  581. /*============================== navigation section ==============================*/
  582.  
  583. .links, .tags{width:calc(100%/2 - 15px);}
  584.  
  585. .links ul li:not(:last-of-type),
  586. .tags ul li:not(:last-of-type){margin-bottom:15px;}
  587.  
  588. .links ul li,
  589. .tags ul li{
  590. gap:25px;
  591. display:flex;
  592. align-items:center;
  593. }
  594.  
  595. .links ul li::before,
  596. .tags ul li::before{
  597. color:rgb(var(--Accent));
  598. font-family:'tabler-icons';
  599. }
  600.  
  601. .links ul li::before{content:"\eade";}
  602. .tags ul li::before{content:"\eb34";}
  603.  
  604. .tags a,
  605. .links a{
  606. height:1.1em;
  607. position:relative;
  608. margin-right:20px;
  609. display:inline-block;
  610. }
  611.  
  612. .tags a:hover,
  613. .links a:hover{box-shadow: inset 0 -8px 0 rgba(var(--Accent),.5);}
  614.  
  615. .tags a::after,
  616. .links a::after{
  617. left:0;
  618. width:100%;
  619. height:1px;
  620. content:'';
  621. bottom:0;
  622. position:absolute;
  623. background:transparent;
  624. transition:background .3s;
  625. }
  626.  
  627. .tags a:hover::after,
  628. .links a:hover::after{background:rgb(var(--Accent));}
  629.  
  630. /*social media*/
  631.  
  632. .social{
  633. height:auto;
  634. overflow:initial;
  635. }
  636.  
  637. .social-media{
  638. gap:25px;
  639. display:flex;
  640. flex-wrap:wrap;
  641. }
  642.  
  643. .social-media a{
  644. width:40px;
  645. height:40px;
  646. display:grid;
  647. font-size:22px;
  648. place-items:center;
  649. border-radius:100%;
  650. background:rgb(var(--Accent));
  651. }
  652.  
  653. /*============================== message section ==============================*/
  654.  
  655. .terms, .status{width:calc(100%/2 - 15px);}
  656.  
  657. /*terms*/
  658.  
  659. .terms ul li{
  660. gap:25px;
  661. display:flex;
  662. align-items:center;
  663. }
  664.  
  665. .terms ul li:not(:last-of-type){margin-bottom:15px;}
  666.  
  667. .terms ul li::before{
  668. content:"\ea05";
  669. color:rgb(var(--Accent));
  670. font-family:'tabler-icons';
  671. }
  672.  
  673. /*status*/
  674.  
  675. li[data-status]{
  676. gap:25px;
  677. display:flex;
  678. align-items:center;
  679. }
  680.  
  681. li[data-status]:not(:last-of-type){margin-bottom:15px;}
  682.  
  683. .switcher{
  684. width:40px;
  685. height:20px;
  686. padding:2px;
  687. display:flex;
  688. align-items:center;
  689. border-radius:10px;
  690. border:2px solid rgb(var(--Borders));
  691. }
  692.  
  693. .switcher-dot{
  694. width:10px;
  695. height:10px;
  696. border-radius:100%;
  697. background:rgb(var(--Borders));
  698. }
  699.  
  700. li[data-status].active .switcher{
  701. justify-content:flex-end;
  702. border-color:rgb(var(--Accent));
  703. }
  704.  
  705. li[data-status].active .switcher-dot{background:rgb(var(--Accent));}
  706.  
  707. /*ask box*/
  708.  
  709. .ask,
  710. .submit{
  711. height:auto;
  712. overflow:initial;
  713. }
  714.  
  715. /*============================== blogroll section ==============================*/
  716.  
  717. article.blogroll{
  718. height:auto;
  719. overflow:initial;
  720. }
  721.  
  722. .blogroll > .title::before{display:none;}
  723.  
  724. .blogs{margin:0 -30px -30px;}
  725.  
  726. .blogs ul{
  727. gap:25px;
  728. padding:20px;
  729. display:flex;
  730. line-height:1;
  731. align-items:center;
  732. transition:background .4s;
  733. border-top:1px solid rgb(var(--Borders));
  734. }
  735.  
  736. .blogs ul:hover{background:rgb(var(--Borders));}
  737.  
  738. .blogs ul li:first-of-type{flex:1}
  739.  
  740. .blogs ul li:last-of-type{
  741. width:40px;
  742. flex-shrink:0;
  743. }
  744.  
  745. a.follow{
  746. width:30px;
  747. height:30px;
  748. display:grid;
  749. place-items:center;
  750. border-radius:100%;
  751. background:rgb(var(--Accent));
  752. }
  753.  
  754. .blogs-info{
  755. gap:25px;
  756. display:grid;
  757. align-items:center;
  758. grid-template-columns:40px repeat(2,1fr);
  759. }
  760.  
  761. .blogs-info img{
  762. width:40px;
  763. height:40px;
  764. border-radius:100%;
  765. }
  766.  
  767. .blogs-info span {
  768. overflow:hidden;
  769. white-space:nowrap;
  770. text-overflow:ellipsis;
  771. }
  772.  
  773. .blogs-info .title{font-weight:600;}
  774.  
  775. .blogs-info .url{
  776. opacity:.65;
  777. font-size:.85em;
  778. }
  779.  
  780. /*-============================== queries ==============================-*/
  781.  
  782. @media (max-width:1024px){
  783.  
  784. .tmblr-iframe{display:none!important;}
  785.  
  786. #left{
  787. z-index:9;
  788. width:100vw;
  789. height:100px;
  790. overflow:auto;
  791. flex-direction:row;
  792. }
  793.  
  794. main,
  795. header{
  796. margin:0;
  797. width:100%;
  798. padding-inline:20px;
  799. }
  800.  
  801. header{margin-top:100px;}
  802.  
  803. header .menu{width:100%;}
  804.  
  805. section > article{
  806. width:100%!important;
  807. height:auto!important;
  808. overflow:initial!important;
  809. }
  810. }
  811.  
  812. </style>
  813.  
  814. </head>
  815.  
  816. <body>
  817.  
  818. <!--============================== left menu ==============================-->
  819. <nav id="left">
  820. <a href="#" data-section="about" class="active">
  821. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  822. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  823. <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
  824. <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
  825. </svg>
  826. </a>
  827.  
  828. <a href="#" data-section="navigation">
  829. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-location" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  830. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  831. <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"></path>
  832. </svg>
  833. </a>
  834.  
  835. <a href="#" data-section="message">
  836. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  837. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  838. <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
  839. <path d="M3 7l9 6l9 -6"></path>
  840. </svg>
  841. </a>
  842.  
  843. <a href="#" data-section="blogroll">
  844. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  845. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  846. <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
  847. <path d="M16 19h6"></path>
  848. <path d="M19 16v6"></path>
  849. <path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
  850. </svg>
  851. </a>
  852.  
  853. <a href="//kosmique.tumblr.com" class="credits" target="_blank" title="page by kosmique">
  854. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  855. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  856. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
  857. </svg>
  858. </a>
  859.  
  860. </nav>
  861.  
  862. <!--============================== header ==============================-->
  863. <header>
  864. <!---------- blog title ---------->
  865. <div class="blog">
  866. <img src="{portraiturl-64}" class="blog-icon">
  867.  
  868. <ul>
  869. <li class="blog-title">{title}</li>
  870. <li class="section-title">
  871. <span data-section="about">about section</span>
  872. <span data-section="navigation" style="display:none;">navigation section</span>
  873. <span data-section="message" style="display:none;">message section</span>
  874. <span data-section="blogroll" style="display:none;">blogroll section</span>
  875. </li>
  876. </ul>
  877. </div>
  878.  
  879. <!---------- header menu ---------->
  880. <div class="menu">
  881. <a href="{blogurl}">home</a>
  882. <a href="{blogurl}">link title</a>
  883. <a href="{blogurl}">link title</a>
  884. <a href="{blogurl}">link title</a>
  885. <a href="{blogurl}">link title</a>
  886. </div>
  887. </header>
  888.  
  889. <!--============================== content ==============================-->
  890. <main>
  891.  
  892. <!-------------------------------- about section -------------------------------->
  893. <section id="about" class="active">
  894.  
  895. <!-------------------- about me -------------------->
  896. <article class="about">
  897. <div class="title">about me</div>
  898.  
  899. <div class="about-text">
  900. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis faucibus quam vel iaculis. Aenean sollicitudin mi convallis blandit dignissim. Sed sem leo, laoreet at libero nec, consequat scelerisque ligula. Aliquam congue sem sit amet semper pellentesque. Phasellus viverra laoreet neque. Sed felis enim, iaculis sed neque in, sagittis bibendum ligula. Nunc eu nulla ut elit tristique auctor. Quisque id est sed tellus vehicula sagittis nec at mi. Vestibulum eu orci eget tellus consectetur porttitor at eget ipsum. Nulla eget aliquet diam.
  901. </div>
  902. </article>
  903.  
  904. <!-------------------- music player -------------------->
  905. <article class="music-player">
  906. <div>
  907. <!---------- song url ---------->
  908. <audio src="https://dl.dropbox.com/s/ydfpiff79jfejsq/07.%20pit-a-pet.mp3"></audio>
  909.  
  910. <!---------- song info ---------->
  911. <div class="audio">
  912.  
  913. <!----- song cover ----->
  914. <img src="https://dl.dropbox.com/s/hx2z90kqposi2a1/unnamed.jpg" class="song-cover"/>
  915.  
  916. <div class="audio-info">
  917. <!----- track title ----->
  918. <div class="track">pit-a-pet</div>
  919.  
  920. <!----- artist name ----->
  921. <div class="artist">YUKIKA</div>
  922. </div>
  923.  
  924. <!----- audio controls / don't need to touch ----->
  925. <div class="audio-controls">
  926. <i class="ti ti-repeat"></i>
  927.  
  928. <i class="ti ti-player-skip-back"></i>
  929.  
  930. <div class="player">
  931. <i class="play-pause ti ti-player-play"></i>
  932. </div>
  933.  
  934. <i class="ti ti-player-skip-forward"></i>
  935.  
  936. <i class="ti ti-arrows-shuffle"></i>
  937. </div>
  938. </div>
  939. </div>
  940. </article>
  941.  
  942. <!-------------------- likes -------------------->
  943. <article class="likes">
  944. <div class="title">likes</div>
  945.  
  946. <ul>
  947. <li>things i like</li>
  948. <li>things i like</li>
  949. <li>things i like</li>
  950. <li>things i like</li>
  951. </ul>
  952. </article>
  953.  
  954. <!-------------------- dislikes -------------------->
  955. <article class="dislikes">
  956. <div class="title">dislikes</div>
  957.  
  958. <ul>
  959. <li>things i dislike</li>
  960. <li>things i dislike</li>
  961. <li>things i dislike</li>
  962. <li>things i dislike</li>
  963. </ul>
  964. </article>
  965.  
  966. <!-------------------- skills -------------------->
  967. <article class="skills">
  968. <div class="title">skills</div>
  969.  
  970. <!---------- first skill ---------->
  971. <div class="skill-1">
  972. <!----- skill title ----->
  973. <div class="title">CSS</div>
  974.  
  975. <!----- skill progress / change the width in data-width ----->
  976. <div class="skill-bar">
  977. <span class="skill-progress" data-width="85%"></span>
  978.  
  979. <span class="skill-percent"></span>
  980. </div>
  981. </div>
  982.  
  983. <!---------- second skill ---------->
  984. <div class="skill-2">
  985. <!----- skill title ----->
  986. <div class="title">HTML</div>
  987.  
  988. <!----- skill progress / change the width in data-width ----->
  989. <div class="skill-bar">
  990. <span class="skill-progress" data-width="78%"></span>
  991.  
  992. <span class="skill-percent"></span>
  993. </div>
  994. </div>
  995.  
  996. <!---------- third skill ---------->
  997. <div class="skill-3">
  998. <!----- skill title ----->
  999. <div class="title">jQuery</div>
  1000.  
  1001. <!----- skill progress / change the width in data-width ----->
  1002. <div class="skill-bar">
  1003. <span class="skill-progress" data-width="5%"></span>
  1004.  
  1005. <span class="skill-percent"></span>
  1006. </div>
  1007. </div>
  1008. </article>
  1009. </section>
  1010.  
  1011.  
  1012.  
  1013.  
  1014.  
  1015.  
  1016.  
  1017.  
  1018.  
  1019.  
  1020. <!-------------------------------- navigation section -------------------------------->
  1021. <section id="navigation" style="display:none;">
  1022. <!-------------------- links -------------------->
  1023. <article class="links">
  1024. <div class="title">links</div>
  1025.  
  1026. <!---------- links links / idk how to name it ---------->
  1027. <ul>
  1028. <li>
  1029. <a href="/">link title</a>
  1030. </li>
  1031.  
  1032. <li>
  1033. <a href="/">link title</a>
  1034. </li>
  1035.  
  1036. <li>
  1037. <a href="/">link title</a>
  1038. </li>
  1039.  
  1040. <li>
  1041. <a href="/">link title</a>
  1042. </li>
  1043.  
  1044. <li>
  1045. <a href="/">link title</a>
  1046. </li>
  1047.  
  1048. <li>
  1049. <a href="/">link title</a>
  1050. </li>
  1051. </ul>
  1052. </article>
  1053.  
  1054. <!-------------------- tags -------------------->
  1055. <article class="tags">
  1056. <div class="title">tags</div>
  1057.  
  1058. <!---------- tags links ---------->
  1059. <ul>
  1060. <li>
  1061. <a href="/">tag title</a>
  1062. </li>
  1063.  
  1064. <li>
  1065. <a href="/">tag title</a>
  1066. </li>
  1067.  
  1068. <li>
  1069. <a href="/">tag title</a>
  1070. </li>
  1071.  
  1072. <li>
  1073. <a href="/">tag title</a>
  1074. </li>
  1075.  
  1076. <li>
  1077. <a href="/">tag title</a>
  1078. </li>
  1079.  
  1080. <li>
  1081. <a href="/">tag title</a>
  1082. </li>
  1083. </ul>
  1084. </article>
  1085.  
  1086. <!-------------------- social media -------------------->
  1087. <article class="social">
  1088. <div class="title">social media</div>
  1089.  
  1090. <!---------- social media links ---------->
  1091. <div class="social-media">
  1092. <a href="/">
  1093. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-discord-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1094. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1095. <path d="M14.983 3l.123 .006c2.014 .214 3.527 .672 4.966 1.673a1 1 0 0 1 .371 .488c1.876 5.315 2.373 9.987 1.451 12.28c-1.003 2.005 -2.606 3.553 -4.394 3.553c-.732 0 -1.693 -.968 -2.328 -2.045a21.512 21.512 0 0 0 2.103 -.493a1 1 0 1 0 -.55 -1.924c-3.32 .95 -6.13 .95 -9.45 0a1 1 0 0 0 -.55 1.924c.717 .204 1.416 .37 2.103 .494c-.635 1.075 -1.596 2.044 -2.328 2.044c-1.788 0 -3.391 -1.548 -4.428 -3.629c-.888 -2.217 -.39 -6.89 1.485 -12.204a1 1 0 0 1 .371 -.488c1.439 -1.001 2.952 -1.459 4.966 -1.673a1 1 0 0 1 .935 .435l.063 .107l.651 1.285l.137 -.016a12.97 12.97 0 0 1 2.643 0l.134 .016l.65 -1.284a1 1 0 0 1 .754 -.54l.122 -.009zm-5.983 7a2 2 0 0 0 -1.977 1.697l-.018 .154l-.005 .149l.005 .15a2 2 0 1 0 1.995 -2.15zm6 0a2 2 0 0 0 -1.977 1.697l-.018 .154l-.005 .149l.005 .15a2 2 0 1 0 1.995 -2.15z" stroke-width="0" fill="currentColor"></path>
  1096. </svg>
  1097. </a>
  1098.  
  1099. <a href="/">
  1100. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1101. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1102. <path d="M14.058 3.41c-1.807 .767 -2.995 2.453 -3.056 4.38l-.002 .182l-.243 -.023c-2.392 -.269 -4.498 -1.512 -5.944 -3.531a1 1 0 0 0 -1.685 .092l-.097 .186l-.049 .099c-.719 1.485 -1.19 3.29 -1.017 5.203l.03 .273c.283 2.263 1.5 4.215 3.779 5.679l.173 .107l-.081 .043c-1.315 .663 -2.518 .952 -3.827 .9c-1.056 -.04 -1.446 1.372 -.518 1.878c3.598 1.961 7.461 2.566 10.792 1.6c4.06 -1.18 7.152 -4.223 8.335 -8.433l.127 -.495c.238 -.993 .372 -2.006 .401 -3.024l.003 -.332l.393 -.779l.44 -.862l.214 -.434l.118 -.247c.265 -.565 .456 -1.033 .574 -1.43l.014 -.056l.008 -.018c.22 -.593 -.166 -1.358 -.941 -1.358l-.122 .007a.997 .997 0 0 0 -.231 .057l-.086 .038a7.46 7.46 0 0 1 -.88 .36l-.356 .115l-.271 .08l-.772 .214c-1.336 -1.118 -3.144 -1.254 -5.012 -.554l-.211 .084z" stroke-width="0" fill="currentColor"></path>
  1103. </svg>
  1104. </a>
  1105.  
  1106. <a href="/">
  1107. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1108. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1109. <path d="M18 2a1 1 0 0 1 .993 .883l.007 .117v4a1 1 0 0 1 -.883 .993l-.117 .007h-3v1h3a1 1 0 0 1 .991 1.131l-.02 .112l-1 4a1 1 0 0 1 -.858 .75l-.113 .007h-2v6a1 1 0 0 1 -.883 .993l-.117 .007h-4a1 1 0 0 1 -.993 -.883l-.007 -.117v-6h-2a1 1 0 0 1 -.993 -.883l-.007 -.117v-4a1 1 0 0 1 .883 -.993l.117 -.007h2v-1a6 6 0 0 1 5.775 -5.996l.225 -.004h3z" stroke-width="0" fill="currentColor"></path>
  1110. </svg>
  1111. </a>
  1112.  
  1113. <a href="/">
  1114. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1115. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1116. <path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"></path>
  1117. <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
  1118. <path d="M16.5 7.5l0 .01"></path>
  1119. </svg>
  1120. </a>
  1121.  
  1122. <a href="/">
  1123. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-spotify" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1124. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1125. <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
  1126. <path d="M8 11.973c2.5 -1.473 5.5 -.973 7.5 .527"></path>
  1127. <path d="M9 15c1.5 -1 4 -1 5 .5"></path>
  1128. <path d="M7 9c2 -1 6 -2 10 .5"></path>
  1129. </svg>
  1130. </a>
  1131. </div>
  1132. </article>
  1133.  
  1134. </section>
  1135.  
  1136.  
  1137.  
  1138.  
  1139.  
  1140.  
  1141.  
  1142.  
  1143.  
  1144.  
  1145. <!-------------------------------- message section -------------------------------->
  1146. <section id="message" style="display:none;">
  1147.  
  1148. <!-------------------- message terms -------------------->
  1149. <article class="terms">
  1150. <div class="title">message terms</div>
  1151.  
  1152. <ul>
  1153. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  1154. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  1155. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  1156. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  1157. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  1158. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  1159. </ul>
  1160. </article>
  1161.  
  1162. <!-------------------- status -------------------->
  1163. <article class="status">
  1164. <div class="title">status</div>
  1165.  
  1166. <ul>
  1167. <!----- message status / you can use on or off in data-switch ----->
  1168. <li data-status="on">
  1169. <span class="switcher">
  1170. <span class="switcher-dot"></span>
  1171. </span>
  1172.  
  1173. ask box
  1174. </li>
  1175.  
  1176. <li data-status="on">
  1177. <span class="switcher">
  1178. <span class="switcher-dot"></span>
  1179. </span>
  1180.  
  1181. submit box
  1182. </li>
  1183.  
  1184. <li data-status="off">
  1185. <span class="switcher">
  1186. <span class="switcher-dot"></span>
  1187. </span>
  1188.  
  1189. commissions
  1190. </li>
  1191. </ul>
  1192. </article>
  1193.  
  1194. <!-------------------- ask box / ask box will be hidden if it's disabled -------------------->
  1195. {block:AskEnabled}
  1196. <article class="ask">
  1197. <div class="title">{asklabel}</div>
  1198. <iframe frameborder="0" height="149" id="ask_form" scrolling="no" src="//www.tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  1199. </article>
  1200. {/block:AskEnabled}
  1201.  
  1202. <!-------------------- submit box / submit box will be hidden if it's disabled -------------------->
  1203. {block:SubmissionsEnabled}
  1204. <article class="submit">
  1205. <div class="title">{submitlabel}</div>
  1206. <iframe frameborder="0" scrolling="no" width="100%" height="530" id="submit_form" src="https://www.tumblr.com/submit_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]-->
  1207. </article>
  1208. {/block:SubmissionsEnabled}
  1209.  
  1210. </section>
  1211.  
  1212.  
  1213.  
  1214.  
  1215.  
  1216.  
  1217.  
  1218.  
  1219.  
  1220.  
  1221. <!-------------------------------- blogroll section -------------------------------->
  1222. <section id="blogroll" style="display:none;">
  1223. <!-------------------- blogs i follow -------------------->
  1224. <article class="blogroll">
  1225. {block:Following}
  1226. <div class="title">blogs i follow</div>
  1227. <div class="blogs">
  1228. {block:Followed}
  1229. <ul>
  1230. <li>
  1231. <a href="{FollowedURL}" class="blogs-info" target="_blank">
  1232. <img src="{FollowedPortraitURL-48}"/>
  1233. <span class="title">{FollowedTitle}</span>
  1234. <span class="url">{FollowedURL}</span>
  1235. </a>
  1236. </li>
  1237.  
  1238. <li>
  1239. <a href="//tumblr.com/follow/{FollowedName}" target="_blank" title="follow {FollowedTitle}" class="follow">
  1240. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1241. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1242. <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
  1243. <path d="M16 19h6"></path>
  1244. <path d="M19 16v6"></path>
  1245. <path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
  1246. </svg>
  1247. </a>
  1248. </li>
  1249. </ul>
  1250. {/block:Followed}
  1251. </div>
  1252. {/block:Following}
  1253. </article>
  1254. </section>
  1255. </main>
  1256.  
  1257. <!--============================== scripts ==============================-->
  1258. <script>
  1259. $(document).ready(function(){
  1260. //feather icons
  1261. feather.replace();
  1262.  
  1263. // tooltips
  1264. $("[title]").style_my_tooltips({
  1265. tip_follows_cursor:true,
  1266. tip_delay_time:100,
  1267. tip_fade_speed:100
  1268. });
  1269.  
  1270. //tabs
  1271. $('#left a[data-section]').click(function(){
  1272. $(this).addClass('active');
  1273. var divID = $(this).attr('data-section');
  1274. $("html, body").animate({scrollTop: 0}, 300);
  1275. $('main > #' + divID).delay(500).fadeIn().toggleClass('active');
  1276. $('main > section:not(#' + divID +')').fadeOut().removeClass('active');
  1277. $('.section-title span[data-section="' + divID + '"]').show();
  1278. $('.section-title span:not([data-section="' + divID + '"])').hide();
  1279. $('#left a:not([data-section="' + divID + '"])').removeClass('active');
  1280. return false
  1281. });
  1282.  
  1283. //skills
  1284. $('.skill-progress').each(function(){
  1285. var width = $(this).attr('data-width');
  1286. $(this).width(width);
  1287. $(this).next('.skill-percent').text(width);
  1288. });
  1289.  
  1290. //message status
  1291. $('.status li[data-status]').each(function(){
  1292. var status = $(this).attr('data-status');
  1293. if ( status == 'on' ) {$(this).addClass('active');}
  1294. else {$(this).removeClass('active');}
  1295. });
  1296.  
  1297. //music player
  1298. var aud = $('audio')[0];
  1299. var playing = false;
  1300. $('.player').on('click', function(){
  1301. if (aud.paused) {
  1302. aud.play();
  1303. $('.play-pause').removeClass('ti-player-play');
  1304. $('.play-pause').addClass('ti-player-pause');
  1305. } else {
  1306. aud.pause();
  1307. $('.play-pause').removeClass('ti-player-pause');
  1308. $('.play-pause').addClass('ti-player-play');
  1309. }
  1310. });
  1311.  
  1312. aud.addEventListener('ended', function(){
  1313. $('.play-pause').removeClass('ti-player-pause');
  1314. $('.play-pause').addClass('ti-player-play');
  1315. });
  1316.  
  1317. });
  1318. </script>
  1319. </body>
  1320. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!