158 lines
4 KiB
HTML
158 lines
4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The web site of alienhospital</title>
|
|
<!-- The style.css file allows you to change the look of your web pages.
|
|
If you include the next line in all your web pages, they will all share the same look.
|
|
This makes it easier to make new pages for your site. -->
|
|
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
|
|
|
|
<style>
|
|
|
|
.dragme {
|
|
display: inline-block;
|
|
}
|
|
|
|
#fieldheader {
|
|
width: 930px;
|
|
font-size:15px;
|
|
font-family: "Comic Sans MS", sans-serif;
|
|
color: #FFFFFF/*white 0*/;
|
|
text-align: center;
|
|
border-radius: 25px 25px 0 0;
|
|
padding: 10px 0;
|
|
margin: 10px auto 0 auto;
|
|
}
|
|
}
|
|
|
|
#field {
|
|
height: 500px;
|
|
width: 930px;
|
|
position: relative;
|
|
text-align: right;
|
|
align-content: right;
|
|
}
|
|
|
|
#fieldfooter {
|
|
|
|
width: 930px;
|
|
font-size:15px;
|
|
font-family: "Comic Sans MS", sans-serif;
|
|
color: #FFFFFF/*white 0*/;
|
|
text-align: center;
|
|
border-radius: 0 0 25px 25px;
|
|
padding: 10px 0;
|
|
margin: 0 auto 10px auto;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<center><a href="/homepage">home</a><br>
|
|
this does not work on mobile devices. <br><br>
|
|
<div id="field" style="background:url('/dressup/bg.jpg'); height: 900px; width: 930px; text-align: right;">
|
|
<!-- hats -->
|
|
|
|
<div class="dragme">
|
|
<img src="/dressup/hat1.png" width="100px" style="margin-right: -50px;">
|
|
</div>
|
|
<div class="dragme">
|
|
<img src="/dressup/hat2.png" width="100px" style="margin-right: -50px;">
|
|
</div>
|
|
<div class="dragme">
|
|
<img src="/dressup/hat3.png" width="100px" style="margin-right: -50px;">
|
|
</div>
|
|
|
|
<div class="dragme">
|
|
<img src="/dressup/hat4.png" width="100px" style="margin-right: -50px;">
|
|
</div>
|
|
|
|
|
|
|
|
<div class="dragme">
|
|
<img src="/dressup/heartglasses.png" width="100px" style="margin-right: -50px;">
|
|
</div>
|
|
|
|
<div class="dragme">
|
|
<img src="/dressup/purpleshades.png" width="100px" style="margin-right: -50px;">
|
|
</div>
|
|
<div class="dragme">
|
|
<img src="/dressup/wig.png" width="230px" style="margin-right: -50px;">
|
|
</div>
|
|
<br><br>
|
|
|
|
<!-- bowties -->
|
|
<div class="dragme">
|
|
<img src="/dressup/rainbowtie.png" width="100px" style="margin-right: -75px;">
|
|
</div>
|
|
<div class="dragme">
|
|
<img src="/dressup/heartie.png" width="100px" style="margin-right: -50px;">
|
|
</div>
|
|
|
|
|
|
<!-- shirts --> <br><br><br><br><br><br><br><br>
|
|
<div class="dragme">
|
|
<img src="/dressup/dmshirts.png" width="300px" style="margin-left: -75px;">
|
|
</div>
|
|
<div class="dragme">
|
|
<img src="/dressup/dadshirt.png" width="300px" style="margin-right: -75px;">
|
|
</div>
|
|
<div class="dragme">
|
|
<img src="/dressup/cshirt2.png" width="300px" style="margin-right: -75px;">
|
|
</div>
|
|
|
|
<div class="dragme">
|
|
<img src="/dressup/britneyshirt.png" width="300px" style="margin-right: -75px;">
|
|
</div>
|
|
|
|
|
|
|
|
<br>
|
|
</div>
|
|
</div></div>
|
|
<div id="fieldfooter" style="background-color: darkred;"><a href="https://sillybeanies.neocities.org/fun/dressups/dressupindex">code source!!</a></div>
|
|
<script>
|
|
|
|
$(function() {
|
|
$( ".dragme" ).draggable({
|
|
containment: 'parent',
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</div>
|
|
</body>
|
|
<style>
|
|
body {
|
|
background-image: url('https://i.ibb.co/m50KTwSN/rob-laughter-WW1js-In-Xgw-M-unsplash.jpg');
|
|
background-size: cover;
|
|
color: #fff;
|
|
}
|
|
|
|
#tns {
|
|
margin: 0 auto;
|
|
width: 400px;
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.dragme {
|
|
position: relative;
|
|
|
|
cursor: move;
|
|
}
|
|
|
|
|
|
|
|
#draggable {
|
|
}
|
|
</style>
|
|
</html>
|