API tools faq
paste
Advertisement
Snoop

PURPLEBLEP.COM (v1.0)

Snoop
Jan 6th, 2019 (edited)
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.72 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.  
  3. <html lang="en">
  4. <head>
  5.     <link rel="shortcut icon" href="https://puu.sh/ApEgU/276a3329c4.ico" />
  6.  
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport"
  9.          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  10.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  11.     <title>Purple Blep | Art, dragons, bleps!</title>
  12.     <meta name="description" content="Purple Blep">
  13.     <meta name="author" content="Purple Blep">
  14.  
  15.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  16.  
  17.     <style>
  18.         @import url('https://fonts.googleapis.com/css?family=Cabin');
  19.  
  20.         body > iframe:first-child {
  21.             display: none !important;
  22.         }
  23.  
  24.         body, html {
  25.             height: 100%;
  26.             margin: 0;
  27.             padding: 0;
  28.         }
  29.  
  30.         body {
  31.             background-color: #393939;
  32.             height: 100%;
  33.             position: absolute;
  34.             left: 0;
  35.             right: 0;
  36.             font-family: 'Cabin', sans-serif;
  37.         }
  38.  
  39.         .logo{
  40.             position: absolute;
  41.             top: 10%;
  42.             z-index: 1;
  43.         }
  44.  
  45.         .logo p{
  46.  
  47.             font-size: 200px;
  48.         }
  49.  
  50.         .background {
  51.             position: absolute;
  52.             top: 0;
  53.             z-index: -2;
  54.             height: 100%;
  55.             width: 100%;
  56.             background-position: center;
  57.             background-repeat: no-repeat;
  58.             background-size: cover;
  59.         }
  60.  
  61.         .overlay {
  62.             display: none;
  63.             background: url(img/overlay.png);
  64.             width: 100%;
  65.             height: 100%;
  66.             position: fixed;
  67.             top: 0;
  68.             opacity: 1;
  69.             left: 0;
  70.             z-index: -1;
  71.         }
  72.  
  73.         main {
  74.             position: absolute;
  75.             z-index: 1;
  76.             left: 0;
  77.             right: 0;
  78.             top: 69%;
  79.         }
  80.  
  81.         .cbp-bicontrols {
  82.             position: fixed;
  83.             top: 50%;
  84.             width: 100%;
  85.         }
  86.  
  87.         header {
  88.             width: 550px;
  89.             height: 65%;
  90.             position: relative;
  91.             z-index: 500;
  92.             margin: 0px auto;
  93.             left: 0;
  94.             position: absolute;
  95.             right: 0;
  96.         }
  97.  
  98.         header .headerTrans {
  99.             top: 0;
  100.             width: 100%;
  101.             position: absolute;
  102.             height: 100%;
  103.             background-color: black;
  104.             opacity: 0.4;
  105.         }
  106.  
  107.         header .headerText {
  108.             color: white;
  109.         }
  110.  
  111.         .purple{
  112.             margin: 0;
  113.             margin-left: -166px;
  114.         }
  115.  
  116.         .fas {
  117.             font-size: 40px;
  118.             color: white;
  119.          }
  120.  
  121.         .fa-chevron-left {
  122.             font-size: 40px;
  123.             color: white;
  124.             margin-left: 20px;
  125.         }
  126.  
  127.         .fa-chevron-right{
  128.             font-size: 40px;
  129.             color: white;
  130.             margin-right: 20px;
  131.             float: right;
  132.         }
  133.  
  134.         .headerText h2{
  135.             position: absolute;
  136.             bottom: 0;
  137.             margin: 0;
  138.             left: 0;
  139.             right: 0;
  140.             white-space: nowrap;
  141.             font-size: 76px;
  142.             margin-left: -29px;
  143.             margin-bottom: 20px;
  144.             z-index: 1;
  145.             /* margin: 0px auto; */
  146.             /* margin: 0; */
  147.         }
  148.  
  149.         .footer p{
  150.             position: absolute;
  151.             bottom: 0;
  152.             margin: 0;
  153.             left: 0;
  154.             right: 0;
  155.             white-space: nowrap;
  156.             font-size: 76px;
  157.             margin-left: -29px;
  158.             margin-bottom: 20px;
  159.         }
  160.  
  161.         .blep {
  162.             margin: 0;
  163.             margin-top: -60px;
  164.             margin-left: 250px;
  165.         }
  166.  
  167.         footer {
  168.             width: 550px;
  169.             height: 20%;
  170.  
  171.             left: 0;
  172.             right: 0;
  173.             position: absolute;
  174.             bottom: 0;
  175.             margin: 0px auto;
  176.         }
  177.  
  178.         footer .footerTrans {
  179.             bottom: 0;
  180.             width: 100%;
  181.             position: absolute;
  182.             height: 100%;
  183.             background-color: black;
  184.             opacity: 0.4;
  185.         }
  186.  
  187.         footer p{
  188.             margin: 0;
  189.             margin-left: 5px;
  190.             bottom: 0;
  191.             color: white;
  192.             position: absolute;
  193.             z-index: 1;
  194.         }
  195.  
  196.         nav a:first-of-type {
  197.             margin-left: 0;
  198.         }
  199.  
  200.         .button {
  201.             margin-left: 20px;
  202.             position: relative;
  203.             display: inline-block;
  204.             text-decoration: none;
  205.             padding: 10px 40px;
  206.         }
  207.         .button .buttonBg{
  208.             -webkit-transition: background-color 0.5s;
  209.             transition: background-color 0.5s;
  210.         }
  211.  
  212.         .button:hover .buttonBg{
  213.             background-color: white;
  214.             opacity: 0.5
  215.         }
  216.  
  217.         .button:hover .text{
  218.             color: black;
  219.         }
  220.  
  221.         .buttonBg{
  222.             background-color: black;
  223.             width: 100%;
  224.             height: 100%;
  225.             position: absolute;
  226.             top: 0;
  227.             left: 0;
  228.             opacity: 0.4;
  229.         }
  230.  
  231.         .button .text {
  232.             z-index: 1;
  233.             font-size: 40px;
  234.             color: white;
  235.             position: relative;
  236.         }
  237.  
  238.         nav {
  239.             margin: 0px auto;
  240.             position: relative;
  241.             display: table;
  242.         }
  243.  
  244.         .cbp-bislideshow {
  245.             list-style: none;
  246.             width: 100%;
  247.             height: 100%;
  248.             position: fixed;
  249.             top: 0;
  250.             left: 0;
  251.             z-index: -1;
  252.             padding: 0;
  253.             margin: 0;
  254.         }
  255.  
  256.         .cbp-bislideshow li {
  257.             position: absolute;
  258.             width: 101%;
  259.             height: 101%;
  260.             top: -0.5%;
  261.             left: -0.5%;
  262.             opacity: 0;
  263.             -webkit-transition: opacity 1s;
  264.             -moz-transition: opacity 1s;
  265.             transition: opacity 1s;
  266.         }
  267.  
  268.         /* If background-size supported we'll add the images to the background of the li */
  269.  
  270.         .backgroundsize .cbp-bislideshow li {
  271.             -webkit-background-size: cover;
  272.             -moz-background-size: cover;
  273.             background-size: cover;
  274.             background-position: center center;
  275.         }
  276.  
  277.         /* ...and hide the images */
  278.         .backgroundsize .cbp-bislideshow li img {
  279.             display: none;
  280.         }
  281.  
  282.         .cbp-bislideshow li img {
  283.             display: block;
  284.             width: 100%;
  285.         }
  286.  
  287.  
  288.         .cbp-bicontrols span {
  289.             float: left;
  290.             width: 100px;
  291.             height: 100px;
  292.             position: relative;
  293.             cursor: pointer;
  294.         }
  295.  
  296.         .cbp-bicontrols span:before {
  297.             position: absolute;
  298.             width: 100%;
  299.             height: 100%;
  300.             top: 0;
  301.             left: 0;
  302.             text-align: center;
  303.             font-family:'Font Awesome\ 5 Free';
  304.             speak: none;
  305.             font-style: normal;
  306.             font-weight: normal;
  307.             font-variant: normal;
  308.             text-transform: none;
  309.             line-height: 100px;
  310.             font-size: 80px;
  311.             color: #fff;
  312.             -webkit-font-smoothing: antialiased;
  313.             opacity: 0.7;
  314.         }
  315.  
  316.         .cbp-bicontrols span:hover:before {
  317.             opacity: 1;
  318.         }
  319.  
  320.         .cbp-bicontrols span:active:before {
  321.             top: 2px;
  322.         }
  323.  
  324.         span.cbp-biplay:before {
  325.             content: "\e002";
  326.         }
  327.  
  328.         span.cbp-bipause:before {
  329.             content: "\e003";
  330.         }
  331.  
  332.         .cbp-bicontrols span.cbp-binext {
  333.             float: right;
  334.         }
  335.  
  336.         /* Fallback */
  337.  
  338.         .no-js.no-backgroundsize .cbp-bislideshow li:first-child {
  339.             opacity: 1;
  340.         }
  341.  
  342.         .no-js.backgroundsize .cbp-bislideshow li:first-child img {
  343.             display: block;
  344.         }
  345.  
  346.  
  347.         @media screen and (max-height: 920px){
  348.             .logo {
  349.                 top: 0;
  350.             }
  351.  
  352.             main {
  353.                 top: 67%;
  354.             }
  355.  
  356.             .logo p{
  357.                 font-size: 150px;
  358.             }
  359.  
  360.             .purple {
  361.                 margin-left: -86px;
  362.             }
  363.  
  364.             header, footer{
  365.                 width: 460px;
  366.             }
  367.  
  368.             .headerText h2 {
  369.                 margin-left: -79px;
  370.             }
  371.         }
  372.  
  373.         @media screen and (max-height: 630px){
  374.  
  375.             .logo p{
  376.                 margin: 0;
  377.                 position: relative;
  378.                 font-size: 40px;
  379.                 display: block;
  380.                 text-align: center;
  381.             }
  382.             .logo {
  383.                 position: relative;
  384.                 margin-top: 20px;
  385.             }
  386.  
  387.             .headerText h2{
  388.                 position: relative;
  389.                 white-space: inherit;
  390.                 margin: 0;
  391.                 text-align: center;
  392.                 font-size: 30px;
  393.                 margin-top: 10px;
  394.             }
  395.  
  396.             header{
  397.                 height: 200px;
  398.                 width: 100%;
  399.             }
  400.  
  401.             footer{
  402.                 display: none;
  403.             }
  404.  
  405.             main {
  406.                 top: 230px;
  407.             }
  408.         }
  409.  
  410.         @media screen and (max-width: 1200px){
  411.             nav{
  412.                 width: 290px;
  413.                 display: block;
  414.             }
  415.  
  416.             .logo p{
  417.                 margin: 0;
  418.                 position: relative;
  419.                 font-size: 40px;
  420.                 display: block;
  421.                 text-align: center;
  422.             }
  423.             .logo {
  424.                 position: relative;
  425.                 margin-top: 20px;
  426.             }
  427.  
  428.             .headerText h2{
  429.                 position: relative;
  430.                 white-space: inherit;
  431.                 margin: 0;
  432.                 text-align: center;
  433.                 font-size: 30px;
  434.                 margin-top: 10px;
  435.             }
  436.  
  437.             header{
  438.                 height: 200px;
  439.                 width: 100%;
  440.             }
  441.  
  442.             footer{
  443.                 display: none;
  444.             }
  445.  
  446.             main {
  447.                 top: 230px;
  448.             }
  449.  
  450.             #cbp-bicontrols{
  451.                 display: none;
  452.             }
  453.  
  454.  
  455.             .button{
  456.                 display: block;
  457.                 margin-bottom: 20px;
  458.                 margin-left: 0;
  459.             }
  460.  
  461.             .button .text {
  462.                 text-align: center;
  463.                 font-size: 30px;
  464.             }
  465.         }
  466.     </style>
  467.  
  468.     <!--[if lt IE 9]>
  469.    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  470.    <![endif]-->
  471. </head>
  472. <body>
  473. <ul id="cbp-bislideshow" class="cbp-bislideshow">
  474.     <li><img src="https://static.tumblr.com/1j9hcx2/zB5p911bc/bg1.jpg" alt="image01"/></li>
  475.     <li><img src="https://i.imgur.com/MWrd323.png" alt="image02"/></li>
  476.     <li><img src="https://i.imgur.com/Luxavau.png" alt="image03"/></li>
  477.     <li><img src="https://orig00.deviantart.net/9175/f/2017/351/3/c/baby_cammie_by_purple_blep-dbwz14h.png" alt="image04"/></li>
  478.  
  479. </ul>
  480. <div class="overlay"></div>
  481.  
  482. <div id="cbp-bicontrols" class="cbp-bicontrols">
  483.     <span class="cbp-biprev"><i class="fas fa-chevron-left"></i></span>
  484.     <span class="cbp-binext"><i class="fas fa-chevron-right"></i></span>
  485. </div>
  486.  
  487. <div class="page">
  488.     <header>
  489.         <div class="headerText">
  490.             <div class="logo">
  491.                 <p class="purple">Purple</p>
  492.                 <p class="blep">Blep</p>
  493.             </div>
  494.             <h2>Art, Dragons, Bleps!</h2>
  495.         </div>
  496.  
  497.         <div class="headerTrans"></div>
  498.     </header>
  499.  
  500.     <main>
  501.         <nav>
  502.             <a href="https://twitter.com/purple_blep/" class="button">
  503.                 <div class="buttonBg"></div>
  504.                 <div class="text">Twitter</div>
  505.             </a>
  506.             <a href="https://purple-blep.deviantart.com/" class="button">
  507.                 <div class="buttonBg"></div>
  508.                 <div class="text">Deviantart</div>
  509.             </a>
  510.             <a href="https://artstation.com/lupintine/" class="button">
  511.                 <div class="buttonBg"></div>
  512.                 <div class="text">Artstation</div>
  513.             </a>
  514.             <a href="mailto:purps@purpleblep.com" class="button">
  515.                 <div class="buttonBg"></div>
  516.                 <div class="text">Contact</div>
  517.             </a>
  518.  
  519.         </nav>
  520.     </main>
  521.     <footer>
  522.         <div class="footerText"><p> &copy; Emma Young, 2018</p></div>
  523.         <div class="footerTrans"></div>
  524.  
  525.     </footer>
  526.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  527.     <script src="https://puu.sh/ApCcB/5f5c46c495.js"></script>
  528.     <!-- imagesLoaded jQuery plugin by @desandro : https://github.com/desandro/imagesloaded -->
  529.     <script src="https://puu.sh/ApCh0/e82c480e78.js"></script>
  530.     <script>
  531.         /**
  532.          * cbpBGSlideshow.js v1.0.0
  533.          * http://www.codrops.com
  534.          *
  535.          * Licensed under the MIT license.
  536.          * http://www.opensource.org/licenses/mit-license.php
  537.          *
  538.          * Copyright 2013, Codrops
  539.          * http://www.codrops.com
  540.          */
  541.         var cbpBGSlideshow = (function() {
  542.  
  543.             var $slideshow = $( '#cbp-bislideshow' ),
  544.                 $items = $slideshow.children( 'li' ),
  545.                 itemsCount = $items.length,
  546.                 $controls = $( '#cbp-bicontrols' ),
  547.                 navigation = {
  548.                     $navPrev : $controls.find( 'span.cbp-biprev' ),
  549.                     $navNext : $controls.find( 'span.cbp-binext' ),
  550.                     $navPlayPause : $controls.find( 'span.cbp-bipause' )
  551.                 },
  552.                 // current item´s index
  553.                 current = 0,
  554.                 // timeout
  555.                 slideshowtime,
  556.                 // true if the slideshow is active
  557.                 isSlideshowActive = true,
  558.                 // it takes 3.5 seconds to change the background image
  559.                 interval = 7000;
  560.  
  561.             function init( config ) {
  562.  
  563.                 // preload the images
  564.                 $slideshow.imagesLoaded( function() {
  565.  
  566.                     if( Modernizr.backgroundsize ) {
  567.                         $items.each( function() {
  568.                             var $item = $( this );
  569.                             $item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
  570.                         } );
  571.                     }
  572.                     else {
  573.                         $slideshow.find( 'img' ).show();
  574.                         // for older browsers add fallback here (image size and centering)
  575.                     }
  576.                     // show first item
  577.                     $items.eq( current ).css( 'opacity', 1 );
  578.                     // initialize/bind the events
  579.                     initEvents();
  580.                     // start the slideshow
  581.                     startSlideshow();
  582.  
  583.                 } );
  584.  
  585.             }
  586.  
  587.             function initEvents() {
  588.  
  589.                 navigation.$navPlayPause.on( 'click', function() {
  590.  
  591.                     var $control = $( this );
  592.                     if( $control.hasClass( 'cbp-biplay' ) ) {
  593.                         $control.removeClass( 'cbp-biplay' ).addClass( 'cbp-bipause' );
  594.                         startSlideshow();
  595.                     }
  596.                     else {
  597.                         $control.removeClass( 'cbp-bipause' ).addClass( 'cbp-biplay' );
  598.                         stopSlideshow();
  599.                     }
  600.  
  601.                 } );
  602.  
  603.                 navigation.$navPrev.on( 'click', function() {
  604.                     navigate( 'prev' );
  605.                     if( isSlideshowActive ) {
  606.                         startSlideshow();
  607.                     }
  608.                 } );
  609.                 navigation.$navNext.on( 'click', function() {
  610.                     navigate( 'next' );
  611.                     if( isSlideshowActive ) {
  612.                         startSlideshow();
  613.                     }
  614.                 } );
  615.  
  616.             }
  617.  
  618.             function navigate( direction ) {
  619.  
  620.                 // current item
  621.                 var $oldItem = $items.eq( current );
  622.  
  623.                 if( direction === 'next' ) {
  624.                     current = current < itemsCount - 1 ? ++current : 0;
  625.                }
  626.                else if( direction === 'prev' ) {
  627.                    current = current > 0 ? --current : itemsCount - 1;
  628.                 }
  629.  
  630.                 // new item
  631.                 var $newItem = $items.eq( current );
  632.                 // show / hide items
  633.                 $oldItem.css( 'opacity', 0 );
  634.                 $newItem.css( 'opacity', 1 );
  635.  
  636.             }
  637.  
  638.             function startSlideshow() {
  639.  
  640.                 isSlideshowActive = true;
  641.                 clearTimeout( slideshowtime );
  642.                 slideshowtime = setTimeout( function() {
  643.                     navigate( 'next' );
  644.                     startSlideshow();
  645.                 }, interval );
  646.  
  647.             }
  648.  
  649.             function stopSlideshow() {
  650.                 isSlideshowActive = false;
  651.                 clearTimeout( slideshowtime );
  652.             }
  653.  
  654.             return { init : init };
  655.  
  656.         })();
  657.     </script>
  658.     <script>
  659.         $(function () {
  660.             cbpBGSlideshow.init();
  661.         });
  662.     </script>
  663.  
  664.     <noscript>
  665.         <style>
  666.             .cbp-bislideshow {
  667.                 display: none;
  668.             }
  669.         </style>
  670.     </noscript>
  671. </body>
  672. </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!