API tools faq
paste
Advertisement
Guest User

CUTTHROAT KETTERDAM #2

a guest
Jul 18th, 2018
165
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.74 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. THEME 10 [BOUSSOLE] by saisei-themes @ tumblr
  4.  
  5. - do not repost
  6. - do not claim as your own
  7. - do not use as base
  8. - enjoy !
  9.  
  10. ADJUSTED AND DESIGNED BY KUWEIYULBO FOR SIXOFCROWSNET
  11.  
  12. -->
  13.  
  14.  
  15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  17.  
  18. <head>
  19.  
  20. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  21.  
  22.  
  23. <title>{Title}</title>
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27. <meta name="description" content="{MetaDescription}" />
  28.  
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  30.  
  31. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  32.  
  33. <script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
  34.  
  35. <script src="https://use.fontawesome.com/257106a2c1.js"></script>
  36.  
  37. <script>
  38. $(document).ready(function() {
  39.     var $container = $('.grid').isotope({
  40.         itemSelector: '.grid-item',
  41.         masonry: {
  42.             columnWidth: 100
  43.         }
  44.     });
  45.  
  46. $('.btn').click(function () {
  47.     $(this) // wrap this, it always refers to the clicked event element
  48.         .parents('.grid-item')// find parent grid item
  49.         .find('.drop, .drop2, .drop3') // find adjacent drop
  50.         .toggle('slow'); // only toggle that one element
  51.        
  52. });
  53.  
  54. $('.btn').click(function () {
  55.     $(this)
  56.     .parents('.one')
  57.     .find('.grid-item')
  58.         .toggleClass('fullsize');
  59.         $container.isotope('layout');
  60.     });
  61.  
  62. });
  63. </script>
  64.    
  65. <style type="text/css">
  66.  
  67. /* POPUP BOXES */
  68.  
  69. .popup_block{
  70.     display:none;
  71.     background:{color:posts};
  72.     padding:20px;
  73.     border:5px solid {color:accent};
  74.     outline: 1px solid {color:border};
  75.     float:left;
  76.     position:fixed;
  77.     top:50%;left:50%;
  78.     z-index: 99999;
  79.     font-size: {text:font size}px;
  80. }
  81.  
  82. *html #fade {position: absolute;}
  83. *html .popup_block {position: absolute;}
  84. #fade {
  85.     display:none;
  86.     position:fixed;
  87.     left:0px;
  88.     top:0px;
  89.     width:100%;
  90.     height:100%;
  91.     z-index:9999;
  92.     background:#000; /* change to #fff for solid white */
  93.     opacity:0.2; /* change to opacity:1; */
  94. }
  95.  
  96. #popheading {
  97. font-size: 35px;
  98. font-family: 'radiometry';
  99. color: {color:border};
  100. border-bottom: 1px solid {color:border2};
  101. padding-bottom: 5px;
  102. padding-top: 5px;
  103. margin-bottom: 10px;
  104. }
  105.  
  106.     ::-webkit-scrollbar {width:6px; height:11px;}
  107.     ::-webkit-scrollbar-track {border:5px solid #fff; background-color:#eee;}
  108.     ::-webkit-scrollbar-thumb {
  109.         border:5px solid rgba(0, 0, 0, 0);
  110.         background-clip:padding-box;
  111.         background-color:#000;
  112.     }
  113.  
  114. /* CUSTOM FONT */
  115.  
  116. @font-face { font-family: "silkscreen"; src: url('https://dl.dropboxusercontent.com/s/4bj79wi75v77m0r/slkscr.ttf?dl=1'); format(“truetype”);}
  117.  
  118. @font-face { font-family: "bebas_neue"; src: url('https://dl.dropboxusercontent.com/s/scbj3da4dz3dfmf/bebasneue.otf?dl=1'); format(“truetype”);}
  119.  
  120.  
  121.  
  122. .dc::-webkit-scrollbar{ width: 5px; }
  123.  
  124. .dc::-webkit-scrollbar-thumb{ background-color: #e6e6e6;}
  125.  
  126. .dc::-webkit-scrollbar-track { background-color: #f6f6f6;}
  127.  
  128.  
  129. /* TEXT STUFF */
  130.  
  131. h1, h2 {
  132. font-size: 25px;
  133. font-family: 'radiometry';
  134. }
  135.  
  136. small, sup, sub {
  137. font-size: {text:font size}px;
  138. }
  139.  
  140. a {
  141. text-decoration: none;
  142. color: #474747;
  143.  -webkit-transition: all .8s ease-in-out;
  144.     -moz-transition: all .8s ease-in-out;
  145.     -o-transition: all .8s ease-in-out;
  146.     transition: all .8s ease-in-out;
  147.     font-style: bold;
  148. }
  149.  
  150. a:hover {
  151.     color: #cfcfcf;
  152.      -webkit-transition: all .8s ease-in-out;
  153.     -moz-transition: all .8s ease-in-out;
  154.     -o-transition: all .8s ease-in-out;
  155.     transition: all .8s ease-in-out;
  156. }
  157.  
  158. b, strong {
  159. color: #919191;
  160. }
  161.  
  162. i, em {
  163.     color: #cfcfcf;
  164. }
  165.  
  166. /* BODY */
  167.  
  168. body {
  169. background: url('http://i.imgur.com/fzhm3tM.png');
  170. margin: 0px;
  171. padding: 0px;
  172. color: {color:text};
  173. font-family: quicksand;
  174. font-size: 13px;
  175. overflow-y: scroll;
  176. overflow-x: hidden;
  177. font-size: {text:font size}px;
  178. -webkit-font-smoothing:antialiased;
  179. }
  180.  
  181. /* GRID */
  182.  
  183. .grid {
  184.     margin-left: auto;
  185.     margin-right: auto;
  186.     margin-top: 0px;
  187.     margin-bottom: 50px;
  188.     width: 600px;
  189.     height: 100%;
  190. }
  191.  
  192. .grid:after {
  193.     display: inline-block;
  194.     clear: both;
  195.     content: '';
  196. }
  197.  
  198. .grid-item {
  199.     float: left;
  200.     margin: 10px;
  201.     width: 600px;
  202.     height: 150px;
  203.     font-size: 10px;
  204. }
  205.  
  206. .grid-item img {
  207.     height: 200px;
  208.     width: 600px;
  209. }
  210.  
  211. .grid-item.fullsize {
  212.     float: left;
  213.     height: 350px;
  214.     position: relative;
  215. }
  216.  
  217. /* PAGE HEADER */
  218.  
  219. #top {
  220. position: relative;
  221. background: #474747;
  222. color: #fff;
  223. width: 100%;
  224.     padding: 5px;
  225.     font-size: 30px;
  226.     top: 0px;
  227.     text-align: center;
  228.     border-bottom: 2px solid #000000;
  229.     letter-spacing: 2px;
  230.     font-family:'bebas_neue';
  231.     font-style:italic;
  232.     text-shadow: 0px 2px 4px #171717;
  233. }
  234.  
  235. /* ROW */
  236.  
  237. .one {
  238. width: 500px;
  239. }
  240.  
  241. /* ICONS */
  242.  
  243. .icon {
  244.     position: absolute;
  245.     top: 0;
  246.     right: 0;
  247.       border: 5px solid #fff;
  248.       margin-left:-125px;
  249.       height: 200px;
  250.       width: 600px;
  251.       outline: 1px solid #e6e6e6;
  252. }
  253.  
  254. /* NAME BUTTON */
  255.  
  256. .btn {
  257. background: url(https://images.fineartamerica.com/images-medium-5/orange-poppies-original-abstract-flower-painting-by-megan-duncanson-megan-duncanson.jpg);
  258. color:#fff;
  259. font-size: 8px;
  260. font-family: 'silkscreen';
  261. width: 600px;
  262. height: 200px;
  263. margin-top: 50px;
  264. padding:3px;
  265. margin-left: 0px;
  266. border: none;
  267. text-align: left;
  268. -webkit-font-smoothing: none;
  269. border: 5px solid #fff;
  270. outline: 1px solid #e6e6e6;
  271. -webkit-transition: all .3s ease-in-out;
  272. -moz-transition: all .3s ease-in-out;
  273. -o-transition: all .3s ease-in-out;
  274. transition: all .3s ease-in-out;
  275. -webkit-filter: grayscale(100%);
  276. }
  277.  
  278. .btn:hover {
  279. -webkit-filter: none;
  280. -webkit-transition: all .3s ease-in-out;
  281. -moz-transition: all .3s ease-in-out;
  282. -o-transition: all .3s ease-in-out;
  283. transition: all .3s ease-in-out;
  284. outline: 1px solid #e6e6e6;
  285. }
  286.  
  287. .btn:focus {
  288.     outline: 1px solid #e6e6e6;
  289. }
  290.  
  291. /* BOXES */
  292.  
  293. .drop {
  294. background-color: #fff;
  295. height: 125px;
  296. width: 580px;
  297. position: absolute;
  298. margin-top: 10px;
  299. color: #919191;
  300. display:none;
  301. text-align: justify;
  302. margin-left: -1px;
  303. padding: 10px;
  304. border: 1px solid #e6e6e6;
  305. letter-spacing: .5px;
  306. z-index: 9999;
  307. }
  308.  
  309. .dc {
  310. width: 560px;
  311. height: 155px;
  312. overflow-y: hidden;
  313. padding: 10px;
  314. position: absolute;
  315. font-size: 11px;
  316. margin-top: 5px;
  317. }
  318.  
  319. /* BOX HEADER */
  320.  
  321. #boxtop {
  322. width: 100%;
  323. margin: -10px -10px 0px -10px;
  324. text-transform: uppercase;
  325. font-size: 15px;
  326. }
  327.  
  328. #header {
  329. font-family: 'bebas_neue';
  330. color: #fff;
  331. position: relative;
  332. letter-spacing: 1px;
  333. background: #474747;
  334. padding: 5px;
  335. width: 48%;
  336. text-transform: capitalize;
  337. display: inline-block;
  338. }
  339.  
  340. #subtitle {
  341. font-family: 'bebas_neue';
  342. color: #919191;
  343. position: relative;
  344. letter-spacing: 1px;
  345. border-bottom: 1px solid #e6e6e6;
  346. padding: 5px 9px 4px 10px;
  347. float: right;
  348. width: 50%;
  349. text-transform: uppercase;  
  350. display: inline-block;
  351. margin-right: -20px;
  352. text-align: left;
  353. }
  354.  
  355. /* INFO SECTION */
  356.  
  357. .basic {
  358. width: 100%;
  359. margin-top: -10px;
  360. }
  361.  
  362. .info {
  363. width: 50%;
  364. display: inline-block;
  365. }
  366.  
  367. .info li {
  368. border-bottom: 1px solid #e6e6e6;
  369. list-style-type: none;
  370. padding:3px 0px 3px 0px;
  371. }
  372.  
  373. .info li:before {
  374. font-family: 'FontAwesome';
  375. content:"\f101";
  376. padding-right: 4px;
  377. }
  378.  
  379. /* LINKS */
  380.  
  381. .links {
  382. width: 45%;
  383. float:right;
  384. display: inline-block;
  385. margin-left: 10px;
  386. padding-top: 5px;
  387. }
  388.  
  389. .links a, .links i {
  390. display: inline-block;
  391. font-size: 10px;
  392. padding: 3px 0px 3px 0px;
  393. }
  394.  
  395. .links i {
  396. padding-right: 7px;
  397. color: #919191;
  398. }
  399.  
  400.  
  401. /* CREDIT - DO NOT DELETE */
  402.  
  403. #cred {
  404.     background-color: #474747;
  405.     font-family: 'bebas neue';
  406.     font-size: 10px;
  407.     color: #fff;
  408.     padding: 5px 6px 5px 6px;
  409.     width: 15px;
  410.     height: 15px;
  411.     border: 2px solid #fff;
  412.     outline: 1px solid #474747;
  413.     float:bottom;
  414.     top: 95%;
  415.     left: 10px;
  416.     position: fixed;
  417.     -webkit-transition: all .3s ease-in-out;
  418.     -moz-transition: all .3s ease-in-out;
  419.     -o-transition: all .3s ease-in-out;
  420.     transition: all .3s ease-in-out;
  421. }
  422.  
  423.  #cred2 {
  424.     background-color: #474747;
  425.     font-family: 'bebas neue';
  426.     font-size: 10px;
  427.     color: #fff;
  428.     padding: 5px 6px 5px 6px;
  429.        width: 15px;
  430.     height: 15px;
  431.     margin-left:50px;
  432.     border: 2px solid #fff;
  433.     outline: 1px solid #474747;
  434.     float:bottom;
  435.     top: 95%;
  436.     left: 10px;
  437.     position: fixed;
  438.     -webkit-transition: all .3s ease-in-out;
  439.     -moz-transition: all .3s ease-in-out;
  440.     -o-transition: all .3s ease-in-out;
  441.     transition: all .3s ease-in-out;
  442. }
  443.  
  444.    #cred:hover {
  445.     background-color: #eac1c5;
  446.         border: 2px solid #fff;
  447.     outline: 1px solid #eac1c5;
  448.     -webkit-transition: all .3s ease-in-out;
  449.     -moz-transition: all .3s ease-in-out;
  450.     -o-transition: all .3s ease-in-out;
  451.     transition: all .3s ease-in-out;
  452.  
  453. }
  454.  
  455.   #cred2:hover {
  456.     background-color: #eac1c5;
  457.         border: 2px solid #fff;
  458.     outline: 1px solid #eac1c5;
  459.     -webkit-transition: all .3s ease-in-out;
  460.     -moz-transition: all .3s ease-in-out;
  461.     -o-transition: all .3s ease-in-out;
  462.     transition: all .3s ease-in-out;
  463.  
  464. }
  465.  
  466. #cred a {
  467.     color: #fff;
  468.     font-size: 16px;
  469.     letter-spacing: 3px;
  470. }
  471.  
  472. #cred2 a {
  473.     color: #fff;
  474.     font-size: 16px;
  475.     letter-spacing: 3px;
  476. }
  477.  
  478. </style></head>
  479.  
  480. <body>
  481. <div id="top">CUTTHROAT KETTERDAM</div>
  482.  
  483. <div class="grid">
  484.  
  485. <!--BEGIN FIRST ROW -->
  486.  
  487. <!-- FIRST MUSE -->
  488.  
  489. <div class="one">
  490. <div class="grid-item">
  491. <button class="btn"></button>
  492.  
  493. <div class="drop">
  494.  
  495. <div id="boxtop">
  496. <div id="header"> CHALLENGE #1 | 500 POINTS</div><div id="subtitle">CHALLENGE DETAILS</div></div>
  497.  
  498. <div class="dc">
  499.  
  500. <div class="basic">
  501.  
  502. </div>
  503.  
  504. <!-- BIOGRAPHY/INFO SECTION -->
  505.  
  506. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt turpis ligula, vel rhoncus tortor finibus in. Donec quam justo, hendrerit eget massa dapibus, dignissim vestibulum turpis. In non magna nisi. Sed consectetur leo nec consequat placerat. Duis sollicitudin lacus libero, quis viverra nunc imperdiet pulvinar. Quisque lacus ipsum, posuere eget blandit sed, pharetra at dolor. Proin metus quam, sodales a feugiat in, pulvinar non ligula. Integer in vestibulum urna. Phasellus ac enim pharetra diam egestas fermentum vel et dui.</p>
  507.  
  508. </div>
  509. </div>
  510. </div>
  511.  
  512.  
  513.  
  514.  
  515. </div>
  516.  
  517. <!--CREDIT -->
  518.  
  519. <div id="cred"><a href="http://www.saisei-themes.tumblr.com">ST</a></div>
  520. <div id="cred2"><a href="http://www.kuweiyulbo.tumblr.com">DC</a></div>
  521. </body>
  522.    
  523. </body></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!