Difference between revisions of "Team:TAS Taipei"

Line 1: Line 1:
−
<html lang="en">
+
<!DOCTYPE html>
−
 
+
<html>
 
<head>
 
<head>
−
    <meta charset="UTF-8">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
    <title>TAS_Taipei</title>
+
<style>
−
    <style>
+
−
 
+
−
@font-face {
+
−
font-family: 'Nexa Bold';
+
−
src: url('fonts/Nexa Bold.otf');
+
−
}
+
−
 
+
−
@font-face {
+
−
font-family: 'Nexa Light';
+
−
src: url('fonts/Nexa Light.otf');
+
−
}
+
−
 
+
−
@font-face {
+
−
font-family: 'Product Sans';
+
−
font-style: normal;
+
−
font-weight: 400;
+
−
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
+
−
}
+
−
 
+
−
html {
+
−
overflow-x: hidden;
+
−
overflow-y: hidden;
+
−
}
+
−
 
+
−
.jumbotron {
+
−
    position: absolute;
+
−
    width: 103vw;
+
−
    height: 100vh;
+
−
    left: -5%;
+
−
    top: 0;
+
−
    background: linear-gradient(to left, #ff6600 0%, #cc00cc 100%);
+
−
    z-index: 1;
+
−
}
+
−
 
+
−
.tas {
+
−
    position: absolute;
+
−
    border-width: medium;
+
−
    z-index: 999;
+
−
    color: white;
+
−
    top: 0.4%;
+
−
    left: 6.5%;
+
−
    font-size: 3.5vh;
+
−
    font-family: 'Nexa bold', sans-serif;
+
−
    font-weight: 100;
+
−
    padding: 3px 1px;
+
−
}
+
−
 
+
−
.igem {
+
−
    position: absolute;
+
−
    top: 0%;
+
−
    left: 0%;
+
−
    height: 8vh;
+
−
    z-index:999;
+
−
}
+
−
 
+
−
.tiger {
+
−
    position: absolute;
+
−
    top: 0%;
+
−
    left: 20%;
+
−
    height: 8vh;
+
−
    z-index:999;
+
−
}
+
−
 
+
−
 
+
−
.centerfix {
+
−
    top: 4%;
+
−
}
+
−
 
+
−
.turn {
+
−
    position: absolute;
+
−
    z-index: 999;
+
−
    font-size: 10vh;
+
−
    height: 100vh;
+
−
    width: 70vh;
+
−
    color: white;
+
−
    font-family: Product Sans;
+
−
    top: 20%;
+
−
    left: 38%;
+
−
    letter-spacing: 1px;
+
−
    line-height: 80px;
+
−
}
+
−
 
+
−
.you {
+
−
    position: absolute;
+
−
    z-index: 999;
+
−
    font-size: 3.5vh;
+
−
    color: white;
+
−
    font-family: Product Sans;
+
−
    top: 52%;
+
−
    left: 38%;
+
−
    font-weight: 100;
+
−
    letter-spacing: 1px;
+
−
}
+
−
 
+
−
 
+
−
.button {
+
−
    position: absolute;
+
−
    z-index: 999;
+
−
    background-color: #50c484 !important;
+
−
    border: none !important;
+
−
    color: white !important;
+
−
    height: 5vh !important;
+
−
    width: 5vh !important;
+
−
    text-align: center !important;
+
−
    text-decoration: none;
+
−
    display: inline-block !important;
+
−
    font-size: 16px !important;
+
−
    top: 68%;
+
−
    left: 38%;
+
−
    font-family: Product Sans;
+
−
    font-weight: 100;
+
−
    letter-spacing: 1px;
+
−
}
+
−
 
+
−
.button:hover {
+
−
    background-color: #3e9b67!important;
+
−
    cursor: pointer;
+
−
}
+
−
 
+
 
body {
 
body {
 
     font-family: "Lato", sans-serif;
 
     font-family: "Lato", sans-serif;
Line 171: Line 52:
 
   .sidenav a {font-size: 18px;}
 
   .sidenav a {font-size: 18px;}
 
}
 
}
 +
</style>
 +
</head>
 +
<body>
  
−
<script>
+
<div id="mySidenav" class="sidenav">
 +
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 +
  <a href="#">About</a>
 +
  <a href="#">Services</a>
 +
  <a href="#">Clients</a>
 +
  <a href="#">Contact</a>
 +
</div>
  
 +
<div id="main">
 +
  <h2>Sidenav Push Example</h2>
 +
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
 +
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
 +
</div>
 +
 +
<script>
 
function openNav() {
 
function openNav() {
 
     document.getElementById("mySidenav").style.width = "250px";
 
     document.getElementById("mySidenav").style.width = "250px";
Line 185: Line 82:
 
     document.body.style.backgroundColor = "white";
 
     document.body.style.backgroundColor = "white";
 
}
 
}
−
 
+
</script>
−
 
+
   
−
<div class="row nav">
+
−
<div class="col-lg-4 center centerfix opacityFix">
+
−
            <h3><img src="https://static.igem.org/mediawiki/2018/1/19/T--TAS_Taipei--TigerLogo.png" class="igem"> TAS_TAIPEI <img src="https://static.igem.org/mediawiki/2018/f/f4/T--TAS_Taipei--ALDH2Logo.png" class="tiger"></h3>
+
−
</div>
+
−
 
+
−
    <div>
+
−
        <h3 class="tas"> TAS_Taipei </h3>
+
−
        <h3 class="pro">Project</h3>
+
−
        <h3 class="exp">Experiments</h3>
+
−
        <h3 class="mod">Modelling</h3>
+
−
        <h3 class="prot">Prototype</h3>
+
−
        <h3 class="hp">Human Practises</h3>
+
−
        <h3 class="as">About Us</h3>
+
−
    </div>
+
−
    <div class="jumbotron">
+
−
    <div class="turn">Turn red after one drink?</div>
+
−
    <div class="you">You may have ALDH2 Deficiency.</div>
+
−
    <div class="button">Learn more ></div> </div>
+
−
 
+
−
    <a href="https://twitter.com/igem_tas?lang=en" target="_blank">
+
−
      <img class="bird" src="https://image.flaticon.com/icons/svg/87/87890.svg" alt="">
+
−
    </a>
+
−
    <a href="https://www.instagram.com/igem_tas/" target="_blank">
+
−
        <img class="instagram" src="https://image.flaticon.com/icons/svg/725/725339.svg" alt="">
+
−
    </a>
+
−
    <a href="https://www.facebook.com/IGEMTAS/" target="_blank">
+
−
        <img class="fb" src="https://image.flaticon.com/icons/svg/725/725350.svg" alt="">
+
−
    </a>
+
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 02:46, 8 June 2018

<!DOCTYPE html>

Sidenav Push Example

Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.

☰ open