Difference between revisions of "Team:elan vital korea"

 
(29 intermediate revisions by the same user not shown)
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 {
+
});
 +
/*
 +
* Create HTML5 elements for IE's sake
 +
*/
 +
 
 +
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%;
 
     width: 100%;
−
     height:100%;
+
     max-width: 1920px;
−
     margin: 0px auto;
+
     position: relative;
−
     overflow: hidden;
+
     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 38: Line 91:
 
}
 
}
  
−
#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 {
 
h4 {
 
color:white;
 
color:white;
−
letter-spacing:2px;
 
 
font-size: 24px;
 
font-size: 24px;
 +
letter-spacing:1px;
 +
line-height:25px;
 
}
 
}
  
−
a:link {
+
h5{
−
    text-decoration: none;
+
text-decoration:none;
 +
font-size: 24px;
 +
letter-spacing:1px;
 +
line-height:25px;
 
}
 
}
  
−
a:visited {
 
−
    text-decoration: none;
 
−
}
 
  
−
a:hover {
+
IMG.igem {
−
    text-decoration: none;
+
float:right;
 +
width:5%;
 +
margin:20px;
 
}
 
}
  
−
a:active {
+
</style>
−
    text-decoration: none;
+
−
}
+
  
−
body {
+
</head>
−
  /* 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">
 +
        <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="container">       
+
                <h4 style="text-align:center;">
−
<div class="container">
+
                    HOME <br>
−
 
+
                </h4>
−
<a name="myAnchor" id="myAnchor"></a>
+
                </div>
−
<div id="footer"></div>
+
          </div>
−
 
+
     </section>
−
 
+
−
<br><br><br>
+
−
 
+
−
<h3 style="text-align:center;">
+
−
Members
+
−
</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 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">
+
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/3/35/Brittany_Lee.jpg" alt=""></a>
+
−
        <h2>Brittany Lee</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
−
    </div>
+
−
 
+
−
    <div class="galleryItem">
+
−
        <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">
+
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/9e/Nuri_Choi.jpg" alt=""></a>
+
−
        <h2>Nuri Choi</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
−
    </div>
+
−
 
+
−
    <div class="galleryItem">
+
−
        <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>
+
−
 
+
−
    <div class="galleryItem">
+
−
        <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/97/Suzi_Lee.jpg" alt=""></a>
+
−
        <h2>Suzi Lee</h2>
+
−
        <p>Lorem ipsum dolor sit amet...</p>
+
−
    </div>
+
−
 
+
−
</body>
+
−
 
+
−
 
+
  
 
<script>
 
<script>
Line 210: Line 167:
 
});
 
});
 
</script>
 
</script>
 +
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 09:13, 7 September 2015








HOME