Skip to content

Instantly share code, notes, and snippets.

@akakiev

akakiev/find-the-penguins.markdown

Created April 1, 2017 20:48
Show Gist options
  • Save akakiev/8810871a88515a056d4e765a8804767b to your computer and use it in GitHub Desktop.
Save akakiev/8810871a88515a056d4e765a8804767b to your computer and use it in GitHub Desktop.
Download ZIP
Find the Penguins
Raw
index.html
<html>
<head>
<title>Pop-up Penguins</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="gameholder">
<div id="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</body>
</html>
Raw
script.js
$(".yeti").mousedown(function(){
alert("Yaaaaarrrrr!");
});
Raw
style.css
body {
background-color: #ccf5f5;
}
#gameholder{
width:600px;
margin-left:auto;
margin-right:auto;
}
#title{
align-image:center;
width:600px;
height:150px;
background-image:url('http://a11.it-elit.pro/coder/img/penguin_title.png');
}
.penguin1{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_1.png');
}
.penguin1:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_1_hover.png');
cursor:pointer;
}
.penguin1:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_1.png');
}
.penguin2{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_2.png');
}
.penguin2:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_2_hover.png');
cursor:pointer;
}
.penguin2:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_2.png');
}
.penguin3{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_3.png');
}
.penguin3:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_3_hover.png');
cursor:pointer;
}
.penguin3:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_3.png');
}
.penguin4{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_4.png');
}
.penguin4:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_4_hover.png');
cursor:pointer;
}
.penguin4:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_4.png');
}
.penguin5{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_5.png');
}
.penguin5:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_5_hover.png');
cursor:pointer;
}
.penguin5:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_5.png');
}
.penguin6{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_6.png');
}
.penguin6:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_6_hover.png');
cursor:pointer;
}
.penguin6:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_6.png');
}
.penguin7{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_7.png');
}
.penguin7:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_7_hover.png');
cursor:pointer;
}
.penguin7:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_7.png');
}
.penguin8{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_8.png');
}
.penguin8:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_8_hover.png');
cursor:pointer;
}
.penguin8:active{
background-image:url('http://a11.it-elit.pro/coder/img/penguin_8.png');
}
.yeti{
width:200px;
height:200px;
float:left;
background-image:url('http://a11.it-elit.pro/coder/img/mound_9.png');
}
.yeti:hover{
background-image:url('http://a11.it-elit.pro/coder/img/mound_5_hover.png');
cursor:pointer;
}
.yeti:active{
background-image:url('http://a11.it-elit.pro/coder/img/yeti.png');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment