A Pen by Salocin Zenilema-Selbor

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Salocin Zenilema-Selbor</title>
  
  
  <link rel='stylesheet prefetch' href='https://raw.github.com/wandoledzep/bxslider-4/master/jquery.bxslider.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="menu">
  <li><a class="popupthing" href="#">link1</a></li>
  <li><a class="hidything" href="#">link2</a></li>
  <li><a class="showything" href="#">link3</a></li>
  <li class="deleteme"><a href="https://google.com">link4</a></li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//raw.github.com/wandoledzep/bxslider-4/master/jquery.bxslider.js"></script>

<ul class="slideshow">
  <li><img src="http://placekitten.com/200/300" /></li>
  <li><img src="http://placekitten.com/200/320" /></li>
  <li><img src="http://placekitten.com/300/300" /></li>
  <li><img src="http://placekitten.com/200/200" /></li>
</ul>

<script type="text/javascript">
  $(document).ready(function(){
  
    $('.popupthing').click( function() {
       alert('oh hai!');
    });
  
  
    $('.hidything').click( function() {
       $('.deleteme').fadeOut('slow');
    });
  
  
    $('.showything').click( function() {
       $('.deleteme').fadeIn('slow');
    });
  
  
    $('.slideshow').bxSlider({
      auto: true,
      autoControls: true
    });
  
  });
</script>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/110162/a-pen-by-salocin-zenilema-selbor-fpEIC */
p {
  background-color: black;
}

.menu li {
  list-style: none;
  background-color: red;
  width: 200px;
  padding: 10px;
  margin: 10px;
}

.menu li:hover {
  background-color: pink; 
}

.bx-pager-link {
  border: 1px solid red;
  background: red;
  color: white;
  padding: 1px;
  float: left;
  width: 20px;
  border-radius: 50%;
}

Comments