knife 40

In this example below you will see how to do a knife 40 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by PirateMadeOfMayhem, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright PirateMadeOfMayhem ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>knife 40</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  

<html>
  <head>
    <title>
      [TITLE]
    </title>
    <meta charset="utf-8">
    <meta name="keywords" content="grant clough, pirate made of mayhem, miclaymon">
    <meta name="description" content="description">
    <meta name="author" content="Grant Clough">
    <script src="https://code.jquery.com/jquery-2.2.0.min.js">
    </script>
  </head>
  <body>
    <div class="exterior">
      <div class="toolbar">
        <img src="http://www.superfecta.com/AestheticPerfection/media/AP_Knife_Logo.png">
        <li>HOME</li>
        <a href="https://codepen.io/PirateMadeOfMayhem/debug/bpoRQZ">
          <li>SHOPPING</li>
        </a>
        <li>CONTACT US</li>
        <li>ABOUT US</li>
        <li>-----</li>
      </div>
    </div>
    
    <div class="panel">
      <img id="picture" src="https://www.mastercutlery.com/Pic/productspic/xlarge/ZB-109BG.jpg"  />
      <h1 class="name">
          Z Hunter Karambit set
      </h1>
      <p class="price">
        $00.00  
      </p>
      <ul class="info">
  <li>Fixed Blade Knife

  </li>
  <li>2 PIECE SET, 6.75" AND 4.5" OVERALL

  </li>
  <li>3.12" 3MM THICK BLADE, STAINLESS STEEL

  </li>
  <li>BLACK GRAY SKULL COATED BLADE

  </li>
  <li>GREEN ALUMINUM HANDLE WITH FINGER RING

  </li>
  <li>INCLUDES NYLON SHEATH

  </li>
</ul>
      </p>
    </div>
    
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/PirateMadeOfMayhem/knife-40-YqrJpz */


@import url(https://fonts.googleapis.com/css?family=Michroma);

html, body {
  color: #FFFFFF;
  cursor: default;
  background-color: #000000;
}

body {
  display: inline-table;
  position: absolute;
  height: 100%;
  width: 100%;
  margin: -0.02em -0.02em -0.02em -0.02em;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: url("http://eskipaper.com/images/pirate-wallpaper-15.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a, a:before, a:after, a:hover, a:focus {
  text-decoration: none;
}

.toolbar {
  width: 100%;
  height: 45px;
  margin: ;
  padding: 1.4em 1em 0em 1em;
  display: block;
  position: fixed;
  background-color: #C00000;
  z-index: 10;
}

.toolbar img {
  width: 3em;
  height: 3em;
  margin: -0.75em 1em 0em -0.5em;
  transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -webkit-transition: all 0.40s ease-in-out;
 -moz-transition: all 0.40s ease-in-out;
 -ms-transition: all 0.40s ease-in-out;
 -o-transition: all 0.40s ease-in-out;
}

.toolbar img:hover {
  transform: rotate(450deg);
 -ms-transform: rotate(450deg);
 -webkit-transform: rotate(450deg);
 -webkit-transition: all 0.40s ease-in-out;
 -moz-transition: all 0.40s ease-in-out;
 -ms-transition: all 0.40s ease-in-out;
 -o-transition: all 0.40s ease-in-out;
}

.toolbar li {
  width: 30px;
  color: #000000;
  margin: 1em 0.5em 0.5em 0.5em;
  padding: 0em 0.25em 0em 0.25em;
  display: inline;
  font-size: 1.0em;
  font-weight: bold;
  font-family: "Michroma";
  border-radius: 0.3em;
  background-color: #DDDDDD;
  box-shadow: none;
 -webkit-transition: all 0.50s ease-in-out;
 -moz-transition: all 0.50s ease-in-out;
 -ms-transition: all 0.50s ease-in-out;
 -o-transition: all 0.50s ease-in-out;
}

.toolbar li:hover {
  width: 30px;
  color: #707070;
  margin: 1em 0.5em 0.5em 0.5em;
  padding: 0em 0.25em 0em 0.25em;
  display: inline;
  font-size: 1.0em;
  font-weight: bold;
  font-family: "Michroma";
  border-radius: 0.3em;
  background-color: #FFFFFF;
  box-shadow: 0 0 2em rgba(255, 255, 255, 1);
 -webkit-transition: all 0.20s ease-in-out;
 -moz-transition: all 0.20s ease-in-out;
 -ms-transition: all 0.20s ease-in-out;
 -o-transition: all 0.20s ease-in-out;
}

.panel {
  float: left;
  clear: right;
  height: 28em;
  margin: 6.5em 2em 4em 2em;
  padding: 2em 2em 0em 2em;
  display: relative;
  position: block;
  border-radius: 0.5em;
  border-left: 5px solid #A00000;
  border-right: 5px solid #A00000;
  border-radius: 25px;
  background: rgba(0, 0, 0, .75);
  /* Animations */
 -webkit-animation-name: openPanel;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
  animation-name: openPanel;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

/* Animation: Panel */
@keyframes openPanel {0%{width:0%;}10%{width:0%;}100%{width:90%;}}
@-webkit-keyframes openPanel {0%{width:0%;}10%{width:0%;}100%{width:0%;}}
@keyframes openImage {0%{width:0em;height:26em;display:none;border:none;}50%{width:0em;height:26em;display:none;border:none;border:1px solid #606060;}100%{width:26em;height:26em;display:relative;border:2px solid #606060;}}
@-webkit-keyframes openImage {0%{width:26em;height:0em;display:none;border:none;}50%{width:0em;height:26em;display:none;border:none;border:1px solid #606060;}100%{width:26em;height:26em;display:relative;border:2px solid #606060;}}
@keyframes openText {0%{opacity:0.0;}75%{opacity:0.0;}100%{opacity:1.0;}}
@-webkit-keyframes openText {0%{opacity:0.0;}75%{opacity:0.0;}100%{opacity:1.0;}}

img {
  width: 26em;
  float: left;
  clear: right;
  height: 26em;
  margin: 0em auto;
  margin-bottom: -1em;
  display: absolute;
  position: relative;
  text-align: center;
  border-radius: 4px;
}

#picture:hover {
  cursor: none;
}

.panel img {
  border-top: 1.5px solid #909090;
  border-left: 1.5px solid #808080;
  border-right: 1.5px solid #707070;
  border-bottom: 1.5px solid #606060;
  /* Animations */
 -webkit-animation-name: openImage;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-iteration-count: 1;
  animation-name: openImage;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.panel .name {
  float: left;
  color: #888888;
  margin: 0em 0em 0em 0.75em;
  font-size: 2.4em;
  /* Animations */
 -webkit-animation-name: openText;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
  animation-name: openText;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

.panel .price {
  float: left;
  clear: right;
  color: #BBBBBB;
  margin: 2em 0em 0em -5.5em;
  padding: ;
  font-size: 1.6em;
  text-align: left;
  font-family: sans-serif;
  z-index: 4;
  /* Animations */
 -webkit-animation-name: openText;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
  animation-name: openText;
  animation-delay: 0s;
  animation-duration: 1.25s;
  animation-iteration-count: 1;
}

.panel .info {
  float: left;
  color: #CCCCCC;
  margin: -16em 0em 1em 23.25em;
  text-align: justify;
  font-family: sans-serif;
  font-size: 1.2em;
  /* Animations */
 -webkit-animation-name: openText;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
  animation-name: openText;
  animation-delay: 0s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

.glass {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 50%;
  cursor: none;
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
}

/*Downloaded from https://www.codeseek.co/PirateMadeOfMayhem/knife-40-YqrJpz */


// Magnify
$(function(){var native_width=0;var native_height=0;var mouse={x:0,y:0};var magnify;var cur_img;var ui={magniflier:$('#picture')};if (ui.magniflier.length){var div=document.createElement('div');div.setAttribute('class','glass');ui.glass=$(div);$('body').append(div);}var mouseMove=function(e){var $el=$(this);var magnify_offset=cur_img.offset();mouse.x=e.pageX-magnify_offset.left;mouse.y=e.pageY-magnify_offset.top;if(mouse.x<cur_img.width()&&mouse.y<cur_img.height()&&mouse.x>0&&mouse.y>0){magnify(e);}else{ui.glass.fadeOut(100);}return;};var magnify=function(e){var rx=Math.round(mouse.x/cur_img.width()*native_width-ui.glass.width()/2)*-1;var ry=Math.round(mouse.y/cur_img.height()*native_height-ui.glass.height()/2)*-1;var bg_pos=rx+"px "+ry+"px";var glass_left=e.pageX-ui.glass.width()/2;var glass_top=e.pageY-ui.glass.height()/2;ui.glass.css({left:glass_left,top:glass_top,backgroundPosition:bg_pos});return;};
$('#picture').on('mousemove',function(){ui.glass.fadeIn(100);cur_img=$(this);var large_img_loaded=cur_img.data('large-img-loaded');var src=cur_img.data('large')||cur_img.attr('src');if (src){ui.glass.css({'background-image': 'url('+src+')','background-repeat':'no-repeat'});}if(!cur_img.data('native_width')){var image_object=new Image();image_object.onload=function(){native_width=image_object.width;native_height=image_object.height;cur_img.data('native_width', native_width);cur_img.data('native_height', native_height);mouseMove.apply(this,arguments);ui.glass.on('mousemove',mouseMove);};image_object.src=src;return;}else{native_width=cur_img.data('native_width');native_height=cur_img.data('native_height');}mouseMove.apply(this,arguments);ui.glass.on('mousemove',mouseMove);});ui.glass.on('mouseout',function(){ui.glass.off('mousemove',mouseMove);});});

Comments