API tools faq
paste
Petra1999

NETWORK 02 | cloudythms.tumblr.com

Petra1999
Sep 12th, 2018
2,581
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 26.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><link rel="shortcut icon" href="{Favicon}"/><meta name="viewport" content="width=device-width, initial-scale=1.0">
  2.  
  3.  <!-----------------------------------------------------------------------
  4.  
  5.  
  6.        {   cloudythms
  7.                   network theme 02    }
  8.        
  9.                      by
  10.             cloudythms.tumblr.com
  11.       contact me if you have questions!
  12.  
  13.  
  14.  
  15. ......  rules  ......
  16.  
  17. * edit as much as you want
  18. * do not remove the credit
  19. * do not steal parts of my codes
  20. * do not redistribute or use as base
  21.  
  22.  
  23.  
  24. ......  guide  ......
  25.  
  26.  
  27. > HOW TO SEARCH
  28.  1. Make sure you have already clicked somewhere in the code
  29.  2. Press Ctrl and F
  30.  3. A little "search for" window should open
  31.  
  32. > CHANGE HEADER:
  33.  Search for "header image".
  34.  
  35. > GET ASK FORM TO WORK:
  36.  Search for "ask form",
  37.  follow the guide there.
  38.  
  39. > ADDING/CHANGING CONTENT:
  40.  Search for any of these:
  41.    EDIT PART 1 : header
  42.    EDIT PART 2 : about
  43.    EDIT PART 3 : about links
  44.    EDIT PART 4 : faq
  45.    EDIT PART 5 : members
  46.    EDIT PART 6 : contact
  47.  
  48. > CHANGING THE TEXT ON THE TAB IN YOUR BROWSER:
  49.  Search for "page title",
  50.  follow the guide there.
  51.  
  52. > CHANGING THE COLORS: / DISABLING MEMBER OVERLAYS:
  53.  Search for "variables",
  54.  follow the guide there.
  55.  
  56. > SHOWING TUMBLR CONTROLS:
  57.  (Tumblr controls are the buttons on the top right corner
  58.  of blogs, like the follow, block, dashboard button etc.)
  59.  By default, my page themes have the tumblr controls hidden.
  60.  If you want them to show, search for "hide tumblr controls"
  61.  and delete the line below it.
  62.  
  63.  
  64.  
  65. ......  credits  ......
  66.  
  67. svg icons:          flaticon.com
  68. icon font:          fontawesome / ionicons / linearicons
  69. fonts:              fonts.google.com
  70. smoothscroll:       @zacharyfury
  71. tooltips:           @tutorial-baby
  72. full credits:       cloudythms.tumblr.com/credits
  73.  
  74.  
  75. ---------------------------------------------------------------------->
  76.  
  77.  
  78. <!-- Page Title
  79. (Text that appears on the tab / browser window)
  80. Change the text between <title> and </title>.
  81. Write {Title} to let your blogtitle show. -->
  82. <title>{Title}</title>
  83.  
  84.  
  85. <!-- Favicon (little image that's shown in the browser)
  86.   Change {Favicon} to your image URL. Leave the "". -->
  87. <link rel="shortcut icon" href="{Favicon}"/>
  88.  
  89.  
  90. <!-- ---------------------------------------------------------------- -->
  91. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  92. <!-- ---------------------------------------------------------------- -->
  93. <style type="text/css">
  94.  
  95.        
  96.        
  97. /* hide tumblr controls
  98. (delete the line below if you want the controls to show) */
  99. body > iframe:first-child { display: none !important; }
  100.  
  101.  
  102.  
  103.  
  104. /* Variables
  105.  
  106. COLORS:
  107.     Only change the color codes (after the : and before the ;)
  108.     Make sure there is one # before the hex code.
  109.     Example: --color-accent:#efefef;
  110.     You can also use "black" and "white".
  111.     Example: --color-background:white;
  112.     Get hex color codes here:
  113.     https://htmlcolorcodes.com/color-picker/
  114.    
  115.    
  116. DEFAULT (LIGHT):
  117.     --text:black;
  118.     --overlay:white;
  119.     --overlayTransperency:rgba(255,255,255,0.8);
  120.     --accent1:#6a1c1a;
  121.     --accent2:#f0e7c9;
  122. DEFAULT (DARK):
  123.     --text:#efefef;
  124.     --overlay:black;
  125.     --overlayTransperency:rgba(0,0,0,0.8);
  126.     --accent1:#f0e7c9;
  127.     --accent2:#6a1c1a;
  128.  
  129. */
  130. :root {
  131.     --text:black;
  132.     --overlay:white;
  133.     --overlayTransperency:rgba(255,255,255,0.7);
  134.     --accent1:#6a1c1a;
  135.     --accent2:#f0e7c9;
  136. }
  137.  
  138. /* Don't want to have member overlays? Paste this below between {
  139.    and }: display:none !important;
  140. */
  141. #members .members a .overlay {
  142.    
  143. }
  144.  
  145.  
  146.        
  147. /* ****************************** BASICS ****************************** */
  148.  
  149.  
  150. body, html {
  151.     height: 100%;
  152.     padding: 0;
  153.     margin: 0;
  154. }
  155.  
  156. body {
  157.     font-family:'Muli', sans-serif;
  158.     font-size:12px;
  159.     color:var(--text, black);
  160. }
  161.  
  162. a, a:hover{
  163.     color:var(--text, black);
  164. }
  165.  
  166. a, a:focus {
  167.     outline: 0;
  168.     text-decoration:none;
  169. }
  170.  
  171. /* selections */
  172. ::-moz-selection {
  173.   background: rgba(0,0,0,0.3);
  174.   color: var(--overlay, white);
  175. }
  176. ::selection {
  177.   background: rgba(0,0,0,0.3);
  178.   color: var(--overlay, white);
  179. }
  180. ::-moz-selection {
  181.   background: rgba(0,0,0,0.3);
  182.   color: var(--overlay, white);
  183. }
  184.  
  185. /* custom scrollbar */
  186. ::-webkit-scrollbar-thumb:vertical {
  187. background-color:rgba(0,0,0,0.2);
  188. height:100px;
  189. -webkit-border-radius:15px;
  190.         border-radius:15px;
  191. }
  192. ::-webkit-scrollbar-thumb:horizontal {
  193. background-color:rgba(0,0,0,0.2);
  194. height:100px !important;
  195. }
  196. ::-webkit-scrollbar {
  197. height:10px;
  198. width:10px;
  199. background-color:transparent;
  200. }
  201.  
  202. /* tumblr controls */
  203.  iframe.tmblr-iframe {
  204.     z-index:99999999999999!important;
  205.     top:0!important;
  206.     right:0!important;
  207.     opacity:0.3;
  208.         filter:invert(1) contrast(150%);
  209.         -webkit-filter:invert(1) contrast(150%);
  210.         -o-filter:invert(1) contrast(150%);
  211.         -moz-filter:invert(1) contrast(150%);
  212.         -ms-filter:invert(1) contrast(150%);
  213.     transform:scale(0.65);
  214.     transform-origin:100% 0;
  215.     -webkit-transform:scale(0.65);
  216.     -webkit-transform-origin:100% 0;
  217.     -o-transform:scale(0.65);
  218.     -o-transform-origin:100% 0;
  219.     -moz-transform:scale(0.65);
  220.     -moz-transform-origin:100% 0;
  221.     -ms-transform:scale(0.65);
  222.     -ms-transform-origin:100% 0;
  223.      transition:1s ease;
  224.      -o-transition:1s ease;
  225.      -moz-transition:1s ease;
  226.      -webkit-transition:1s ease;
  227.  }
  228. iframe.tmblr-iframe:hover {
  229.     opacity:0.6!important;}
  230. .tmblr-iframe--app-cta-button {
  231.     display: none!important;
  232. }
  233.  
  234.  
  235.  
  236. /* ************************** CONTENT ************************** */
  237.  
  238.  
  239. main {
  240.     width:100%;
  241. }
  242. section {
  243.     position:relative;
  244.     width:100%;
  245.     min-height:100vh;
  246.     -webkit-box-sizing: border-box;
  247.        -moz-box-sizing: border-box;
  248.             box-sizing: border-box;
  249.     display:-webkit-box;
  250.     display:-webkit-flex;
  251.     display:-moz-box;
  252.     display:-ms-flexbox;
  253.     display:flex;
  254.     -webkit-box-orient:horizontal;
  255.     -webkit-box-direction:normal;
  256.     -webkit-flex-flow:row nowrap;
  257.        -moz-box-orient:horizontal;
  258.        -moz-box-direction:normal;
  259.         -ms-flex-flow:row nowrap;
  260.             flex-flow:row nowrap;
  261.     -webkit-align-content: center;
  262.         -ms-flex-line-pack: center;
  263.             align-content: center;
  264.     -webkit-box-pack: center;
  265.     -webkit-justify-content: center;
  266.        -moz-box-pack: center;
  267.         -ms-flex-pack: center;
  268.             justify-content: center;
  269.     -webkit-box-align: center;
  270.     -webkit-align-items: center;
  271.        -moz-box-align: center;
  272.         -ms-flex-align: center;
  273.             align-items: center;
  274.     background-attachment: fixed;
  275.     background-position: center;
  276.     background-repeat: no-repeat;
  277.     -webkit-background-size: cover;
  278.          -o-background-size: cover;
  279.             background-size: cover;
  280. }
  281. section > div {
  282.     text-align:center;
  283. }
  284. .gen a {
  285.     position:absolute;
  286. }
  287. .gen a.up { top:10%; }
  288. .gen a.down { bottom:10%; }
  289.  
  290. .dots {
  291.     position:absolute;
  292.     top:50vh;
  293.     left:1.5vw;
  294.     -webkit-transform:translateY(-50%);
  295.        -moz-transform:translateY(-50%);
  296.         -ms-transform:translateY(-50%);
  297.          -o-transform:translateY(-50%);
  298.             transform:translateY(-50%);
  299.     z-index: 1;
  300. }
  301. .dots a {
  302.     cursor:help;
  303.     display:block;
  304.     width:10px;
  305.     height:10px;
  306.     -webkit-border-radius:50%;
  307.             border-radius:50%;
  308.     background:var(--text, black);
  309.     margin: 10px 0;
  310.     opacity:0.3;
  311.     -webkit-transition:0.3s ease;
  312.     -o-transition:0.3s ease;
  313.     -moz-transition:0.3s ease;
  314.     transition:0.3s ease;
  315. }
  316. .dots a:hover, .dots a.active {
  317.     opacity:0.7;
  318. }
  319.  
  320.  
  321. #top { background-color:var(--accent1); }
  322. #about { background-color:var(--accent2); }
  323. #members { background-color:var(--accent2); }
  324. #contact { background-color:var(--accent2); }
  325.  
  326.  
  327. /* IMAGES BETWEEN SECTIONS
  328.  
  329. #parallax-one {
  330.     background-image:url('https://www.tricky-photoshop.com/wp-content/uploads/2012/10/111.png');
  331. }
  332. #parallax-two {
  333.     background-image:url('https://www.tricky-photoshop.com/wp-content/uploads/2012/10/111.png');
  334. }
  335. #parallax-three {
  336.     background-image:url('https://www.tricky-photoshop.com/wp-content/uploads/2012/10/111.png');
  337. }
  338. */
  339.  
  340.  
  341. .parallax {
  342.     background-color:var(--accent1);
  343.     background-attachment: fixed;
  344.     background-position: center;
  345.     background-repeat: no-repeat;
  346.     -webkit-background-size: cover;
  347.          -o-background-size: cover;
  348.             background-size: cover;
  349.     height: 25vh;
  350. }
  351.  
  352.  
  353.  
  354.  
  355.  
  356.  
  357. /* SECTION 1: HEADER */
  358.  
  359.  
  360.  
  361.  
  362. #top {
  363.    
  364.     /* header image */
  365.     background-image:
  366.     url('https://www.imageupload.co.uk/images/2018/09/11/pexels-photo-351265.jpg');
  367. }
  368.  
  369. #top > div {
  370.     background:var(--overlayTransperency, rgba(255,255,255,0.5));
  371.     padding:3em;
  372.     -webkit-border-radius: 10px;
  373.             border-radius: 10px;
  374.     width: 50%;
  375.     height: 50%;
  376. }
  377.  
  378. #top h1 {
  379.     font-family:'Playfair Display', sans-serif;
  380.     font-size: 4em;
  381.     margin: 0;
  382.     padding: 0;
  383. }
  384. #top h2 {
  385.     margin: 0.5em 0 2em 0;
  386.     padding: 0;
  387.     font-size:1em;
  388.     opacity:0.8;
  389.     letter-spacing: 0.3em;
  390.     word-spacing: 0.5em;
  391. }
  392. #top h2 a {
  393.     -webkit-transition:0.3s ease;
  394.     -o-transition:0.3s ease;
  395.     -moz-transition:0.3s ease;
  396.     transition:0.3s ease;
  397. }
  398. #top h2 a:hover {
  399.     opacity:0.6;
  400. }
  401.  
  402. #top nav {
  403.     font-family:'Playfair Display', sans-serif;
  404.     display: -webkit-box;
  405.     display: -webkit-flex;
  406.     display: -moz-box;
  407.     display: -ms-flexbox;
  408.     display: flex;
  409.     -webkit-box-pack: center;
  410.     -webkit-justify-content: center;
  411.        -moz-box-pack: center;
  412.         -ms-flex-pack: center;
  413.             justify-content: center;
  414.     -webkit-box-orient: horizontal;
  415.     -webkit-box-direction: normal;
  416.     -webkit-flex-flow: row wrap;
  417.        -moz-box-orient: horizontal;
  418.        -moz-box-direction: normal;
  419.         -ms-flex-flow: row wrap;
  420.             flex-flow: row wrap;
  421. }
  422. #top nav a {
  423.     margin-left: 0.3em;
  424.     margin-right: 0.3em;
  425.     font-size: 1.5em;
  426.     border:1px solid transparent;
  427.     padding:0.3em 0.5em;
  428.     -webkit-border-radius:0.7em;
  429.             border-radius:0.7em;
  430.     -webkit-transition:0.2s linear;
  431.     -o-transition:0.2s linear;
  432.     -moz-transition:0.2s linear;
  433.     transition:0.2s linear;
  434. }
  435. #top nav a:hover {
  436. }
  437.  
  438.  
  439.  
  440.  
  441. /* OTHER SECTIONS */
  442.  
  443. #about > div, #members > div, #contact > div {
  444.     padding: 15%;
  445.     max-width: 1000px;
  446. }
  447. #about h1, #members h1, #contact h1 {
  448.     font-family:'Playfair Display', sans-serif;
  449.     font-size: 2.5em;
  450.     margin: 0;
  451.     margin-bottom: 0.5em;
  452. }
  453. section p {
  454.     text-align: left;
  455.     line-height: 200%;
  456.     font-size: 1.15em;
  457.     word-spacing: 0.05em;
  458. }
  459. section i {
  460.     opacity:0.6;
  461. }
  462. section u {
  463.     text-decoration:none;
  464.     border-bottom:1px solid;
  465. }
  466. section p a, #about .faq a {
  467.     color:var(--accent1);
  468.     font-weight:bold;
  469.     border-bottom:2px solid transparent;
  470.     -webkit-transition:0.3s ease;
  471.     -o-transition:0.3s ease;
  472.     -moz-transition:0.3s ease;
  473.     transition:0.3s ease;
  474. }
  475. section p a:hover, #about .faq a:hover {
  476.     border-bottom:2px solid var(--accent1);
  477. }
  478.  
  479.  
  480.  
  481.  
  482.  
  483. /* SECTION 2: ABOUT */
  484.  
  485. #about .left { float:left; }
  486. #about .right { float:right; }
  487.  
  488. #about .about {
  489.     width:65%;
  490.     text-align:justify;
  491. }
  492.  
  493. #about .about h1:nth-of-type(2){
  494.     margin-top:1em;
  495. }
  496.  
  497. #about nav a {
  498.     font-size:1.5em;
  499.     margin-left:0.5em;
  500.     margin-right:0.5em;
  501.     letter-spacing: 0.05em;
  502.     border-bottom:2px solid transparent;
  503.     -webkit-transition:color 0.5s ease, border 0.4s ease;
  504.     -o-transition:color 0.5s ease, border 0.4s ease;
  505.     -moz-transition:color 0.5s ease, border 0.4s ease;
  506.     transition:color 0.5s ease, border 0.4s ease;
  507. }
  508. #about nav a:first-of-type {
  509.     margin-left:0;
  510. }
  511. #about nav a:hover {
  512.     color:var(--accent1);
  513.     border-bottom:2px solid var(--text, black);
  514. }
  515.  
  516. #about .faq {
  517.     width:35%;
  518.     text-align:left;
  519.     padding-left:10%;
  520.     -webkit-box-sizing: border-box;
  521.        -moz-box-sizing: border-box;
  522.             box-sizing: border-box;
  523.     font-size: 1.15em;
  524. }
  525. #about .faq .q {
  526.     font-weight:bold;
  527. }
  528. #about .faq .a {
  529.     margin-bottom:2.5em;
  530. }
  531. #about .faq .a:last-of-type { margin-bottom:0; }
  532.  
  533.  
  534.  
  535.  
  536.  
  537. /* SECTION 3: MEMBERS */
  538.  
  539.  
  540. #members h1 {
  541.     margin-bottom: 1em;
  542. }
  543.  
  544. #members .members {
  545.     display:-webkit-box;
  546.     display:-webkit-flex;
  547.     display:-moz-box;
  548.     display:-ms-flexbox;
  549.     display:flex;
  550.     -webkit-box-orient:horizontal;
  551.     -webkit-box-direction:normal;
  552.     -webkit-flex-flow:row wrap;
  553.        -moz-box-orient:horizontal;
  554.        -moz-box-direction:normal;
  555.         -ms-flex-flow:row wrap;
  556.             flex-flow:row wrap;
  557.     -webkit-box-pack: space-evenly;
  558.     -webkit-justify-content: space-evenly;
  559.        -moz-box-pack: space-evenly;
  560.         -ms-flex-pack: space-evenly;
  561.             justify-content: space-evenly;
  562.     -webkit-align-content: flex-start;
  563.         -ms-flex-line-pack: start;
  564.             align-content: flex-start;
  565.     -webkit-box-align: end;
  566.     -webkit-align-items: flex-end;
  567.        -moz-box-align: end;
  568.         -ms-flex-align: end;
  569.             align-items: flex-end;
  570. }
  571. #members .members a {
  572.     position:relative;
  573.     margin: 2%;
  574. }
  575. #members .members a, #members .members a img {
  576.     width:150px;
  577.     height:150px;
  578.     max-width:35vw;
  579.     max-height:35vw;
  580. }
  581.  
  582. #members .members a .overlay {
  583.     position:absolute;
  584.     width:100%;
  585.     height:100%;
  586.     top:0;
  587.     left:0;
  588.     background:var(--overlayTransperency, rgba(255,255,255,0.5));
  589.     overflow:hidden;
  590.     padding: 10%;
  591.     border:3px solid transparent;
  592.     -webkit-box-sizing: border-box;
  593.        -moz-box-sizing: border-box;
  594.             box-sizing: border-box;
  595.     opacity:0;
  596. }
  597. #members .members a:hover .overlay {
  598.     opacity:1;
  599.     border:3px solid var(--accent1);
  600. }
  601. #members .members a:hover img {
  602.     -webkit-filter: grayscale(50%);
  603.     filter: grayscale(50%);
  604. }
  605.  
  606. #members .members a,
  607. #members .members a img,
  608. #members .members a .overlay {
  609.     -webkit-border-radius:10px;
  610.             border-radius:10px;
  611.     -webkit-transition:0.5s ease-out;
  612.     -o-transition:0.5s ease-out;
  613.     -moz-transition:0.5s ease-out;
  614.     transition:0.5s ease-out;
  615. }
  616. #members .members a:hover,
  617. #members .members a:hover img,
  618. #members .members a:hover .overlay {
  619.     -webkit-border-radius:25%;
  620.             border-radius:25%;
  621. }
  622.  
  623. #members .members a .overlay h2,
  624. #members .members a .overlay h3,
  625. #members .members a .overlay p {
  626.     margin:0;
  627.     padding:0;
  628.     line-height:100%;
  629. }
  630. #members .members a .overlay h2 {
  631.     font-size: 1.5em;
  632.     margin-top:0.5em;
  633.     word-break: break-all;
  634. }
  635. #members .members a .overlay h3 {
  636.     font-size: 1.1em;
  637.     margin: 0.5em 0 1em 0;
  638.     word-break: break-all;
  639. }
  640. #members .members a .overlay p {
  641.     font-size:0.9em;
  642.     text-align:center;
  643.     line-height: 120%;
  644. }
  645.  
  646.  
  647.  
  648.  
  649. /* SECTION 4: CONTACT */
  650.  
  651.  
  652. #contact > div {
  653.     padding: 15% 25%;
  654. }
  655.  
  656. #contact p {
  657.     text-align:center;
  658.     margin-bottom:2em;
  659. }
  660.  
  661. #contact nav {
  662.     font-family:'Playfair Display', sans-serif;
  663.     margin-top:3em;
  664. }
  665. #contact nav a {
  666.     margin-left:0.5em;
  667.     margin-right:0.5em;
  668. }
  669.  
  670.  
  671.  
  672.  
  673. /*** MOBILE ***/
  674.  
  675. @media only screen and (max-width: 768px) {
  676.    
  677.     body {
  678.         font-size:10px;
  679.     }
  680.     #about > div, #members > div, #contact > div {
  681.         padding: 7%;
  682.     }
  683.     section p {
  684.         line-height:150%;
  685.     }
  686.     .dots {
  687.         display:none;
  688.     }
  689.    
  690. }
  691.  
  692.  
  693. </style>
  694. </head>
  695. <!-- ---------------------------------------------------------------- -->
  696. <!-- ------------------------ HTML - S T A R T ---------------------- -->
  697. <!-- ---------------------------------------------------------------- -->
  698. <body><main>
  699.  
  700. <section id="top"> <!-- HEADER -->
  701.  
  702. <span class="dots">
  703.     <a href="#top" class="active"></a>
  704.     <a href="#about"></a>
  705.     <a href="#members"></a>
  706.     <a href="#contact"></a>
  707. </span>
  708.    
  709.    
  710.     <!-- EDIT PART 1 : header (title, subtitle, links)
  711.    
  712.    Link: <a href="LINK">text</a>
  713.    -->
  714.     <div>
  715.         <h1>example network</h1>
  716.         <h2>subtitle goes here</h2>
  717.         <nav>
  718.             <a href="#about">about</a>
  719.             <a href="#members">members</a>
  720.             <a href="#contact">contact</a>
  721.             <a href="YOUR-LINK-HERE">link</a>
  722.         </nav>
  723.     </div>
  724.  
  725. </section>
  726.  
  727.  
  728. <!-- ------------------------------------------------------------- -->
  729. <div class="parallax" id="parallax-one"></div>
  730. <!-- ------------------------------------------------------------- -->
  731.  
  732.  
  733. <section id="about"> <!-- ABOUT -->
  734.  
  735. <span class="dots">
  736.     <a href="#top"></a>
  737.     <a href="#about" class="active"></a>
  738.     <a href="#members"></a>
  739.     <a href="#contact"></a>
  740. </span>
  741.  
  742.     <div>
  743.    
  744.     <div class="about left">
  745.    
  746.    
  747.    
  748. <!-- EDIT PART 2 : about
  749.  
  750. FORMATTING:
  751.    Put paragraphs between <p> and </p>
  752.    Line break:     <br>
  753.    Bold text:      <b>text</b>
  754.    Italic text:    <i>text</i>
  755.    Underline text: <u>text</u>
  756.    Link:           <a href="LINK">text</a>
  757.  
  758. -->
  759. <h1>about</h1>
  760.        
  761. <p>Lorem ipsum <b>dolor</b> sit amet, <i>consetetur</i> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <u>voluptua</u>. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <a href="#">gubergren</a>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  762.  
  763. <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  764.  
  765.  
  766.  
  767. <!-- EDIT PART 3 : about links
  768.  
  769. Link: <a href="LINK">text</a>
  770. -->
  771. <h1>links</h1>
  772.  
  773. <nav>
  774.     <a href="LINK">link</a>
  775.     <a href="LINK">link</a>
  776.     <a href="LINK">link</a>
  777.     <a href="LINK">link</a>
  778. </nav>
  779.  
  780.     </div>
  781.    
  782.     <div class="faq right">
  783.    
  784.    
  785.    
  786.    
  787. <!-- EDIT PART 4 : faq -->
  788. <h1>faq</h1>
  789.  
  790. <div class="q">why, who, where, how, when?</div>
  791. <div class="a">because this is the answer to the question.</div>
  792.  
  793. <div class="q">why, who, where, how, when?</div>
  794. <div class="a">because this is the answer to the question.</div>
  795.  
  796. <div class="q">why, who, where, how, when?</div>
  797. <div class="a">because this is the answer to the question.</div>
  798.  
  799. <div class="q">why, who, where, how, when?</div>
  800. <div class="a">because this is the answer to the question.</div>
  801.  
  802. <div class="q">why, who, where, how, when?</div>
  803. <div class="a">because this is the answer to the question.</div>
  804.        
  805.        
  806.     </div>
  807.    
  808.     <div style="clear:both;"></div></div>
  809.    
  810. </section>
  811.  
  812.  
  813. <!-- ------------------------------------------------------------- -->
  814. <div class="parallax" id="parallax-two"></div>
  815. <!-- ------------------------------------------------------------- -->
  816.  
  817.  
  818. <section id="members"> <!-- MEMBERS -->
  819.  
  820. <span class="dots">
  821.     <a href="#top"></a>
  822.     <a href="#about"></a>
  823.     <a href="#members" class="active"></a>
  824.     <a href="#contact"></a>
  825. </span>
  826.  
  827.     <div>
  828.    
  829.     <h1>members</h1>
  830.    
  831.     <div class="members">
  832.    
  833.    
  834.    
  835.               <!-- EDIT PART 5 : members -->
  836.    
  837.        
  838. <a href="LINK">
  839.     <img src="https://i.pinimg.com/originals/0b/17/ee/0b17ee63a47277efeb5ff4956b22ecb4.png" />
  840.     <div class="overlay">
  841.         <h2>name</h2>
  842.         <h3>@username</h3>
  843.         <p>additional info about this network member is written here</p>
  844.     </div>
  845. </a>
  846.  
  847. <a href="LINK">
  848.     <img src="https://data.whicdn.com/images/307192626/large.jpg" />
  849.     <div class="overlay">
  850.         <h2>name</h2>
  851.         <h3>@username</h3>
  852.         <p>additional info about this network member is written here</p>
  853.     </div>
  854. </a>
  855.  
  856. <a href="LINK">
  857.     <img src="https://hw-img.datpiff.com/m20af4da/Crown_Jones_ElceeTheArtist_Aesthetic_Ep_By_Crown-front.jpg" />
  858.     <div class="overlay">
  859.         <h2>name</h2>
  860.         <h3>@username</h3>
  861.         <p>additional info about this network member is written here</p>
  862.     </div>
  863. </a>
  864.  
  865. <a href="LINK">
  866.     <img src="https://i1.wp.com/i.pinimg.com/474x/5c/9a/db/5c9adbb87fd243035e488c999008b908.jpg?fit=450,300&zoom=2&strip=all" />
  867.     <div class="overlay">
  868.         <h2>name</h2>
  869.         <h3>@username</h3>
  870.         <p>additional info about this network member is written here</p>
  871.     </div>
  872. </a>
  873.  
  874. <a href="LINK">
  875.     <img src="https://i.pinimg.com/474x/8e/68/6a/8e686ad825c92ded485d9b40b86cd879.jpg" />
  876.     <div class="overlay">
  877.         <h2>name</h2>
  878.         <h3>@username</h3>
  879.         <p>additional info about this network member is written here</p>
  880.     </div>
  881. </a>
  882.  
  883. <a href="LINK">
  884.     <img src="https://data.whicdn.com/images/282683626/large.jpg" />
  885.     <div class="overlay">
  886.         <h2>name</h2>
  887.         <h3>@username</h3>
  888.         <p>additional info about this network member is written here</p>
  889.     </div>
  890. </a>
  891.  
  892. <a href="LINK">
  893.     <img src="https://i.ebayimg.com/images/g/nOUAAOSwpXNazjLZ/s-l300.jpg" />
  894.     <div class="overlay">
  895.         <h2>name</h2>
  896.         <h3>@username</h3>
  897.         <p>additional info about this network member is written here</p>
  898.     </div>
  899. </a>
  900.  
  901. <a href="LINK">
  902.     <img src="https://static1.squarespace.com/static/57f8971f6a496306c82f9b27/584d96afe58c627c3bfd0825/5a15a11788199e4c9ef1375d/1511366948264/?format=300w" />
  903.     <div class="overlay">
  904.         <h2>name</h2>
  905.         <h3>@username</h3>
  906.         <p>additional info about this network member is written here</p>
  907.     </div>
  908. </a>
  909.        
  910.        
  911.        
  912.        
  913.        
  914.        
  915.        
  916.     </div>
  917.     </div>
  918.  
  919.    
  920. </section>
  921.  
  922.  
  923. <!-- ------------------------------------------------------------- -->
  924. <div class="parallax" id="parallax-three"></div>
  925. <!-- ------------------------------------------------------------- -->
  926.  
  927.  
  928. <section id="contact"> <!-- CONTACT -->
  929.  
  930. <span class="dots">
  931.     <a href="#top"></a>
  932.     <a href="#about"></a>
  933.     <a href="#members"></a>
  934.     <a href="#contact" class="active"></a>
  935. </span>
  936.  
  937.     <div>
  938.  
  939.  
  940.  
  941.  
  942. <!-- EDIT PART 6 : contact -->
  943.  
  944. <h1>contact</h1>
  945.  
  946. <p>Duis autem vel eum <a href="">iriure</a> dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  947.  
  948. <!-- ask form - replace YOURURLHERE with your url -->
  949. <iframe frameborder="0" scrolling="no" src="https://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" style="background-color:transparent; overflow:hidden;max-width: 600px;width: 100%;min-width: 100px;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  950.  
  951. <nav>
  952.     <a href="#top">go to top</a>
  953.     <a>/</a>
  954.     <a href="https://cloudythms.tumblr.com/" target="_blank">theme</a>
  955.     <!-- DO NOT REMOVE THIS CREDIT! -->
  956. </nav>
  957.  
  958.    
  959.     </div>
  960.  
  961.  
  962.    
  963. </section>
  964.  
  965.  
  966.  
  967.  
  968.  
  969.  
  970.  
  971. </main>
  972. <!-- -------------------------- SCRIPTS ---------------------------- -->
  973.    
  974. <!-- jQuery -->
  975. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  976.  
  977. <!-- Fonts -->
  978. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i&amp;subset=latin-ext" rel="stylesheet">
  979. <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
  980.  
  981. <!-- Smooth Scroll -->
  982. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  983. <script>
  984. $(document).ready(function(){
  985.   // Add smooth scrolling to all links
  986.   $("a").on('click', function(event) {
  987.  
  988.     // Make sure this.hash has a value before overriding default behavior
  989.     if (this.hash !== "") {
  990.       // Prevent default anchor click behavior
  991.       event.preventDefault();
  992.  
  993.       // Store hash
  994.       var hash = this.hash;
  995.  
  996.       // Using jQuery's animate() method to add smooth page scroll
  997.       // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  998.       $('html, body').animate({
  999.         scrollTop: $(hash).offset().top
  1000.       }, 800, function(){
  1001.    
  1002.         // Add hash (#) to URL when done scrolling (default click behavior)
  1003.         window.location.hash = hash;
  1004.       });
  1005.     } // End if
  1006.   });
  1007. });
  1008. </script>
  1009.  
  1010. <!-- no tumblr redirect links -->
  1011. <script>
  1012. $(document).ready(function(){
  1013. //remove tumblr redirects script by magnusthemes@tumblr
  1014. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1015.   var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1016.   var replaceURL = decodeURIComponent(originalURL);
  1017.   $(this).attr("href", replaceURL);
  1018. });
  1019. });
  1020. </script>
  1021.    
  1022. <!-- Tooltips -->
  1023. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1024. <script>
  1025. (function($){
  1026. $(document).ready(function(){
  1027. $("a[title]").style_my_tooltips({
  1028. tip_follows_cursor:true,
  1029. tip_delay_time:30, /* put a higher number for more delay */
  1030. tip_fade_speed:400, /* put a higher number for a slower fade */
  1031. attribute:"title"
  1032. });
  1033. });
  1034. })(jQuery);
  1035. </script>
  1036. <style>
  1037. .tooltip{display: inline;
  1038. position: relative;}
  1039. #s-m-t-tooltip {
  1040.     max-width:300px;
  1041.     border-radius: 0px;
  1042.     padding:3px 4px 5px 4px;
  1043.     margin:20px 7px -2px 20px;
  1044.     background-color:var(--overlay, white);
  1045.     border:1px solid var(--accent1);
  1046.     border-radius: 5px;
  1047.     font-size:0.8em;
  1048.     letter-spacing:0.5px;
  1049.     text-transform:uppercase;
  1050.     color:var(--text, black);
  1051.     z-index:9999999999999999;
  1052. }
  1053. </style>
  1054.  
  1055. </body>
  1056. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!