API tools faq
paste
Advertisement
rdjhiddlestons

Family/Network Page #1 by rdjhiddlestons

rdjhiddlestons
Apr 21st, 2014
4,355
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.55 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <!--
  5. Family/Network Page #1
  6. by http://thomashiddlestons.co.vu [rdjhiddlestons]
  7.  
  8. ·PLEASE DO NOT REMOVE CREDIT
  9. ·DO NOT CLAIM AS YOUR OWN
  10. ·DO NOT USE AS A BASE CODE
  11. ·Edit as much as you want just don't remove the credit
  12.  
  13. Send me any questions or anything regarding problems with the page so I can fix them
  14. -->
  15.  
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18.  
  19. <!--FONTS-->
  20. <script src="//use.edgefonts.net/pt-sans:n4,i4,n7,i7.js"></script>
  21. <script src="//use.edgefonts.net/poiret-one:n4.js"></script>
  22.  
  23. <style type="text/css">
  24.  
  25. /*SCROLLBAR*/
  26.  ::-webkit-scrollbar {
  27.      width: 4px;
  28.      height:auto;
  29.      background:#fff;
  30.      }
  31.     ::-webkit-scrollbar-corner {
  32.         padding:2px;
  33.         background:#fff;
  34.         }
  35.     ::-webkit-scrollbar-button:vertical {
  36.         height:3px;
  37.         display: block;
  38.         background:#000;
  39.         }
  40.     ::-webkit-scrollbar-button:horizontal {
  41.         width: 3px;
  42.         height: 3px;
  43.         display: block;
  44.         background:#000;
  45.         }
  46.     ::-webkit-scrollbar-thumb:vertical {
  47.         background:#000;
  48.        
  49.         }
  50.     ::-webkit-scrollbar-thumb:horizontal {
  51.         background:#fff;
  52.         }
  53.     ::-webkit-scrollbar-thumb {
  54.         background: #000;
  55.         }
  56.  
  57.  /*BODY*/
  58.  body {
  59.      margin:auto;
  60.          font-family: pt-sans, sans-serif;
  61.          font-size:14px;
  62.          color: #000;
  63.          background-color:#fff;
  64.  }
  65.  
  66.  a {
  67.          text-decoration:none;
  68.          color:#ddd;
  69.  }
  70.  
  71.  h1 {
  72.      font-size:22px;
  73.      color:#fff;
  74.      margin-top:-3px;
  75.      text-align:center;
  76.      font-family: poiret-one, sans-serif;
  77.  }
  78.  
  79.  /*TOP*/
  80.  .topbar {
  81.         top: 0;
  82.         left: 0;
  83.         height: 200px;
  84.         text-align: center;
  85.         background-image: url("http://static.tumblr.com/r1kev6u/49Dn3s50o/crazykira18-03.gif");
  86.         background-repeat:repeat;
  87.         color:#fff;
  88.  }
  89.  
  90.  .topbar img {
  91.          alignment-adjust:middle;
  92.          border:4px solid #fff;
  93.          height:96px;
  94.          width:96px;
  95.          border-radius: 50%;
  96.          margin-top:10px;
  97.          margin-bottom:5px;
  98.  }
  99.  
  100.  .topbar p {
  101.      font-size:11px;
  102.      color:#fff;
  103.      margin-top:-5px;
  104.  }
  105.  
  106. /*LINKS*/
  107.  
  108. nav {
  109.     width:100%;
  110.     text-align:center;
  111.     margin-top:3px;
  112.     margin-bottom:5px;
  113. }
  114.  
  115. nav a {
  116.     color:#666;
  117.     margin-top:2px;
  118.     margin-left:10px;
  119.     margin-right:10px;
  120.     -webkit-transition: all 0.5s ease-in-out;
  121.     -moz-transition: all 0.5s ease-in-out;
  122.     -o-transition: all 0.5s ease-in-out;
  123.     -ms-transition: all 0.5s ease-in-out;
  124.     transition: all 0.5s ease-in-out;
  125. }
  126.  
  127. nav a:hover {
  128.     color:#fff;
  129.     background-color:#000;
  130.     background-image:url("http://static.tumblr.com/r1kev6u/49Dn3s50o/crazykira18-03.gif");
  131.     border-radius:5px;
  132.     -webkit-transition: all 0.5s ease-in-out;
  133.     -moz-transition: all 0.5s ease-in-out;
  134.     -o-transition: all 0.5s ease-in-out;
  135.     -ms-transition: all 0.5s ease-in-out;
  136.     transition: all 0.5s ease-in-out;
  137. }
  138.  
  139. .container {
  140.     margin-top:10px;
  141.     margin-left:125px;
  142.     margin-right:auto;
  143.     margin-bottom:50px;
  144.     position:absolute;
  145. }
  146.  
  147. /*BOXES*/
  148. .box {
  149.     margin-top:20px;
  150.     margin-bottom:50px;
  151.     margin-left:25px;
  152.     margin-right:25px;
  153.     width:160px;
  154.     height:160px;
  155.     display:inline-block;
  156. }
  157.  
  158. .box img {
  159.     width:160px;
  160.     height:160px;
  161.     border:4px solid #000;
  162. }
  163.  
  164. .box:hover #desc {
  165.     opacity:0.7;
  166.     -webkit-transition: all 0.5s ease-out;
  167.     -moz-transition: all 0.5s ease-out;
  168.     -o -transition: all 0.5s ease-out;
  169.     transition: all 0.5s ease-out;
  170.  
  171. }
  172.  
  173. #desc {
  174.     text-align:center;
  175.     margin-top:-170px;
  176.         position:absolute;
  177.         width:165px;
  178.         height:165px;
  179.         opacity:0;
  180.         font-size:11px;
  181.         background:#000;
  182.         color:#fff;
  183.         -webkit-transition: all 0.5s ease-out;
  184.         -moz-transition: all 0.5s ease-out;
  185.         -o -transition: all 0.5s ease-out;
  186.         transition: all 0.5s ease-out;
  187. }
  188.  
  189. .name {
  190.     font-size:16px;
  191.     margin:3px;
  192.     padding-bottom:4px;
  193.     color:#fff;
  194.     border-bottom: solid #fff 2px;
  195.     width:100%;
  196.     text-align:center;
  197.     font-family: poiret-one, sans-serif;
  198. }
  199.  
  200. .link {
  201.     text-align:center;
  202.     font-size:14px;
  203.  
  204. }
  205.  
  206. .link a {
  207.     text-align:center;
  208.     color:#990000;
  209.     font-size:16px;
  210.     font-weight:bold;
  211.     width:100%;
  212.     -webkit-transition: all 0.4s ease-out;
  213.         -moz-transition: all 0.4s ease-out;
  214.         transition: all 0.4s ease-out;
  215. }
  216.  
  217. .link a:hover {
  218.     color:#fff;
  219.         -webkit-transition: all 0.4s ease-out;
  220.         -moz-transition: all 0.4s ease-out;
  221.         transition: all 0.4s ease-out;
  222.     letter-spacing:3px;
  223. }
  224.  
  225.  /*CREDIT. DO NOT REMOVE*/
  226.  
  227. .credit {
  228.     position:fixed;
  229.     bottom:25px;
  230.     right:25px;
  231.     font-size:10px;
  232.     font-family: 'Calibri';
  233.     background: #fff;
  234.     color:#000;
  235.     text-transform:uppercase;
  236. }
  237.  
  238. .credit a {
  239.     color:#000;
  240.     padding:4px;
  241.     -webkit-transition: all 0.5s ease-out;
  242.         -moz-transition: all 0.5s ease-out;
  243.         transition: all 0.5s ease-out;
  244. }
  245.  
  246. .credit a:hover {
  247.     color:#fff;
  248.     background:#000;
  249.     padding:4px;
  250.    -webkit-transition: all 0.5s ease-out;
  251.         -moz-transition: all 0.5s ease-out;
  252.         transition: all 0.5s ease-out;
  253. }
  254.  
  255. </style>
  256. </head>
  257.  
  258. <body>
  259.  
  260. <div class="topbar">
  261. <img src="http://static.tumblr.com/r1kev6u/AGCn3sye0/sebtiny.jpg" />
  262. <br><h1>Family/Network Page</h1><p>Here's some description bla bla bla. Make it short. Icon for topbar is 96px by 96px</p></div>
  263. <nav>
  264.         <a href="/">home</a>
  265.         <a href="/ask">ask</a>
  266.         <a href="http://tumblr.com/dashboard">dashboard</a>
  267.         <a href="http://thomashiddlestons.co.vu">credit</a>
  268. </nav>
  269.  
  270. <div class="container">
  271. <!--ROW 1-->
  272. <div class="box">
  273. <img src="https://31.media.tumblr.com/799f21d2feafd870e5205acc774be616/tumblr_inline_n4cynadMT31qhfdx8.gif" />
  274. <div id="desc">
  275.     <div class="name"><b>NAME</b></div>
  276.     <p>Some description here. You can put a <b>quote</b> or whatever.</p> <p><em>Sebastian Stan is a dumbass</em> said everyone in the world probably</p>
  277.     <div class="link">
  278.         <a href="URL HERE">URL HERE</a>
  279.     </div>
  280. </div>
  281. </div>
  282. <div class="box">
  283. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  284.     <div id="desc">
  285.     <div class="name"><b>NAME</b></div>
  286.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  287.     <div class="link">
  288.         <a href="URL HERE">URL HERE</a>
  289.     </div>
  290. </div>
  291. </div>
  292. <div class="box">
  293. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  294.     <div id="desc">
  295.     <div class="name"><b>NAME</b></div>
  296.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  297.     <div class="link">
  298.         <a href="URL HERE">URL HERE</a>
  299.     </div>
  300. </div>
  301. </div>
  302. <div class="box">
  303. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  304.     <div id="desc">
  305.     <div class="name"><b>NAME</b></div>
  306.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  307.     <div class="link">
  308.         <a href="URL HERE">URL HERE</a>
  309.     </div>
  310. </div>
  311. </div>
  312. <div class="box">
  313. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  314.     <div id="desc">
  315.     <div class="name"><b>NAME</b></div>
  316.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  317.     <div class="link">
  318.         <a href="URL HERE">URL HERE</a>
  319.     </div>
  320. </div>
  321. </div>
  322. <!--END OF ROW 1-->
  323.  
  324. <!--ROW 2-->
  325. <div class="box">
  326. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  327.     <div id="desc">
  328.     <div class="name"><b>NAME</b></div>
  329.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  330.     <div class="link">
  331.         <a href="URL HERE">URL HERE</a>
  332.     </div>
  333. </div>
  334. </div>
  335. <div class="box">
  336. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  337.     <div id="desc">
  338.     <div class="name"><b>NAME</b></div>
  339.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  340.     <div class="link">
  341.         <a href="URL HERE">URL HERE</a>
  342.     </div>
  343. </div>
  344. </div>
  345. <div class="box">
  346. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  347.     <div id="desc">
  348.     <div class="name"><b>NAME</b></div>
  349.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  350.     <div class="link">
  351.         <a href="URL HERE">URL HERE</a>
  352.     </div>
  353. </div>
  354. </div>
  355. <div class="box">
  356. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  357.     <div id="desc">
  358.     <div class="name"><b>NAME</b></div>
  359.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  360.     <div class="link">
  361.         <a href="URL HERE">URL HERE</a>
  362.     </div>
  363. </div>
  364. </div>
  365. <div class="box">
  366. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  367.     <div id="desc">
  368.     <div class="name"><b>NAME</b></div>
  369.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  370.     <div class="link">
  371.         <a href="URL HERE">URL HERE</a>
  372.     </div>
  373. </div>
  374. </div>
  375. <!--END OF ROW 2-->
  376.  
  377. <!--ROW 3-->
  378. <div class="box">
  379. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  380.     <div id="desc">
  381.     <div class="name"><b>NAME</b></div>
  382.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  383.     <div class="link">
  384.         <a href="URL HERE">URL HERE</a>
  385.     </div>
  386. </div>
  387. </div>
  388. <div class="box">
  389. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  390.     <div id="desc">
  391.     <div class="name"><b>NAME</b></div>
  392.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  393.     <div class="link">
  394.         <a href="URL HERE">URL HERE</a>
  395.     </div>
  396. </div>
  397. </div>
  398. <div class="box">
  399. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  400.     <div id="desc">
  401.     <div class="name"><b>NAME</b></div>
  402.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  403.     <div class="link">
  404.         <a href="URL HERE">URL HERE</a>
  405.     </div>
  406. </div>
  407. </div>
  408. <div class="box">
  409. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  410.     <div id="desc">
  411.     <div class="name"><b>NAME</b></div>
  412.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  413.     <div class="link">
  414.         <a href="URL HERE">URL HERE</a>
  415.     </div>
  416. </div>
  417. </div>
  418. <div class="box">
  419. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  420.     <div id="desc">
  421.     <div class="name"><b>NAME</b></div>
  422.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  423.     <div class="link">
  424.         <a href="URL HERE">URL HERE</a>
  425.     </div>
  426. </div>
  427. </div>
  428. <!--END OF ROW 3-->
  429.  
  430. <!--ROW 4-->
  431. <div class="box">
  432. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  433.     <div id="desc">
  434.     <div class="name"><b>NAME</b></div>
  435.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  436.     <div class="link">
  437.         <a href="URL HERE">URL HERE</a>
  438.     </div>
  439. </div>
  440. </div>
  441. <div class="box">
  442. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  443.     <div id="desc">
  444.     <div class="name"><b>NAME</b></div>
  445.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  446.     <div class="link">
  447.         <a href="URL HERE">URL HERE</a>
  448.     </div>
  449. </div>
  450. </div>
  451. <div class="box">
  452. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  453.     <div id="desc">
  454.     <div class="name"><b>NAME</b></div>
  455.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  456.     <div class="link">
  457.         <a href="URL HERE">URL HERE</a>
  458.     </div>
  459. </div>
  460. </div>
  461. <div class="box">
  462. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  463.     <div id="desc">
  464.     <div class="name"><b>NAME</b></div>
  465.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  466.     <div class="link">
  467.         <a href="URL HERE">URL HERE</a>
  468.     </div>
  469. </div>
  470. </div>
  471. <div class="box">
  472. <img src="http://static.tumblr.com/r1kev6u/NTJn4bhfs/160px.jpg" />
  473.     <div id="desc">
  474.     <div class="name"><b>NAME</b></div>
  475.     <p>Some description here. You can put a <b>quote</b> or whatever.</p>
  476.     <div class="link">
  477.         <a href="URL HERE">URL HERE</a>
  478.     </div>
  479. </div>
  480. </div>
  481. <!--END OF ROW 4-->
  482. <!--To add more rows just copy and paste from ROW 1 to END OF ROW 1-->
  483. </div>
  484.  
  485.  
  486.  <!--DO NOT REMOVE CREDIT-->
  487. <div class="credit">
  488.     <a href="http://thomashiddlestons.co.vu" title="themes by daniela">© rdjhiddlestons</a>
  489. </div>
  490. <!--DO NOT REMOVE CREDIT-->
  491.  
  492. </body>
  493. </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!