API tools faq
paste
Advertisement
kosmique

page: netuno

kosmique
Feb 17th, 2021
5,035
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. netuno by kosmique.tumblr.com
  4.  
  5. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  6.  
  7. * honeybee font by suiomi
  8. * audio player by glenthemes
  9.  
  10. full credits list at kosmique.tumblr.com/credits
  11.  
  12. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  13.  
  14. [NOTE]
  15.  
  16. * the scrollbar has been set to zero width, but you can scroll the sections normally
  17. * to change the planet icon, you have to go to https://honeybee.suiomi.com and choose your icon, pick up its unicode (the "\xxxx") and paste it in the sidebar mini icon variable
  18.  
  19. -->
  20.  
  21. <!DOCTYPE html>
  22. <html>
  23. <head>
  24.  
  25. <title>{Title} / about</title>
  26.  
  27. <meta charset="utf-8">
  28.  
  29. <link rel="shortcut icon" href="{favicon}">
  30.  
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32.  
  33. <meta name="viewport" content="width=device-width, initial-scale=1">
  34.  
  35. <!--Scripts-->
  36.  
  37. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  38. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  39. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  40. <!-------MUSIC PLAYER BY GLENTHEMES------->
  41. <script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>
  42.  
  43. <link rel="preconnect" href="https://fonts.gstatic.com">
  44. <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
  45. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  46. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css"/>
  47.  
  48. <!--CSS customization here. -->
  49.  
  50. <style type="text/css">
  51.  
  52. *{box-sizing:border-box}
  53.  
  54. :root{
  55. --Background:250,250,250;
  56. --Text:100,100,100;
  57. --Link:0,0,0;
  58. --Title:0,0,0;
  59. --Borders:240,240,240;
  60. --Shadows:0,0,0;
  61. --Accent:255, 189, 198;
  62. --Sub-color:209, 209, 237;
  63. --Container:255,255,255;
  64.  
  65. --Sidebar-mini-icon-color:255,255,255; /* planet icon color */
  66. --Sidebar-mini-icon-background:247, 200, 206; /* planet icon background */
  67.  
  68. --About-icon-color:255,255,255; /* about title icon color */
  69. --Navigation-icon-color:255,255,255; /* navigation title icon color */
  70. --Blogroll-icon-color:255,255,255; /* blogroll title icon color */
  71. --Message-icon-color:255,255,255; /* message title icon color */
  72.  
  73. --About-icon-background:247, 200, 206; /* about title icon color */
  74. --Navigation-icon-background:239, 187, 207; /* navigation title icon color */
  75. --Blogroll-icon-background:217, 180, 211; /* blogroll title icon color */
  76. --Message-icon-background:195, 174, 214; /* message title icon color */
  77.  
  78. --Skill-one-background:247, 200, 206; /* first skill bar background */
  79. --Skill-two-background:239, 187, 207; /* second skill bar background */
  80. --Skill-three-background:217, 180, 211; /* third skill bar background */
  81. --Skill-four-background:195, 174, 214; /* fourth skill bar background */
  82.  
  83. --Main-font:'barlow';
  84.  
  85. --Sidebar-mini-icon:'\ebf7'; /* planet icon / follow the notes to change */
  86.  
  87. --Skill-one-bar-width:10%; /* first skill bar width */
  88. --Skill-two-bar-width:80%; /* second skill bar width */
  89. --Skill-three-bar-width:68%; /* third skill bar width */
  90. --Skill-four-bar-width:100%; /* fourth skill bar width */
  91.  
  92. }
  93.  
  94. .icon {
  95. speak:none;
  96. line-height:1;
  97. font-style:normal;
  98. font-weight:normal;
  99. font-variant:normal;
  100. text-transform:none;
  101. font-family:'feather' !important;
  102. -webkit-font-smoothing:antialiased;
  103. -moz-osx-font-smoothing:grayscale;
  104. }
  105.  
  106. body{
  107. margin:0;
  108. width:100vw;
  109. height:100vh;
  110. display:flex;
  111. overflow-x:hidden;
  112. align-items:center;
  113. word-break:break-word;
  114. color:rgb(var(--Text));
  115. justify-content:center;
  116. background:rgb(var(--Background));
  117. font:400 15px/1.6 var(--Main-font), sans-serif;
  118. }
  119.  
  120. a,
  121. a:hover{
  122. cursor:pointer;
  123. transition:ease .3s;
  124. text-decoration:none;
  125. -moz-transition:ease .3s;
  126. -webkit-transition:ease .3s;
  127. }
  128.  
  129. a{color:rgb(var(--Link))}
  130.  
  131. b,
  132. strong{font-weight:700;}
  133.  
  134. b,
  135. i,
  136. strike,
  137. u{color:rgb(var(--Accent))}
  138.  
  139. small,
  140. sub,
  141. sup{font-size:.7em;}
  142.  
  143. big{font-size:1.1em;}
  144.  
  145. p {margin:.7em 0;}
  146. p:first-of-type {margin-top:0;}
  147. p:last-of-type {margin-bottom:0;}
  148.  
  149. ul,ol{
  150. padding:0;
  151. margin:0;
  152. list-style:none;
  153. }
  154.  
  155. svg{
  156. width:1em;
  157. height:1em;
  158. }
  159.  
  160. .credits{
  161. z-index:1;
  162. right:20px;
  163. bottom:20px;
  164. position:fixed;
  165. color:rgb(var(--Accent));
  166. }
  167.  
  168. input{display:none;}
  169.  
  170. /*tumblr controls*/
  171.  
  172. .tmblr-iframe{display:none !important;}
  173.  
  174. /*scrollbar*/
  175.  
  176. ::-webkit-scrollbar{width:0;}
  177.  
  178.  
  179. /*container*/
  180.  
  181. #container{
  182. height:500px;
  183. overflow:hidden;
  184. border-radius:5px;
  185. width:calc(250px + 500px);
  186. background:rgb(var(--Container));
  187. border:1px solid rgb(var(--Borders));
  188. }
  189.  
  190. /* sections title */
  191.  
  192. .section-title{
  193. height:60px;
  194. display:flex;
  195. overflow:hidden;
  196. font-size:1.2em;
  197. align-items:center;
  198. border-bottom:1px solid rgb(var(--Borders));
  199. }
  200.  
  201. .section-title::before{
  202. width:60px;
  203. height:60px;
  204. display:flex;
  205. margin-right:30px;
  206. align-items:center;
  207. font-family:'feather';
  208. justify-content:center;
  209. transition:background .3s;
  210. -moz-transition:background .3s;
  211. -webkit-transition:background .3s;
  212. }
  213.  
  214. .section-title span{
  215. display:none;
  216. font-weight:700;
  217. color:rgb(var(--Title));
  218. }
  219.  
  220. #section1:checked ~ #container .section-title .about-title,
  221. #section2:checked ~ #container .section-title .nav-title,
  222. #section3:checked ~ #container .section-title .blogroll-title,
  223. #section4:checked ~ #container .section-title .message-title{display:block;}
  224.  
  225. #section1:checked ~ #container .section-title::before{
  226. content:'\e8e9';
  227. color:rgb(var(--About-icon-color));
  228. background:rgb(var(--About-icon-background));
  229. }
  230.  
  231. #section2:checked ~ #container .section-title::before{
  232. content:'\e89f';
  233. color:rgb(var(--Navigation-icon-color));
  234. background:rgb(var(--Navigation-icon-background));
  235. }
  236.  
  237. #section3:checked ~ #container .section-title::before{
  238. content:'\e8e7';
  239. color:rgb(var(--Blogroll-icon-color));
  240. background:rgb(var(--Blogroll-icon-background));
  241. }
  242.  
  243. #section4:checked ~ #container .section-title::before{
  244. content:'\e890';
  245. color:rgb(var(--Message-icon-color));
  246. background:rgb(var(--Message-icon-background));
  247. }
  248.  
  249. /*sidebar*/
  250.  
  251. aside{
  252. z-index:1;
  253. width:250px;
  254. position:absolute;
  255. height:calc(500px - 63px);
  256. background:rgb(var(--Container));
  257. border-right:1px solid rgb(var(--Borders));
  258. }
  259.  
  260. .blog-info{
  261. padding:40px;
  262. border-bottom:1px solid rgb(var(--Borders));
  263. }
  264.  
  265. .sidebar-icon{
  266. z-index:2;
  267. width:90px;
  268. margin:auto;
  269. height:90px;
  270. position:relative;
  271. border-radius:100%;
  272. }
  273.  
  274. .sidebar-icon::before{
  275. width:35px;
  276. height:35px;
  277. display:flex;
  278. font-size:1.2em;
  279. position:absolute;
  280. align-items:center;
  281. border-radius:100%;
  282. margin:65px 0 0 50px;
  283. font-family:'honeybee';
  284. justify-content:center;
  285. content:var(--Sidebar-mini-icon);
  286. color:rgb(var(--Sidebar-mini-icon-color));
  287. background:rgb(var(--Sidebar-mini-icon-background));
  288. }
  289.  
  290. .sidebar-icon::after{
  291. z-index:-2;
  292. width:100%;
  293. content:'';
  294. height:100%;
  295. margin:-20px 0 0 -120px;
  296. position:absolute;
  297. border-radius:100%;
  298. background:
  299. linear-gradient(90deg, rgb(var(--Container)) 9px, transparent 1%) center,
  300. linear-gradient(rgb(var(--Container)) 9px, transparent 1%) center,
  301. rgb(var(--Text),.7);
  302. background-size: 10px 10px;
  303. }
  304.  
  305. .sidebar-icon img{
  306. width:100%;
  307. height:100%;
  308. border-radius:100%;
  309. }
  310.  
  311. .blog-title{
  312. margin-top:20px;
  313. font-weight:600;
  314. text-align:center;
  315. color:rgb(var(--Title));
  316. }
  317.  
  318. aside nav a,
  319. aside nav label{
  320. display:flex;
  321. align-items:center;
  322. color:rgb(var(--Link));
  323. transition:background .3s;
  324. padding:10px 20px 10px 40px;
  325. -moz-transition:background .3s;
  326. -webkit-transition:background .3s;
  327. border-bottom:1px dashed rgb(var(--Borders));
  328. }
  329.  
  330. aside nav label:last-of-type{border-bottom:0;}
  331.  
  332. #section1:checked ~ #container aside nav #label1,
  333. #section2:checked ~ #container aside nav #label2,
  334. #section3:checked ~ #container aside nav #label3,
  335. #section4:checked ~ #container aside nav #label4{font-weight:600;}
  336.  
  337. #section1:checked ~ #container aside nav #label1{background:rgba(var(--About-icon-background),.1);}
  338.  
  339. #section2:checked ~ #container aside nav #label2{background:rgba(var(--Navigation-icon-background),.1);}
  340.  
  341. #section3:checked ~ #container aside nav #label3{background:rgba(var(--Blogroll-icon-background),.1);}
  342.  
  343. #section4:checked ~ #container aside nav #label4{background:rgba(var(--Message-icon-background),.1);}
  344.  
  345. #section1:checked ~ #container aside nav #label1::before,
  346. #section1:checked ~ #container aside nav #label1::after,
  347. #section2:checked ~ #container aside nav #label2::before,
  348. #section2:checked ~ #container aside nav #label2::after,
  349. #section3:checked ~ #container aside nav #label3::before,
  350. #section3:checked ~ #container aside nav #label3::after,
  351. #section4:checked ~ #container aside nav #label4::before,
  352. #section4:checked ~ #container aside nav #label4::after{
  353. width:6px;
  354. content:'';
  355. height:10px;
  356. margin-top:2px;
  357. margin-left:-20px;
  358. position:absolute;
  359. transform-origin:0 100%;
  360. transform:rotate(-45deg);
  361. border-radius:4px 4px 0 0;
  362. -o-transform-origin:0 100%;
  363. -ms-transform-origin:0 100%;
  364. -o-transform:rotate(-45deg);
  365. -ms-transform:rotate(-45deg);
  366. -moz-transform-origin:0 100%;
  367. -moz-transform:rotate(-45deg);
  368. -moz-border-radius:4px 4px 0 0;
  369. -webkit-transform-origin:0 100%;
  370. -webkit-transform:rotate(-45deg);
  371. background-color:rgb(var(--Sub-color));
  372. }
  373.  
  374. #section1:checked ~ #container aside nav #label1::after,
  375. #section2:checked ~ #container aside nav #label2::after,
  376. #section3:checked ~ #container aside nav #label3::after,
  377. #section4:checked ~ #container aside nav #label4::after{
  378. margin-top:2px;
  379. margin-left:-26px;
  380. transform:rotate(45deg);
  381. -o-transform:rotate(45deg);
  382. -ms-transform:rotate(45deg);
  383. transform-origin :100% 100%;
  384. -moz-transform:rotate(45deg);
  385. -o-transform-origin:100% 100%;
  386. -ms-transform-origin:100% 100%;
  387. -moz-transform-origin:100% 100%;
  388. -webkit-transform:rotate(45deg);
  389. -webkit-transform-origin:100% 100%;
  390. }
  391.  
  392. #section1:checked ~ #container aside nav #label1::before{background:rgb(var(--About-icon-background));}
  393.  
  394. #section2:checked ~ #container aside nav #label2::before{background:rgb(var(--Navigation-icon-background));}
  395.  
  396. #section3:checked ~ #container aside nav #label3::before{background:rgb(var(--Blogroll-icon-background));}
  397.  
  398. #section4:checked ~ #container aside nav #label4::before{background:rgb(var(--Message-icon-background));}
  399.  
  400. /* sections */
  401.  
  402. #sections{
  403. width:500px;
  404. display:flex;
  405. margin-left:250px;
  406. transition:transform .4s;
  407. height:calc(500px - 60px);
  408. -moz-transition:transform .4s;
  409. -webkit-transition:transform .4s;
  410. }
  411.  
  412. #sections section{
  413. width:500px;
  414. max-height:0;
  415. flex-shrink:0;
  416. overflow-y:auto;
  417. transition:ease .6s;
  418. -moz-transition:ease .6s;
  419. -webkit-transition:ease .6s;
  420. background:rgb(var(--Posts));
  421. }
  422.  
  423. #section1:checked ~ #container #sections {transform: translateX(0%);}
  424. #section2:checked ~ #container #sections {transform: translateX(-100%);}
  425. #section3:checked ~ #container #sections {transform: translateX(-200%);}
  426. #section4:checked ~ #container #sections {transform: translateX(-300%);}
  427.  
  428. #section1:checked ~ #container #sections .about,
  429. #section2:checked ~ #container #sections .navigation,
  430. #section3:checked ~ #container #sections .blogroll,
  431. #section4:checked ~ #container #sections .message{
  432. height:auto;
  433. max-height:calc(500px - 60px);
  434. }
  435.  
  436. #sections .title{
  437. width:100%;
  438. display:flex;
  439. font-weight:600;
  440. position:relative;
  441. align-items:center;
  442. padding:20px 20px 20px 40px;
  443. border-bottom:1px solid rgb(var(--Borders));
  444. }
  445.  
  446. #sections .title:before,
  447. #sections .title:after {
  448. width:7px;
  449. content:'';
  450. height:12px;
  451. margin-top:2px;
  452. margin-left:-20px;
  453. position:absolute;
  454. transform-origin:0 100%;
  455. transform:rotate(-45deg);
  456. border-radius:4px 4px 0 0;
  457. -o-transform-origin:0 100%;
  458. -ms-transform-origin:0 100%;
  459. -o-transform:rotate(-45deg);
  460. -ms-transform:rotate(-45deg);
  461. -moz-transform-origin:0 100%;
  462. -moz-transform:rotate(-45deg);
  463. -moz-border-radius:4px 4px 0 0;
  464. -webkit-transform-origin:0 100%;
  465. -webkit-transform:rotate(-45deg);
  466. }
  467.  
  468. #sections .title:after {
  469. margin-top:2px;
  470. margin-left:-26px;
  471. transform:rotate(45deg);
  472. transform-origin:100% 100%;
  473. -o-transform:rotate(45deg);
  474. -ms-transform:rotate(45deg);
  475. -moz-transform:rotate(45deg);
  476. -o-transform-origin:100% 100%;
  477. -ms-transform-origin:100% 100%;
  478. -moz-transform-origin:100% 100%;
  479. -webkit-transform:rotate(45deg);
  480. -webkit-transform-origin:100% 100%;
  481. background-color:rgb(var(--Sub-color));
  482. }
  483.  
  484. .about .title::before{background-color:rgb(var(--About-icon-background));}
  485.  
  486. .navigation .title::before{background-color:rgb(var(--Navigation-icon-background));}
  487.  
  488. .blogroll .title::before{background-color:rgb(var(--Blogroll-icon-background));}
  489.  
  490. .message .title::before{background-color:rgb(var(--Message-icon-background));}
  491.  
  492. .about .row1,
  493. .about .row2,
  494. .about .row3{border-bottom:1px solid rgb(var(--Borders));}
  495.  
  496. /*------------------------- about section ------------------------*/
  497.  
  498. /*about*/
  499.  
  500. .about-text{padding:20px;}
  501.  
  502. .about-text:first-letter{
  503. font-size:1.3em;
  504. color:rgb(var(--Accent));
  505. text-transform:capitalize;
  506. }
  507.  
  508. /*likes and dislikes*/
  509.  
  510. .like-dislike,
  511. .about .row3,
  512. .links,
  513. .tags,
  514. section.blogroll{
  515. display:grid;
  516. grid-template-columns:50% 50%;
  517. }
  518.  
  519. .like-dislike ul,
  520. .skill,
  521. .hobbies ul,
  522. .links ul,
  523. .tags ul{
  524. padding:20px;
  525. overflow-y:auto;
  526. max-height:210px;
  527. }
  528.  
  529. .like li::before,
  530. .dislike li::before{
  531. margin-right:20px;
  532. font-family:'feather';
  533. color:rgb(var(--Accent));
  534. }
  535.  
  536. .like li::before{content:'\e83f';}
  537.  
  538. .dislike li::before{content:'\e8f6';}
  539.  
  540. .like,
  541. .skills,
  542. .links ul:first-of-type,
  543. .tags ul:first-of-type{border-right:1px solid rgb(var(--Borders));}
  544.  
  545. .like li,
  546. .dislike li,
  547. .hobbies li,
  548. .links li,
  549. .tags li{margin-bottom:5px;}
  550.  
  551. /*skills*/
  552.  
  553. .skill{padding:20px;}
  554.  
  555. .skill ul:not(:last-of-type){margin-bottom:20px;}
  556.  
  557. .skill-title{
  558. font-size:.75em;
  559. text-transform:uppercase;
  560. }
  561.  
  562. .skill-bar{
  563. width:100%;
  564. height:1px;
  565. margin-top:5px;
  566. overflow:hidden;
  567. position:relative;
  568. background:rgb(var(--Borders));
  569. }
  570.  
  571. .skill-bar span{
  572. height:1px;
  573. position:absolute;
  574. background:rgb(var(--Accent));
  575. }
  576.  
  577. .skill-one .skill-bar span{
  578. width:var(--Skill-one-bar-width);
  579. background:rgb(var(--Skill-one-background));
  580. }
  581.  
  582. .skill-two .skill-bar span{
  583. width:var(--Skill-two-bar-width);
  584. background:rgb(var(--Skill-two-background));
  585. }
  586.  
  587. .skill-three .skill-bar span{
  588. width:var(--Skill-three-bar-width);
  589. background:rgb(var(--Skill-three-background));
  590. }
  591.  
  592. .skill-four .skill-bar span{
  593. width:var(--Skill-four-bar-width);
  594. background:rgb(var(--Skill-four-background));
  595. }
  596.  
  597. /*hobbies*/
  598.  
  599. .hobbies ul{padding:20px;}
  600.  
  601. .hobbies ul li::before{
  602. content:'\e879';
  603. margin-right:20px;
  604. font-family:'feather';
  605. color:rgb(var(--Accent));
  606. }
  607.  
  608. /*audio player*/
  609.  
  610. .audio {padding:20px;}
  611.  
  612. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  613. :root {
  614. --Circle-Size:40px;
  615. --Progress-Border-Size:3px;
  616. --Progress-Empty:#f0f0f0;
  617. --Progress-Fill:#ffbdc6;
  618. --Player-Background:#ffffff;
  619. --Play-Pause-Buttons-Size:14px;
  620. --Play-Pause-Buttons-Color:#111;
  621. --Player-Text-Margin:16px;
  622. --Song-Name-Color:#111;
  623. --Artist-Name-Color:#888;
  624. }
  625.  
  626. #glenplayer07 {position:relative;}
  627.  
  628. .flamingo {
  629. display:flex;
  630. align-items:center;
  631. }
  632.  
  633. .circleofdeath {
  634. overflow:hidden;
  635. border-radius:100%;
  636. width:var(--Circle-Size);
  637. height:var(--Circle-Size);
  638. }
  639.  
  640. .tinfoil {
  641. border-radius:100%;
  642. width:var(--Circle-Size);
  643. height:var(--Circle-Size);
  644. background:var(--Progress-Empty);
  645. }
  646.  
  647. .oven {background:var(--Progress-Fill);}
  648.  
  649. .oliveoil {
  650. width:100%;
  651. height:100%;
  652. }
  653.  
  654. .crust {
  655. top:0;
  656. display:flex;
  657. position:absolute;
  658. align-items:center;
  659. justify-content:center;
  660. width:var(--Circle-Size);
  661. height:var(--Circle-Size);
  662. }
  663.  
  664. .cherry {
  665. z-index:1;
  666. display:flex;
  667. cursor:pointer;
  668. align-items:center;
  669. border-radius:100%;
  670. justify-content:center;
  671. background:var(--Player-Background);
  672. width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  673. height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  674. }
  675.  
  676. .music-controls {display:flex;align-items:center}
  677.  
  678. .music-controls .material-icons {
  679. color:var(--Play-Pause-Buttons-Color);
  680. font-size:var(--Play-Pause-Buttons-Size);
  681. }
  682.  
  683. .pausee {display:none;}
  684.  
  685. .beff {display:none;}
  686. .aff {display:block;}
  687.  
  688. .music-info {
  689. line-height:1em;
  690. margin-left:var(--Player-Text-Margin);
  691. }
  692.  
  693. .song-name {
  694. font-weight:600;
  695. color:var(--Song-Name-Color);
  696. }
  697.  
  698. .artist-name {
  699. margin-top:5px;
  700. font-size:.85em;
  701. color:var(--Artist-Name-Color);
  702. }
  703.  
  704. /*------------------------- navigation section ------------------------*/
  705.  
  706. .navigation .row1,
  707. .navigation .row2{border-bottom:1px solid rgb(var(--Borders));}
  708.  
  709. .links a,
  710. .tags a{
  711. position:relative;
  712. display:inline-block;
  713. }
  714.  
  715. .links a::before,
  716. .tags a::before {
  717. width:0;
  718. right:0;
  719. content:'';
  720. height:3px;
  721. bottom:-1px;
  722. display:block;
  723. position:absolute;
  724. transition:width .3s;
  725. background:rgb(var(--Accent));
  726. }
  727.  
  728. .links a:hover::before,
  729. .tags a:hover::before {
  730. left:0;
  731. width:100%;
  732. transition:width .3s;
  733. }
  734.  
  735. .links ul li::before,
  736. .tags ul li::before{
  737. margin-right:20px;
  738. font-family:'feather';
  739. color:rgb(var(--Accent));
  740. }
  741.  
  742. .links ul li::before{content:'\e882';}
  743.  
  744. .tags ul li::before{content:'\e8d2';}
  745.  
  746. .social{
  747. padding:20px;
  748. display:flex;
  749. }
  750.  
  751. .social a {
  752. width:45px;
  753. height:45px;
  754. display:flex;
  755. border-radius:5px;
  756. margin-right:20px;
  757. align-items:center;
  758. justify-content:center;
  759. }
  760.  
  761. .social a:first-of-type{background:rgb(var(--Accent));}
  762.  
  763. .social a:nth-of-type(2){background:rgba(var(--Accent),.85);}
  764.  
  765. .social a:nth-of-type(3){background:rgba(var(--Accent),.65);}
  766.  
  767. .social a:nth-of-type(4){background:rgba(var(--Accent),.45);}
  768.  
  769. .social a:last-of-type{background:rgba(var(--Accent),.25);}
  770.  
  771. /*------------------------- blogroll section ------------------------*/
  772.  
  773. .blogroll div{
  774. padding:20px;
  775. display:flex;
  776. align-items:center;
  777. transition:background .3s;
  778. -moz-transition:background .3s;
  779. -webkit-transition:background .3s;
  780. border-right:1px solid rgb(var(--Borders));
  781. border-bottom:1px solid rgb(var(--Borders));
  782. }
  783.  
  784. .blogroll div:hover{background:rgba(var(--Borders),.4);}
  785.  
  786. .blogroll-icon{
  787. width:35px;
  788. height:35px;
  789. margin-right:20px;
  790. border-radius:100%;
  791. }
  792.  
  793. .blogroll-link {max-width: calc(100% - 45px);}
  794.  
  795. .blogroll-link span{
  796. display:block;
  797. max-width:100%;
  798. overflow:hidden;
  799. position:relative;
  800. white-space:nowrap;
  801. text-overflow:ellipsis;
  802. }
  803.  
  804. .bg-title{font-weight:600;}
  805.  
  806. .bg-name{font-size:.85em;}
  807.  
  808.  
  809. /*------------------------- message section ------------------------*/
  810.  
  811. .message .row1{border-bottom:1px solid rgb(var(--Borders));}
  812.  
  813. .message .row1 ul{padding:20px;}
  814.  
  815. .message .row1 li{margin-bottom:10px;}
  816.  
  817. .message .row1 li::before{
  818. width:10px;
  819. content:'';
  820. height:10px;
  821. margin-right:20px;
  822. border-radius:3px;
  823. vertical-align:-2px;
  824. display:inline-block;
  825. background:rgba(var(--Blogroll-icon-background),.5);
  826. }
  827.  
  828. .askbox{padding:20px;}
  829.  
  830. .askbox iframe{
  831. width:100%;
  832. display:block;
  833. }
  834.  
  835. </style>
  836.  
  837. </head>
  838.  
  839. <body>
  840.  
  841. <!-- don't touch here!!! -->
  842.  
  843. <input type="radio" name="slides" id="section1" checked>
  844. <input type="radio" name="slides" id="section2">
  845. <input type="radio" name="slides" id="section3">
  846. <input type="radio" name="slides" id="section4">
  847.  
  848. <!-- container -->
  849.  
  850. <section id="container">
  851.  
  852. <!--------------------------- sections title --------------------------->
  853.  
  854. <div class="section-title">
  855. <span class="about-title">about me</span>
  856. <span class="nav-title">navigation</span>
  857. <span class="blogroll-title">blogroll</span>
  858. <span class="message-title">message</span>
  859. </div>
  860.  
  861. <!--------------------------- sidebar --------------------------->
  862.  
  863. <aside>
  864.  
  865. <div class="blog-info">
  866.  
  867. <!-- sidebar icon -->
  868. <div class="sidebar-icon">
  869. <img src="https://64.media.tumblr.com/b49ce5e44979ecb15819decd16d2dbe8/tumblr_plaeweP16Q1wvea6x_1280.jpg"/>
  870. </div>
  871.  
  872. <!-- blog title / you can use another text instead of -->
  873. <div class="blog-title">{title}</div>
  874. </div>
  875.  
  876. <!-- sidebar links -->
  877. <nav class="sidebar-links">
  878. <a href="{blogurl}">
  879. go back to blog
  880. </a>
  881.  
  882. <label for="section1" id="label1">
  883. about me
  884. </label>
  885.  
  886. <label for="section2" id="label2">
  887. navigation
  888. </label>
  889.  
  890. <label for="section3" id="label3">
  891. blogroll
  892. </label>
  893.  
  894. <label for="section4" id="label4">
  895. message
  896. </label>
  897. </nav>
  898. </aside>
  899.  
  900. <!--------------------------- sections --------------------------->
  901.  
  902. <div id="sections">
  903.  
  904. <!--------------------------- about section --------------------------->
  905.  
  906. <section class="about">
  907.  
  908. <!------- about text ------->
  909.  
  910. <div class="row1">
  911. <div class="title">about</div>
  912.  
  913. <!-- your about text -->
  914. <div class="about-text">
  915. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget urna a augue facilisis blandit imperdiet vel purus. Sed lobortis pharetra quam vel eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet neque a magna tempus pharetra. Integer mattis nisl at diam convallis, fermentum dignissim odio efficitur. Donec convallis enim mauris, viverra egestas urna imperdiet nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla placerat urna eget erat rutrum facilisis. Proin dapibus, ex et consequat malesuada, risus eros pellentesque leo, a rutrum mi enim id lorem. Suspendisse mollis nisi eu mollis rhoncus. Duis quis laoreet augue. Mauris elementum nibh vitae laoreet feugiat. Vivamus sed orci orci.
  916. </div>
  917. </div>
  918.  
  919. <!------- like and dislike ------->
  920.  
  921. <div class="row2">
  922. <div class="title">likes and dislikes</div>
  923.  
  924. <div class="like-dislike">
  925.  
  926. <!---- likes ---->
  927. <ul class="like">
  928. <li>like</li>
  929. <li>like</li>
  930. <li>like</li>
  931. <li>like</li>
  932. <li>like</li>
  933. <li>like</li>
  934. </ul>
  935.  
  936. <!---- dislikes ---->
  937. <ul class="dislike">
  938. <li>dislike</li>
  939. <li>dislike</li>
  940. <li>dislike</li>
  941. <li>dislike</li>
  942. <li>dislike</li>
  943. <li>dislike</li>
  944. </ul>
  945. </div>
  946. </div>
  947.  
  948. <!------- skills and hobbies ------->
  949.  
  950. <div class="row3">
  951.  
  952. <!---- skills ---->
  953.  
  954. <div class="skills">
  955. <div class="title">skills</div>
  956.  
  957. <div class="skill">
  958. <!-- skill one -->
  959. <ul class="skill-one">
  960. <li class="skill-title">skill one</li>
  961. <li class="skill-bar"><span></span></li>
  962. </ul>
  963.  
  964. <!-- skill two -->
  965. <ul class="skill-two">
  966. <li class="skill-title">skill two</li>
  967. <li class="skill-bar"><span></span></li>
  968. </ul>
  969.  
  970. <!-- skill three -->
  971. <ul class="skill-three">
  972. <li class="skill-title">skill three</li>
  973. <li class="skill-bar"><span></span></li>
  974. </ul>
  975.  
  976. <!-- skill four -->
  977. <ul class="skill-four">
  978. <li class="skill-title">skill four</li>
  979. <li class="skill-bar"><span></span></li>
  980. </ul>
  981. </div>
  982. </div>
  983.  
  984. <!---- hobbies ---->
  985.  
  986. <div class="hobbies">
  987. <div class="title">hobbies</div>
  988. <ul>
  989. <li>hobby</li>
  990. <li>hobby</li>
  991. <li>hobby</li>
  992. <li>hobby</li>
  993. <li>hobby</li>
  994. </ul>
  995. </div>
  996.  
  997. </div>
  998.  
  999. <!------- song ------->
  1000.  
  1001. <div class="row4">
  1002.  
  1003. <div class="title">favorite song</div>
  1004.  
  1005. <div class="audio">
  1006. <!-------MUSIC PLAYER BY GLENTHEMES------->
  1007. <div id="glenplayer07">
  1008. <div class="flamingo">
  1009. <div class="circleofdeath">
  1010. <div class="tinfoil">
  1011. <div class="oliveoil"></div>
  1012. </div>
  1013. <div class="crust">
  1014. <div class="cherry">
  1015. <div class="music-controls">
  1016. <i class="icon icon-play playy"></i>
  1017. <i class="icon icon-pause pausee"></i>
  1018. </div>
  1019. </div>
  1020. </div>
  1021. </div>
  1022.  
  1023. <div class="music-info">
  1024. <div class="song-name">Sayonara</div>
  1025. <div class="artist-name">Red Velvet</div>
  1026. </div>
  1027. </div>
  1028. </div>
  1029.  
  1030. <!-- your song url here -->
  1031. <audio id="audio" src="https://dl.dropbox.com/s/pp6dyvmgvs1o309/03%20Sayonara.mp3" type="audio"></audio>
  1032. <!----end music player---->
  1033.  
  1034. </div>
  1035. </div>
  1036.  
  1037.  
  1038. </section>
  1039.  
  1040. <!--------------------------- about section --------------------------->
  1041. <section class="navigation">
  1042.  
  1043. <!-- random links -->
  1044. <div class="row1">
  1045. <div class="title">links</div>
  1046. <div class="links">
  1047. <ul>
  1048. <li><a href="/">link title</a></li>
  1049. <li><a href="/">link title</a></li>
  1050. <li><a href="/">link title</a></li>
  1051. <li><a href="/">link title</a></li>
  1052. <li><a href="/">link title</a></li>
  1053. <li><a href="/">link title</a></li>
  1054. </ul>
  1055.  
  1056. <ul>
  1057. <li><a href="/">link title</a></li>
  1058. <li><a href="/">link title</a></li>
  1059. <li><a href="/">link title</a></li>
  1060. <li><a href="/">link title</a></li>
  1061. <li><a href="/">link title</a></li>
  1062. <li><a href="/">link title</a></li>
  1063. </ul>
  1064. </div>
  1065. </div>
  1066.  
  1067. <!-- tags links -->
  1068. <div class="row2">
  1069. <div class="title">tags</div>
  1070. <div class="tags">
  1071. <ul>
  1072. <li><a href="/">tag title</a></li>
  1073. <li><a href="/">tag title</a></li>
  1074. <li><a href="/">tag title</a></li>
  1075. <li><a href="/">tag title</a></li>
  1076. <li><a href="/">tag title</a></li>
  1077. <li><a href="/">tag title</a></li>
  1078. </ul>
  1079.  
  1080. <ul>
  1081. <li><a href="/">tag title</a></li>
  1082. <li><a href="/">tag title</a></li>
  1083. <li><a href="/">tag title</a></li>
  1084. <li><a href="/">tag title</a></li>
  1085. <li><a href="/">tag title</a></li>
  1086. <li><a href="/">tag title</a></li>
  1087. </ul>
  1088. </div>
  1089. </div>
  1090.  
  1091. <!-- social media -->
  1092. <div class="row3">
  1093. <div class="title">social media</div>
  1094. <div class="social">
  1095. <a href="/"><span class="th th-discord"></span></a>
  1096. <a href="/"><span class="th th-twitter-o"></span></a>
  1097. <a href="/"><span class="th th-instagram"></span></a>
  1098. <a href="/"><span class="th th-facebook-o"></span></a>
  1099. <a href="/"><span class="th th-tumblr-o"></span></a>
  1100. </div>
  1101. </div>
  1102. </section>
  1103.  
  1104. <!--------------------------- about section --------------------------->
  1105. <section class="blogroll">
  1106. {block:Following}
  1107. {block:Followed}
  1108. <div>
  1109. <img src="{FollowedPortraitURL-48}" class="blogroll-icon"/>
  1110. <a href="{FollowedURL}" class="blogroll-link">
  1111. <span class="bg-title">{FollowedTitle}</span>
  1112. <span class="bg-name">{FollowedName}</span>
  1113. </a>
  1114. </div>
  1115. {/block:Followed}
  1116. {/block:Following}
  1117. </section>
  1118.  
  1119. <!--------------------------- about section --------------------------->
  1120. <section class="message">
  1121.  
  1122. <!-- rules / you can delete this part or add more rules-->
  1123. <div class="row1">
  1124. <div class="title">rules</div>
  1125. <ul>
  1126. <li>first rule</li>
  1127. <li>second rule</li>
  1128. <li>third rule</li>
  1129. <li>fourth rule</li>
  1130. <li>fifth rule</li>
  1131. <li>sixth rule</li>
  1132. </ul>
  1133. </div>
  1134.  
  1135. <!-- askbox-->
  1136. <div class="row2">
  1137. <div class="title">send your message</div>
  1138. <div class="askbox">
  1139. <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]-->
  1140. </div>
  1141. </div>
  1142. </section>
  1143.  
  1144. </div>
  1145.  
  1146. </section>
  1147.  
  1148. <a href="//kosmique.tumblr.com" class="credits"><i data-feather="star"></i></a>
  1149.  
  1150. <script>
  1151. $(document).ready(function(){
  1152. feather.replace();
  1153. });
  1154.  
  1155.  
  1156. </script>
  1157. </body></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!