Difference between revisions of "Team:elan vital korea"

 
(167 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{ElanVitalKoreaMWlook}}
 +
{{ElanVitalKorea}}
 +
 
<html>
 
<html>
−
<style type="text/css">
+
 
−
nav ul ul {
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
−
display: none;
+
<script>
 +
$(document).ready(function(){
 +
    // Cache the Window object
 +
    $window = $(window);
 +
               
 +
  $('section[data-type="background"]').each(function(){
 +
    var $bgobj = $(this); // assigning the object
 +
                   
 +
      $(window).scroll(function() {
 +
                   
 +
        // Scroll the background at var speed
 +
        // the yPos is a negative value because we're scrolling it UP!                               
 +
        var yPos = -($window.scrollTop() / $bgobj.data('speed'));
 +
       
 +
        // Put together our final background position
 +
        var coords = '50% '+ yPos + 'px';
 +
 
 +
        // Move the background
 +
        $bgobj.css({ backgroundPosition: coords });
 +
       
 +
}); // window scroll Ends
 +
 
 +
});   
 +
 
 +
});
 +
/*
 +
* Create HTML5 elements for IE's sake
 +
*/
 +
 
 +
document.createElement("article");
 +
document.createElement("section");
 +
</script>
 +
<style>
 +
body{
 +
    margin:0;
 +
    padding:0;
 
}
 
}
  
−
nav ul li:hover > ul {
+
 
−
display: block;
+
#home {
−
}
+
    background: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png) 50% 0 no-repeat fixed;
−
nav ul {
+
    height: 1000px;   
−
background: #efefef;  
+
    margin: 0 auto;
−
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);   
+
    width: 100%;
−
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
+
    max-width: 1920px;
−
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);  
+
    position: relative;
−
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
+
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
−
padding: 0 20px;
+
−
border-radius: 10px; 
+
−
list-style: none;
+
−
position: relative;
+
−
display: inline-table;
+
 
}
 
}
−
nav ul:after {
+
#about {
−
content: ""; clear: both; display: block;
+
    background: url(https://static.igem.org/mediawiki/2015/2/28/Elan_Vital_solidbg.JPG) 50% 0 no-repeat fixed;
−
}
+
    height: 1000px;
−
nav ul li {
+
    margin: 0 auto;
−
float: left;
+
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 
}
 
}
−
nav ul li:hover {
+
 
−
background: #4b545f;
+
/* Introduction */
−
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
+
 
−
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
+
#home article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
−
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
+
 
−
}
+
#about article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
−
nav ul li:hover a {
+
 
−
color: #fff;
+
 
−
}
+
 
−
+
 
−
nav ul li a {
+
.galleryItem {
−
display: block; padding: 25px 40px;
+
    color: #797478;
−
color: #757575; text-decoration: none;
+
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
−
}
+
    float: left;    
−
nav ul ul {
+
    width: 16%;
−
background: #5f6975; border-radius: 0px; padding: 0;
+
    margin: 2% 2% 50px 2%;
−
position: absolute; top: 100%;
+
 
}
 
}
−
nav ul ul li {
+
−
float: none;  
+
.galleryItem h2 {
−
border-top: 1px solid #6b727c;
+
    text-transform: uppercase;
−
border-bottom: 1px solid #575f6a;
+
}
−
position: relative;
+
−
}
+
.galleryItem img {
−
nav ul ul li a {
+
    max-width: 100%;
−
padding: 15px 40px;
+
    -webkit-border-radius: 5px;
−
color: #fff;
+
    -moz-border-radius: 5px;
−
}
+
    border-radius: 5px;
−
nav ul ul li a:hover {
+
}
−
background: #4b545f;
+
 
−
}
+
 
−
nav ul ul ul {
+
 
−
position: absolute; left: 100%; top:0;
+
.center {
 +
  position: absolute;
 +
  margin: auto;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  width: 100px;
 +
  height: 100px;
 +
  border-radius: 3px;
 +
}
 +
 
 +
IMG.displayed {
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto; }
 +
 
 +
h4 {
 +
color:white;
 +
font-size: 24px;
 +
letter-spacing:1px;
 +
line-height:25px;
 +
}
 +
 
 +
h5{
 +
text-decoration:none;
 +
font-size: 24px;
 +
letter-spacing:1px;
 +
line-height:25px;
 +
}
 +
 
 +
 
 +
IMG.igem {
 +
float:right;
 +
width:5%;
 +
margin:20px;
 
}
 
}
  
 
</style>
 
</style>
−
<nav>
 
−
<ul>
 
−
<li><a href="#">Home</a></li>
 
−
<li><a href="#">Team</a></li>
 
−
<ul>
 
−
<li><a href="#">Members</a></li>
 
−
<li><a href="#">Attributions</a></li>
 
−
</ul>
 
  
−
<li><a href="#">Project</a></li>
+
</head>
−
<ul>
+
 
−
<li><a href="#">Project Overview</a></li>
+
<body>
−
<li><a href="#">Background Information</a></li>
+
    <!-- Section #1 -->
−
<li><a href="#">Methods & Materials</a></li>
+
        <section id="home" data-speed="10" data-type="background">
−
<ul>
+
        <a href="#"> <img class="igem" src="https://static.igem.org/mediawiki/2015/7/70/IGEM_Logo.gif"></a>
−
<li><a href="#">Plasma Design</a></li>
+
         
−
<li><a href="#">Protocal</a></li>
+
            <br>
−
</ul>
+
            <br>
−
<li><a href="#">Result</a></li>
+
            <br>
−
<li><a href="#">Future Plans</a></li>
+
            <br>
−
</ul>
+
            <br>
−
<li><a href="#">Weblab</a></li>
+
            <br>
−
<ul>
+
            <br>
−
<li><a href="#">Notebook</a></li>
+
<div class="center;">
−
<li><a href="#">Protocal</a></li>
+
                <a href="https://2015.igem.org/Team:elan_vital_korea">
−
<li><a href="#">Saftey</a></li>
+
                    <img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png">
−
</ul>
+
                </a>
−
<li><a href="#">Human Practice</a></li>
+
 
−
<ul>
+
                <h4 style="text-align:center;">
−
<li><a href="#">Focus</a></li>
+
                    HOME <br>
−
<li><a href="#">Korea Youth Expo</a></li>
+
                </h4>
−
<li><a href="#">Education Public Awareness</a></li>
+
                </div>
−
<li><a href="#">Policy Recommendations</a></li><li>
+
          </div>
−
<li><a href="#">Blog</a></li>
+
    </section>
−
<li><a href="#">Interview</a></li>
+
 
−
<li><a href="#">Regional Meet-ups</a></li>
+
<script>
−
<li><a href="#">Articles</a></li><li>
+
$('a').click(function(){
−
<li><a href="#">Video</a></li>
+
    $('html, body').animate({
−
<li><a href="#">Presentations</a></li>
+
        scrollTop: $( $(this).attr('href') ).offset().top
−
</ul>
+
    }, 500);
−
<li><a href="#">iGEM Resource</a></li>
+
    return false;
−
<ul>
+
});
−
<li><a href="#">Medal Requirement</a></li>
+
</script>
−
<li><a href="#">Module Description</a></li>
+
 
−
</ul>
+
</body>
  
−
</ul>
 
−
</nav>
 
 
</html>
 
</html>

Latest revision as of 09:13, 7 September 2015








HOME