kitty cat

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

absdefghiklmnopqrstuvwxyz

Thumbnail
This awesome code was written by gog, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gog ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <p>text</p>

  <ul class="menu">
  <li><a href="#">j</a></li>
  <li><a href="#">o</a></li>
  <li><a href="#">s</a></li>
  <li><a href="#">h</a></li>
  <li><a href="#">v</a></li>
  <li class="bg"></li>
</ul>

<img
     src="http://www.skylandersinquirer.com/wp-content/uploads/2015/07/SSC_Dark-Edition_Nintendo_Dark-Bowser-2.jpg">

<img
     src="http://www.vertexproductions.com/Images2/Ocean%20Park/Web/OceanPark-(12).jpg">

rolor coaster
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/gog/kitty-cat-rOmjZo */
body {background-color: red;
  color: green;
  font-size: 34px;
} 

@font-face {
    font-family:'HeydingsCommonIconsRegular';
    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot');
    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://ianfarb.com/random/heydings_icons-webfont.woff') format('woff'),
         url('http://ianfarb.com/random/heydings_icons-webfont.ttf') format('truetype'),
         url('http://ianfarb.com/random/heydings_icons-webfont.svg#HeydingsCommonIconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {    margin: 0;
  padding: 0;}

body   {  background:#e5e5e5;}

.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}

li
{  list-style:none;
   }

li a
    { display:block;
      float:left;
      width:20%;
      padding:25px 0;
      text-align:center;
      font-family: 'HeydingsCommonIconsRegular', Helvetida Neue, sans-serif;
      font-weight:700;
      letter-spacing:1px;
      font-size:40px;
      color:#fff;
      background:#ccc;
      text-decoration:none;
      text-transform:uppercase;
      text-shadow:2px 2px 0 rgba(0,0,0,.25);
      transition:.25s;}

li a:hover  {
      margin:-10px 0 0 0;
}

.menu
    {  width:500px;
       margin:60px auto 0 auto;
       border-radius:10px;
       overflow:hidden;}
       
.menu li:first-child a {  background:#ffca6d !important;}
.menu li:nth-child(2) a {  background:#ff6d6d !important;}
.menu li:nth-child(3) a {  background:#6dffb9 !important;}
.menu li:nth-child(4) a {  background:#6dcaff !important;}
.menu li:nth-child(5) a {  background:#ec6dff !important;}

.menu li:first-child:hover ~ .bg {
  background: #ffca6d;
  
}
.menu li:nth-child(2):hover ~ .bg {
  background: #ff6d6d;
}
.menu li:nth-child(3):hover ~ .bg {
  background: #6dffb9;
}
.menu li:nth-child(4):hover ~ .bg {
  background: #6dcaff;
}
.menu li:nth-child(5):hover ~ .bg {
  background: #ec6dff;
}
    

Comments