Skip to content

Instantly share code, notes, and snippets.

@macabreb0b

macabreb0b/dragon_boat.html

Last active August 29, 2015 14:08
Show Gist options
  • Save macabreb0b/a830b8ec052600f4724c to your computer and use it in GitHub Desktop.
Save macabreb0b/a830b8ec052600f4724c to your computer and use it in GitHub Desktop.
Download ZIP
render dragon boat seating chart with absolute positioning and hover effect
Raw
dragon_boat.html
<html>
<head>
<style>
body * {
box-sizing: border-box;
}
.boat {
background-image: url(http://www.lively-dragon.com/Resources/Pictures/boat_seating.png);
background-size: 100% auto;
width: 202px;
height: 1000px;
border: thin solid blue;
position: relative;
}
.seat {
width: 50px;
height: 50px;
border-radius: 25px;
/* border: thin solid red;*/
position: absolute;
margin-left: -25px;
}
.seat:hover {
background: rgba(255, 0, 0, .8);
}
.seat.center {
left: 50%;
}
.seat.left {
left: 25%;
}
.seat.right {
left: 75%;
}
.seat[data-seatno="0"] {
top: 40px;
}
.seat[data-seatno="21"] {
bottom: 40px;
}
.seat[data-seatno="1"]{
top: 110px;
left: 35%;
}
.seat[data-seatno="2"] {
top: 110px;
left: 65%;
}
.seat[data-seatno="3"], .seat[data-seatno="4"] {
top: 177px;
}
.seat[data-seatno="5"], .seat[data-seatno="6"] {
top: 240px;
}
.seat.seat-0 {
position: absolute;
left: 50%;
top: 40px;
margin-left: -25px;
width: 50px;
height: 50px;
border-radius: 25px;
border: thin solid red;
}
</style>
</head>
<body>
<div class="boat">
<div class="seat center" data-seatno="0"></div>
<div class="seat" data-seatno="1"></div>
<div class="seat left" data-seatno="3"></div>
<div class="seat left" data-seatno="5"></div>
<div class="seat left" data-seatno="7"></div>
<div class="seat left" data-seatno="9"></div>
<div class="seat left" data-seatno="11"></div>
<div class="seat left" data-seatno="13"></div>
<div class="seat left" data-seatno="15"></div>
<div class="seat left" data-seatno="17"></div>
<div class="seat left" data-seatno="19"></div>
<div class="seat" data-seatno="2"></div>
<div class="seat right" data-seatno="4"></div>
<div class="seat right" data-seatno="6"></div>
<div class="seat right" data-seatno="8"></div>
<div class="seat right" data-seatno="10"></div>
<div class="seat right" data-seatno="12"></div>
<div class="seat right" data-seatno="14"></div>
<div class="seat right" data-seatno="16"></div>
<div class="seat right" data-seatno="18"></div>
<div class="seat right" data-seatno="20"></div>
<div class="seat center" data-seatno="21"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment