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>
  <li class="deleteme"><a href="https://google.com">link5</a></li>
  <li class="deleteme"><a href="https://google.com">link6</a></li>
  <li class="deleteme"><a href="https://google.com">link7</a></li>
  <li class="deleteme"><a href="https://google.com">link8</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>



<div style="height: 260px;">
	<div id="header_browse" style="float: left; width: 468px; height: 250px; border: 2px solid #000000;">
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468" height="250">
			<param name="movie" value="/img/header_games.swf">
			<param name="quality" value="high">
			<embed src="/img/header_games.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="250"></embed>
		</object>
	</div>
	 
	<div class="box_ad"> 
			</div>
</div>
<br />
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/110162/a-pen-by-salocin-zenilema-selbor-AauBm */
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