nicolas-sage

page 11: petunia

Jun 11th, 2022
242
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.55 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <!----
  10. _________
  11. / \
  12. | __ __ |
  13. | |__| |__| | PETUNIA NAVI PAGE BY SAGE / DEMONTIMES
  14. | | https://demontimes.tumblr.com
  15. | _ _ _ |
  16. |_| |_| |_| |_|
  17.  
  18. SEARCH 'EDIT HERE'
  19.  
  20. CREDITS:
  21. - phosphor icons / phosphoricons.com
  22. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  23. - google fonts / https://fonts.google.com/
  24. - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
  25.  
  26. ---->
  27.  
  28. <!---- JQUERY ---->
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30.  
  31. <!----- GOOGLE FONTS ---->
  32. <link rel="preconnect" href="https://fonts.googleapis.com">
  33. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  34. <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  36.  
  37. <!---- ICONS ---->
  38. <script src="https://unpkg.com/phosphor-icons"></script>
  39. <script src="https://unpkg.com/[email protected]"></script>
  40.  
  41. <!---- TOOLTIPS ---->
  42. <script src="https://unpkg.com/popper.js@1"></script>
  43. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  44.  
  45. <!----- CSS ----->
  46.  
  47. <style type="text/css">
  48.  
  49. /*--- EDIT HERE ----*/
  50. :root {
  51.  
  52. /*---- COLORS -----*/
  53. --background:#ddd;
  54. --content:#e8e8e8;
  55. --title:#666;
  56. --text:#888;
  57. --link:#d363f5;
  58. --accent:#ed80c5;
  59. --accent-two:#bf62ea;
  60. --accent-three:#517fe5;
  61. --borders:#ddd;
  62. --shadow:#ebc7ee;
  63. --gradient-one:#e66eb2;
  64. --gradient-two:#ae4bdc;
  65. --gradient-three:#3362c9;
  66. --gradient-text:#fff;
  67.  
  68. /*---- VARIABLES ---*/
  69. --border-radius:10px; /*-- 0px, 5px, or 10px recommended --*/
  70. --glow: 0 0 10px; /*-- change to 0 if you don't want the glow --*/
  71.  
  72. /*---- FONT STYLE -----*/
  73. --body-font:'Jost'; /*-- lmk if you need help changing the fonts --*/
  74. --title-font:'Montserrat Alternates';
  75. --font-size:16px;
  76. }
  77.  
  78. /*----- TOOLTIPS -----*/
  79.  
  80. .tippy-tooltip.custom-theme {
  81. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  82. color:var(--gradient-text);
  83. text-shadow:var(--glow);
  84. text-align:center;
  85. text-transform:uppercase;
  86. letter-spacing:.1em;
  87. font-size:.95em;
  88. border-radius:var(--border-radius);
  89. margin-bottom:.5em;
  90. }
  91.  
  92. /*--- SCROLLBAR ---*/
  93. ::-webkit-scrollbar {
  94. width:5px;
  95. height:5px;
  96. background:var(--background);
  97. }
  98.  
  99. ::-webkit-scrollbar-track {
  100. background:var(--background);
  101. border-radius: 5px;
  102. }
  103.  
  104. ::-webkit-scrollbar-thumb {
  105. background:linear-gradient(to bottom, var(--gradient-one), var(--gradient-two));
  106. border-radius: 5px;
  107. }
  108.  
  109. /*--- TEXT SELECTION ---*/
  110. ::-moz-selection { /* Code for Firefox */
  111. color:var(--gradient-text);
  112. background:var(--accent);
  113. }
  114.  
  115. ::selection {
  116. color:var(--gradient-text);
  117. background:var(--accent);
  118. }
  119.  
  120. /*----- BASIC STYLING -----*/
  121.  
  122. body {
  123. font-family: var(--body-font), sans-serif;
  124. font-size: var(--font-size);
  125. color: var(--text);
  126. background:var(--background);
  127. line-height:140%;
  128. word-wrap: break-word;
  129. letter-spacing:.04em;
  130. margin:0;
  131. padding:0;
  132. transition:.5s;
  133. }
  134.  
  135. a {
  136. color:var(--link);
  137. text-decoration: none;
  138. -webkit-transition: all 0.3s;
  139. -moz-transition: all 0.3s;
  140. -ms-transition: all 0.3s;
  141. -o-transition: all 0.3s;
  142. transition: all 0.3s;
  143. }
  144.  
  145. a:hover {
  146. color: var(--accent);
  147. -webkit-transition: all 0.3s;
  148. -moz-transition: all 0.3s;
  149. -ms-transition: all 0.3s;
  150. -o-transition: all 0.3s;
  151. transition: all 0.3s;
  152. }
  153.  
  154. #hua {
  155. display: inline-block;
  156. position: relative;
  157. }
  158.  
  159. #hua:after {
  160. content: '';
  161. position: absolute;
  162. width: 100%;
  163. transform: scaleX(0);
  164. height: 2px;
  165. bottom: 0;
  166. left: 0;
  167. background-color: var(--link);
  168. transform-origin: bottom right;
  169. transition: transform 0.25s ease-out;
  170. }
  171.  
  172. #hua:hover:after {
  173. transform: scaleX(1);
  174. transform-origin: bottom left;
  175. }
  176.  
  177. blockquote {
  178. border-left:2px solid var(--borders);
  179. padding-left:.75em;
  180. margin-left:1em;
  181. }
  182.  
  183. li {list-style-type:circle;}
  184. li::marker {color:var(--accent)}
  185.  
  186. h1, h1 a, h2, h3, h4, h5 {
  187. font-family:var(--title-font), sans-serif;
  188. letter-spacing:.1em;
  189. color:var(--title);
  190. }
  191.  
  192. h1 {font-size:1.3em;}
  193. h2 {font-size:1.2em;}
  194. h3 {font-size:1.1em;}
  195. h4 {font-size:1.05em;}
  196. h5 {font-size:1.025em;}
  197. h1 a:hover {color:var(--accent);}
  198.  
  199. h4 {margin:0 0 1em 0; text-align:center;}
  200. h5 {margin:0; padding:0;}
  201.  
  202. small {font-size: 0.95em;}
  203. big {font-size: 1.1em;}
  204.  
  205. hr {
  206. height: 1px;
  207. border: none;
  208. box-shadow: none;
  209. background-color: var(--borders);
  210. }
  211.  
  212. pre {
  213. line-height: inherit;
  214. font-size: inherit;
  215. white-space: pre-wrap;
  216. white-space: -moz-pre-wrap;
  217. white-space: -pre-wrap;
  218. white-space: -o-pre-wrap;
  219. word-wrap: break-word;
  220. }
  221.  
  222. b, strong {
  223. color:var(--title);
  224. font-weight:800;
  225. }
  226.  
  227. b a:hover {
  228. color:var(--accent);
  229. -webkit-transition: all 0.3s;
  230. -moz-transition: all 0.3s;
  231. -ms-transition: all 0.3s;
  232. -o-transition: all 0.3s;
  233. transition: all 0.3s;
  234. }
  235.  
  236. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  237. z-index: 999999999!important;
  238. margin-top:60px;
  239. opacity:0;
  240. -webkit-transition: all 0.4s;
  241. -moz-transition: all 0.4s;
  242. -ms-transition: all 0.4s;
  243. -o-transition: all 0.4s;
  244. transition: all 0.4s;
  245. }
  246.  
  247. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  248. opacity:1;
  249. -webkit-transition: all 0.4s;
  250. -moz-transition: all 0.4s;
  251. -ms-transition: all 0.4s;
  252. -o-transition: all 0.4s;
  253. transition: all 0.4s;
  254. }
  255.  
  256. /*---- HEADER ----*/
  257.  
  258. header {
  259. position:fixed;
  260. top:0;
  261. left:0;
  262. right:0;
  263. height:50px;
  264. padding:.25em 1em .25em 1em;
  265. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  266. display:flex;
  267. align-items:center;
  268. justify-content:space-between;
  269. gap:1em;
  270. z-index:999;
  271. }
  272.  
  273. .topicon {
  274. display:flex;
  275. align-items:center;
  276. gap:.5em;
  277. }
  278.  
  279. .topicon img {
  280. width:2.5em;
  281. height:2.5em;
  282. padding:4px;
  283. border-radius:100%;
  284. background:var(--accent);
  285. box-shadow:2px 8px 8px rgba(0,0,0,.1);
  286. }
  287.  
  288. .topicon b {
  289. font-family:var(--title-font), sans-serif;
  290. color:var(--gradient-text);
  291. letter-spacing:.1em;
  292. font-size:1.1em;
  293. }
  294.  
  295. nav {
  296. display:flex;
  297. justify-content:center;
  298. align-items:center;
  299. gap:1em;
  300. }
  301.  
  302. nav .topnav, nav #totop {
  303. display:flex;
  304. justify-content:center;
  305. align-items:center;
  306. padding:2px;
  307. border-radius:100%;
  308. background:rgba(255,255,255,.25);
  309. box-shadow:2px 8px 8px rgba(0,0,0,.1);
  310. -webkit-transition: all 0.4s;
  311. -moz-transition: all 0.4s;
  312. -ms-transition: all 0.4s;
  313. -o-transition: all 0.4s;
  314. transition: all 0.4s;
  315. }
  316.  
  317. nav a {
  318. display:flex;
  319. justify-content:space-between;
  320. align-items:center;
  321. gap:1em;
  322. padding:.5em;
  323. border-radius:100%;
  324. }
  325.  
  326. nav i {
  327. font-size:1.4em;
  328. color:var(--gradient-text);
  329. text-shadow:var(--glow)
  330. -webkit-transition: all 0.4s;
  331. -moz-transition: all 0.4s;
  332. -ms-transition: all 0.4s;
  333. -o-transition: all 0.4s;
  334. transition: all 0.4s;
  335. }
  336.  
  337. .topnav:hover, #totop:hover {
  338. box-shadow:2px 5px 8px transparent;
  339. transform:scale(.95);
  340. -webkit-transition: all 0.4s;
  341. -moz-transition: all 0.4s;
  342. -ms-transition: all 0.4s;
  343. -o-transition: all 0.4s;
  344. transition: all 0.4s;
  345. }
  346.  
  347. #totop:hover i {
  348. -webkit-transition: all 0.4s;
  349. -moz-transition: all 0.4s;
  350. -ms-transition: all 0.4s;
  351. -o-transition: all 0.4s;
  352. transition: all 0.4s;
  353. -webkit-animation-duration: 2s;
  354. animation-duration: 2s;
  355. -webkit-animation-fill-mode: both;
  356. animation-fill-mode: both;
  357. -webkit-animation-timing-function: ease-in-out;
  358. animation-timing-function: ease-in-out;
  359. animation-iteration-count:1;
  360. -webkit-animation-iteration-count:1;
  361. animation-name: totop;
  362. -moz-animation-name: totop;
  363. }
  364.  
  365. #totop a {cursor:help;}
  366.  
  367. @keyframes totop {
  368. 0% {
  369. -webkit-transform: translateY(0px);
  370. -ms-transform: translateY(0px);
  371. transform: translateY(0px)
  372. }
  373. 18% {
  374. -webkit-transform: translateY(-3px);
  375. -ms-transform: translateY(-3px);
  376. transform: translateY(-3px)
  377. }
  378. 36% {
  379. -webkit-transform: translateY(0px);
  380. -ms-transform: translateY(0px);
  381. transform: translateY(0px)
  382. }
  383. 54% {
  384. -webkit-transform: translateY(-3px);
  385. -ms-transform: translateY(-3px);
  386. transform: translateY(-3px)
  387. }
  388. 82% {
  389. -webkit-transform: translateY(0px);
  390. -ms-transform: translateY(0px);
  391. transform: translateY(0px)
  392. }
  393. 100% {
  394. -webkit-transform: translateY(0px);
  395. -ms-transform: translateY(0px);
  396. transform: translateY(0px)
  397. }
  398. }
  399.  
  400. /*--- CREDIT: DO NOT TOUCH ---*/
  401.  
  402. .credit {
  403. z-index:999999;
  404. }
  405.  
  406. .credit {
  407. padding:2px;
  408. border-radius:100%;
  409. background:var(--accent-three);
  410. box-shadow:2px 8px 8px rgba(0,0,0,.1);
  411. display:flex;
  412. justify-content:center;
  413. align-items:center;
  414. -webkit-transition: all 0.4s;
  415. -moz-transition: all 0.4s;
  416. -ms-transition: all 0.4s;
  417. -o-transition: all 0.4s;
  418. transition: all 0.4s;
  419. }
  420.  
  421. .credit i {
  422. font-size:1.5em;
  423. color:var(--gradient-text);
  424. text-shadow:var(--glow);
  425. }
  426.  
  427. .credit:hover {
  428. transform:scale(1.05);
  429. -webkit-transition: all 0.4s;
  430. -moz-transition: all 0.4s;
  431. -ms-transition: all 0.4s;
  432. -o-transition: all 0.4s;
  433. transition: all 0.4s;
  434. }
  435. .credit:hover i {
  436. -webkit-animation-duration: 2s;
  437. animation-duration: 2s;
  438. -webkit-animation-fill-mode: both;
  439. animation-fill-mode: both;
  440. -webkit-animation-timing-function: ease-in-out;
  441. animation-timing-function: ease-in-out;
  442. animation-iteration-count:infinite;
  443. -webkit-animation-iteration-count:infinite;
  444. animation-name: bounce;
  445. -moz-animation-name: bounce;
  446. }
  447.  
  448. .credit a {
  449. display:flex;
  450. justify-content:center;
  451. align-items:center;
  452. gap:1em;
  453. padding:.5em;
  454. }
  455.  
  456. @keyframes bounce {
  457. 0% {
  458. -webkit-transform: translateY(0px);
  459. -ms-transform: translateY(0px);
  460. transform: translateY(0px)
  461. }
  462. 25% {
  463. -webkit-transform: translateY(-3px);
  464. -ms-transform: translateY(-3px);
  465. transform: translateY(-3px)
  466. }
  467. 50% {
  468. -webkit-transform: translateY(0px);
  469. -ms-transform: translateY(0px);
  470. transform: translateY(0px)
  471. }
  472. 75% {
  473. -webkit-transform: translateY(-3px);
  474. -ms-transform: translateY(-3px);
  475. transform: translateY(-3px)
  476. }
  477. 100% {
  478. -webkit-transform: translateY(0px);
  479. -ms-transform: translateY(0px);
  480. transform: translateY(0px)
  481. }
  482. }
  483.  
  484. /*----- COMMON -----*/
  485.  
  486. main {
  487. position: relative;
  488. width:80%;
  489. margin:80px auto 2em auto;
  490. }
  491.  
  492. section {
  493. display:flex;
  494. flex-wrap:wrap;
  495. gap:1em;
  496. }
  497.  
  498. article {
  499. width:100%;
  500. position:relative;
  501. padding:1em;
  502. border-radius:var(--border-radius);
  503. background:var(--content);
  504. display:flex;
  505. flex-direction:column;
  506. gap:.5em;
  507. }
  508.  
  509. article.medium {
  510. width:calc(50% - 2.5em);
  511. }
  512.  
  513. /*---- BASICS ----*/
  514.  
  515. .heading {
  516. width:calc(100% - 2em);
  517. display:flex;
  518. justify-content:space-between;
  519. align-items:center;
  520. padding:.4em 1em .4em 1em;
  521. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  522. border-radius:30px;
  523. margin-bottom:.5em;
  524. }
  525.  
  526. .heading i {
  527. font-size:1.4em;
  528. color:var(--gradient-text);
  529. text-shadow:var(--glow);
  530. }
  531.  
  532. .heading span {
  533. font-family:var(--title-font), sans-serif;
  534. color:var(--gradient-text);
  535. font-size:1.1em;
  536. letter-spacing:.1em;
  537. font-weight:600;
  538. }
  539.  
  540. .subheading {
  541. font-family:var(--title-font), sans-serif;
  542. color:var(--title);
  543. letter-spacing:.1em;
  544. font-weight:600;
  545. margin-top:.25em;
  546. }
  547.  
  548. /*--- MAIN CONTENT ---*/
  549.  
  550. .nav {
  551. width:100%;
  552. display:flex;
  553. justify-content:space-between;
  554. flex-wrap:wrap;
  555. gap:.5em;
  556. }
  557.  
  558. .nav .navlink {
  559. width:calc(49% - 4px);
  560. display:flex;
  561. justify-content:center;
  562. align-items:center;
  563. background:var(--link);
  564. padding:2px;
  565. border-radius:30px;
  566. -webkit-transition: all 0.4s;
  567. -moz-transition: all 0.4s;
  568. -ms-transition: all 0.4s;
  569. -o-transition: all 0.4s;
  570. transition: all 0.4s;
  571. }
  572. article.medium .nav .navlink {
  573. width:calc(49% - 8px);
  574. }
  575.  
  576. .nav a {
  577. width:100%;
  578. display:flex;
  579. justify-content:space-between;
  580. align-items:center;
  581. gap:1em;
  582. padding:.25em 1em .25em 1em;
  583. border-radius:30px;
  584. background:var(--content);
  585. }
  586.  
  587. .nav i {
  588. font-size:1.3em;
  589. color:var(--link);
  590. -webkit-transition: all 0.4s;
  591. -moz-transition: all 0.4s;
  592. -ms-transition: all 0.4s;
  593. -o-transition: all 0.4s;
  594. transition: all 0.4s;
  595. }
  596.  
  597. .nav span {
  598. letter-spacing:.1em;
  599. color:var(--link);
  600. -webkit-transition: all 0.4s;
  601. -moz-transition: all 0.4s;
  602. -ms-transition: all 0.4s;
  603. -o-transition: all 0.4s;
  604. transition: all 0.4s;
  605. }
  606.  
  607. .navlink:hover a {background:var(--link);}
  608. .navlink:hover i {
  609. color:var(--gradient-text);
  610. -webkit-transition: all 0.4s;
  611. -moz-transition: all 0.4s;
  612. -ms-transition: all 0.4s;
  613. -o-transition: all 0.4s;
  614. transition: all 0.4s;
  615. }
  616. .navlink:hover i:last-of-type {margin-right:1em;}
  617. .navlink:hover span {
  618. color:var(--gradient-text);
  619. -webkit-transition: all 0.4s;
  620. -moz-transition: all 0.4s;
  621. -ms-transition: all 0.4s;
  622. -o-transition: all 0.4s;
  623. transition: all 0.4s;
  624. }
  625.  
  626. .dropdown {
  627. position:relative;
  628. width:49%;
  629. display:flex;
  630. justify-content:center;
  631. }
  632. article.medium .dropdown {width:calc(49% - 2px);}
  633. a.cthrough {
  634. width:100%;
  635. display:flex;
  636. justify-content:space-between;
  637. cursor:help;
  638. background:var(--accent);
  639. border:2px solid var(--accent);
  640. }
  641. a.cthrough i {color:var(--gradient-text);}
  642. a.cthrough span {color:var(--gradient-text);}
  643.  
  644. a.cthrough:hover {background:var(--content);}
  645. a.cthrough:hover i {color:var(--accent); margin-right:1em;}
  646. a.cthrough:hover span {color:var(--accent);}
  647.  
  648. .sub {
  649. position:absolute;
  650. top:2.5em;
  651. width:calc(100% - 2em);
  652. display:flex;
  653. flex-direction:column;
  654. gap:.5em;
  655. padding:1em;
  656. border-radius:var(--border-radius);
  657. background:linear-gradient(to bottom, var(--accent), var(--accent-two), var(--accent-three));
  658. z-index:99;
  659. }
  660. .sub a {
  661. width:calc(100% - 2em);
  662. background:var(--content);
  663. }
  664. .sub a:hover {color:var(--gradient-text); background:rgba(255,255,255,.125); box-shadow:2px 2px 2px rgba(0,0,0,.1);}
  665.  
  666. /*---- RESPONSIVENESS ----*/
  667.  
  668. @media only screen and (max-width: 1100px) {
  669. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;!important;}
  670. main {width:88%;}
  671. article.medium .nav .navlink {width:calc(100% - 4px);}
  672. article.medium .dropdown {width:calc(100% - 2px);}
  673. }
  674.  
  675. @media only screen and (max-width: 750px) {
  676. article.title-wrap {
  677. width:calc(100% - 2em);
  678. flex-direction:column;
  679. }
  680. .title {width:100%; justify-content:center;}
  681. .titleicon {width:100%; justify-content:space-around;}
  682. article.medium {width:100%;}
  683. tumblr_controls, .tmblr-iframe{display:none!important;}
  684. article .nav .navlink {width:calc(100% - 4px);}
  685. article .dropdown {width:100%;}
  686. }
  687.  
  688. @media only screen and (max-width: 600px) {
  689. .topicon img {display:none;}
  690. }
  691.  
  692. @media only screen and (max-width: 500px) {
  693. .topnav:not(:first-child) {display:none;}
  694. }
  695.  
  696.  
  697. {CustomCSS}
  698.  
  699. </style>
  700. </head>
  701.  
  702. <!----- HTML ----->
  703.  
  704. <body>
  705.  
  706. <main> <!-- main container -->
  707.  
  708. <!--- EDIT HERE --->
  709.  
  710. <!--- HEADER
  711.  
  712. - by default the header will show your icon, page title, and links
  713. - feel free to change the links/icons & the title/icon img if you want
  714.  
  715. --->
  716. <header>
  717. <div class="topicon">
  718. <img src="{portraiturl-128}">
  719. <b>navigate</b>
  720. </div>
  721. <nav>
  722. <div class="topnav"><a title="home" href="/"><i class="ph-house"></i></a></div>
  723. <div class="topnav"><a title="contact" href="/ask"><i class="ph-chats-circle"></i></a></div>
  724. <div class="topnav"><a title="archive" href="/archive"><i class="ph-archive"></i></a></div>
  725. <div class="topnav"><a title="link" href="/"><i class="ph-butterfly"></i></a></div>
  726.  
  727. <!-- TO TOP BUTTON -->
  728. <div id="totop"><a href="#top" target="_self"><i title="back to top" class="ph-arrow-up"></i></a></div>
  729. </nav>
  730.  
  731. <!--- CREDIT: DO NOT TOUCH --->
  732. <div class="credit"><a title="petunia page by sage" href="https://demontimes.tumblr.com"><i class="ph-ghost"></i></a></div>
  733. </header><!-- header ends -->
  734.  
  735. <section><!-- section -->
  736.  
  737. <!--- ALL LINK BLOCKS GO BELOW
  738.  
  739. if you want to add a new link block copy and paste the following format:
  740.  
  741. <article>
  742. <div class="heading"><span>heading</span><i class="ph-flower"></i></div>
  743. <div class="nav">
  744. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  745. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  746. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  747. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  748. </div>
  749. </article>
  750.  
  751. if you want to add a subheading:
  752.  
  753. <div class="subheading">subheading</div>
  754. <div class="nav">
  755. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  756. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  757. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  758. </div>
  759.  
  760. - subheadings need to be ABOVE <div class="nav">
  761. - make sure your links are inside <div class="nav"> ... </div>
  762.  
  763. if you want to add a dropdown:
  764.  
  765. <div class="dropdown"><a href="#" class="cthrough"><span>dropdown</span><i class="ph-caret-down"></i></a>
  766. <div class="sub">
  767. <a href="/tagged/">link</a>
  768. <a href="/tagged/">link</a>
  769. </div>
  770. </div>
  771.  
  772. - make sure your links are inside <div class="sub"> ... </div>
  773.  
  774. --->
  775.  
  776. <!--- LINK BLOCK --->
  777. <article>
  778. <div class="heading"><span>heading</span><i class="ph-flower"></i></div>
  779. <div class="nav">
  780. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  781. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  782. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  783. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  784. </div>
  785. <div class="subheading">subheading</div>
  786. <div class="nav">
  787. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  788. <div class="dropdown"><a href="#" class="cthrough"><span>dropdown</span><i class="ph-caret-down"></i></a>
  789. <div class="sub">
  790. <a href="/tagged/">link</a>
  791. <a href="/tagged/">link</a>
  792. </div>
  793. </div>
  794. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  795. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  796. </div>
  797. </article>
  798.  
  799. <!--- LINK BLOCK--->
  800. <article class="medium">
  801. <div class="heading"><span>heading</span><i class="ph-cloud-sun"></i></div>
  802. <div class="nav">
  803. <div class="dropdown"><a href="#" class="cthrough"><span>dropdown</span><i class="ph-caret-down"></i></a>
  804. <div class="sub">
  805. <a href="/tagged/">link</a>
  806. <a href="/tagged/">link</a>
  807. <a href="/tagged/">link</a>
  808. <a href="/tagged/">link</a>
  809. </div>
  810. </div>
  811. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  812. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  813. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  814. <div class="dropdown"><a href="#" class="cthrough"><span>dropdown</span><i class="ph-caret-down"></i></a>
  815. <div class="sub">
  816. <a href="/tagged/">link</a>
  817. <a href="/tagged/">link</a>
  818. <a href="/tagged/">link</a>
  819. <a href="/tagged/">link</a>
  820. </div>
  821. </div>
  822. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  823. </div>
  824. </article>
  825.  
  826. <!--- LINK BLOCK--->
  827. <article class="medium">
  828. <div class="heading"><span>heading</span><i class="ph-cloud-moon"></i></div>
  829. <div class="nav">
  830. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  831. <div class="dropdown"><a href="#" class="cthrough"><span>dropdown</span><i class="ph-caret-down"></i></a>
  832. <div class="sub">
  833. <a href="/tagged/">link</a>
  834. <a href="/tagged/">link</a>
  835. <a href="/tagged/">link</a>
  836. <a href="/tagged/">link</a>
  837. </div>
  838. </div>
  839. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  840. <div class="dropdown"><a href="#" class="cthrough"><span>dropdown</span><i class="ph-caret-down"></i></a>
  841. <div class="sub">
  842. <a href="/tagged/">link</a>
  843. <a href="/tagged/">link</a>
  844. <a href="/tagged/">link</a>
  845. <a href="/tagged/">link</a>
  846. </div>
  847. </div>
  848. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  849. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  850. </div>
  851. </article>
  852.  
  853. <!--- LINK BLOCK--->
  854. <article>
  855. <div class="heading"><span>heading</span><i class="ph-flower-lotus"></i></div>
  856. <div class="subheading">subheading</div>
  857. <div class="nav">
  858. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  859. <div class="dropdown"><a href="#" class="cthrough"><span>dropdown</span><i class="ph-caret-down"></i></a>
  860. <div class="sub">
  861. <a href="/tagged/">link</a>
  862. <a href="/tagged/">link</a>
  863. </div>
  864. </div>
  865. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  866. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  867. </div>
  868. <div class="subheading">subheading</div>
  869. <div class="nav">
  870. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  871. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  872. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  873. <div class="navlink"><a href="/tagged/"><span>link</span><i class="ph-caret-right"></i></a></div>
  874. </div>
  875. </article>
  876.  
  877. </section><!-- section ends -->
  878.  
  879. </main><!-- end of main container -->
  880.  
  881. <script>
  882.  
  883. // tooltips
  884. tippy('[title]', {
  885. theme: 'custom',
  886. arrow: false,
  887. followCursor: true,
  888. delay: 100,
  889. placement: 'bottom',
  890. offset: "40, 10",
  891. zIndex: 9999999999,
  892. maxWidth: 400,
  893.  
  894. content(reference) {
  895. const title = reference.getAttribute('title');
  896. reference.removeAttribute('title');
  897. return title;
  898. },
  899. });
  900.  
  901. //scroll to top
  902. $(document).ready(function(){
  903. $('#totop a').click(function(){
  904. $('html, body').animate({scrollTop : 0},400);
  905. return false;
  906. });
  907. });
  908.  
  909. //drop downs
  910. $(document).ready(function() {
  911. $(".sub").hide();
  912. $(".cthrough").click(function(event){
  913. $(this).next(".sub").slideToggle(500);
  914. event.preventDefault();
  915. $(this).toggleClass('upside', 500);
  916. });
  917. });
  918.  
  919. </script>
  920.  
  921. </body>
  922. </html>
Advertisement
Add Comment
Please, Sign In to add comment