Difference between revisions of "Template:ElanVitalKorea"

Line 1: Line 1:
 
{{ElanVitalKoreaMWlook}}
 
{{ElanVitalKoreaMWlook}}
−
{{ElanVitalKorea}}
 
  
 
<html>
 
<html>
 
<head>
 
<head>
 
<style>
 
<style>
 +
html, body, .wrapper{       
 +
        width: 100%;
 +
        height: 100%;
 +
        background-color: transparent;
 +
    }
  
 +
#cssmenu {padding: 0; margin: 0; border: 0; text-align:center;}
 +
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
 +
#cssmenu ul {position: relative; z-index: 597; display:inline-block; list-style:none;}
 +
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
 +
#cssmenu ul li.hover,
 +
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
 +
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
 +
#cssmenu ul ul li {float: none;}
 +
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
 +
#cssmenu ul li:hover > ul { visibility: visible;}
 +
#cssmenu ul ul {bottom: 0; left: 0;}
 +
#cssmenu ul ul {margin-top: 0; }
 +
#cssmenu ul ul li {font-weight: normal;}
 +
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
  
−
<!-- Member Thumbnail--!>
+
#cssmenu li {
 +
text-align:left;
 +
}
  
−
html, body, #container { height: 100%; }
+
#cssmenu {
−
body > #container { height: auto; min-height: 100%; }
+
  background: #333;
 +
  border-bottom: 4px solid #1b9bff;
 +
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
 +
  font-size: 12px;
 +
}
  
−
.container {
+
  #cssmenu > ul { *display: inline-block; }
−
    width: 100%;
+
 
−
    height:100%;
+
  #cssmenu:after, #cssmenu ul:after {
−
     margin: 0px auto;
+
     content: '';
−
     overflow: hidden;
+
     display: block;
−
     background-color:#808080;
+
     clear: both;
 
}
 
}
  
−
.galleryItem {
+
#cssmenu a {
−
     color: #797478;
+
     background: #333;
−
     font: 10px/1.5 Verdana, Helvetica, sans-serif;
+
     color: #CBCBCB;
−
    float: left;   
+
     padding: 0 20px;
−
    width: 16%;
+
−
     margin: 2% 2% 50px 2%;
+
 
}
 
}
−
+
#cssmenu ul { text-transform: uppercase; }
−
.galleryItem h2 {
+
 
−
     text-transform: uppercase;
+
     #cssmenu ul ul {
 +
      border-top: 4px solid #1b9bff;
 +
      text-transform: none;
 +
      min-width: 190px;
 
}
 
}
−
+
      #cssmenu ul ul a {
−
.galleryItem img {
+
        background: #1b9bff;
−
    max-width: 100%;
+
        color: #FFF;
−
    -webkit-border-radius: 5px;
+
        border: 1px solid #0082e7;
−
    -moz-border-radius: 5px;
+
        border-top: 0 none;
−
    border-radius: 5px;
+
        line-height: 150%;
 +
        padding: 16px 20px;
 
}
 
}
 +
      #cssmenu ul ul ul { border-top: 0 none; }
 +
 +
      #cssmenu ul ul li { position: relative }
 +
 +
#cssmenu > ul > li > a { line-height: 48px;  }
 +
 +
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
 +
        #cssmenu ul ul li:hover > a { background: #35a6ff; }
  
−
#footer {
+
        #cssmenu ul ul li:last-child > a {
−
clear: both;
+
          border-radius: 0 0 3px 3px;
−
position: relative;
+
          box-shadow: 0 1px 0 #1b9bff;
−
z-index: 10;
+
−
height: 3em;
+
−
margin-top: -3em;
+
 
}
 
}
 +
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
  
 +
        #cssmenu ul ul li.has-sub > a:after {
 +
          content: '+';
 +
          position: absolute;
 +
          top: 50%;
 +
          right: 15px;
 +
          margin-top: -8px;
 +
}
  
−
h6 {
+
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
−
color:white;
+
      background: #1b9bff;
−
font-size:16px;
+
      color: #FFF;
−
line-height:22px;
+
}
 +
    #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%;
 
}
 
}
  
−
h3 {
+
#center {
−
color:white;
+
  /*Centering Method 2*/
−
font-size:36px;
+
  margin: 10% 0 10% 0%;
−
text-transform: uppercase;
+
  left: 50%;
−
letter-spacing: 1px;
+
  top: 50%;
 +
}
 +
 
 +
 
 +
img.displayed {
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 
}
 
}
  
−
p {
+
h4 {
 
color:white;
 
color:white;
−
font-size: 12px;
+
letter-spacing:2px;
 +
font-size: 24px;
 
}
 
}
  
−
</style>
+
a:link {
−
</head>
+
    text-decoration: none;
−
<body>
+
}
  
−
<div id="container">       
+
a:visited {
−
<div class="container">
+
    text-decoration: none;
−
<br><br><br>
+
}
  
−
<h3 style="text-align:center;">
+
a:hover {
−
Members
+
    text-decoration: none;
−
</h3>
+
}
  
−
<h6 style="text-align:center;">
+
a:active {
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque ec eros laoreet, <br>
+
    text-decoration: none;
−
mollis egestas urna fringilla. Cras tempus est nec ante interdum, eu iaculis ipstum.<br>
+
}
−
Suspendisse sed tincidunt nulla, vel luctus neque. Pellentesque a augue et leo eget nisi. <br>
+
 
−
Ut id sapien turpis. Aenean mi nunc, consectetur eu turpis vel, consequat lobort
+
body {
−
</h6>
+
  /* Location of the image */
−
    <div class="galleryItem">
+
background-image: url("https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png");
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/a/a1/Young_Chan_Kim.jpg" alt=""></a>
+
−
        <h2>Young Chan Kim</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
−
    </div>
+
 
   
 
   
−
    <div class="galleryItem">
+
  /* Background image is centered vertically and horizontally at all times */
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/c/c8/Jihoon_Kang.jpg" alt=""></a>
+
  background-position: center center;
−
        <h2>Jihoon Kang</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
  /* Background image doesn't tile */
−
    </div>
+
  background-repeat: no-repeat;
 +
 +
  /* Background image is fixed in the viewport so that it doesn't move when
 +
    the content's height is greater than the image's height */
 +
  background-attachment: fixed;
 +
 +
  /* This is what makes the background image rescale based
 +
    on the container's size */
 +
  background-size: cover;
 +
}
  
−
    <div class="galleryItem">
 
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/8/87/Hyunmin_Park.jpg" alt=""></a>
 
−
        <h2>Hyunmin Park</h2>
 
−
        <p>Lorem ipsum dolor sit amet...</p>
 
−
    </div>
 
  
−
    <div class="galleryItem">
+
</style>
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/3/35/Brittany_Lee.jpg" alt=""></a>
+
</head>
−
        <h2>Brittany Lee</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
−
    </div>
+
  
−
    <div class="galleryItem">
+
<body>
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/4d/Soojung_Lee.jpg" alt=""></a>
+
−
        <h2>Soojung Lee</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
−
    </div>
+
−
+
−
    <div class="galleryItem">
+
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/f/fd/Seungmeen_choi.jpg" alt=""></a>
+
−
        <h2>Seungmeen Choi</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
−
    </div>
+
  
−
    <div class="galleryItem">
+
<div id='cssmenu'>
−
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/9e/Nuri_Choi.jpg" alt=""></a>
+
  <ul>
−
        <h2>Nuri Choi</h2>
+
    <li class='has-sub'><a href='#'>Team</a>
−
        <p>Lorem ipsum dolor sit amet...</p>
+
         <ul>
−
    </div>
+
          <li><a href='#'>Members</a>
 +
          <li><a href='#'>Attribution</a>
 +
        </ul>
 +
    <li class='has-sub'><a href='#'>Project</a>
 +
        <ul>
 +
          <li><a href='#'>Project Overview</a>
 +
          <li><a href='#'>Background Information</a>
 +
          <li class='has-sub '><a>Method & Materials</a>
 +
              <ul>
 +
                <li><a href='#'>Plasmid Design</a></li>
 +
                <li><a href='#'>Protocols</a></li>
 +
              </ul>
 +
          <li><a href='#'>Result</a>
 +
          <li><a href='#'>Conclusions</a>
 +
          <li><a href='#'>Future Plans</a>
 +
</ul>
 +
</li>
  
−
    <div class="galleryItem">
+
    <li class='has-sub'><a href='#'>Wetlab</a>
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/40/Songeun_Lee.jpg" alt=""></a>
+
        <ul>
−
        <h2>Songeun Lee</h2>
+
          <li><a href='#'>Notebook</a>
−
        <p>Lorem ipsum dolor sit amet...</p>
+
          <li><a href='#'>Protocal</a>
−
    </div>
+
          <li><a href='#'>Safety</a>
 +
</ul>
 +
</li>
  
−
    <div class="galleryItem">
+
    <li class='has-sub'><a href='#'>Human Practice</a>
−
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/97/Suzi_Lee.jpg" alt=""></a>
+
         <ul>
−
        <h2>Suzi Lee</h2>
+
          <li><a href='#'>Focus</a>
−
        <p>Lorem ipsum dolor sit amet...</p>
+
          <li><a href='#'>Korea Youth Expo</a>
−
    </div>
+
          <li><a href='#'>Education & Public Awareness</a>
 +
          <li><a href='#'>Policy Recommendations</a>
 +
          <li><a href='#'>Blog</a>
 +
          <li><a href='#'>Interview</a>
 +
          <li><a href='#'>Regional Meet-ups</a>
 +
          <li><a href='#'>Articles</a>
 +
          <li><a href='#'>Video</a>
 +
          <li><a href='#'>Presentations</a>
 +
</ul>
 +
</li>
  
 +
    <li class='has-sub'><a href='#'>iGEM Resource</a>
 +
        <ul>
 +
          <li><a href='#'>Medal Requirement</a>
 +
          <li><a href='#'>Module Description</a>
 +
  </ul>
 +
</li>
 +
</div>
  
 +
<div id="center">
 +
<a href=#"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png"></a>
  
−
<div id="footer"></div>
+
<br>
−
</body>
+
<br>
 +
<br>
 +
<br>
 +
<br>
  
 +
<h4 style="text-align:center;">
 +
MEMBERS <br>
 +
</h4>
 +
 +
<a href="#"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d2/Scroll_arrow.png" width="1.8%;" height="1.8%;" ></a>
 +
</div>
 +
 +
<br>
 +
<br>
 +
<br>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 16:19, 30 August 2015






MEMBERS