Difference between revisions of "Team:elan vital korea"

Line 3: Line 3:
  
 
<html>
 
<html>
−
<head>
 
−
<style>
 
  
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 +
<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';
  
−
<!-- Member Thumbnail--!>
+
// Move the background
 +
$bgobj.css({ backgroundPosition: coords });
 +
 +
}); // window scroll Ends
  
−
html, body, #container { height: 100%; }
+
});
−
body > #container { height: auto; min-height: 100%; }
+
  
−
.container {
+
});
−
    width: 100%;
+
/*
−
    height:100%;
+
* Create HTML5 elements for IE's sake
−
    margin: 0px auto;
+
*/
−
    overflow: hidden;
+
 
 +
document.createElement("article");
 +
document.createElement("section");
 +
</script>
 +
<style>
 +
body{
 +
margin:0;
 +
padding:0;
 
}
 
}
 +
 +
 +
#home {
 +
background: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png) 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);
 +
}
 +
#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);
 +
}
 +
 +
/* Introduction */
 +
 +
#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%; }
 +
 +
 +
  
 
.galleryItem {
 
.galleryItem {
Line 36: Line 89:
 
     -moz-border-radius: 5px;
 
     -moz-border-radius: 5px;
 
     border-radius: 5px;
 
     border-radius: 5px;
−
}
 
−
 
−
#footer {
 
−
clear: both;
 
−
position: relative;
 
−
z-index: 10;
 
−
height: 3em;
 
−
margin-top: -3em;
 
 
}
 
}
  
  
−
h6 {
+
.center {
−
color:white;
+
  position: absolute;
−
font-size:16px;
+
  margin: auto;
−
line-height:22px;
+
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  width: 100px;
 +
  height: 100px;
 +
  border-radius: 3px;
 
}
 
}
  
−
h3 {
+
IMG.displayed {
−
color:white;
+
−
font-size:36px;
+
−
text-transform: uppercase;
+
−
letter-spacing: 1px;
+
−
}
+
−
 
+
−
p {
+
−
color:white;
+
−
font-size: 12px;
+
−
}
+
−
 
+
−
 
+
−
#center {
+
−
  /*Centering Method 2*/
+
−
    margin: 0px auto;
+
−
  left: 50%;
+
−
  top: 50%;
+
−
margin-top:10%;
+
−
margin-bottom:5%;
+
−
}
+
−
 
+
−
 
+
−
img.displayed {
+
 
     display: block;
 
     display: block;
 
     margin-left: auto;
 
     margin-left: auto;
−
     margin-right: auto;
+
     margin-right: auto }
−
    height: auto;
+
−
    width: auto;
+
−
    max-width: 300px;
+
−
    max-height: 300px;
+
−
}
+
  
−
h4 {
+
</style>
−
color:white;
+
−
letter-spacing:2px;
+
−
font-size: 24px;
+
−
}
+
  
−
a:link {
+
</head>
−
    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: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png);
 
−
  background-repeat: no-repeat; 
 
−
  background-attachment: scroll; 
 
−
  background-position: 0% 0%;
 
−
  background-size: contain;
 
−
    background-color:#808080;
 
−
}
 
−
 
−
 
−
 
−
 
−
</style>
 
−
</head>
 
 
<body>
 
<body>
 +
    <!-- Section #1 -->
 +
        <section id="home" data-speed="10" data-type="background">
 +
            <div class="center;" style="width:800px; margin:0 auto;">
 +
                <a href=#">
 +
                    <img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png">
 +
                </a>
  
−
<div id="container">      
+
                <h4 style="text-align:center;">
−
<div class="container">
+
                    MEMBERS<br>
−
 
+
                </h4>
 +
                    <a href="#myAnchor" rel="" id="anchor1" class="anchorLink"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d2/Scroll_arrow.png" ></a>
 +
          </div>
 +
    </section>
 +
    <!-- Section #2 -->
 +
        <section id="about" data-speed="4" data-type="background">
 
<a name="myAnchor" id="myAnchor"></a>
 
<a name="myAnchor" id="myAnchor"></a>
−
<div id="footer"></div>
+
            <div class="galleryItem">
−
 
+
                <a href="#">
−
 
+
                    <img src="https://static.igem.org/mediawiki/2015/a/a1/Young_Chan_Kim.jpg" alt="">
−
<br><br><br>
+
                </a>
−
 
+
                <h2>Young Chan Kim</h2>
−
<h3 style="text-align:center;">
+
                    <p>Lorem ipsum dolor sit amet...</p>
−
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">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/c/c8/Jihoon_Kang.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/c/c8/Jihoon_Kang.jpg" alt=""></a>
 
         <h2>Jihoon Kang</h2>
 
         <h2>Jihoon Kang</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
  
−
    <div class="galleryItem">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/8/87/Hyunmin_Park.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/8/87/Hyunmin_Park.jpg" alt=""></a>
 
         <h2>Hyunmin Park</h2>
 
         <h2>Hyunmin Park</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
  
−
    <div class="galleryItem">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/3/35/Brittany_Lee.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/3/35/Brittany_Lee.jpg" alt=""></a>
 
         <h2>Brittany Lee</h2>
 
         <h2>Brittany Lee</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
  
−
    <div class="galleryItem">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/4d/Soojung_Lee.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/4d/Soojung_Lee.jpg" alt=""></a>
 
         <h2>Soojung Lee</h2>
 
         <h2>Soojung Lee</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
 
   
 
   
−
    <div class="galleryItem">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/f/fd/Seungmeen_choi.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/f/fd/Seungmeen_choi.jpg" alt=""></a>
 
         <h2>Seungmeen Choi</h2>
 
         <h2>Seungmeen Choi</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
  
−
    <div class="galleryItem">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/9e/Nuri_Choi.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/9e/Nuri_Choi.jpg" alt=""></a>
 
         <h2>Nuri Choi</h2>
 
         <h2>Nuri Choi</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
  
−
    <div class="galleryItem">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/40/Songeun_Lee.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/40/Songeun_Lee.jpg" alt=""></a>
 
         <h2>Songeun Lee</h2>
 
         <h2>Songeun Lee</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
  
−
    <div class="galleryItem">
+
            <div class="galleryItem">
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/97/Suzi_Lee.jpg" alt=""></a>
 
         <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/97/Suzi_Lee.jpg" alt=""></a>
 
         <h2>Suzi Lee</h2>
 
         <h2>Suzi Lee</h2>
 
         <p>Lorem ipsum dolor sit amet...</p>
 
         <p>Lorem ipsum dolor sit amet...</p>
−
    </div>
+
            </div>
−
 
+
</div>
−
</body>
+
−
 
+
  
 +
</section>
  
 
<script>
 
<script>
Line 210: Line 197:
 
});
 
});
 
</script>
 
</script>
 +
 +
</body>
  
 
</html>
 
</html>

Revision as of 14:28, 31 August 2015

MEMBERS

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...