API tools faq
paste
Advertisement
clockwork-hound

Select Your Hero (Character Page)

clockwork-hound
Feb 25th, 2018
2,549
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.   <!--Title of the Page-->
  5.   <title>Select Your Hero</title>
  6.  
  7. <!-- SCRIPTS, STYLESHEETS, ETC., DON'T TOUCH -->
  8. <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  9.  
  10.  
  11. <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  12.   <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  13.  
  14. <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/kenwheeler/slick/master/slick/slick.css"/>
  15.  
  16. <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/kenwheeler/slick/master/slick/slick-theme.css
  17. "/>
  18.  
  19. <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  20.  
  21. <!-- Position arrows according to screen size -- DON'T TOUCH!-->
  22.   <script type="text/javascript">
  23.     function fixArrows() {
  24.         var sw = ($('.slick-active').find("img").width()/2);
  25.         var nsw = sw;
  26.        
  27.         sw = sw + 20 + ($(window).width()/2);
  28.         nsw = ($(window).width()/2) - nsw - 60;
  29.  
  30.         $('.slick-prev').css('left',nsw+'px');
  31.         $('.slick-next').css('left',sw +'px');
  32.     }
  33.  
  34.     $(document).ready(function(){
  35.       $('.tarots').slick({
  36.         accessibility: true,
  37.         centerMode: true,
  38.         slidesToShow: 1,
  39.         variableWidth:true,
  40.       });
  41.       fixArrows();
  42.     }).on('afterChange',function(event){
  43.     fixArrows();
  44.   }).trigger('afterChange');
  45.   $(window).resize(function(){
  46.     fixArrows();
  47.   })
  48.     </script>
  49.  
  50.  
  51.   <!-- Styles-->
  52.   <style>
  53.  
  54.   /* Import font - from dalishious.tumblr.com, get it here:
  55.    * http://dalishious.tumblr.com/post/155686639972/hi-i-was-wondering-where-you-got-the-inquisition
  56.    */
  57.   @font-face {
  58.     font-family: "dai-regular";
  59.     src: url('https://dl.dropboxusercontent.com/s/ymynqzjp6zroclo/InquisitionSc.ttf?dl=0');
  60. }
  61.  
  62.  
  63.     /* Change the background colour/style here */
  64.     body {
  65.         /* For a background image, uncomment the 3 lines below (delete the               slashes and asterisks surrounding it) and put a url to the image you want         where it says imgurl.*/
  66.        
  67.         /*background-image:url("https://cdn.dragonagekeep.com/bundles/eabwedahub/images/ui/bg-eye.jpg")!important;
  68.         background-size:cover!important;
  69.         background-position:center;*/
  70.        
  71.         /* This line controls the gradient background.  The first colour is in          the centre of the page, and the last is the outermost ring.  Change
  72.         how much you see of each colour by modifying the percentage.  Make
  73.         sure it still adds to 100% in the end. */
  74.         background: radial-gradient(#595959 5%, #454545 10%, #2b2b2b 85%);
  75.        
  76.         /* For a solid bg colour, delete the line above.  Change 2b2b2b to              whatever colour you want.*/
  77.         background-color:#2b2b2b;
  78.        
  79.         /* leave this alone */
  80.         overflow:hidden;
  81.     }
  82.    
  83.     /* Colour of links, don't reccomend changing anything here */
  84.     a {
  85.         text-decoration:none;
  86.     }
  87.    
  88.     /* DON'T TOUCH */
  89.     .innards {
  90.         width:100%;
  91.         height:100%;
  92.         overflow:hidden;
  93.         text-align:center;
  94.         margin:0 auto;
  95.     }
  96.    
  97.     /* Text at the top that says "Hero Selection" */
  98.     .hero-select {
  99.         font-family:"dai-regular";
  100.         color:#fff; /* change font colour here */
  101.         font-size:20pt;
  102.         background-color:#1b1b1b; /* change the background colour here */
  103.         padding:15px;
  104.         width:500px;
  105.         text-align:left;
  106.     }
  107.    
  108.     /* Creates the arrow that gives hero-select a triangular end */
  109.     .hero-select:after {
  110.       content:"";
  111.       position: absolute;
  112.       top:6.8px;
  113.       left:538px;
  114.       height:0;
  115.       width:0;
  116.       border-width: 31.6px;
  117.       border-style:solid;
  118.      
  119.       /* make this the same as hero-select's background-colour */
  120.       border-color:#1b1b1b;
  121.      
  122.       border-top-color:transparent;
  123.       border-right-color:transparent;
  124.     }
  125.  
  126.     /* DON'T TOUCH */
  127.     .slick-slider {
  128.         margin:-50px auto;
  129.         text-align:center;
  130.     }
  131.  
  132.     /* DON'T TOUCH */
  133.     .slick-slide.slick-current.slick-active.slick-center {
  134.         filter:none;
  135.         transition:1s ease;
  136.         margin-top:0px;
  137.     }
  138.    
  139.     /* The card image in the centre */
  140.     .slick-slide.slick-current.slick-active.slick-center img {
  141.         width:350px;
  142.         height:500px;
  143.         border:1px solid #fff; /* change size, style, and colour of border */
  144.         border-radius:3px; /* make corners more round or square */
  145.        
  146.         /*Lines below change the colour of the glow around the box -- just
  147.          * edit the hex codes (#ED7B4A).
  148.          */
  149.         -webkit-box-shadow:0 0 30px #ED7B4A;
  150.         -moz-box-shadow: 0 0 30px #ED7B4A;
  151.         box-shadow:0 0 30px #ED7B4A;
  152.     }
  153.  
  154.  
  155.     /* DON'T TOUCH */
  156.     .slick-slide {
  157.         filter: blur(1px) grayscale(50%);
  158.         transition:1s ease;
  159.         text-align:center;
  160.         width:350px;
  161.         overflow:visible;
  162.         padding:50px;
  163.         margin-top:20px;
  164.        
  165.     }
  166.    
  167.     /* DON'T TOUCH */
  168.     .slick-slide .charname {
  169.         font-family:"dai-regular";
  170.         font-size:20pt;
  171.         color:transparent;
  172.         text-shadow: none;
  173.         line-height:40pt;
  174.         visibility:hidden;
  175.         transition:1s;
  176.     }
  177.    
  178.    
  179.     /* The text that appears above the middle card */
  180.     .slick-slide.slick-current.slick-active.slick-center .charname {
  181.         font-family:"dai-regular";
  182.         font-size:20pt; /* change the text size */
  183.         color:#ED7B4A; /* change the text colour */
  184.         text-shadow: 0 0 6px #ED7B4A; /* change colour of the glow around it */
  185.         line-height:40pt;
  186.         visibility:visible;
  187.         transition:1s;
  188.     }
  189.    
  190.     /* DON'T TOUCH */
  191.     .slick-slide .charclass {
  192.         font-family:"dai-regular";
  193.         font-size:12pt;
  194.         color:transparent;
  195.         text-shadow: none;
  196.         line-height:40pt;
  197.         transition:1s;
  198.     }
  199.    
  200.     /* Text under the card that tells you their class (eg Mage)
  201.      * This one shows up only under the middle card
  202.     */
  203.      .slick-slide.slick-current.slick-active.slick-center .charclass {
  204.          font-family:"dai-regular";
  205.         font-size:16pt; /* change the size of the text */
  206.         color:#fff; /* change the colour of the text */
  207.         line-height:40pt;
  208.         transition:1s;
  209.      }
  210.    
  211.     /* DON'T TOUCH */
  212.     .slick-slide:focus {
  213.         outline: none;
  214.     }
  215.    
  216.    
  217.     /* The arrows on either side of the middle card. */
  218.     .slick-prev:before, .slick-next:before {
  219.         font-family: "slick";
  220.         font-size: 80px;
  221.         font-weight:700;
  222.         line-height: 1px;
  223.         color: #ED7B4A; /* Change the arrows colour */
  224.         opacity:1;
  225.     }  
  226.  
  227.     /* DON'T TOUCH */
  228.     .slick-prev:before { content: "‹"; }
  229.     [dir="rtl"] .slick-prev:before { content: "›"; }
  230.  
  231.     [dir="rtl"] .slick-next { }
  232.     .slick-next:before { content: "›"; }
  233.     [dir="rtl"] .slick-next:before { content: "‹"; }
  234.  
  235.     /* DON'T TOUCH */
  236.     .slick-prev {
  237.         z-index: 999;
  238.     }
  239.    
  240.     /* DON'T TOUCH */
  241.     .slick-next {
  242.         z-index:999;
  243.     }
  244.    
  245.     /* DON'T TOUCH */
  246.     .credit {
  247.         position:fixed;
  248.         z-index:1000;
  249.         padding:10px;
  250.         bottom:0;
  251.         right:0;
  252.         font-size:25pt;
  253.     }
  254.    
  255.     /* Colour of the credit.  You can edit this to match your theme, but
  256.      * keep it clearly visible, please.
  257.      */
  258.     .credit a {
  259.         color:#454545;
  260.     }
  261.  
  262.   </style>
  263.  
  264.   </head>
  265.   <body>
  266.    
  267.     <div class = "innards">
  268.     <div class = "hero-select">Hero Selection</div>
  269.  
  270.   <!--CHARACTER CARDS START-->
  271.   <!-- See instructions on first card for editing help. -->
  272.  
  273.  <!-- Need more cards?  Copy the code below:
  274.    <div>
  275.        <div class = "charname">Name</div>
  276.            <a href = "/nameurl">
  277.            <img src = "http://via.placeholder.com/350x500" style="width:100%">
  278.            </a>
  279.        <div class = "charclass">Class</div>
  280.    </div> -->
  281.      
  282.   <div class="tarots">
  283.           <div>
  284.               <!-- Character's name goes here, where it says Name -->
  285.               <div class = "charname">Name</div>
  286.              
  287.               <!-- Put a link to the character's page where it says "/nameurl"
  288.                   Don't want a link?  Remove <a href= = "/george"> and the </a>                    that's after the image.  You have to do this for all the                        slides.-->
  289.                   <a href = "/nameurl">
  290.                  
  291.                   <!-- Change the card image by swapping out
  292.                  http://via.placeholder.com/350x500
  293.                  for the url that leads to the image you want -->
  294.             <img src = "http://via.placeholder.com/350x500" style="width:100%">
  295.                   </a>
  296.                  
  297.                   <!--Replace Class with whatever your character's class is.                     Or something else entirely!  Whatever floats your boat.-->
  298.               <div class = "charclass">Class</div>
  299.           </div>
  300.           <!-- Card ends here. Repeat instructions for every slide you want.-->
  301.    
  302.           <div>
  303.         <div class = "charname">Name</div>
  304.             <a href = "/nameurl">
  305.             <img src = "http://via.placeholder.com/350x500" style="width:100%">
  306.             </a>
  307.         <div class = "charclass">Class</div>
  308.     </div>
  309.    
  310.     <div>
  311.         <div class = "charname">Name</div>
  312.             <a href = "/nameurl">
  313.             <img src = "http://via.placeholder.com/350x500" style="width:100%">
  314.             </a>
  315.         <div class = "charclass">Class</div>
  316.     </div>
  317.    
  318.     <div>
  319.         <div class = "charname">Name</div>
  320.             <a href = "/nameurl">
  321.             <img src = "http://via.placeholder.com/350x500" style="width:100%">
  322.             </a>
  323.         <div class = "charclass">Class</div>
  324.     </div>
  325.    
  326.     <div>
  327.         <div class = "charname">Name</div>
  328.             <a href = "/nameurl">
  329.             <img src = "http://via.placeholder.com/350x500" style="width:100%">
  330.             </a>
  331.         <div class = "charclass">Class</div>
  332.     </div>
  333.    
  334.     <div>
  335.         <div class = "charname">Name</div>
  336.             <a href = "/nameurl">
  337.             <img src = "http://via.placeholder.com/350x500" style="width:100%">
  338.             </a>
  339.         <div class = "charclass">Class</div>
  340.     </div>
  341.     <!--Add extra cards ABOVE this line-->
  342.   </div>
  343.  
  344.   <!-- CREDIT, DON'T TOUCH -->
  345.   <div class = "credit">
  346.       <a href="https://aclockwork-hound.tumblr.com/"><i class="fas fa-cogs"></i></a>
  347.   </div>
  348.   <!--CHARACTER CARDS END-->
  349.   </div>
  350.  
  351.   </body>
  352. </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!