Difference between revisions of "Team:elan vital korea"

 
(138 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{Team:ElanVitalKorea/CSS}}
+
{{ElanVitalKoreaMWlook}}
 +
{{ElanVitalKorea}}
  
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
  
−
<!-- Start of CSS-->
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
−
<style type="text/css">
+
<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';
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
        // Move the background
−
#mainContainer {
+
        $bgobj.css({ backgroundPosition: coords });
−
width: 100%
+
       
−
overflow: hidden;
+
}); // window scroll Ends
−
float:left;
+
−
margin-left: 20px;
+
−
}
+
  
 +
});   
  
 +
});
 +
/*
 +
* Create HTML5 elements for IE's sake
 +
*/
  
 +
document.createElement("article");
 +
document.createElement("section");
 +
</script>
 +
<style>
 +
body{
 +
    margin:0;
 +
    padding:0;
 +
}
  
−
/*Change the styling of tables */
 
−
        #contentContainer table {
 
−
    border: 1px solid #0e232f;
 
−
    border-collapse: collapse;
 
−
    width: 90%
 
−
    margin: auto;
 
−
    margin-bottom: 15px;
 
−
    margin-top: 15px;
 
−
    margin-right: 10px;
 
−
    margin-left: 10px;
 
−
    }
 
  
−
/*Change the styling of table cells*/
+
#home {
−
    #contentContainer td {
+
    background: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png) 50% 0 no-repeat fixed;
−
    padding: 10px;
+
    height: 1000px;  
−
    border: 1px solid #0e232f;
+
    margin: 0 auto;
−
    border-collapse: collapse;
+
    width: 100%;
−
    vertical-align: text-top;
+
    max-width: 1920px;
−
    background-color: #EEEDEA;
+
    position: relative;
−
    }
+
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 +
}
 +
#about {
 +
    background: url(https://static.igem.org/mediawiki/2015/2/28/Elan_Vital_solidbg.JPG) 50% 0 no-repeat fixed;
 +
    height: 1000px;
 +
    margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 +
}
  
−
/*Change the styling of table headers */
+
/* Introduction */
−
    #contentContainer th {
+
−
    padding: 10px;
+
−
    border: 1px solid #0e232f;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    background-color: #e8d5b7;
+
−
    }
+
  
 +
#home article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
  
 +
#about article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
  
−
#cssmenu {
+
 
−
  padding: 0;
+
 
−
  margin: 0;
+
 
−
  border: 0;
+
.galleryItem {
−
  width: auto;
+
    color: #797478;
 +
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
 +
    float: left;    
 +
    width: 16%;
 +
    margin:  2% 2% 50px 2%;
 
}
 
}
−
#cssmenu ul,
+
−
#cssmenu li {
+
.galleryItem h2 {
−
  list-style: none;
+
    text-transform: uppercase;
−
  margin: 0;
+
−
  padding: 0;
+
 
}
 
}
−
#cssmenu ul {
+
−
  position: relative;
+
.galleryItem img {
−
  z-index: 597;
+
    max-width: 100%;
 +
    -webkit-border-radius: 5px;
 +
    -moz-border-radius: 5px;
 +
    border-radius: 5px;
 
}
 
}
−
#cssmenu ul li {
+
 
−
  float: left;
+
 
−
  min-height: 1px;
+
 
−
  vertical-align: middle;
+
.center {
−
}
+
−
#cssmenu ul li.hover,
+
−
#cssmenu ul li:hover {
+
−
  position: relative;
+
−
  z-index: 599;
+
−
  cursor: default;
+
−
}
+
−
#cssmenu ul ul {
+
−
  visibility: hidden;
+
 
   position: absolute;
 
   position: absolute;
−
   top: 100%;
+
   margin: auto;
−
  left: 0;
+
−
  z-index: 598;
+
−
  width: 100%;
+
−
}
+
−
#cssmenu ul ul li {
+
−
  float: none;
+
−
}
+
−
#cssmenu ul ul ul {
+
 
   top: 0;
 
   top: 0;
−
   left: 190px;
+
   right: 0;
−
  width: 190px;
+
−
}
+
−
#cssmenu ul li:hover > ul {
+
−
  visibility: visible;
+
−
}
+
−
#cssmenu ul ul {
+
 
   bottom: 0;
 
   bottom: 0;
 
   left: 0;
 
   left: 0;
−
}
+
   width: 100px;
−
#cssmenu ul ul {
+
   height: 100px;
−
   margin-top: 0;
+
   border-radius: 3px;
−
}
+
−
#cssmenu ul ul li {
+
−
  font-weight: normal;
+
−
}
+
−
#cssmenu a {
+
−
  display: block;
+
−
  line-height: 1em;
+
−
  text-decoration: none;
+
−
}
+
−
/* Custom CSS Styles */
+
−
#cssmenu {
+
−
  background: #333333;
+
−
  border-bottom: 4px solid #1b9bff;
+
−
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
+
−
  font-size: 12px;
+
−
}
+
−
#cssmenu > ul {
+
−
  *display: inline-block;
+
−
}
+
−
#cssmenu:after,
+
−
#cssmenu ul:after {
+
−
  content: '';
+
−
  display: block;
+
−
  clear: both;
+
−
}
+
−
#cssmenu ul {
+
−
  text-transform: uppercase;
+
−
}
+
−
#cssmenu ul ul {
+
−
  border-top: 4px solid #1b9bff;
+
−
  text-transform: none;
+
−
  min-width: 190px;
+
−
}
+
−
#cssmenu ul ul a {
+
−
   background: #1b9bff;
+
−
  color: #ffffff;
+
−
  border: 1px solid #0082e7;
+
−
  border-top: 0 none;
+
−
  line-height: 150%;
+
−
  padding: 16px 20px;
+
−
  font-size: 12px;
+
−
}
+
−
#cssmenu ul ul ul {
+
−
   border-top: 0 none;
+
−
}
+
−
#cssmenu ul ul li {
+
−
  position: relative;
+
−
}
+
−
#cssmenu ul ul li:first-child > a {
+
−
  border-top: 1px solid #0082e7;
+
−
}
+
−
#cssmenu ul ul li:hover > a {
+
−
  background: #4eb1ff;
+
−
  color: #ffffff;
+
−
}
+
−
#cssmenu ul ul li:last-child > a {
+
−
  -moz-border-radius: 0 0 3px 3px;
+
−
  -webkit-border-radius: 0 0 3px 3px;
+
−
  border-radius: 0 0 3px 3px;
+
−
  -moz-background-clip: padding;
+
−
  -webkit-background-clip: padding-box;
+
−
  background-clip: padding-box;
+
−
  -moz-box-shadow: 0 1px 0 #1b9bff;
+
−
  -webkit-box-shadow: 0 1px 0 #1b9bff;
+
−
  box-shadow: 0 1px 0 #1b9bff;
+
−
}
+
−
#cssmenu ul ul li:last-child:hover > a {
+
−
  -moz-border-radius: 0 0 0 3px;
+
−
  -webkit-border-radius: 0 0 0 3px;
+
−
  border-radius: 0 0 0 3px;
+
−
  -moz-background-clip: padding;
+
−
  -webkit-background-clip: padding-box;
+
−
  background-clip: padding-box;
+
−
}
+
−
#cssmenu ul ul li.has-sub > a:after {
+
−
  content: '+';
+
−
  position: absolute;
+
−
  top: 50%;
+
−
  right: 15px;
+
−
  margin-top: -8px;
+
−
}
+
−
#cssmenu ul li:hover > a,
+
−
#cssmenu ul li.active > a {
+
−
  background: #1b9bff;
+
−
  color: #ffffff;
+
−
}
+
−
#cssmenu ul li.has-sub > a:after {
+
−
  content: '+';
+
−
  margin-left: 5px;
+
−
}
+
−
#cssmenu ul li.last ul {
+
−
  left: auto;
+
−
  right: 0;
+
−
}
+
−
#cssmenu ul li.last ul ul {
+
−
  left: auto;
+
−
  right: 99.5%;
+
−
}
+
−
#cssmenu a {
+
−
  background: #333333;
+
−
  color: #CBCBCB;
+
−
  padding: 0 20px;
+
−
}
+
−
#cssmenu > ul > li > a {
+
−
  line-height: 48px;
+
−
  font-size: 12px;
+
−
}
+
−
body {
+
−
    background-image: url('https://static.igem.org/mediawiki/2015/2/24/ElanVital_Bg.png');
+
−
    background-position: 9% 0%;
+
−
background-repeat: no-repeat;
+
 
}
 
}
  
Line 218: Line 108:
 
     display: block;
 
     display: block;
 
     margin-left: auto;
 
     margin-left: auto;
−
     margin-right: auto }
+
     margin-right: auto; }
  
−
</style>
+
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>
  
 +
</head>
  
−
 
−
 
−
<head>
 
−
  <meta charset='utf-8'>
 
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
−
  <link rel="stylesheet" href="styles.css">
 
−
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 
−
  <script src="script.js"></script>
 
−
</head>
 
 
<body>
 
<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>
  
−
<div id='cssmenu'>
+
                <h4 style="text-align:center;">
−
<ul>
+
                    HOME <br>
−
  <li><a href='#'><span>Team</span></a>
+
                </h4>
−
    <ul>
+
                </div>
−
        <li><a href='https://2015.igem.org/Team:elan_vital_korea/Members'><span>Members</span></a>
+
          </div>
−
        <li><a href='#'><span>Attribution</span></a>
+
    </section>
−
    </ul>
+
−
  <li><a href='#'><span>Projects</span></a>
+
−
    <ul>
+
−
        <li><a href='#'><span>Project Overview</span></a>
+
−
        <li><a href='#'><span>Background Information</span></a>
+
−
        <li class='active has-sub'><a href='#'><span>Method & Materials</span></a>
+
−
            <ul>
+
−
              <li><a href='#'><span>Plasma Design</span></a></li>
+
−
              <li class='last'><a href='#'><span>Protocal</span></a></li>
+
−
            </ul>
+
−
        <li><a href='#'><span>Result</span></a>
+
−
        <li><a href='#'><span>Future Plans</span></a>
+
−
    </ul>
+
−
        <li><a href='#'><span>Web Lab</span></a>
+
−
    <ul>
+
−
        <li><a href='#'><span>Notebook</span></a>
+
−
        <li><a href='#'><span>Protocal</span></a>
+
−
        <li><a href='#'><span>Safety</span></a>
+
−
    </ul>
+
−
  <li><a href='#'><span>Human Practice</span></a>
+
−
    <ul>
+
−
        <li><a href='#'><span>Focus</span></a>
+
−
        <li><a href='#'><span>Korea Youth Expo</span></a>
+
−
        <li><a href='#'><span>Education Public Awareness</span></a>
+
−
        <li><a href='#'><span>Policy Recommnedations</span></a>
+
−
        <li><a href='#'><span>Blog</span></a>
+
−
        <li><a href='#'><span>Interview</span></a>
+
−
        <li><a href='#'><span>Regional Meet-ups</span></a>
+
−
        <li><a href='#'><span>Articles</span></a>
+
−
        <li><a href='#'><span>Vdieo</span></a>
+
−
        <li><a href='#'><span>Presentations</span></a>
+
−
    </ul>
+
−
  <li><a href='#'><span>iGEM Resource</span></a>
+
−
    <ul>
+
−
        <li><a href='#'><span>Medal Requirement</span></a>
+
−
        <li><a href='#'><span>Module Description</span></a>
+
−
    </ul>
+
−
</ul>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<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" alt="#"></a>
+
  
 +
<script>
 +
$('a').click(function(){
 +
    $('html, body').animate({
 +
        scrollTop: $( $(this).attr('href') ).offset().top
 +
    }, 500);
 +
    return false;
 +
});
 +
</script>
  
 
</body>
 
</body>
  
−
<script>
+
</html>
−
$(function() {
+
−
  $('a[href*=#]:not([href=#])').click(function() {
+
−
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+
−
      var target = $(this.hash);
+
−
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
−
      if (target.length) {
+
−
        $('html,body').animate({
+
−
          scrollTop: target.offset().top
+
−
        }, 1000);
+
−
        return false;
+
−
      }
+
−
    }
+
−
  });
+
−
});
+
−
</script>
+
−
<html>
+

Latest revision as of 09:13, 7 September 2015








HOME