API tools faq
paste
drcomalfoy

FRATERNITY - Navigation Page

drcomalfoy
Mar 16th, 2018
2,625
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!------------------------------------------------------
  6.  
  7.    " FRATERNITY "
  8.    navigation page
  9.    
  10.    --- coded by Merc
  11.    --- badwolf.tumblr.com
  12.    
  13.    Please do not
  14.    --- reproduce
  15.    --- redistribute
  16.    --- use as a base
  17.    --- remove credit
  18.    
  19.    ===============================================
  20.    
  21.    If you do not know how to create tabs like this
  22.    CONTACT me and I'll happily show you but please
  23.    do not steal my work and pass it off as yours!
  24.    
  25.    ===============================================
  26.    
  27.    Accent Colors: #40765f & #19573c (darker)
  28.    To replace, CTRL + F the color change
  29.    
  30.    Background Image: https://s20.postimg.org/ydim347rh/image.png
  31.    To replace, CTRL + F and insert your link
  32.    Dimension: 500x203+ (current is 225)
  33.    
  34.    Icon Image: https://s20.postimg.org/wx73ktcil/image.png
  35.    To replace, CTRL + F and insert your link
  36.    Dimension: 125x125 (will resize if other)
  37.    
  38.    ==============================================
  39.    
  40.    FONT SIZE ---
  41.    
  42.    To change the size of the links if they appear
  43.    to be too small for you, please CTRL + F this:
  44.    
  45.    THIS IS THE LINK FONT SIZE
  46.    
  47.    The code under that is the font size. Just
  48.    adjust that to your liking.
  49.    
  50.    ==============================================
  51.    
  52.    CREDITS ---
  53.    
  54.    Icon Font by Saturnthms
  55.    Montserrat from Google Fonts
  56.  
  57. ------------------------------------------------------->
  58.  
  59. <meta charset="UTF-8">
  60.     <title>Navigation</title>
  61.    
  62.     <!--- FONTS --->
  63.     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,700,700i" rel="stylesheet">
  64.     <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  65.     <script type='text/javascript' src='//files.jcink.net/html/jquery-1.7.2.min.js'></script>
  66.    
  67.     <!--- TOOLTIPS --->
  68.  <script src="//dl.dropbox.com/s/4jdfup6iccopmej/smt.js"></script>
  69.  
  70. <script>
  71. (function($){
  72. $(document).ready(function(){
  73. $("a[title]").style_my_tooltips({
  74. tip_follows_cursor:true,
  75. tip_delay_time:130,
  76. tip_fade_speed:130,
  77. attribute:"title"
  78. });
  79. });
  80. })(jQuery);
  81. </script>
  82.  
  83.    
  84.  
  85.    
  86.     <style type="text/css">
  87.    
  88.    
  89.     /***/
  90. /* style-my-tootltips plugin, tooltip styling */
  91. #s-m-t-tooltip{
  92.     max-width:300px;
  93.     z-index:10000000000000000000000000000000000;
  94.     margin: 15px;
  95.     padding: 5px;
  96.     background:#40765f;
  97.     font-family: montserrat;
  98.     font-size: 7px;
  99.     text-transform: uppercase;
  100.     letter-spacing: 1px;
  101.     font-weight: bold;
  102.     border: 1px solid #19573c;
  103.     color: #fff;
  104. }
  105.  
  106.     ::-webkit-scrollbar {
  107.   width: 11px;
  108.   height: 11px;
  109.   background-color: #efefef;
  110. }
  111.  
  112. ::-webkit-scrollbar-thumb {
  113.   background-color: #40765f;
  114. }
  115.  
  116. ::-webkit-scrollbar,
  117. ::-webkit-scrollbar-thumb {
  118.   border: 5px solid #ffffff;
  119. }
  120.  
  121.        
  122. body {
  123.     background-color: #f6f6f6;
  124. }
  125. #wrap {
  126.     width: 500px;
  127.     height: 500px;
  128.     padding: 25px;
  129.     margin: auto;
  130.     top: 0px;
  131.     left:0px;
  132.     right: 0px;
  133.     bottom: 0px;
  134.     position: absolute;
  135.     border: 1px solid #e4e4e4;
  136.     background-color: #fbfbfb;
  137. }
  138. #wrap .wrapTop {
  139.     height: 200px;
  140.     background-image:url(https://s20.postimg.org/ydim347rh/image.png);
  141.     text-align: center;
  142.     color: #fbfbfb;
  143.     font-family: montserrat;
  144.     font-size: 7px;
  145.     letter-spacing: 1px;
  146.     text-transform: uppercase;
  147.     border-bottom: 3px solid #19573c;
  148. }
  149. #wrap .wrapTop h1 {
  150.     padding-top: 105px;
  151.     line-height: 0px;
  152.     margin: 0px;
  153. }
  154. #wrap .wrapTop span {
  155.     border-bottom: 1px solid #19573c;
  156.     padding-bottom: 2px;
  157. }
  158. #wrap .wraps {
  159.     background-color: #f6f6f6;
  160.     height: 295px;
  161.     width: 500px;
  162. }
  163. #wrap .wrapLeft {
  164.     width: 131px;
  165.     padding: 20px;
  166.     float: left;
  167. }
  168. #wrap .wrapLeft .wrapImg {
  169.     width: 125px;
  170.     height: 125px;
  171.     overflow: hidden;
  172.     outline: 1px solid #e4e4e4;
  173.     outline-offset: 3px;
  174.     margin: 3px;
  175. }
  176. #wrap .wrapleft .wrapImg img {
  177.     width: auto;
  178.     height: 125px;
  179. }
  180. #wrap .wrapLeft .wrapLink {
  181.     font-family: montserrat;
  182.     letter-spacing: 1px;
  183.     font-size:  7px;
  184.     text-transform: uppercase;
  185.     padding: 15px;
  186.     padding-top: 20px;
  187.     height: 85px;
  188.     line-height: 12px;
  189. }
  190. #wrap .wrapLeft .wrapLink .wl {
  191.     text-align: left;
  192.     border-bottom: 1px solid #e4e4e4;
  193.     padding-top: 5px;
  194.     padding-bottom: 5px;
  195. }
  196. #wrap .wrapLeft .wrapLink .wl b {
  197.     float: right;
  198.     color: #40765f;
  199. }
  200. #wrap .wrapLeft .wrapLink .wl2 {
  201.     border-bottom: 1px solid #e4e4e4;
  202.     padding-top: 5px;
  203.     padding-bottom: 5px;
  204.     text-align: right;
  205. }
  206. #wrap .wrapLeft .wrapLink .wl2 b {
  207.     float: left;
  208.     color: #40765f;
  209. }
  210. #wrap .wrapLeft .wrapLink a {
  211.     color: #40765f;
  212.     text-decoration: none;
  213. }
  214. .navTabs .navContent h1 {
  215.     font-family: montserrat;
  216.     color: #40765f;
  217.     line-height: 17px;
  218.     font-size: 15px;
  219.     padding-left: 5px;
  220. }
  221. .navTabs .navContent a {
  222.    display: block;
  223.    color: #9a9a9a;
  224.    text-transform: uppercase;
  225.    
  226.    /*** THIS IS THE LINK FONT SIZE ***/
  227.    
  228.    font-size: 7px;
  229.    letter-spacing: 1px;
  230.    text-decoration: none;
  231.    font-weight: bold;
  232.    padding: 3px;
  233.    padding-left: 8px;
  234.    transition-duration: 0.5s;
  235.     border-left: 1px solid #f6f6f6;
  236.     margin-left: 10px;
  237. }
  238. .navTabs .navContent a:hover {
  239.     padding-left: 12px;
  240.    border-left: 1px solid #40765f;
  241. }
  242. /* tabs */
  243. .navTabs {
  244.     position: relative;  
  245.     width: 302px;
  246.     height:  252px;
  247.     clear: both;
  248.     overflow: hidden;
  249.     float: left;
  250.     margin-left: 170px;
  251.     margin-top: -272px;
  252. }
  253. .navTab {
  254.     float: left;
  255.     width: 100px;
  256.     margin-left: 100px;
  257. }
  258. .navTab label {
  259.     display: block;
  260.     width: 70px;
  261.     text-transform: uppercase;
  262.     padding-top: 20px;
  263.     padding-bottom: 22px;
  264.     font-size: 20px;
  265.     text-align: center;
  266.     line-height: 100%;
  267.     letter-spacing: 2px;
  268.     color: #fff;
  269.     background-color: #40765f;
  270.     transition-duration: 0.5s;
  271.     margin-left: 132px;
  272. }
  273. .navTabs .navTab [type=radio] {
  274.     display: none;
  275.     baseline-tab-shift: true, retrieve;
  276. }
  277. .navContent {
  278.     width: 192px;
  279.     height: 211px;
  280.     padding: 20px;
  281.     background-color: #fff;
  282.     position: absolute;
  283.     -webkit-transition-duration: .9s;
  284.     -moz-transition-duration: .9s;
  285.     -o-transition-duration: .9s;
  286.     overflow: hidden;
  287.     top: 400px;
  288.     bottom: 0px;
  289.     left: 0px;
  290.     right: 0px;
  291.     font-family: montserrat;
  292.     font-size: 10px;
  293.     text-align: justify;
  294.     font-weight: 400;
  295.     overflow: auto;
  296. }
  297. .navTabs .navTab [type=radio]:checked ~ label {
  298.     background: #eaeaea;
  299.     color: #40765f;
  300.     z-index: 2;
  301. }
  302. .navTabs .navTab [type=radio]:checked ~ label ~ .navContent {
  303.     z-index: 1;
  304.     top: 0px;
  305. }
  306.  
  307.  
  308. #credit {
  309.     float: right;
  310.     position: fixed;
  311.     font-family: montserrat;
  312.     font-size: 7px;
  313.     font-weight: none;
  314.     text-transform: uppercase;
  315.     letter-spacing: 1px;
  316.     padding: 5px;
  317.     background-color: #40765f;
  318.     bottom: 15px;
  319.     right: 15px;
  320.     transition-duration: 0.4s;
  321.     border: 1px solid #40765f;
  322. }
  323. #credit a {
  324.     color: #fff;
  325.     text-decoration: none;
  326. }
  327. #credit:hover {
  328.     background-color: #fbfbfb;
  329.     color: #40765f;
  330.     border: 1px solid #40765f;
  331. }
  332. #credit:hover a {
  333.     color: #40765f;
  334. }
  335.  
  336.  
  337.     </style>
  338.    
  339. </head>
  340. <body>
  341.  
  342.     <div id="credit">
  343.     <a href="http://badwolf.tumblr.com" title="code by badwolf"><span class="sf sf-code" style="font-size: 9px; margin-top: 0px; display: block; float: left; margin-right: 5px;"></span> badwolf</a>
  344. </div>
  345.  
  346.  
  347.     <div id="wrap">
  348.         <div class="wrapTop">
  349.         <h1><span>navigation</span></h1>
  350.         </div>
  351.        
  352.         <div class="wraps">
  353.        
  354.             <div class="wrapLeft">
  355.                 <div class="wrapImg">
  356.                     <img src="https://s20.postimg.org/wx73ktcil/image.png" />
  357.                 </div><div class="wrapLink">
  358.                     <div class="wl2">
  359.                         <b>established</b> 03.2018
  360.                     </div>
  361.                     <div class="wl">
  362.                         <b><a href="https://slytherindaily.tumblr.com/" title="slytherin daily">blog</a></b> back to the
  363.                     </div>
  364.                     <div class="wl2">
  365.                         <b><a href="https://slytherindaily.tumblr.com/ask" title="send a message">question?</a></b> ask us
  366.                     </div>
  367.                 </div>
  368.             </div>
  369.        
  370.         <div class="navTabs">
  371.  
  372. <div class="navTab">
  373. <input type="radio" id="navTab-1" name="navTab-group-1" checked>
  374. <label for="navTab-1"><a title="home"><span class="sf sf-home-o"></span></a></label>
  375. <div class="navContent">
  376.  
  377. This is your regular text!
  378.  
  379.     <!--- THIS IS THE CODE FOR NO TABLE --->
  380.     <h1>type of post</h1>
  381.     <a href="/">graphics</a>
  382.     <a href="/">writing</a>
  383.     <a href="/">text posts</a>
  384.     <a href="/">other</a>
  385.  
  386.     <!--- THIS IS THE CODE WITH THE TABLE --->
  387.     <h1>marauder's era</h1>
  388.     <table><tr valign="top"><td style="width: 80px">
  389.        
  390.     <a href="/tagged/andromeda black">andromeda</a>
  391.     <a href="/tagged/bellatrix black">bellatrix</a>
  392.     <a href="/tagged/lucius malfoy">lucius</a>
  393.    
  394.     </td><td>
  395.        
  396.     <a href="/tagged/narcissa black">narcissa</a>
  397.     <a href="/tagged/regulus black">regulus</a>
  398.     <a href="/tagged/severus snape">snape</a>
  399.     </td></tr></table>
  400.  
  401. </div>
  402. </div>
  403.  
  404. <div class="navTab">
  405. <input type="radio" id="navTab-2" name="navTab-group-1">
  406. <label for="navTab-2"><a title="sort by characters"><span class="sf sf-ghost-o"></span></a></label>
  407. <div class="navContent">
  408.    
  409.     <h1>marauder's era</h1>
  410.     <table><tr valign="top"><td style="width: 80px">
  411.        
  412.     <a href="/tagged/andromeda black">andromeda</a>
  413.     <a href="/tagged/bellatrix black">bellatrix</a>
  414.     <a href="/tagged/lucius malfoy">lucius</a>
  415.    
  416.     </td><td>
  417.        
  418.     <a href="/tagged/narcissa black">narcissa</a>
  419.     <a href="/tagged/regulus black">regulus</a>
  420.     <a href="/tagged/severus snape">snape</a>
  421.     </td></tr></table>
  422.    
  423.     <h1>trio era (main)</h1>
  424.     <table><tr valign="top"><td style="width: 80px">
  425.        
  426.     <a href="/tagged/blaise zabini">blaise</a>
  427.     <a href="/tagged/daphne greengrass">daphne</a>
  428.     <a href="/tagged/draco malfoy">draco</a>
  429.     <a href="/tagged/gregory goyle">gregory</a>
  430.     <a href="/tagged/marcus flint">marcus</a>
  431.    
  432.     </td><td>
  433.        
  434.    
  435.     <a href="/tagged/millicent bulstrode">millicent</a>
  436.     <a href="/tagged/pansy parkinson">pansy</a>
  437.     <a href="/tagged/theodore nott">theodore</a>
  438.     <a href="/tagged/tracey davis">tracey</a>
  439.     <a href="/tagged/vincent crabbe">vincent</a>
  440.     </td></tr></table>
  441.    
  442.     <h1>trio era (minor)</h1>
  443.     <table><tr valign="top"><td style="width: 80px">
  444.        
  445.     <a href="/tagged/adrian pucey">adrian</a>
  446.     <a href="/tagged/astoria greengrass">astoria</a>
  447.     <a href="/tagged/cassius warrington">cassius</a>
  448.     <a href="/tagged/flora carrow">flora</a>
  449.     <a href="/tagged/graham montague">graham</a>
  450.    
  451.     </td><td>
  452.    
  453.     <a href="/tagged/hestia carrow">hestia</a>
  454.     <a href="/tagged/malcom baddock">malcom</a>
  455.     <a href="/tagged/miles bletchley">miles</a>
  456.     <a href="/tagged/peregrine derrick">peregrine</a>
  457.     <a href="/tagged/terence higgs">terence</a>
  458.     </td></tr></table>
  459.    
  460.     <h1>next gen</h1>
  461.     <table><tr valign="top"><td style="width: 80px">
  462.        
  463.     <a href="/tagged/albus potter">albus</a>
  464.    
  465.     </td><td>
  466.    
  467.     <a href="/tagged/scorpius malfoy">scorpius</a>
  468.     </td></tr></table>
  469.    
  470.    
  471.    
  472.    
  473.    
  474.  
  475. </div>
  476. </div>
  477.  
  478. <div class="navTab">
  479. <input type="radio" id="navTab-3" name="navTab-group-1">
  480. <label for="navTab-3"><a title="female face help"><span class="sf sf-flash-o"></span></a></label>
  481. <div class="navContent">
  482.  
  483.     <h1>astoria greengrass</h1>
  484.     <a href="/tagged/antonina vasylchenko">antonina vasylchenko</a>
  485.     <a href="/tagged/gong soo ah">gong soo ah</a>
  486.     <a href="/tagged/luma grothe">luma grothe</a>
  487.    
  488.     <h1>daphne greengrass</h1>
  489.     <a href="/tagged/frida gustavsson">frida gustavsson</a>
  490.     <a href="/tagged/jessica sikosek">jessica sikosek</a>
  491.     <a href="/tagged/kelly gale">kelly gale</a>
  492.     <a href="/tagged/park sora">park sora</a>
  493.    
  494.     <h1>millicent bulstrode</h1>
  495.     <a href="/tagged/barbie ferreira">barbie ferreira</a>
  496.     <a href="/tagged/misha hart">misha hart</a>
  497.    
  498.     <h1>pansy parkinson</h1>
  499.     <a href="/tagged/jiyoung kwak">jiyoung kwak</a>
  500.     <a href="/tagged/jing wen">jing wen</a>
  501.     <a href="/tagged/kate bogucharskaia">kate bogucharskaia</a>
  502.     <a href="/tagged/kiko mizuhara">kiko mizuhara</a>
  503.     <a href="/tagged/scarlett byrne">scarlett byrne</a>
  504.     <a href="/tagged/vittoria ceretti">vittoria ceretti</a>
  505.    
  506.     <h1>tracey davis</h1>
  507.     <a href="/tagged/camille christensen">camille christensen</a>
  508.     <a href="/tagged/frida gustavsson">frida gustavsson</a>
  509.     <a href="/tagged/emily ruhl">emily ruhl</a>
  510.  
  511. </div>
  512. </div>
  513.  
  514. <div class="navTab">
  515. <input type="radio" id="navTab-4" name="navTab-group-1">
  516. <label for="navTab-4" style="padding-bottom: 22px;"><a title="male face help"><span class="sf sf-fox-o"></span></a></label>
  517. <div class="navContent">
  518.  
  519.     <h1>blaise zabini</h1>
  520.     <a href="/tagged/adonis bosso">adonis bosso</a>
  521.     <a href="/tagged/harold alexis">harold alexis</a>
  522.     <a href="/tagged/reece king">reece king</a>
  523.  
  524.     <h1>draco malfoy</h1>
  525.     <a href="/tagged/benjamin jarvis">benjamin jarvis</a>
  526.     <a href="/tagged/lucky blue smith">lucky blue smith</a>
  527.     <a href="/tagged/tom felton">tom felton</a>
  528.  
  529.     <h1>marcus flint</h1>
  530.     <a href="/tagged/dudley">dudley o'shaughnessy</a>
  531.     <a href="/tagged/robbie beeser">robbie beeser</a>
  532.  
  533.     <h1>theodore nott</h1>
  534.     <a href="/tagged/dane dehaan">dane dehaan</a>
  535.     <a href="/tagged/darwin gray">darwin gray</a>
  536.     <a href="/tagged/matthew bell">matthew bell</a>
  537.     <a href="/tagged/mats van snippenberg">mats van snippenberg</a>
  538.     <a href="/tagged/rhys pickering">rhys pickering</a>
  539.     <a href="/tagged/sang woo kim">sang woo kim</a>
  540.    
  541. </div>
  542. </div>
  543.  
  544. </div></div>
  545.        
  546.     </div>
  547.    
  548.    
  549. </body>
  550. </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!