Difference between revisions of "Team:UMaryland/Notebook"

Line 4: Line 4:
  
 
<style>  
 
<style>  
−
 
−
/* Basic sample */
 
  
 
body{
 
body{
−
overflow:hidden;
+
    overflow:hidden;
−
background-color:#fcfcfc;
+
−
margin:0;
+
−
padding:0;
+
 
}
 
}
  
−
.flipbook-viewport{
+
#flipbook{
−
overflow:hidden;
+
    width:400px;
−
width:100%;
+
    height:300px;
−
height:100%;
+
    margin-left: 75px;
 
}
 
}
  
−
.flipbook-viewport .flipbook{
+
#flipbook .page{
−
width:922px;
+
    width:400px;
−
height:600px;
+
    height:300px;
 +
    background-color:white;
 +
    line-height:300px;
 +
    font-size:20px;
 +
    text-align:center;
 
}
 
}
  
−
 
+
#flipbook .page-wrapper{
−
.flipbook-viewport .container{
+
    -webkit-perspective:2000px;
−
position:absolute;
+
    -moz-perspective:2000px;
−
top:50%;
+
    -ms-perspective:2000px;
−
left:50%;
+
    -o-perspective:2000px;
−
margin:auto;
+
    perspective:2000px;
 
}
 
}
  
−
.flipbook-viewport .page{
+
#flipbook .hard{
−
width:461px;
+
    background:#ccc !important;
−
height:600px;
+
    color:#333;
−
background-color: #B20000;  
+
    -webkit-box-shadow:inset 0 0 5px #666;
−
background-repeat:no-repeat;
+
    -moz-box-shadow:inset 0 0 5px #666;
−
background-size:100% 100%;
+
    -o-box-shadow:inset 0 0 5px #666;
 +
    -ms-box-shadow:inset 0 0 5px #666;
 +
    box-shadow:inset 0 0 5px #666;
 +
    font-weight:bold;
 
}
 
}
  
−
.flipbook .page{
 
−
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
 
−
-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
 
−
-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
 
−
-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
 
−
box-shadow:0 0 20px rgba(0,0,0,0.2);
 
−
}
 
−
 
−
.flipbook-viewport .page img{
 
−
-webkit-touch-callout: none;
 
−
-webkit-user-select: none;
 
−
-khtml-user-select: none;
 
−
-moz-user-select: none;
 
−
-ms-user-select: none;
 
−
user-select: none;
 
−
margin:0;
 
−
}
 
−
 
−
.flipbook-viewport .shadow{
 
−
-webkit-transition: -webkit-box-shadow 0.5s;
 
−
-moz-transition: -moz-box-shadow 0.5s;
 
−
-o-transition: -webkit-box-shadow 0.5s;
 
−
-ms-transition: -ms-box-shadow 0.5s;
 
−
 
−
-webkit-box-shadow:0 0 20px #ccc;
 
−
-moz-box-shadow:0 0 20px #ccc;
 
−
-o-box-shadow:0 0 20px #ccc;
 
−
-ms-box-shadow:0 0 20px #ccc;
 
−
box-shadow:0 0 20px #ccc;
 
−
}
 
−
 
−
p{
 
−
  font-size: 30px;
 
−
  text-align: center;
 
−
  margin-top: 30px;
 
−
}
 
  
 
</style>  
 
</style>  
Line 89: Line 55:
  
  
−
<div class="flipbook-viewport">
+
<div>
−
<div class="container">
+
<div class="flipbook">
−
<div class="flipbook">
+
 
−
                        <div class="hard"> <p> Notebook </p>  </div>
+
<div class="hard"> <p> Notebook </p>  </div>
−
                <div class="hard cover"></div>
+
<div class="hard cover"></div>
−
<div style="background-image:url(https://static.igem.org/mediawiki/2015/e/ea/Notebook1.png)"></div>
+
<div style="background-image:url(https://static.igem.org/mediawiki/2015/e/ea/Notebook1.png)"></div>
−
<div style="background-image:url(https://static.igem.org/mediawiki/2015/b/bd/Notebook2.png)"></div>
+
<div style="background-image:url(https://static.igem.org/mediawiki/2015/b/bd/Notebook2.png)"></div>
−
                      <div class="hard"></div>
+
<div class="hard"></div>
−
                <div class="hard"></div>
+
<div class="hard"></div>
−
</div>
+
 
−
</div>
+
</div>
 
</div>
 
</div>
  
  
 
<script type="text/javascript">
 
<script type="text/javascript">
−
$('.flipbook').turn({
 
−
// Width
 
  
−
width: 600,
 
−
 
−
// Height
 
  
−
height: 300,
+
$("#flipbook").turn({
 +
    width: 800,
 +
    height: 600,
 +
    autoCenter: false,
 +
    elevation: 50
 +
});
  
−
// Elevation
 
  
−
elevation: 200,
 
−
 
−
// Enable gradients
 
−
 
−
gradients: true,
 
−
 
−
// Auto center this flipbook
 
−
 
−
autoCenter: false
 
−
 
−
});
 
 
</script>  
 
</script>  
  
Line 132: Line 86:
  
  
−
</div>
 
 
</html>
 
</html>

Revision as of 20:00, 3 August 2015