Team:Dundee/Template/testpage

From 2014.igem.org

(Difference between revisions)
 
(452 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
 +
<head>
-
<body>
+
<title>Dundee 2014 Team</title>
-
     <!-- Text Grid -->
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
    <div id="grid">
+
   
-
        <!-- Text Grid -->
+
-
        <div class="container">
+
  <link href="https://2014.igem.org/Team:Dundee/stylesheet/notebook?action=raw&ctype=text/css" rel="stylesheet">
-
            <div class="row">
+
  <link href="https://2014.igem.org/Team:Dundee/stylesheet?action=raw&ctype=text/css" rel="stylesheet">
-
                <!--Used to center "poster" column-->
+
  <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
-
                <div class=" col-md-3"></div>
+
 
-
                <div class="col-md-6 col-centered">
+
-
                    <!--<img src="img/title.png" class="img-responsive" alt="Responsive image" height="100%" width="100%">-->
+
-
<img src="http://placehold.it/=image1" class="img-responsive" alt="Responsive image" height="100%" width="100%">
+
-
                </div>
+
-
                <!--Used to center "poster" column-->
+
-
                <div class=" col-md-3"></div>
+
-
            </div>
+
-
           
+
-
            <div class = "row" id="poster">
+
-
            <!--Used to center "poster" column-->
+
-
            <div class=" col-md-3"></div>
+
-
            <div class="col-md-6 col-centered">
+
-
                <div class="span4 col-centered" id="poster">
+
-
                    <a href="https://2014.igem.org/Team:Dundee/Project">
+
-
                        <img src="img/posterLinks/project.jpg" class="img-responsive" alt="Responsive image" width="100%">
+
-
                    </a>
+
-
                    <a href="https://2014.igem.org/Team:Dundee/Team">
+
-
                        <img src="img/posterLinks/meetOutlaws.jpg" class="img-responsive" alt="Responsive image" height="50%" width="100%">
+
-
                    </a>
+
-
                    <a href="https://2014.igem.org/Team:Dundee/Notebook">
+
-
                        <img src="img/posterLinks/notebook.jpg" class="img-responsive" alt="Responsive image" height="50%" width="100%">
+
-
                    </a>
+
-
                    <a href="https://2014.igem.org/Team:Dundee/Safety">
+
-
                        <img src="img/posterLinks/saftey.jpg" class="img-responsive" alt="Responsive image" height="50%" width="100%">
+
-
                    </a>
+
-
                    <img src="img/posterLinks/groupShot.jpg" class="img-responsive" alt="Responsive image" height="50%" width="100%">
+
-
                    <a href="https://2014.igem.org/Team:Dundee/Attributions">
+
-
                        <img src="img/posterLinks/attributions.jpg" class="img-responsive" alt="Responsive image" height="50%" width="100%">
+
-
                    </a>
+
-
                </div>
+
 
-
                <!--Used to center "poster" column-->
+
<!-- jQuery -->
-
                <div class="col-md-3"></div>
+
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>  
-
             </div>
+
   
-
        </div>
+
<!-- Turn js -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/turn-js?action=raw&ctype=text/javascript"></script>
 +
 
 +
<style type="text/css">
 +
 
 +
html, body {
 +
    margin: 0;
 +
    height: 100%;
 +
}
 +
 
 +
body {
 +
    background-color: #333;
 +
}
 +
 
 +
body.hide-overflow {
 +
    overflow: hidden;
 +
}
 +
 
 +
/* helpers */
 +
 
 +
.t {
 +
    display: table;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 
 +
.tc {
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
}
 +
 
 +
.rel {
 +
    position: relative;
 +
}
 +
 
 +
/* book */
 +
 
 +
.book {
 +
    margin: 5% auto;
 +
    width: 60%;
 +
    height: 60%;
 +
    -webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
}
 +
 
 +
.book .page {
 +
    height: 100%;
 +
}
 +
 
 +
.book .page img {
 +
    max-width: 100%;
 +
    height: 100%;
 +
}
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
<div class="t">
 +
    <div class="tc rel">
 +
        <div class="book" id="book">
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div>
 +
             <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" /></div>
         </div>
         </div>
 +
    </div>
 +
</div>
 +
 +
 +
<script type="text/javascript">
 +
 +
/*
 +
* Turn.js responsive book
 +
*/
 +
 +
/*globals window, document, $*/
 +
 +
(function () {
 +
    'use strict';
 +
 +
    var module = {
 +
        ratio: 1.38,
 +
        init: function (id) {
 +
            var me = this;
 +
 +
            // if older browser then don't run javascript
 +
            if (document.addEventListener) {
 +
                this.el = document.getElementById(id);
 +
                this.resize();
 +
                this.plugins();
 +
 +
                // on window resize, update the plugin size
 +
                window.addEventListener('resize', function (e) {
 +
                    var size = me.resize();
 +
                    $(me.el).turn('size', size.width, size.height);
 +
                });
 +
            }
 +
        },
 +
        resize: function () {
 +
            // reset the width and height to the css defaults
 +
            this.el.style.width = '';
 +
            this.el.style.height = '';
 +
 +
            var width = this.el.clientWidth,
 +
                height = Math.round(width / this.ratio),
 +
                padded = Math.round(document.body.clientHeight * 0.9);
 +
 +
            // if the height is too big for the window, constrain it
 +
            if (height > padded) {
 +
                height = padded;
 +
                width = Math.round(height * this.ratio);
 +
            }
 +
            // set the width and height matching the aspect ratio
 +
            this.el.style.width = width + 'px';
 +
            this.el.style.height = height + 'px';
 +
            return {
 +
                width: width,
 +
                height: height
 +
            };
 +
        },
 +
        plugins: function () {
 +
            // run the plugin
 +
            $(this.el).turn({
 +
                gradients: true,
 +
                acceleration: true
 +
            });
 +
            // hide the body overflow
 +
            document.body.className = 'hide-overflow';
 +
        }
 +
    };
 +
    module.init('book');
 +
}());
 +
</script>
-
<!-- JS import  WILL NEED CHANGED DONE LOCAL FOR BS -->
 
-
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
-
<script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
 
</body>
</body>
</html>
</html>

Latest revision as of 22:49, 14 October 2014

Dundee 2014

Dundee 2014

Dundee 2014 Team

Retrieved from "http://2014.igem.org/Team:Dundee/Template/testpage"