Team:Hong Kong-CUHK/home-1.html

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/bootstrap.mi...")
(Replaced content with "<h1>h1</h1> <h2>h2</h2> <h2><b>h2 bold</b></h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <pre> pre </pre> <div class="subtopic well"> Subtopic well </div>")
Line 1: Line 1:
-
<html>
+
<h1>h1</h1>
 +
<h2>h2</h2>
 +
<h2><b>h2 bold</b></h2>
 +
<h3>h3</h3>
 +
<h4>h4</h4>
 +
<h5>h5</h5>
-
<head>
+
<pre>
-
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
pre
-
    <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet">
+
</pre>
-
    <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/common.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
    <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script>
+
-
    <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/bootstrap.min.js?action=raw&ctype=text/javascript"></script>
+
-
    <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/common.js?action=raw&ctype=text/javascript"></script>
+
-
</head>
+
-
<style type="text/css">
+
<div class="subtopic well">
-
#board {
+
Subtopic well
-
    background-image: url('images/rail.png');
+
</div>
-
    background-size: 100% 100%;
+
-
    width: 1000px;
+
-
    height: 600;
+
-
}
+
-
.chess {
+
-
    background-size: 100% 100%;
+
-
    width: 150px;
+
-
    height: 150px;
+
-
    position: absolute;
+
-
    cursor: pointer;
+
-
}
+
-
.profile-pic {
+
-
    background-size: 100% 100%;
+
-
    width: 100px;
+
-
    height: 100px;
+
-
    position: absolute;
+
-
    cursor: pointer;
+
-
}
+
-
.member-wrapper:hover > .profile-dialog {
+
-
    display: block;
+
-
background: rgba(255, 255, 255, 1);
+
-
padding: 12px;
+
-
    font-size: 24px;
+
-
}
+
-
.profile-dialog {
+
-
    position: absolute;
+
-
    box-shadow: 1px 1px 10px 0 #ccc;
+
-
    background: rgba(255, 255, 255, 0.7);
+
-
    padding: 8px;
+
-
    font-size: 20px;
+
-
    display: block;
+
-
}
+
-
 
+
-
#train {
+
-
    width: 620px;
+
-
    height: 430px;
+
-
    position: absolute;
+
-
    background-size: contain;
+
-
    background-repeat: no-repeat;
+
-
    background-image: url('images/train-index.png');
+
-
}
+
-
body {
+
-
background-image: url('images/bg.jpg');
+
-
}
+
-
</style>
+
-
 
+
-
<body>
+
-
+
-
    <div class="row">
+
-
        <div id="board" class="center-block">
+
-
            <div id="train"></div>
+
-
        </div>
+
-
        <div id="top-bar"></div>
+
-
    </div>
+
-
</body>
+
-
 
+
-
<script type="text/javascript">
+
-
var content = {
+
-
    menuItems: [{
+
-
        info: {
+
-
            about: "Project",
+
-
            background: "images/menu/project.png",
+
-
            backgroundHover: "images/menu/project-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 100,
+
-
            left: 550
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: -20,
+
-
                left: 100
+
-
            }
+
-
        }
+
-
    }, {
+
-
        info: {
+
-
            about: "Team",
+
-
            background: "images/menu/team.png",
+
-
            backgroundHover: "images/menu/team-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 10,
+
-
            left: 350
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: 0,
+
-
                left: 100
+
-
            }
+
-
        }
+
-
    }, {
+
-
        info: {
+
-
            about: "Biobricks",
+
-
            background: "images/menu/biobricks.png",
+
-
            backgroundHover: "images/menu/biobricks-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 350,
+
-
            left: 180
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: 0,
+
-
                left: 100
+
-
            }
+
-
        }
+
-
    }, {
+
-
        info: {
+
-
            about: "Modelling",
+
-
            background: "images/menu/modelling.png",
+
-
            backgroundHover: "images/menu/modelling-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 180,
+
-
            left: 300
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: 50,
+
-
                left: 140
+
-
            }
+
-
        }
+
-
    }, {
+
-
        info: {
+
-
            about: "Documentation",
+
-
            background: "images/menu/documentation.png",
+
-
            backgroundHover: "images/menu/documentation-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 400,
+
-
            left: 400
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: 50,
+
-
                left: 120
+
-
            }
+
-
        }
+
-
    }, {
+
-
        info: {
+
-
            about: "Human Practice",
+
-
            background: "images/menu/human-practice.png",
+
-
            backgroundHover: "images/menu/human-practice-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 130,
+
-
            left: 800
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: -60,
+
-
                left: 50
+
-
            }
+
-
        }
+
-
    }, {
+
-
        info: {
+
-
            about: "Safety",
+
-
            background: "images/menu/safety.png",
+
-
            backgroundHover: "images/menu/safety-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 240,
+
-
            left: 630
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: 50,
+
-
                left: 120
+
-
            }
+
-
        }
+
-
    }, {
+
-
        info: {
+
-
            about: "Acknowledgement",
+
-
            background: "images/menu/acknowledgement.png",
+
-
            backgroundHover: "images/menu/acknowledgement-hover.png"
+
-
        },
+
-
        offset: {
+
-
            top: 425,
+
-
            left: 700
+
-
        },
+
-
        dialog: {
+
-
            background: "#ff0000",
+
-
            offset: {
+
-
                top: 50,
+
-
                left: 140
+
-
            }
+
-
        }
+
-
    }]
+
-
};
+
-
 
+
-
$(document).ready(function() {
+
-
 
+
-
    $.each(content.menuItems, function(index, value) {
+
-
        var wrapper = $('<div></div>')
+
-
            .addClass('member-wrapper')
+
-
            .css('position', 'relative')
+
-
            .offset(value.offset);
+
-
 
+
-
        var dialog = $('<div></div>')
+
-
            .addClass('profile-dialog')
+
-
            .css('font-size', '18')
+
-
            //.css('background', value.dialog.background)
+
-
            .text(value.info.about)
+
-
            .offset(value.dialog.offset);
+
-
 
+
-
        var chess = $('<div></div>')
+
-
            .addClass('chess')
+
-
            .data("index", index)
+
-
            .css('background', "0px 0px/100% 100% url('" + value.info.background + "')")
+
-
            .hover(function() {
+
-
                $(this).css('background', "0px 0px/100% 100% url('" + value.info.backgroundHover + "')");
+
-
            }, function() {
+
-
                $(this).css('background', "0px 0px/100% 100% url('" + value.info.background + "')");
+
-
            })
+
-
            .click(function() {
+
-
                location.href = 'home.html?' + value['about'];
+
-
            });
+
-
 
+
-
        wrapper.append(chess);
+
-
        wrapper.append(dialog);
+
-
        $("#board").append(wrapper);
+
-
    });
+
-
});
+
-
</script>
+
-
 
+
-
</html>
+

Revision as of 17:51, 16 October 2014

Contents

h1

h2

h2 bold

h3

h4

h5
pre

Subtopic well

Retrieved from "http://2014.igem.org/Team:Hong_Kong-CUHK/home-1.html"