API tools faq
paste
Advertisement
silbrigthemes

Agnes (Page #19)

silbrigthemes
Jun 29th, 2019
1,193
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.82 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. AGNES
  7. Page #19 by silbrigthemes
  8.  
  9. This is a responsive portfolio designed for @codingcabin‘s page craft challenge, which is part of the on-going coding awards series.
  10.  
  11. The inspiration for this page came with the attributes I associate with the name Agnes – winter, elegance, and a hint of melancholy.
  12.  
  13. ––––––––––
  14.  
  15. Rules:
  16.  
  17. 1) Do not steal (parts of) the code.
  18. 2) Do not redistribute on other websites.
  19. 3) Do not claim as your own.
  20. 4) Do not edit beyond recognition.
  21. 5) Do not alter or delete the credit.
  22. 6) Do not use as a base code.
  23.  
  24. Useful annotations to this code have been made.
  25.  
  26. If you need any help with the customization, feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  27.  
  28. ––––––––––
  29.  
  30. Note:
  31.  
  32. This work is protected by a creative commons
  33. Attribution-NonCommercial-NoDerivatives 4.0 International
  34. (CC BY-NC-ND 4.0)
  35. license.
  36.  
  37. -->
  38.  
  39. <head>
  40.  
  41. <meta charset="utf-16">
  42. <title>Portfolio | {Title}</title> <!-- Change title here. -->
  43. <link rel="shortcut icon" href="{Favicon}"/>
  44. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  45. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  46.  
  47. <!-- Necessary for the icon font to work. -->
  48. <script src="https://kit.fontawesome.com/57a35dd361.js"></script>
  49.  
  50. <!-- Necessary for the page to be responsive. -->
  51. <meta name="viewport" content="width=device-width, initial-scale=1">
  52.  
  53. <!-- Necessary for the scripts to work. -->
  54. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  55.  
  56. <!-- Changes the toolbar color on mobile. -->
  57. <meta name="theme-color" content="#c2c9d1"/>
  58.  
  59. <!-- Tooltip Script -->
  60. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  61. <script>
  62. (function($){
  63. $(document).ready(function(){
  64. $("[title]").style_my_tooltips({
  65. tip_follows_cursor:true,
  66. tip_delay_time:200,
  67. tip_fade_speed:300
  68. }
  69. );
  70. });
  71. })(jQuery);
  72. </script>
  73.  
  74. <!-- Custom font. | Open Sans -->
  75. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  76.  
  77. <!-- Other fonts. -->
  78. <!-- Cormorant Garamond -->
  79. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  80. <!-- Dancing Script -->
  81. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  82. <!-- Roboto Mono -->
  83. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  84.  
  85. <style>
  86.  
  87. body{
  88. margin:0;
  89. top:0;
  90. left:0;
  91. background-color:#dcdee2; /* background color */
  92. background:url("https://images.unsplash.com/photo-1509227035009-4bef0b738dd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1566&q=80"); /* background image */
  93. /* For a background image that is a pattern, change the
  94. content of the lines below to
  95. background-size: [any value in px];
  96. background-repeat:repeat;
  97. */
  98. background-size:cover;
  99. background-attachment:fixed;
  100. background-position:top center;
  101. background-repeat:no-repeat;
  102. color:#30363b; /* text color */
  103. font-size:1em; /* font-size | 1em = 16px */
  104. font-family:"Open Sans", Verdana; /* font-family */
  105. text-align:justify;
  106. scroll-behavior:smooth;
  107. }
  108.  
  109. /* Custom Scrollbar */
  110. ::-webkit-scrollbar{
  111. width:10px;
  112. background-color:white; /* background color */
  113. border-radius:5px;
  114. }
  115.  
  116. ::-webkit-scrollbar-thumb{
  117. width:10px;
  118. border:2px solid white; /* border color */
  119. background-color:#c2c9d1; /* background color */
  120. border-radius:5px;
  121. }
  122.  
  123. /* Custom Text Selection */
  124. ::selection{
  125. background-color:#f2f3f4; /* background color */
  126. color:#30363b; /* text color */
  127. text-shadow:none;
  128. }
  129.  
  130. ::-moz-selection{
  131. background-color:#f2f3f4; /* background color */
  132. color:#30363b; /* text color */
  133. text-shadow:none;
  134. }
  135.  
  136. ::-o-selection{
  137. background-color:#f2f3f4; /* background color */
  138. color:#30363b; /* text color */
  139. text-shadow:none;
  140. }
  141.  
  142. ::-webkit-selection{
  143. background-color:#f2f3f4; /* background color */
  144. color:#30363b; /* text color */
  145. text-shadow:none;
  146. }
  147.  
  148. /* Custom Tooltips */
  149. #s-m-t-tooltip{
  150. max-width:300px;
  151. margin:15px;
  152. padding:0.5em;
  153. background-color:white; /* background color */
  154. color:#527caf; /* text color */
  155. z-index:9999999999999;
  156. font-size:12px; /* font-size: 16px (body) - 4px = 12px */
  157. text-transform:uppercase; /* alt.: normal, lowercase */
  158. border-radius:2px; /* increase or decrease radius */
  159. box-shadow:0 0 2px #c2c9d1; /* box shadow, blurred, color */
  160. }
  161.  
  162. /** TEXT STYLES **/
  163. /* Bold Text */
  164. b, strong{
  165. font-weight:bold;
  166. color:#525d65; /* text color */
  167. }
  168.  
  169. /* Italic Text */
  170. i, em{
  171. font-weight:300; /* alt.: normal */
  172. font-style:italic;
  173. color:#191c1f; /* text color */
  174. }
  175.  
  176. /* Marked Text */
  177. mark{
  178. padding:0px 4px;
  179. background-color:#dcdee2; /* background color */
  180. border-radius:2px; /* increase or decrease radius */
  181. }
  182.  
  183. /* Underlined Text */
  184. u{
  185. text-decoration:none;
  186. border-bottom:1px solid #30363b; /* border color */
  187. }
  188.  
  189. /* Preformatted Text */
  190. pre{
  191. word-wrap:break-all;
  192. white-space:pre-wrap;
  193. background-color:#f2f3f4; /* background color */
  194. padding:4px 8px;
  195. font-family:"Roboto Mono", Georgia; /* font-family */
  196. font-size:14px; /* font-size: 16px (body) - 2px = 14px */
  197. border-radius:4px; /* increase or decrease radius */
  198. }
  199.  
  200. /* Small Text */
  201. small{
  202. font-size:12px; /* font-size: 16px (body) - 4px = 12px */
  203. }
  204.  
  205. /* Text Line */
  206. hr{
  207. width:80%;
  208. height:4px;
  209. background-color:#c2c9d1; /* background color */
  210. border:none;
  211. border-radius:2px; /* increase or descrease radius */
  212. }
  213.  
  214. /* Blockquote */
  215. blockquote{
  216. padding:2px 8px;
  217. border-radius:4px; /* increase or decrease radius */
  218. background-color:#e5f0ff; /* background color */
  219. }
  220.  
  221. /* LINKS */
  222. /* Link */
  223. a{
  224. text-decoration:none; /* no text decoration */
  225. color:#527caf; /* change text color here */
  226. box-shadow:inset 0 -4px 0 #e5f0ff; /* change color here */
  227. transition:0.5s;
  228. -moz-transition:0.5s;
  229. -o-transition:0.5s;
  230. -webkit-transition:0.5s;
  231. }
  232.  
  233. /* Hover Link */
  234. a:hover{
  235. box-shadow:inset 0 -12px 0 #e5f0ff; /* change color here */
  236. transition:0.5s;
  237. -moz-transition:0.5s;
  238. -o-transition:0.5s;
  239. -webkit-transition:0.5s;
  240. }
  241.  
  242. /* HEADINGS */
  243. /* First Heading */
  244. h1{
  245. font-size:1.5em; /* 1.5em = 24px */
  246. font-weight:400; /* 400 = normal weight | alt.: 300, 700 */
  247. border-bottom:2px solid #c2c9d1; /* line width type color */
  248. color:#30363b; /* text color */
  249. }
  250.  
  251. /* Second Heading */
  252. h2{
  253. font-size:1.25em; /* 1.25em = 20px */
  254. font-weight:300; /* 300 = thin | alt.: 400, 700 */
  255. border-bottom:1px solid #c2c9d1; /* line width type color */
  256. color:#30363b; /* text color */
  257. }
  258.  
  259. /* COLORED TEXT */
  260. /* Pink Text */
  261. .npf_color_niles {
  262. color:#ff5acb; /* change text color here */
  263. }
  264.  
  265. /* Red Text */
  266. .npf_color_joey {
  267. color:#ff5a77; /* change text color here */
  268. }
  269.  
  270. /* Orange Text */
  271. .npf_color_monica {
  272. color:#ff915a; /* change text color here */
  273. }
  274.  
  275. /* Yellow Text */
  276. .npf_color_phoebe {
  277. color:#f5cd0e; /* change text color here */
  278. }
  279.  
  280. /* Green Text */
  281. .npf_color_ross {
  282. color:#31cb10; /* change text color here */
  283. }
  284.  
  285. /* Blue Text */
  286. .npf_color_rachel {
  287. color:#009ce3; /* change text color here */
  288. }
  289.  
  290. /* Purple Text */
  291. .npf_color_chandler {
  292. color:#9360f9; /* change text color here */
  293. }
  294.  
  295. /* SPECIAL FONTS */
  296. /* Quirky Font */
  297. .npf_quirky{
  298. font-family: 'Dancing Script', cursive;
  299. font-size:1.25em; /* 1.25 x font-size under body{} */
  300. }
  301.  
  302. /* Chat Font */
  303. .npf_chat{
  304. font-family:Courier;
  305. }
  306.  
  307. /* Quote Font */
  308. .npf_quote{
  309. font-family:"Cormorant Garamond", "Palatino";
  310. font-size:1.25em; /* 1.25 x font-size under body{} */
  311. }
  312.  
  313. /** --- END TEXT STYLES | START LAYOUT --- **/
  314.  
  315. /* CONTAINER */
  316. #container{
  317. margin-top:10vh;
  318. margin-left:calc(20vw - (2.5 * 16px));
  319. width:calc(60vw + (5 * 16px));
  320. height:auto;
  321. display:grid;
  322. grid-template-columns:repeat(6,10vw);
  323. grid-column-gap:16px;
  324. grid-template-rows:10vh 10vw repeat(3,10vh) 1fr;
  325. grid-row-gap:16px;
  326. }
  327.  
  328. /* TITLE */
  329. #title{
  330. background-color:white; /* background color */
  331. padding:4px 8px;
  332. font-size:2.5em; /* 2.5em = 40px */
  333. border-radius:0.5em; /* 8px rounded corner radius */
  334. box-shadow:0 0 4px #c2c9d1; /* box shadow, blur, color */
  335. display:flex;
  336. align-items:center;
  337. justify-content:center;
  338. grid-column:1/7;
  339. grid-row:1/2;
  340. }
  341.  
  342. /* PORTRAITS */
  343. /* First Portrait */
  344. #image-one{
  345. grid-column:1/2;
  346. }
  347.  
  348. /* Second Portrait */
  349. #image-two{
  350. grid-column:2/3;
  351. }
  352.  
  353. /* First & Second Portrait */
  354. #image-one, #image-two{
  355. grid-row:2/3;
  356. background-color:white; /* background color */
  357. border-radius:1em; /* 16px rounded corner radius */
  358. padding:4px;
  359. box-shadow:0 0 4px #c2c9d1; /* box shadow, blur, color */
  360. display:flex;
  361. align-items:center;
  362. justify-content:center;
  363. }
  364.  
  365. /* Portrait Images */
  366. #image-one img, #image-two img{
  367. width:calc(10vw - 8px);
  368. height:calc(10vw - 8px);
  369. border-radius:12px; /* 12px rounded corner radius */
  370. }
  371.  
  372. /* QUICK INFO */
  373. /* Container */
  374. #quick-info{
  375. background-color:white; /* background color */
  376. border-radius:1em; /* 1em = 16px rounded corner radius */
  377. padding:1em;
  378. box-shadow:0 0 4px #c2c9d1; /* box shadow, blur, color */
  379. grid-column:1/3;
  380. grid-row:3/6;
  381. }
  382.  
  383. /* Title */
  384. .subtitle{
  385. font-size:1.25em; /* 1.25em = 20px */
  386. text-align:center; /* alt.: left, justify, right */
  387. }
  388.  
  389. /* List */
  390. #quick-info ul{
  391. list-style-type:none;
  392. }
  393.  
  394. /* List Item */
  395. #quick-info li{
  396. margin-left:-2em;
  397. }
  398.  
  399. /* ABOUT */
  400. /* Container */
  401. #about{
  402. grid-column:3/7;
  403. grid-row:2/6;
  404. background-color:white; /* background color */
  405. border-radius:1em; /* 16px rounded corners radius */
  406. padding:4px 8px;
  407. box-shadow:0 0 4px #c2c9d1; /* box shadow, blurred, color */
  408. overflow-y:scroll;
  409. overflow-x:hidden;
  410. }
  411.  
  412. /* Paragraph */
  413. #about p{
  414. padding-right:1em;
  415. padding-left:0.5em;
  416. }
  417.  
  418. /* NAVIGATION */
  419. /* Container */
  420. #navbar{
  421. grid-row:6/7;
  422. grid-column:1/7;
  423. display:flex;
  424. flex-wrap:wrap;
  425. align-items:flex-start;
  426. justify-content:space-between;
  427. }
  428.  
  429. /* Navigation Element */
  430. .nav{
  431. background-color:white; /* background color */
  432. box-shadow:0 0 4px #c2c9d1; /* box shadow, blurred, color */
  433. color:#30363b; /* text color */
  434. padding:4px 8px;
  435. border-radius:8px; /* 8px rounded corner radius */
  436. margin-bottom:4px;
  437. transition:0.5s;
  438. -moz-transition:0.5s;
  439. -o-transition:0.5s;
  440. -webkit-transition:0.5s;
  441. }
  442.  
  443. /* Navigation Element Icon */
  444. .nav span{
  445. font-size:14px; /* 1em (body) - 2px = 14px */
  446. padding-right:4px;
  447. color:#527caf; /* text color */
  448. }
  449.  
  450. /* Navigation Element on Hover */
  451. .nav:hover{
  452. transform:scale(1.05); /* 1.05 x orignal size */
  453. transition:0.5s;
  454. -moz-transition:0.5s;
  455. -o-transition:0.5s;
  456. -webkit-transition:0.5s;
  457. }
  458.  
  459. /* Navigation Link */
  460. a.navlink{
  461. text-decoration:none; /* no text decoration */
  462. border-bottom:none; /* no bottom border */
  463. box-shadow:none; /* no box shadow */
  464. }
  465.  
  466. /* WORKS */
  467. /* Container */
  468. #works{
  469. grid-column:1/7;
  470. display:grid;
  471. grid-template-columns:repeat(3,calc(20vw + 24px));
  472. grid-column-gap:16px;
  473. grid-row-gap:16px;
  474. margin-bottom:10vh;
  475. }
  476.  
  477. /* Work */
  478. .work{
  479. width:calc(20vw + 4px);
  480. }
  481.  
  482. /* Description */
  483. .workdesc{
  484. background-color:white; /* background color */
  485. padding:4px 8px;
  486. border-radius:1em; /* 16px rounded corner radius */
  487. box-shadow:0 0 2px #c2c9d1; /* box shadow, blurred, color */
  488. }
  489.  
  490. /* Title */
  491. .worktitle{
  492. font-size:1.25em; /* 1.25em = 20px */
  493. text-align:center; /* alt.: left, justify, right */
  494. padding-top:8px;
  495. font-weight:300; /* 300 = thin | alt.: 400, 700 */
  496. }
  497.  
  498. /* Image */
  499. .workimg img{
  500. width:20vw;
  501. height:auto;
  502. margin-top:4px;
  503. border-radius:1em; /* 16px rounded corner radius */
  504. box-shadow:0 0 2px #c2c9d1; /* box shadow, blurred, color */
  505. }
  506.  
  507. /** --- END LAYOUT | START EXTRAS --- **/
  508.  
  509. /* CUSTOM CONTROLS */
  510. /* Hides standard tumblr controls */
  511. body > iframe:first-child {
  512. display: none !important;
  513. }
  514.  
  515. /* Container */
  516. #custom-controls{
  517. width:calc(5 * 32px + 4 * 4px);
  518. position:absolute;
  519. right:8px;
  520. top:8px;
  521. display:flex;
  522. align-items:center;
  523. justify-content:space-between;
  524. position:fixed;
  525. }
  526.  
  527. /* Control Link */
  528. a.conlink{
  529. text-decoration:none; /* no text decoration */
  530. border-bottom:none; /* no bottom border */
  531. box-shadow:none; /* no box shadow */
  532. }
  533.  
  534. /* Control */
  535. .cont{
  536. width:32px;
  537. height:32px;
  538. border-radius:50%; /* round */
  539. background-color:white; /* background color */
  540. color:#527caf; /* text color */
  541. font-size:14px; /* 1em (body) - 2px = 14px */
  542. transition:0.5s;
  543. -moz-transition:0.5s;
  544. -o-transition:0.5s;
  545. -webkit-transition:0.5s;
  546. display:flex;
  547. align-items:center;
  548. justify-content:center;
  549. }
  550.  
  551. /* Control on Hover */
  552. .cont:hover{
  553. transform:scale(1.05); /* 1.05 x original size */
  554. transition:0.5s;
  555. -moz-transition:0.5s;
  556. -o-transition:0.5s;
  557. -webkit-transition:0.5s;
  558. }
  559.  
  560. /* TUMBLR APP BUTTON */
  561. /* Hides the tumblr app button, by @yeoli-thm */
  562. .tmblr-iframe--app-cta-button {
  563. display: none!important;
  564. }
  565.  
  566. /* CREDIT */
  567. /* If you delete or alter this, you will be blocked and reported
  568. for theft. */
  569. #credit{
  570. position:fixed;
  571. bottom:1em;
  572. left:1em;
  573. }
  574.  
  575. /* SCROLL TO TOP */
  576. /* To Top Button */
  577. .top {
  578. position:fixed;
  579. width:32px;
  580. height:32px;
  581. left:1em;
  582. bottom:calc(32px + 1em + 4px);
  583. background-color:white; /* background color */
  584. color:#527caf; /* text color */
  585. border-radius:50%;
  586. font-size:14px; /* 1em (body) - 2px = 14px */
  587. display:flex;
  588. align-items:center;
  589. justify-content:center;
  590. opacity: 0;
  591. }
  592.  
  593. /* Top Button */
  594. .top.ks-appear {
  595. opacity: 1;
  596. transform: scale(1) translate3d(0, 0, 0);
  597. -webkit-transform: scale(1) translate3d(0, 0, 0);
  598. transition:0.5s;
  599. -moz-transition:0.5s;
  600. -o-transition:0.5s;
  601. -webkit-transition:0.5s;
  602. }
  603.  
  604. /* Top Button on Hover */
  605. .top.ks-appear:hover{
  606. transform:scale(1.05); /* 1.05 x original size */
  607. transition:0.5s;
  608. -moz-transition:0.5s;
  609. -o-transition:0.5s;
  610. -webkit-transition:0.5s;
  611. }
  612.  
  613. /** --- END EXTRAS | START RESPONSIVE LAYOUT --- **/
  614.  
  615. /** RESPONSIVE FOR TABLETS **/
  616. @media only screen and (max-width:800px){
  617. /* CONTAINER */
  618. #container{
  619. margin-left:calc(10vw - (2.5 * 16px));
  620. width:calc(80vw + (5 * 16px));
  621. grid-template-columns:repeat(6,13.3vw);
  622. grid-template-rows:10vh 13.3vw repeat(3,10vh) 1fr;
  623. }
  624.  
  625. /* WORKS */
  626. #works{
  627. grid-column:1/7;
  628. display:grid;
  629. grid-template-columns:repeat(3,calc(26.6vw + 20px));
  630. grid-column-gap:16px;
  631. grid-row-gap:16px;
  632. margin-bottom:10vh;
  633. }
  634.  
  635. /* PORTRAITS */
  636. #image-one img, #image-two img{
  637. width:calc(13.3vw - 8px);
  638. height:calc(13.3vw - 8px);
  639. }
  640.  
  641. /* WORKS */
  642. /* Work */
  643. .work{
  644. width:calc(26.6vw);
  645. }
  646.  
  647. /* Work Image */
  648. .workimg img{
  649. width:26.6vw;
  650. }
  651.  
  652. /* CONTROLS | TOP BUTTON */
  653. .cont, .top{
  654. border:1px solid #527caf; /* line width, style, color */
  655. }
  656. }
  657.  
  658. /** RESPONSIVE FOR SMARTPHONES **/
  659. @media only screen and (max-width:500px){
  660. /* BODY */
  661. body{
  662. overflow-x:hidden;
  663. }
  664.  
  665. /* CONTAINER */
  666. #container{
  667. margin-left:calc(10vw - 16px);
  668. grid-template-columns:10vw 70vw;
  669. grid-template-rows:10vh 10vw 10vw 20vh 50vh 15vh 1fr;
  670. }
  671.  
  672. /* TITLE */
  673. #title{
  674. grid-column:1/3;
  675. grid-row:1/2;
  676. }
  677.  
  678. /* PORTRAITS */
  679. /* First Portrait */
  680. #image-one{
  681. grid-row:2/3;
  682. }
  683.  
  684. /* Second Portrait */
  685. #image-two{
  686. grid-row:3/4;
  687. }
  688.  
  689. /* Portrait Images */
  690. #image-one, #image-two{
  691. grid-column:1/2;
  692. }
  693.  
  694. /* QUICK INFO */
  695. #quick-info{
  696. grid-column:2/3;
  697. grid-row:2/5;
  698. }
  699.  
  700. /* ABOUT */
  701. #about{
  702. grid-column:1/3;
  703. grid-row:5/6;
  704. }
  705.  
  706. /* NAVIGATION */
  707. #navbar{
  708. grid-row:6/7;
  709. grid-column:1/3;
  710. }
  711.  
  712. /* WORKS */
  713. /* Main Container | all works */
  714. #works{
  715. grid-column:1/3;
  716. grid-row:7/8;
  717. margin-bottom:10vh;
  718. display:flex;
  719. flex-direction:column;
  720. }
  721.  
  722. /* Work Container | per each work */
  723. .work{
  724. width:calc(80vw + 16px);
  725. }
  726.  
  727. /* Image */
  728. .workimg img{
  729. width:calc(80vw + 12px);
  730. }
  731.  
  732. /* Description */
  733. .workdesc{
  734. margin-bottom:8px;
  735. }
  736.  
  737. /* CONTROLS | TOP BUTTON */
  738. .cont, .top{
  739. border:1px solid #527caf; /* line width, style, color */
  740. }
  741. }
  742.  
  743. </style>
  744. </head>
  745.  
  746. <body>
  747.  
  748. <!-- CUSTOM CONTROLS -->
  749. <div id="custom-controls">
  750. <!-- Dashboard Link -->
  751. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  752. <div class="cont">
  753. <span class="fab fa-tumblr" aria-hidden="true"></span>
  754. </div>
  755. </a>
  756.  
  757. <!-- Message -->
  758. <!-- Takes people to dashboard to send you a message. -->
  759. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  760. <div class="cont">
  761. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  762. </div>
  763. </a>
  764.  
  765. <!-- Customize -->
  766. <!-- Takes you, the blog owner, to the customization. -->
  767. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="conlink">
  768. <div class="cont">
  769. <span class="fas fa-palette" aria-hidden="true"></span>
  770. </div>
  771. </a>
  772.  
  773. <!-- Settings -->
  774. <!-- Takes you to your blog's settings. -->
  775. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="conlink">
  776. <div class="cont">
  777. <span class="fas fa-cog" aria-hidden="true"></span>
  778. </div>
  779. </a>
  780.  
  781. <!-- Follow -->
  782. <!-- Takes people to a page so that they can follow you. -->
  783. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  784. <div class="cont">
  785. <span class="fas fa-plus" aria-hidden="true"></span>
  786. </div>
  787. </a>
  788. </div> <!-- // end custom controls -->
  789.  
  790. <!-- CONTAINER -->
  791. <div id="container">
  792. <!-- TITLE -->
  793. <div id="title">[Title here]</div>
  794.  
  795. <!-- PORTRAITS -->
  796. <!-- First Image -->
  797. <div id="image-one">
  798. <img src="[Portrait Image URL here]" alt="protrait one"/>
  799. </div>
  800. <!-- Second Image -->
  801. <div id="image-two">
  802. <img src="[Portrait Image URL here]" alt="portrait two"/>
  803. </div> <!-- // end portraits -->
  804.  
  805. <!-- QUICK INFO -->
  806. <div id="quick-info">
  807. <!-- Title -->
  808. <div class="subtitle">Quick Info</div>
  809. <!-- Keep it nice and short! -->
  810. <ul>
  811. <li><b>Name:</b> [Your Name]</li>
  812. <li><b>Age:</b> [Your Age]</li>
  813. <li><b>Location:</b> [Your Location]</li>
  814. <li><b>Interests:</b> [Your Interests]</li>
  815. <li><b>Languages:</b> [Your Languages]</li>
  816. <!-- You can put in something entirely else too if you want to. It's your choice! -->
  817. </ul>
  818. </div> <!-- // end quick info -->
  819.  
  820. <!-- NAVBAR -->
  821. <div id="navbar">
  822. <!-- Home Link -->
  823. <a href="/" title="home" class="navlink">
  824. <div class="nav">
  825. <span class="fas fa-home" aria-hidden="true"></span>
  826. Home
  827. </div>
  828. </a>
  829.  
  830. <!-- Ask Link -->
  831. <a href="/ask" title="{AskLabel}" class="navlink">
  832. <div class="nav">
  833. <span class="fas fa-envelope" aria-hidden="true"></span>
  834. Message
  835. </div>
  836. </a>
  837.  
  838. <!-- First Custom Link -->
  839. <a href="[Link URL]" title="[Link Title]" class="navlink">
  840. <div class="nav">
  841. <span class="fas fa-link" aria-hidden="true"></span>
  842. [Link Title]
  843. </div>
  844. </a>
  845.  
  846. <!-- Second Custom Link -->
  847. <a href="[Link URL]" title="[Link Title]" class="navlink">
  848. <div class="nav">
  849. <span class="fas fa-link" aria-hidden="true"></span>
  850. [Link Title]
  851. </div>
  852. </a>
  853.  
  854. <!-- Third Custom Link -->
  855. <a href="[Link URL]" title="[Link Title]" class="navlink">
  856. <div class="nav">
  857. <span class="fas fa-link" aria-hidden="true"></span>
  858. [Link Title]
  859. </div>
  860. </a>
  861.  
  862. <!-- Fourth Custom Link -->
  863. <a href="[Link URL]" title="[Link Title]" class="navlink">
  864. <div class="nav">
  865. <span class="fas fa-link" aria-hidden="true"></span>
  866. [Link Title]
  867. </div>
  868. </a>
  869.  
  870. <!-- Fifth Custom Link -->
  871. <a href="[Link URL]" title="[Link Title]" class="navlink">
  872. <div class="nav">
  873. <span class="fas fa-link" aria-hidden="true"></span>
  874. [Link Title]
  875. </div>
  876. </a>
  877.  
  878. <!-- CREDIT -->
  879. <!-- Do not delete or alter this. Otherwise you will be
  880. blocked and reported for theft. -->
  881. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="navlink">
  882. <div class="nav">
  883. <span class="fas fa-code" aria-hidden="true"></span>
  884. Page Credit
  885. </div>
  886. </a>
  887. </div> <!-- // end navbar -->
  888.  
  889. <!-- ABOUT -->
  890. <div id="about">
  891. <!-- Don't worry about length here.
  892. You can write a novel if you want to. -->
  893. [Desciption goes here!]
  894. </div> <!-- // end about -->
  895.  
  896. <!-- WORKS -->
  897. <div id="works">
  898. <!-- Work -->
  899. <div class="work">
  900. <!-- Image -->
  901. <div class="workimg">
  902. <img src="[image url goes here]">
  903. </div>
  904. <!-- Description -->
  905. <div class="workdesc">
  906. <!-- Title -->
  907. <div class="worktitle">Work Title</div>
  908. Description goes here.
  909. </div> <!-- // end description -->
  910. </div> <!-- // end work -->
  911. </div> <!-- // end works -->
  912. </div> <!-- // end container -->
  913.  
  914. <!-- SCROLL TO TOP BUTTON -->
  915. <div id="top" class="top">
  916. <span class="fas fa-chevron-up" aria-hidden="true"></span>
  917. </div>
  918.  
  919. <!-- CREDIT -->
  920. <!-- Do not delete or alter this. Otherwise you will be blocked and
  921. reported for theft. -->
  922. <a href="https://silbrigthemes.tumblr.com/" title="page credit" class="conlink">
  923. <div class="cont" id="credit">
  924. <span class="fas fa-code" aria-hidden="true"></span>
  925. </div>
  926. </a>
  927.  
  928. <!-- SCROLL TO TOP BUTTON -->
  929. <!-- Script by Keenan Staffieri on codepen. -->
  930. <script>
  931. class KS_ToTop {
  932.  
  933. constructor(selector, appearPx, scrollSpd = 50) {
  934. this.$selector = document.querySelector(selector);
  935. this.appearPx = appearPx;
  936. this.scrollSpd = scrollSpd;
  937. this.timeOut = null;
  938. this.isAutoScrolling = false;
  939.  
  940. this.init();
  941. }
  942.  
  943. init() {
  944. // Add event listeners for page scrolling
  945. document.addEventListener('mousewheel', e => this.scrollHandler(e), false);
  946. document.addEventListener('DOMMouseScroll', e => this.scrollHandler(e), false);
  947.  
  948. // Add event listener for click
  949. this.$selector.addEventListener('click', () => {
  950. this.$selector.classList.remove('ks-appear');
  951. this.scrollToTop();
  952. });
  953. }
  954.  
  955. scrollHandler(e) {
  956. var offsetY = window.pageYOffset;
  957.  
  958. if (!this.isAutoScrolling) {
  959. if (offsetY >= this.appearPx) {
  960. this.$selector.classList.add('ks-appear');
  961. } else
  962. {
  963. this.$selector.classList.remove('ks-appear');
  964. }
  965. }
  966. }
  967.  
  968. scrollToTop() {
  969. this.isAutoScrolling = true;
  970.  
  971. if (document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0) {
  972. window.scrollBy(0, -this.scrollSpd);
  973. this.timeOut = setTimeout(() => {this.scrollToTop();}, 30);
  974. } else
  975. {
  976. clearTimeout(this.timeOut);
  977. this.isAutoScrolling = false;
  978. }
  979. }}
  980.  
  981.  
  982. document.addEventListener('DOMContentLoaded', function () {
  983. var toTop = new KS_ToTop('#top', 200);
  984. });
  985. </script>
  986.  
  987. </body>
  988. </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!