Difference between revisions of "Team:CGU Taiwan/Home"

 
(86 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
</style>
 
</style>
  
<head>
+
<html>
<meta charset="utf-8">
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
+
</head>
+
<!-- ////////////////////// START  TOP HEADER /////////////////////// -->
+
 
<head>
 
<head>
 
<style>
 
<style>
.logo {
+
.top {
      width: 100%;
+
  position: absolute;
      height: 110px;
+
  top: 0px;
      position: absolute;
+
  left: 0px;
      top: -10px;
+
  width: 100%;
      background: #140731;  
+
  height: 110px;
      z-index:+1;
+
  font-family: Corbel;
      font-family: Corbel;
+
  background: rgba(250, 250, 250, 0.1);
 +
  overflow: visible;
 +
  z-index: +1;
 
}
 
}
.img1 {
+
.mid {
      position: absolute;
+
  position: absolute;
      left:890px;
+
  left: 0px;
      top: 5px;
+
  width: 100%;
 +
  height: 100%;
 +
  font-family: Corbel;
 
}
 
}
.img1 img {
+
.menu-bar {
   position:absolute;
+
   position: fixed;
   /* CSS3淡出淡入效果,1秒 */
+
   background: rgba(250, 250, 250, 0.1);
  -webkit-transition: opacity 1s ease-in-out;
+
   z-index: +1;
   -moz-transition: opacity 1s ease-in-out;
+
  -o-transition: opacity 1s ease-in-out;
+
  transition: opacity 1s ease-in-out;
+
 
}
 
}
 
+
.menu-bar a{
.img1 img:nth-of-type(2):hover{
+
  position: fixed;
   opacity:0; /*滑鼠滑入時,透明度變0*/
+
  top: 595px;
 +
  background-color: rgba(250, 250, 250, 0.1);
 +
  color: black;
 +
   font-family: Corbel;
 +
  font-size: 15px;
 +
  font-weight: bold;
 +
  text-align: center;
 +
  -webkit-transition-duration: 0.4s;
 +
  transition-duration: 0.4s;
 +
  margin: 4px 2px;
 +
  padding-top: 10px;
 +
  padding-right: 5px;
 +
  padding-bottom: 10px;
 +
  padding-left: 5px;
 +
  border-color: #F0F0F;
 +
  z-index: +1;
 +
  text-decoration: none;
 +
  text-align: center;
 
}
 
}
.ccsticky-nav { /*背板*/
+
.menu-bar a:hover {
      width: 100%;
+
  background-color: #E0E0E0;
      height: 40px;
+
  color: black;
      position: fixed; 
+
  -webkit-transition-duration: 0.4s;
      top: 120px;
+
  transition-duration: 0.4s;
      background:#ADADAD;
+
      z-index:+1;
+
      font-family: Corbel;
+
 
}
 
}
 
+
.fixed1 {
.ccsticky-nav ul { /*major menu type*/
+
  position:fixed;
      padding: 10px;
+
  top:10px;
      list-style: none;
+
      text-align: center;
+
      position: relative;  
+
      left: 150px;
+
      z-index:+1;
+
      text-decoration: none;
+
      display: inline-block;
+
      margin: 10px;
+
      top: -10px;
+
      overflow: hidden;
+
}
+
.ccsticky-nav ul li {
+
      margin: 0 10px;
+
      z-index:+1;
+
      float: left;
+
      display: inline-block;
+
}
+
.ccsticky-nav ul li:hover { /*major menu 滑動 type*/
+
                padding: 14px 20px;
+
background: #E0E0E0;
+
                position: relative;
+
                left: 0px;         
+
                top: -18px;
+
                border-radius: 2px;
+
 
}
 
}
  
.ccsticky-nav ul li a { /*major menu font type*/
+
.page {
      padding: 10px 0;
+
      font-size: 1rem;
+
      text-decoration: none;
+
      z-index:+1;
+
      color: black;
+
 
}
 
}
.ccsticky-nav ul li a:hover { /*major menu font 滑動 type*/
+
.end {
      color: black;
+
      z-index:+1;
+
}
+
.ccsticky-nav ul li.dropdown { /*下拉式選單*/
+
    display: inline-block;
+
}
+
.ccsticky-nav ul li a:hover, .dropdown:hover
+
<!-- ////////////////////// START SUB MENU /////////////////////// -->
+
.dropdown-content {
+
    display: none;
+
    position: absolute;
+
    min-width: 160px;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
    z-index:-1;
+
 
}
 
}
  
.dropdown-content a { /* 隱藏次選單*/
 
    color: white;
 
    padding: 12px 16px;
 
    text-decoration: none;
 
    z-index:-1;
 
    display: block;
 
}
 
  
.dropdown-content a:hover {
+
</style>
    background-color: #FF4848;  padding: 15px 20px; border-radius: 4px;
+
</head>
  
}
+
<script>
 +
/* Dynamic top menu positioning
 +
*
 +
*/
  
.dropdown:hover .dropdown-content {
+
var num = 115; //number of pixels before modifying styles
     display: block;
+
$(window).bind('scroll', function () {
}
+
    if ($(window).scrollTop() > num) {
 +
        $('.menu-bar a').addClass('fixed1');
 +
     } else {
 +
        $('.menu-bar a').removeClass('fixed1');
 +
    }
 +
});
 +
</script>
  
.button1 {
 
    background-color: #ADADAD;
 
    font color: black;
 
    border: 2px solid #ADADAD;
 
    font-size: 1rem;
 
    font-family: Corbel;
 
    text-align: center;
 
    -webkit-transition-duration: 0.4s; /* Safari */
 
    transition-duration: 0.4s;
 
    margin: 4px 2px;
 
    padding-top: 8px;
 
    padding-right: 5px;
 
    padding-bottom: 9px;
 
    padding-left: 5px;
 
    border-radius: 4px;
 
    position: fixed;
 
    top: 116px;
 
    left: 1100px;
 
}
 
 
.button1:hover {
 
    background-color: #E0E0E0;
 
    font-size: 1rem;
 
    font color: #ADADAD;
 
    text-align: center;
 
    -webkit-transition-duration: 0.4s; /* Safari */
 
    transition-duration: 0.4s;
 
    margin: 4px 2px;
 
}
 
</style>
 
 
<nav class="logo">
 
<img src="https://static.igem.org/mediawiki/2016/b/bb/CGU_Taiwan--logo2.jpg" class="img1" width="450" height="100">
 
<img src="https://static.igem.org/mediawiki/2016/f/fc/CGU_Taiwan--logo3.jpg" width="450" height="100">
 
</nav>
 
 
<nav class="ccsticky-nav">
 
<ul>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Home">HOME</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Attributions">ATTRIBUTION</a></li>
 
<li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Project">PROJECT</a></li>
 
<li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Model">MODELING</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices">HUMAN PRACTICES</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Team">TEAM</a></li>
 
<li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Notebook">NOTEBOOK</a></li>
 
<li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Safety">SAFETY</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Parts">PARTS</a></li>
 
<a href="https://www.facebook.com/igemcgu/?fref=ts"><button class="button1">CONTACT</button>
 
</ul>
 
</nav>
 
<!-- ////////////////////// END OF HEADER /////////////////////// -->
 
<!-- ////////////////////// START VIDEO /////////////////////// -->
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<style>
 
video {
 
    color: white;
 
    width: 100%;
 
    height: 450px;
 
    position: absolute;
 
    top: 160px;
 
}
 
</style>
 
</head>
 
 
<body>
 
<body>
<video width="400" controls>
+
<div class="top">
  <source src="" type="video/mp4">
+
<div class="top"><img alt="" style="float:left;margin-top:20px; width=390; height=80; z-index:+1;" src="https://static.igem.org/mediawiki/2016/3/38/CGU_Taiwan--LOGO7.jpg">
  <source src="" type="video/ogg">
+
</div>
</video>
+
</body>
+
<!-- ////////////////////// END OF VIDEO /////////////////////// -->
+
<!-- ////////////////////// START ABSTRACT /////////////////////// -->
+
<head>
+
<style>
+
body {
+
    background-color: white;
+
}
+
  
.TI {
 
    font color: black;
 
    font-size: 200%;
 
    font-weight: bold;
 
    position: absolute;
 
    left: 650px;
 
    top: 700px;
 
}
 
.ab {
 
    font color: black;
 
    font-size: 28px;
 
    position: absolute;
 
    top: 700px;
 
    text-align: center;
 
}
 
</style>
 
</head>
 
<body>
 
  
<h1 class="TI">ABSTRACT</h1>
 
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
 
  
</body>
+
<div class="menu-bar">
<!-- ////////////////////// END OF ABSTRACT /////////////////////// -->
+
<a style="left:400px;" href="https://2016.igem.org/Team:CGU_Taiwan/Home">HOME</a>
 +
<a style="left:452px;" href="https://2016.igem.org/Team:CGU_Taiwan/Attributions">ATTRIBUTION</a>
 +
<a style="left:556px;" href="https://2016.igem.org/Team:CGU_Taiwan/Project">PROJECT</a>
 +
<a style="left:627px;" href="https://2016.igem.org/Team:CGU_Taiwan/Modeling">MODELING</a>
 +
<a style="left:712px;" href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices">HUMANPRACTICES</a>
 +
<a style="left:852px;" href="https://2016.igem.org/Team:CGU_Taiwan/Team">TEAM</a>
 +
<a style="left:901px;" href="https://2016.igem.org/Team:CGU_Taiwan/Notebook">NOTEBOOK</a>
 +
<a style="left:991px;" href="https://2016.igem.org/Team:CGU_Taiwan/Safety">SAFETY</a>
 +
<a style="left:1054px;" href="https://2016.igem.org/Team:CGU_Taiwan/Parts">PARTS</a>
 +
</div>
 +
<div class="mid" style="top:0px;">
 +
<img style="width:1348px;height:645px;position:absolute;" src="https://static.igem.org/mediawiki/2016/e/ec/CGU_Taiwan--B2.jpg">
 +
</div>
 +
<div class="mid" style="top: 645px;background-color:white;">
 +
<h1 style="font-size:50px;font-weight:bold;position:absolute;left:550px;">ABSTRACT</h1>
 +
<br></br>
 +
<br></br>
 +
<br></br>
 +
<HR style="color:#140731;width:70%;position:absolute;left:200px;">
 +
<p style="margin: 150px;position:absolute;top:0px;line-height: 1.8;font-weight:15px;text-align:justify;">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. </p>
 +
</div>
 +
<div class="mid" style="top:1290px;background:#140731;float:left;">
 +
<h1 style="position:absolute;left:100px;color:white;font-size:18px;margin:50px;float:left;">Chang Gung University</h1>
 +
<p style="position:absolute;top:35px;color:white;font-size:13px;margin:50px;float:left;">Address:No.259, Wenhua 1st Rd., Guishan Dist., Taoyuan City 33302, Taiwan (R.O.C.)</p>
 +
<p style="position:absolute;top:55px;left:80px;color:white;font-size:13px;margin:50px;float:left;">TEL: +886-3-2118800 FAX:+886-3-2118700</p>
 +
<p style="position:absolute;color:white;left:800px;font-size:18px;margin:50px;">CONTACT US</p>
 +
</div>
  
 
</html>
 
</html>

Latest revision as of 02:04, 10 September 2016

ABSTRACT








This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.

Chang Gung University

Address:No.259, Wenhua 1st Rd., Guishan Dist., Taoyuan City 33302, Taiwan (R.O.C.)

TEL: +886-3-2118800 FAX:+886-3-2118700

CONTACT US