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; }
 
  
−
#cssmenu li {
+
<!-- Member Thumbnail--!>
−
text-align:left;
+
−
}
+
  
−
#cssmenu {
+
html, body, #container { height: 100%; }
−
  background: #333;
+
body > #container { height: auto; min-height: 100%; }
−
  border-bottom: 4px solid #1b9bff;
+
−
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
+
−
  font-size: 12px;
+
−
}
+
  
−
  #cssmenu > ul { *display: inline-block; }
+
.container {
−
 
+
    width: 100%;
−
  #cssmenu:after, #cssmenu ul:after {
+
    height:100%;
−
     content: '';
+
     margin: 0px auto;
−
     display: block;
+
     overflow: hidden;
−
     clear: both;
+
     background-color:#808080;
 
}
 
}
  
−
#cssmenu a {
+
.galleryItem {
−
     background: #333;
+
     color: #797478;
−
     color: #CBCBCB;
+
     font: 10px/1.5 Verdana, Helvetica, sans-serif;
−
     padding: 0 20px;
+
    float: left;   
 +
    width: 16%;
 +
     margin: 2% 2% 50px 2%;
 
}
 
}
−
#cssmenu ul { text-transform: uppercase; }
+
−
 
+
.galleryItem h2 {
−
     #cssmenu ul ul {
+
     text-transform: uppercase;
−
      border-top: 4px solid #1b9bff;
+
−
      text-transform: none;
+
−
      min-width: 190px;
+
 
}
 
}
−
      #cssmenu ul ul a {
+
−
        background: #1b9bff;
+
.galleryItem img {
−
        color: #FFF;
+
    max-width: 100%;
−
        border: 1px solid #0082e7;
+
    -webkit-border-radius: 5px;
−
        border-top: 0 none;
+
    -moz-border-radius: 5px;
−
        line-height: 150%;
+
    border-radius: 5px;
−
        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; }
 
  
−
        #cssmenu ul ul li:last-child > a {
+
#footer {
−
          border-radius: 0 0 3px 3px;
+
clear: both;
−
          box-shadow: 0 1px 0 #1b9bff;
+
position: relative;
 +
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;
 
−
}
 
  
−
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
+
h6 {
−
      background: #1b9bff;
+
color:white;
−
      color: #FFF;
+
font-size:16px;
−
}
+
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%;
+
 
}
 
}
  
−
#center {
+
h3 {
−
  /*Centering Method 2*/
+
color:white;
−
  margin: 10% 0 10% 0%;
+
font-size:36px;
−
  left: 50%;
+
text-transform: uppercase;
−
  top: 50%;
+
letter-spacing: 1px;
−
}
+
−
 
+
−
 
+
−
img.displayed {
+
−
    display: block;
+
−
    margin-left: auto;
+
−
    margin-right: auto;
+
 
}
 
}
  
−
h4 {
+
p {
 
color:white;
 
color:white;
−
letter-spacing:2px;
+
font-size: 12px;
−
font-size: 24px;
+
−
}
+
−
 
+
−
a:link {
+
−
    text-decoration: none;
+
−
}
+
−
 
+
−
a:visited {
+
−
    text-decoration: none;
+
−
}
+
−
 
+
−
a:hover {
+
−
    text-decoration: none;
+
−
}
+
−
 
+
−
a:active {
+
−
    text-decoration: none;
+
−
}
+
−
 
+
−
body {
+
−
  /* Location of the image */
+
−
+
−
  /* Background image is centered vertically and horizontally at all times */
+
−
  background-position: center center;
+
−
+
−
  /* Background image doesn't tile */
+
−
  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;
+
−
}
+
−
 
+
−
#bg {
+
−
  position: fixed;
+
−
  top: -50%;
+
−
  left: -50%;
+
−
  width: 200%;
+
−
  height: 200%;
+
−
}
+
−
#bg img {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: 0;
+
−
  margin: auto;
+
−
  min-width: 50%;
+
−
  min-height: 50%;
+
 
}
 
}
  
 
</style>
 
</style>
 
</head>
 
</head>
−
 
 
<body>
 
<body>
  
 +
<div id="container">       
 +
<div class="container">
 +
<br><br><br>
  
−
<div id="bg">
+
<h3 style="text-align:center;">
−
  <img src="https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png" alt="">
+
Members
−
</div>
+
</h3>
  
 +
<h6 style="text-align:center;">
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque ec eros laoreet, <br>
 +
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
 +
</h6>
 +
    <div class="galleryItem">
 +
        <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">
 +
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/c/c8/Jihoon_Kang.jpg" alt=""></a>
 +
        <h2>Jihoon Kang</h2>
 +
        <p>Lorem ipsum dolor sit amet...</p>
 +
    </div>
  
−
<div id='cssmenu'>
+
    <div class="galleryItem">
−
  <ul>
+
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/8/87/Hyunmin_Park.jpg" alt=""></a>
−
    <li class='has-sub'><a href='#'>Team</a>
+
        <h2>Hyunmin Park</h2>
−
         <ul>
+
        <p>Lorem ipsum dolor sit amet...</p>
−
          <li><a href='#'>Members</a>
+
    </div>
−
          <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>
+
  
−
    <li class='has-sub'><a href='#'>Wetlab</a>
+
    <div class="galleryItem">
−
        <ul>
+
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/3/35/Brittany_Lee.jpg" alt=""></a>
−
          <li><a href='#'>Notebook</a>
+
        <h2>Brittany Lee</h2>
−
          <li><a href='#'>Protocal</a>
+
        <p>Lorem ipsum dolor sit amet...</p>
−
          <li><a href='#'>Safety</a>
+
    </div>
−
</ul>
+
−
</li>
+
  
−
    <li class='has-sub'><a href='#'>Human Practice</a>
+
    <div class="galleryItem">
−
         <ul>
+
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/4d/Soojung_Lee.jpg" alt=""></a>
−
          <li><a href='#'>Focus</a>
+
        <h2>Soojung Lee</h2>
−
          <li><a href='#'>Korea Youth Expo</a>
+
        <p>Lorem ipsum dolor sit amet...</p>
−
          <li><a href='#'>Education & Public Awareness</a>
+
    </div>
−
          <li><a href='#'>Policy Recommendations</a>
+
−
          <li><a href='#'>Blog</a>
+
    <div class="galleryItem">
−
          <li><a href='#'>Interview</a>
+
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/f/fd/Seungmeen_choi.jpg" alt=""></a>
−
          <li><a href='#'>Regional Meet-ups</a>
+
        <h2>Seungmeen Choi</h2>
−
          <li><a href='#'>Articles</a>
+
        <p>Lorem ipsum dolor sit amet...</p>
−
          <li><a href='#'>Video</a>
+
    </div>
−
          <li><a href='#'>Presentations</a>
+
−
</ul>
+
−
</li>
+
  
−
    <li class='has-sub'><a href='#'>iGEM Resource</a>
+
    <div class="galleryItem">
−
        <ul>
+
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/9e/Nuri_Choi.jpg" alt=""></a>
−
          <li><a href='#'>Medal Requirement</a>
+
        <h2>Nuri Choi</h2>
−
          <li><a href='#'>Module Description</a>
+
        <p>Lorem ipsum dolor sit amet...</p>
−
  </ul>
+
    </div>
−
</li>
+
−
</div>
+
  
−
<div id="center">
+
    <div class="galleryItem">
−
<a href=#"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png"></a>
+
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/40/Songeun_Lee.jpg" alt=""></a>
 +
        <h2>Songeun Lee</h2>
 +
        <p>Lorem ipsum dolor sit amet...</p>
 +
    </div>
  
−
<br>
+
    <div class="galleryItem">
−
<br>
+
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/97/Suzi_Lee.jpg" alt=""></a>
−
<br>
+
        <h2>Suzi Lee</h2>
−
<br>
+
        <p>Lorem ipsum dolor sit amet...</p>
−
<br>
+
    </div>
  
−
<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>
 
  
 +
<div id="footer"></div>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 16:19, 30 August 2015




Members

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque ec eros laoreet,
mollis egestas urna fringilla. Cras tempus est nec ante interdum, eu iaculis ipstum.
Suspendisse sed tincidunt nulla, vel luctus neque. Pellentesque a augue et leo eget nisi.
Ut id sapien turpis. Aenean mi nunc, consectetur eu turpis vel, consequat lobort

Young Chan Kim

Lorem ipsum dolor sit amet...

Jihoon Kang

Lorem ipsum dolor sit amet...

Hyunmin Park

Lorem ipsum dolor sit amet...

Brittany Lee

Lorem ipsum dolor sit amet...

Soojung Lee

Lorem ipsum dolor sit amet...

Seungmeen Choi

Lorem ipsum dolor sit amet...

Nuri Choi

Lorem ipsum dolor sit amet...

Songeun Lee

Lorem ipsum dolor sit amet...

Suzi Lee

Lorem ipsum dolor sit amet...