Difference between revisions of "Team:elan vital korea"

(Created page with " <style type="text/css"> →‎Main menu settings: #centeredmenu { clear:both; float:left; margin:0; padding:0; border-bottom:1px solid #000; /* black line below me...")
 
 
(174 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{ElanVitalKoreaMWlook}}
 +
{{ElanVitalKorea}}
  
−
<style type="text/css">
+
<html>
−
/* Main menu settings */
+
 
−
#centeredmenu {
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
−
  clear:both;
+
<script>
−
  float:left;
+
$(document).ready(function(){
−
  margin:0;
+
    // Cache the Window object
−
   padding:0;
+
    $window = $(window);
−
  border-bottom:1px solid #000; /* black line below menu */
+
               
−
  width:100%;
+
   $('section[data-type="background"]').each(function(){
−
  font-family:Verdana, Geneva, sans-serif; /* Menu font */
+
    var $bgobj = $(this); // assigning the object
−
  font-size:90%; /* Menu text size */
+
                   
−
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
+
      $(window).scroll(function() {
−
  position:relative;
+
                   
 +
        // 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;
 
}
 
}
  
−
/* Top menu items */
+
 
−
#centeredmenu ul {
+
#home {
−
  margin:0;
+
    background: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png) 50% 0 no-repeat fixed;
−
  padding:0;
+
    height: 1000px; 
−
  list-style:none;
+
    margin: 0 auto;
−
  float:right;
+
    width: 100%;
−
  position:relative;
+
    max-width: 1920px;
−
  right:50%;
+
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 
}
 
}
−
#centeredmenu ul li {
+
#about {
−
  margin:0 0 0 1px;
+
    background: url(https://static.igem.org/mediawiki/2015/2/28/Elan_Vital_solidbg.JPG) 50% 0 no-repeat fixed;
−
  padding:0;
+
    height: 1000px;
−
  float:left;
+
    margin: 0 auto;
−
  position:relative;
+
    width: 100%;
−
  left:50%;
+
    max-width: 1920px;
−
  top:1px;
+
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 
}
 
}
−
#centeredmenu ul li a {
+
 
−
  display:block;
+
/* Introduction */
−
  margin:0;
+
 
−
  padding:.6em .5em .4em;
+
#home article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
−
  font-size:1em;
+
 
−
  line-height:1em;
+
#about article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
−
  background:#ddd;
+
 
−
  text-decoration:none;
+
 
−
  color:#444;
+
 
−
  font-weight:bold;
+
 
−
  border-bottom:1px solid #000;
+
.galleryItem {
 +
    color: #797478;
 +
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
 +
    float: left;    
 +
    width: 16%;
 +
    margin:  2% 2% 50px 2%;
 
}
 
}
−
#centeredmenu ul li.active a {
+
−
  color:#fff;
+
.galleryItem h2 {
−
  background:#000;
+
    text-transform: uppercase;
 
}
 
}
−
#centeredmenu ul li a:hover {
+
−
  background:#36f; /* Top menu items background colour */
+
.galleryItem img {
−
  color:#fff;
+
    max-width: 100%;
−
  border-bottom:1px solid #03f;
+
    -webkit-border-radius: 5px;
 +
    -moz-border-radius: 5px;
 +
    border-radius: 5px;
 
}
 
}
−
#centeredmenu ul li:hover a,
+
 
−
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
+
 
−
  background:#36f; /* Top menu items background colour */
+
 
−
  color:#fff;
+
.center {
−
  border-bottom:1px solid #03f;
+
  position: absolute;
 +
  margin: auto;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  width: 100px;
 +
  height: 100px;
 +
  border-radius: 3px;
 
}
 
}
  
−
/* Submenu items */
+
IMG.displayed {
−
#centeredmenu ul ul {
+
    display: block;
−
  display:none; /* Sub menus are hiden by default */
+
    margin-left: auto;
−
  position:absolute;
+
    margin-right: auto; }
−
  top:2em;
+
 
−
  left:0;
+
h4 {
−
  right:auto; /*resets the right:50% on the parent ul */
+
color:white;
−
  width:10em; /* width of the drop-down menus */
+
font-size: 24px;
−
}
+
letter-spacing:1px;
−
#centeredmenu ul ul li {
+
line-height:25px;
−
  left:auto; /*resets the left:50% on the parent li */
+
−
  margin:0; /* Reset the 1px margin from the top menu */
+
−
  clear:left;
+
−
  width:100%;
+
−
}
+
−
#centeredmenu ul ul li a,
+
−
#centeredmenu ul li.active li a,
+
−
#centeredmenu ul li:hover ul li a,
+
−
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
+
−
  font-size:.8em;
+
−
  font-weight:normal; /* resets the bold set for the top level menu items */
+
−
  background:#eee;
+
−
  color:#444;
+
−
  line-height:1.4em; /* overwrite line-height value from top menu */
+
−
  border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
+
−
}
+
−
#centeredmenu ul ul li a:hover,
+
−
#centeredmenu ul li.active ul li a:hover,
+
−
#centeredmenu ul li:hover ul li a:hover,
+
−
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
+
−
  background:#36f; /* Sub menu items background colour */
+
−
  color:#fff;
+
 
}
 
}
  
−
/* Flip the last submenu so it stays within the page */
+
h5{
−
#centeredmenu ul ul.last {
+
text-decoration:none;
−
  left:auto; /* reset left:0; value */
+
font-size: 24px;
−
  right:0; /* Set right value instead */
+
letter-spacing:1px;
 +
line-height:25px;
 
}
 
}
  
−
/* Make the sub menus appear on hover */
+
 
−
#centeredmenu ul li:hover ul,
+
IMG.igem {
−
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
+
float:right;
−
  display:block; /* Show the sub menus */
+
width:5%;
 +
margin:20px;
 
}
 
}
 +
 
</style>
 
</style>
  
 +
</head>
 +
 +
<body>
 +
    <!-- Section #1 -->
 +
        <section id="home" data-speed="10" data-type="background">
 +
        <a href="#"> <img class="igem" src="https://static.igem.org/mediawiki/2015/7/70/IGEM_Logo.gif"></a>
 +
         
 +
            <br>
 +
            <br>
 +
            <br>
 +
            <br>
 +
            <br>
 +
            <br>
 +
            <br>
 +
<div class="center;">
 +
                <a href="https://2015.igem.org/Team:elan_vital_korea">
 +
                    <img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png">
 +
                </a>
 +
 +
                <h4 style="text-align:center;">
 +
                    HOME <br>
 +
                </h4>
 +
                </div>
 +
          </div>
 +
    </section>
 +
 +
<script>
 +
$('a').click(function(){
 +
    $('html, body').animate({
 +
        scrollTop: $( $(this).attr('href') ).offset().top
 +
    }, 500);
 +
    return false;
 +
});
 +
</script>
 +
 +
</body>
  
−
<html>
 
−
<div id="centeredmenu">
 
−
  <ul>
 
−
      <li><a href="#">Tab one</a>
 
−
        <ul>
 
−
            <li><a href="#">Link one</a></li>
 
−
            <li><a href="#">Link two</a></li>
 
−
            <li><a href="#">Link three</a></li>
 
−
            <li><a href="#">Link four</a></li>
 
−
            <li><a href="#">Link five</a></li>
 
−
        </ul>
 
−
      </li>
 
−
      <li class="active"><a href="#" class="active">Tab two</a>
 
−
        <ul>
 
−
            <li><a href="#">Link one</a></li>
 
−
            <li><a href="#">Link two</a></li>
 
−
            <li><a href="#">Link three</a></li>
 
−
            <li><a href="#">Link four</a></li>
 
−
            <li><a href="#">Link five is a long link that wraps</a></li>
 
−
        </ul>
 
−
      </li>
 
−
      <li><a href="#">Long tab three</a>
 
−
        <ul>
 
−
            <li><a href="#">Link one</a></li>
 
−
            <li><a href="#">Link two</a></li>
 
−
            <li><a href="#">Link three</a></li>
 
−
            <li><a href="#">Link four</a></li>
 
−
            <li><a href="#">Link five</a></li>
 
−
        </ul>
 
−
      </li>
 
−
      <li><a href="#">Tab four</a>
 
−
        <ul class="last">
 
−
            <li><a href="#">Link one</a></li>
 
−
            <li><a href="#">Link two</a></li>
 
−
            <li><a href="#">Link three</a></li>
 
−
            <li><a href="#">Link four</a></li>
 
−
            <li><a href="#">Link five</a></li>
 
−
        </ul>
 
−
      </li>
 
−
  </ul>
 
−
</div>
 
 
</html>
 
</html>

Latest revision as of 09:13, 7 September 2015








HOME