Difference between revisions of "Template:HK GTC"

Line 1: Line 1:
 
<html>
 
<html>
 +
<header>
 +
    <nav>
 +
        <ul class="navbar">
 +
            <li class="navButton"><a href="https://2019.igem.org/Team:HK_GTC">Home</a></li>
 +
            <li class="dropdown">
 +
                <a class="dropdownButton">Team</a>
 +
                <div class="dropdownContent">
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Team">Team Members</a>
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Attributions">Attributions</a>
 +
                </div>
 +
            </li>
 +
            <li class="dropdown">
 +
                <a class="dropdownButton">Project</a>
 +
                <div class="dropdownContent">
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Description">Description</a>
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Design">Design</a>
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Notebook">Notebook</a>
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Results">Experiments and Results</a>
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Future_Perspective">Future Perspective</a>
 +
                </div>
 +
            </li>
 +
            <li class="dropdown">
 +
                <a class="dropdownButton">Parts</a>
 +
                <div class="dropdownContent">
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Parts">Parts Overview</a>
 +
                </div>
 +
            </li>
 +
            <li class="navButton"><a href="2019.igem.org/Team:HK_GTC/Safety">Safety</a></li>
 +
            <li class="dropdown">
 +
                <a class="dropdownButton">Human Practices</a>
 +
                <div class="dropdownContent">
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Human_Practices">Integrated Human Practices</a>                   
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Collaborations">Collaborations</a>
 +
                    <a href="https://2019.igem.org/Team:HK_GTC/Public_Engagement">Education & Engagement</a>
 +
                </div>
 +
            </li>
 +
            <li class="navButton"><a href="https://igem.org/2019_Judging_Form?team=HK_GTC">Judging Form</a></li>
 +
        </ul>
 +
    </nav>
 +
</header>
 
<style>
 
<style>
 +
    /*Replace this with file on igem sever*/
 +
    @import url('https://fonts.googleapis.com/css?family=Lobster');
 +
    @import url('https://fonts.googleapis.com/css?family=Lato:400,700|Roboto:300,400,500,700&display=swap');
 +
    /*Override default ruleset*/
  
−
<!-- removes default logo out of the way -->
+
    #home_logo,
 +
    #sideMenu,
 +
    #top_title,
 +
    .patrollink {
 +
        display: none;
 +
    }
  
 +
    #content {
 +
        width: 100%;
 +
        padding: 0px;
 +
        margin: -7px 0 0;
 +
        background-color: transparent;
 +
    }
  
−
div#content.mw-body {
+
    /*style of body content*/
−
    width: 100% !important;
+
−
    padding: 0px !important;
+
−
    margin: -7px 0 0 !important;
+
−
    background-color: transparent !important;
+
−
}
+
  
−
#content #home_logo,
+
    body {
−
#content #sideMenu,
+
        margin: 0;
−
#content #top_title,
+
        padding: 0;
−
#content .patrollink {
+
        background-color: #ffffff;
−
    display: none !important;
+
        color: #000000;
−
}
+
        font-family: 'Roboto', sans-serif;
 +
        font-size: 100% !important;
 +
    }
  
 +
    /*the following rulesets are used to configure the navigation bar. DO NOT EDIT.*/
  
−
*{
+
    .navbar {
−
    margin: 0;
+
        position: fixed;
−
    padding: 0;
+
        width: 100%;
−
    border: 0;
+
        list-style-type: none !important;
−
    outline: 0;
+
        list-style-image: none !important;
−
    font-size: 100%;
+
        margin: -8px 0 0 !important;
−
     vertical-align: baseline;
+
        padding: 0 !important;
−
    background: transparent;
+
        background-color: #798cff;
−
}
+
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
 +
        z-index: 999
 +
     }
 +
    .navButton,
 +
    .dropdown {
 +
        float: left;
 +
        cursor: pointer;
 +
        user-select: none;
 +
        margin: 0;
 +
    }
  
−
header{
+
    .navButton>a,
−
     font-family: 'Raleway', serif !important;
+
     .dropdownButton {
−
}
+
        font-family: 'Amaranth', sans-serif;
 +
        display: block;
 +
        text-align: center;
 +
        padding: 14px 16px;
 +
        text-decoration: none;
 +
        color: #fff;
 +
        transition: all .2s;
 +
    }
  
−
@font-face {
+
     .navButton:hover,
−
     font-family: "Monastic";
+
     .dropdown:hover>.dropdownButton {
−
     src: url("../fonts/Monastic.ttf");
+
        background-color: #ffffff;
−
}
+
    }
  
−
/* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
+
    .navButton:hover>a,
 +
    .dropdown:hover>.dropdownButton {
 +
        color: #000000;
 +
        text-decoration: none;
 +
    }
  
−
html{
+
    .navButton:active,
−
     scroll-behavior: smooth;
+
     .dropdownButton:active .dropdownContent>a:active {
−
}
+
        background-color: #ffffff;
 +
    }
  
−
html, body{
+
    .navButton:active>a,
−
     background-color: #f4f4f4;
+
     .dropdownButton:active .dropdownContent>a:active {
−
     height: 100vw;
+
        color: #000000;
−
}
+
     }
  
−
#my-nav{
+
    .dropdown>.dropdownContent {
−
    position: fixed;
+
        display: none;
−
    width: 100%;
+
        position: absolute;
−
    height: 10vh;
+
        background-color: #000000;
−
    transition: transform .5s;
+
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
−
     z-index: 3;
+
     }
−
}
+
  
−
#my-nav #top{
+
     .dropdown:hover>.dropdownContent {
−
     position: absolute;
+
        display: block;
−
    top:0;
+
     }
−
     left:0;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
}
+
  
−
#my-nav #top h1{
 
−
    float: left;
 
−
    padding:2rem;
 
−
    font-size: 2rem;
 
−
    color: #fff;
 
−
}
 
−
#my-nav #nav-button{
 
−
    transition: all .25s;
 
−
    float: right;
 
−
    padding: 2rem;
 
−
}
 
  
−
#my-nav #nav-button:hover{
+
    .dropdownContent>a {
−
    cursor: pointer;
+
        font-family: 'Amaranth', sans-serif;
−
    height:3rem;
+
        color: #ffffff;
−
}
+
        padding: 12px 16px;
 +
        text-decoration: none;
 +
        display: block;
 +
        text-align: left;
 +
        transition: all .2s;
 +
    }
  
−
#my-nav #nav-button line{
+
    .dropdownContent>a:hover {
−
    stroke: #fff;
+
        background-color: #ffffff;
−
    transition: all .5s;
+
        color: #000000;
−
}
+
        text-decoration: none;
 +
    }
  
−
#my-nav #nav-button:hover line{
+
     /*page content style*/
−
     stroke: #eeeeee;
+
−
}
+
  
−
#my-nav #back-button{
+
    main {
−
    width: fit-content;
+
        width: 297mm;
−
}
+
        margin: 0 auto;
 +
        background-color: #ffffff;
 +
        border: 5mm solid #000000;
 +
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
 +
    }
  
−
#my-nav #back-button:hover{
+
    h1,
−
    cursor: pointer;
+
    h2,
−
}
+
    h3,
 +
    h4,
 +
    h5,
 +
    h6 {
 +
        font-family: 'lato', serif !important;
 +
        color: #ffffff;
 +
    }
  
−
#my-nav .inline{
+
    h1 {
−
     display: inline;
+
        text-align: center;
−
}
+
        padding: 102px 0 10px;
 +
     }
 +
   
 +
    p {
 +
        font-family: 'Roboto', sans-serif !important;
 +
        margin: 15px 35px;
 +
        font-size: 19px;
 +
        line-height: 1.5;
 +
        color: #ffffff;
 +
    }
  
−
#my-nav .inline h1{
+
    table {
−
    padding-right: 0 !important;
+
        margin: 45px auto !important;
−
}
+
        padding: 0 45px;
 +
        color: #ffffff;
 +
    }
  
−
#my-nav #my-nav.logo{
+
     figure {
−
     width: 6rem;
+
        text-align: center;
−
    height: 6rem;
+
        margin: 45px auto !important;
−
}
+
        font-family: 'Alegreya', serif !important;
−
#my-nav #popup{
+
    }
−
    position: fixed;
+
−
    width:25%;
+
−
    height:100%;
+
−
    right:0;
+
−
    transform: translateX(100%);
+
−
    padding: 2.5rem;
+
−
    background-color: #ffffff;
+
−
    font-size: 2rem;
+
−
    font-weight: 200;
+
−
    transition: all .5s;
+
−
    opacity: 0;
+
−
    color: #4f4f4f !important;
+
−
}
+
  
−
#my-nav #popup a{
+
    caption {
−
    width: 100%;
+
        margin: 20px 0;
−
    height: 100%;
+
        font-family: 'Alegreya', serif !important;
−
    text-decoration: none;
+
        color: #ffffff;
−
    color:#4f4f4f;
+
     }
−
     font-weight: 200;
+
−
    transition: all .25s;
+
−
}
+
  
−
#my-nav #popup li{
+
    th {
−
    transition: all .25s;
+
        background-color: #000000!important;
−
}
+
        color: #ffffff!important;
 +
    }
  
−
#my-nav #popup li:hover{
+
    td {
−
    cursor: pointer;
+
        background-color: #000000;
−
    color: #f4f4f4;
+
     }
−
    background-color: #1BA784;
+
−
     font-weight: 400;
+
−
}
+
  
−
#my-nav #popup li:hover a{
+
/*  img {
−
     color: #f4f4f4;
+
        border: 3mm solid #ebe5e5;
−
    font-weight: 400;
+
        margin: 15px !important;
−
}
+
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
 +
     }
 +
*/
 +
    blockquote {
 +
        margin: 15px 45px;
 +
        font-size: 19px !important;
 +
        line-height: 1.5;
 +
        color: #ffffff;
 +
    }
  
 +
    li {
 +
        color: #000000;
 +
    }
  
−
#my-nav #current-page{
+
     /*ruleset for collage display*/
−
     font-weight: bold;
+
−
}
+
  
−
#my-nav #popup nav,#my-nav #popup ul,#my-nav #popup li{
+
    .collage {
−
    list-style-type: none;
+
        display: inline-table;
−
    width: 100%;
+
        border: 3mm solid #fdfcf9 !important;
−
     padding: .6rem;
+
     }
−
}
+
  
−
#my-nav #popup h1 {
+
    .collage img, .collage td, .collage tr, .collage tbody{
−
    padding: .6rem
+
        padding: 0 !important;
−
}
+
        border: 0 !important;
 +
        margin: 0;
 +
    }
 +
    .formula {
 +
        border: 0mm solid #fdfcf9;
 +
        margin: 1px;
 +
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
 +
    }
  
−
#my-nav .navShow{
 
−
    transform: translateX(0%) !important;
 
−
    opacity: 1 !important;
 
−
}
 
  
−
#my-nav .inactive{
+
</style>
−
    display:none;
+
−
}
+
  
−
#my-nav .show{
 
−
    transition: opacity .25s;
 
−
    opacity: 1;
 
−
}
 
−
 
−
#my-nav .fade-out{
 
−
    transition: opacity .25s;
 
−
    opacity : 0 !important;
 
−
}
 
−
 
−
#my-nav .rotate{
 
−
    transform: rotate(90deg);
 
−
}
 
−
 
−
html{
 
−
    scroll-behavior: smooth;
 
−
}
 
−
 
−
html, body{
 
−
    background-color: #f4f4f4;
 
−
}
 
−
 
−
body{
 
−
    position: absolute;
 
−
    width: 100%;
 
−
}
 
−
 
−
#my-global-wrapper{
 
−
    width: 100%;
 
−
    height: max-content;
 
−
    font-family: 'Raleway', serif !important;
 
−
}
 
−
 
−
#welcome{
 
−
    position: relative;
 
−
    height: 100vh;
 
−
    width: 100%;
 
−
    font-size: 6rem;
 
−
    background-color: #93D5DC;
 
−
    background-image: url("../img/Main\ page\ background.png");
 
−
    display: grid;
 
−
    grid-template-columns: 1fr 1fr;
 
−
}
 
−
 
−
/* #welcome h1{
 
−
    color: #fff;
 
−
    width: 100%;
 
−
    text-align: center;
 
−
    padding-top:300px;
 
−
    animation-name: floaty;
 
−
    animation-duration: 1s;
 
−
    animation-iteration-count: infinite;
 
−
    animation-timing-function:cubic-bezier(0.59, 0.01, 0.4, 0.93);
 
−
} */
 
−
 
−
.center{
 
−
    position: absolute;
 
−
    top: 50%;
 
−
    left: 50%;
 
−
    transform: translate(-50%, -50%);
 
−
}
 
−
 
−
#welcome .left{
 
−
    padding: 4rem;
 
−
    position: relative;
 
−
}
 
−
 
−
#welcome .left h1{
 
−
    font-family: "Monastic";
 
−
    font-size: 6rem;
 
−
    padding: 1rem;
 
−
    letter-spacing: 1rem;
 
−
}
 
−
 
−
#welcome .left .bar{
 
−
    height: .6rem;
 
−
    width: 60%;
 
−
    margin: auto;
 
−
    display: grid;
 
−
    grid-template-columns: 1fr 1fr;
 
−
}
 
−
 
−
#welcome .left .bar .leftcolor{
 
−
    width: 110%;
 
−
    height: 100%;
 
−
    background-color: #71aada;
 
−
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
 
−
}
 
−
 
−
#welcome .left .bar .rightcolor{
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    background-color: #cee5f7;
 
−
}
 
−
 
−
#welcome .left p{
 
−
    font-size: 2.5rem;
 
−
    font-weight: 200;
 
−
    padding: 1rem;
 
−
}
 
−
 
−
#welcome .right{
 
−
    position: relative;
 
−
}
 
−
 
−
#welcome .right img{
 
−
  width: 100%;
 
−
  max-width: none;
 
−
  overflow: hidden;
 
−
}
 
−
 
−
 
−
 
−
 
−
</style>
 
 
</html>
 
</html>

Revision as of 08:12, 18 September 2021