Biomod/2011/IITM/AcidArtists: Difference between revisions
No edit summary |
(Undo revision 604268 by Nikhil Srinivasan (Talk)) |
||
| (30 intermediate revisions by 3 users not shown) | |||
| Line 9: | Line 9: | ||
ul.polaroids li { display: inline; } | ul.polaroids li { display: inline; } | ||
ul.polaroids a{display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); } | ul.polaroids a{display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); } | ||
ul.polaroids img { display: block; width: | ul.polaroids img { display: block; width: 220px; margin-bottom: 12px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); } | ||
#content{ | #content{ | ||
| Line 29: | Line 29: | ||
h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;} | h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;} | ||
| Line 212: | Line 208: | ||
$el.next().children().each(function(){ | $el.next().children().each(function(){ | ||
$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); | $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); | ||
vertical = vertical + | vertical = vertical + 75; | ||
horizontal = (horizontal+.75)*2; | horizontal = (horizontal+.75)*2; | ||
}); | }); | ||
| Line 241: | Line 237: | ||
<img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/> | <img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/> | ||
<br/><br/ | <br/><br/> | ||
| Line 256: | Line 243: | ||
<img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack"> | <img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack"> | ||
<ul id="stack"> | <ul id="stack"> | ||
<li><a href=""><span> | <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Sponsors"><span>Sponsors</span><img class="picture" src="http://openwetware.org/images/5/51/Dollar_iitm.png" title="sponsors"/></a></li> | ||
<li><a href=""><span> | <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Reference_papers"><span>Reference_Papers</span><img src="http://openwetware.org/images/1/13/Papers.png" alt="Papers"></a></li> | ||
<li><a href=""><span> | <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Team"><span>Team</span><img src="http://openwetware.org/images/6/62/Team_iitm.jpg" alt="Team"></a></li> | ||
<li><a href=""><span> | <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Project"><span>Project</span><img src="http://openwetware.org/images/f/f0/Home-sm.png" alt="Project"></a></li> | ||
<li><a href=""><span> | <li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/DNA_Nanotech"><span>Introduction</span><img src="http://openwetware.org/images/a/ad/DNA_origami_iitm.png" alt="Introduction"></a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 268: | Line 256: | ||
<div id="menu_desc" style="position:fixed; right:-38px; width:200px; text-align:center; bottom:36px; color:white; cursor:pointer"><b>Menu</b></div> | <div id="menu_desc" style="position:fixed; right:-38px; width:200px; text-align:center; bottom:36px; color:white; cursor:pointer"><b>Menu</b></div> | ||
< | <iframe width="800" height="450" src="http://www.youtube.com/embed/ZnnSuNb9A14?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> | ||
</ | |||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 19:41, 25 May 2012
<html> <head> <style> /*
- bodyContent{text-align:center;}
- /
ul.polaroids { width: 970px; margin: 0 0 18px -30px; } ul.polaroids li { display: inline; } ul.polaroids a{display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); } ul.polaroids img { display: block; width: 220px; margin-bottom: 12px; -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
- content{
color:#111; background:none; border:none; } .portlet .pBody { border:none; background:none; z-index:-1; } .portlet a{color:#white;} .pBody a{color:#white;}
- footer{background:none; border:none;}
- footer li{color:#333;;}
- footer li a {color:#333;;}
h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;}
- menu ul{list-style:none;}
- menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px; cursor:pointer}
- content_container{width:1%;height:10px; background:#333; position:absolute; top:260px; display:none; left:495%; opacity:0.8;
border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; border:1px #AAA solid; }
- close_container{position:absolute;left:98.5%;top:5px;,cursor:pointer;}
.contents{float:none; position:absolute; width:89%; text-align:justify; top:280px; display:none; height:316px; overflow:auto; padding:16px;}
.slide_show_pic{ position:absolute; top:-40px; left:160px; display:none; height:400px; }
/*stack*/
.stack { position: fixed; bottom: 60px; right: 60px; } .stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; left:20px;} .stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; } .stack ul li { position: absolute; } .stack ul li img { border: 0; } .stack ul li span { display: none; } .stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif; display:block; height: 14px; position:absolute; top: 17px; right:60px; line-height: 14px; border: 0; background-color:#000; padding: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #fcfcfc; text-align: center; text-shadow: #000 1px 1px 1px; opacity: .85; filter: alpha(opacity = 85);
}
.stack img{width:50px;}
/* IE Fixes */ .stack { _position: absolute; } .stack ul { _z-index:-1; _top:-15px; } .stack ul li { *right:5px; }
/*stack close*/
- sidebar_bg{
width:150px; background:#000; opacity:0.6; height:830px; display:block; position:absolute; left:-156px; top:-50px; z-index:-100; }
.picture{width:200px;}
ul.polaroids a:after { content: attr(title); }
/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}
/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids img:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}
.stuff_contents{ position:fixed; top:8%; left:13%; display:none; width:80%; color:white; z-index:101; }
</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script> <script>
jQuery(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
$('.stack>img').toggle(function(){
//reverse above
var $el=$(this);
$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
$el.next().find('li a>img').animate({width: '50px', marginLeft: '0'}, closespeed);
$el.animate({paddingTop: '35'});
},function(){
var vertical = 0;
var horizontal = 0;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
vertical = vertical + 55;
horizontal = (horizontal+.75)*2;
});
$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingTop: '0'});
});
// Stacks additional animation
$('.stack li a').hover(function(){
$("img",this).animate({width: '56px'}, 100);
$("span",this).animate({marginRight: '30px'});
},function(){
$("img",this).animate({width: '50px'}, 100);
$("span",this).animate({marginRight: '0'});
});
});
function open_menu(){ var openspeed = 300;
var closespeed = 300;
var vertical = 0;
var horizontal = 0;
var $el=$('.stack>img');
$el.next().children().each(function(){
$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
vertical = vertical + 75;
horizontal = (horizontal+.75)*2;
});
$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingTop: '0'});
}
jQuery(document).ready(function(){ var name; $(".picture").click(function(){ name="#"+$(this).attr("title"); $("#data_container").fadeIn(); $(name).fadeIn(); });
$("#close_dialog").click(function(){ $("#data_container").fadeOut(); $(name).fadeOut(); });
});
</script> </head>
<body onload="open_menu()">
<img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/> <br/><br/>
<div class="stack">
<img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack">
<ul id="stack">
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Sponsors"><span>Sponsors</span><img class="picture" src="http://openwetware.org/images/5/51/Dollar_iitm.png" title="sponsors"/></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Reference_papers"><span>Reference_Papers</span><img src="http://openwetware.org/images/1/13/Papers.png" alt="Papers"></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Team"><span>Team</span><img src="http://openwetware.org/images/6/62/Team_iitm.jpg" alt="Team"></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/Project"><span>Project</span><img src="http://openwetware.org/images/f/f0/Home-sm.png" alt="Project"></a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/IITM/AcidArtists/DNA_Nanotech"><span>Introduction</span><img src="http://openwetware.org/images/a/ad/DNA_origami_iitm.png" alt="Introduction"></a></li>
</ul>
</div>
<div id="menu_desc" style="position:fixed; right:-38px; width:200px; text-align:center; bottom:36px; color:white; cursor:pointer"><b>Menu</b></div>
<iframe width="800" height="450" src="http://www.youtube.com/embed/ZnnSuNb9A14?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>
