Difference between revisions of "Team:TAS Taipei"

Line 52: Line 52:
 
   .sidenav a {font-size: 18px;}
 
   .sidenav a {font-size: 18px;}
 
}
 
}
 +
 +
@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 {
 +
 +
    font-family: "Lato", sans-serif;
 +
 +
    transition: background-color .5s;
 +
 +
}
 +
 +
 +
 +
.sidenav {
 +
 +
    height: 100%;
 +
 +
    width: 0;
 +
 +
    position: fixed;
 +
 +
    z-index: 1;
 +
 +
    top: 0;
 +
 +
    left: 0;
 +
 +
    background-color: #111;
 +
 +
    overflow-x: hidden;
 +
 +
    transition: 0.5s;
 +
 +
    padding-top: 60px;
 +
 +
}
 +
 +
 +
 +
.sidenav a {
 +
 +
    padding: 8px 8px 8px 32px;
 +
 +
    text-decoration: none;
 +
 +
    font-size: 25px;
 +
 +
    color: #818181;
 +
 +
    display: block;
 +
 +
    transition: 0.3s;
 +
 +
}
 +
 +
 +
 +
.sidenav a:hover {
 +
 +
    color: #f1f1f1;
 +
 +
}
 +
 +
 +
 +
.sidenav .closebtn {
 +
 +
    position: absolute;
 +
 +
    top: 0;
 +
 +
    right: 25px;
 +
 +
    font-size: 36px;
 +
 +
    margin-left: 50px;
 +
 +
}
 +
 +
 +
 +
#main {
 +
 +
    transition: margin-left .5s;
 +
 +
    padding: 16px;
 +
 +
}
 +
 +
 +
 +
@media screen and (max-height: 450px) {
 +
 +
  .sidenav {padding-top: 15px;}
 +
 +
  .sidenav a {font-size: 18px;}
 +
 +
}
 +
 
</style>
 
</style>
 
</head>
 
</head>

Revision as of 05:44, 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