Difference between revisions of "Team:Uppsala/Human Practices"

Line 5: Line 5:
 
{{Uppsala/javascript/scroll-button}}
 
{{Uppsala/javascript/scroll-button}}
 
{{Uppsala/javascript/redirect_js}}
 
{{Uppsala/javascript/redirect_js}}
−
 
  
 
<html>
 
<html>
Line 12: Line 11:
  
 
         </style>
 
         </style>
 +
 +
 +
 +
 +
 +
<style/>
 +
 +
 +
            :root{
 +
                --primary: #8b1a32;
 +
                --secondary:#969696;
 +
                --tertiary: #f15025;
 +
                --whiteish: #fcf7ff;
 +
                --light-blue:#cde6f5;
 +
                --alt-secondary: #554640;
 +
 +
            }
 +
 +
 +
            html{
 +
                width: 100%;
 +
                height: 100%;
 +
            }
 +
            *{
 +
                margin: 0;
 +
                padding: 0;
 +
                box-sizing: border-box;
 +
            }
 +
           
 +
            .parallax {
 +
                /* The image used */
 +
                background-image: url("https://static.igem.org/mediawiki/2018/6/6a/T--Uppsala--HEADER_IMPROVE.jpeg");
 +
 +
                /* Set a specific height */
 +
                min-height: 99vh;
 +
 +
                /* Create the parallax scrolling effect */
 +
                background-attachment: fixed;
 +
                background-position: center;
 +
                background-repeat: no-repeat;
 +
                background-size: cover;
 +
                /*background: linear-gradient(to bottom, transparent 90%);*/
 +
            }
 +
           
 +
            .blur-box {
 +
            background-color: var(--whiteish);
 +
            box-shadow: 0 0 10px 10px var(--whiteish);
 +
            }
 +
 +
            .sub-header{
 +
 +
                /* Set a specific height */
 +
                height:20vw;
 +
                min-height: 150px;
 +
               
 +
 +
                /* Create the parallax scrolling effect */
 +
                /*background-attachment: fixed;*/
 +
                background-position: center;
 +
                background-repeat: no-repeat;
 +
                background-size: cover;
 +
               
 +
             
 +
            }
 +
           
 +
            .sub-header h1{
 +
                font-size: 60;
 +
                text-align: center;
 +
                position:absolute;
 +
                left:0;
 +
                right:0;
 +
                margin-top:6.5% ;
 +
                margin-left:auto;
 +
                margin-right: auto;
 +
                color:white;
 +
                bottom: px;
 +
            }
 +
 +
/* TODO: CHANGE */
 +
            #blue{
 +
                background-image: url(redbanner.jpg);
 +
            }
 +
 +
            h1, h2{
 +
 +
                color: #661325;
 +
            }
 +
            h1{
 +
                margin-top:2em;
 +
                margin-bottom: 0.5em;
 +
            }
 +
            #first-title{
 +
                top:100px;
 +
                margin-top: 0;
 +
            }
 +
           
 +
            .content{
 +
                position:relative;
 +
             
 +
                background-color: var(--whiteish);
 +
            }
 +
 +
            .content-text{
 +
                margin-top:2em;
 +
                min-width: 400px;
 +
                width:70%;
 +
                position: relative;
 +
                margin: auto;
 +
                /*background-color: #8c7cff;*/
 +
 +
            }
 +
 +
 +
            .scroll-pointer{
 +
                top:85%;
 +
                position:absolute;
 +
                /*margin-left:auto;
 +
                margin-right:auto;*/
 +
                width: 100%;
 +
                padding: 0;
 +
            }
 +
 +
            .scroll-pointer img{
 +
                color: var(--primary) ;
 +
 +
            }
 +
 +
            .center-icon{
 +
                width:100px;
 +
                position: relative;
 +
                display: block;
 +
                margin-right: auto;
 +
                margin-left: auto;
 +
                opacity: 0.8;
 +
            }
 +
.center {
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    width: 50%;
 +
}
 +
 +
 +
 +
</style>
 +
 +
 +
 +
 +
 +
 +
  /*****Code related to Animations*/
 +
       
 +
 +
        <div class="svg-wrapper">
 +
 +
   
 +
 +
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 +
viewBox="0 0 1904 328" style="enable-background:new 0 0 1904 328;" xml:space="preserve">
 +
<style type="text/css">
 +
.st0{fill:#fff;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
 +
</style>
 +
<g>
 +
<path class="st0" d="M32.7,23l24.4,0.8c16,0.5,26.5,0.8,31.4,0.8c4.4,0,23.1-0.5,56.1-1.6l1.6,1.4v9.8l-1.6,1.4
 +
c-9,0.3-15.9,0.7-20.8,1.2c-4.9,0.5-8.4,1.5-10.6,2.9c-2.2,1.4-3.7,4.8-4.4,10.1c-0.7,5.3-1.1,12.6-1.1,22l-0.4,44.9V207l0.2,38.1
 +
c0.1,14.7,0.5,24.2,1.2,28.5c0.6,4.3,1.6,7.2,2.8,8.6c1.2,1.4,3.6,2.6,7.1,3.6s12.2,1.7,26,2.2l1.6,1.2v9.8l-1.6,1.6
 +
c-0.7,0-12.1-0.4-34.4-1.2c-9.2-0.3-16.5-0.4-21.7-0.4c-4,0-22.7,0.5-55.9,1.6l-1.6-1.6v-9.8l1.6-1.2c12.1-0.5,20.2-1.2,24.2-2
 +
c4-0.8,6.7-1.8,8.1-3c1.4-1.2,2.5-3.9,3.3-7.9c0.8-4,1.3-13,1.5-27L70,207v-90.4l-0.4-38.1c-0.1-14.8-0.5-24.4-1.1-28.7
 +
s-1.5-7.2-2.7-8.6c-1.2-1.4-3.6-2.6-7.1-3.5c-3.5-0.9-12.2-1.6-26-2.1l-1.6-1.4v-9.8L32.7,23z"/>
 +
<path class="st0" d="M523.3,23.6l1.8,1.6v9.6l-1.6,1.4c-14.3,0.4-23.2,1.1-26.7,2.1c-3.5,1-5.9,2.8-7.3,5.2
 +
c-1.4,2.4-2.2,7.1-2.4,14.2s-0.6,26.9-1.1,59.6v90c0,13,0.2,27.7,0.6,44.1s1.2,25.9,2.4,28.6c1.2,2.7,3.5,4.6,6.7,5.9
 +
c3.3,1.2,12.5,2.1,27.7,2.4l1.6,1.4v9.6l-1.8,1.6c-21.2-1.2-39.7-1.8-55.5-1.8c-10.7,0-28.8,0.6-54.5,1.8l-1.8-1.6v-9.4l1.6-1.6
 +
c14.3-0.4,23.2-1.1,26.7-2.1c3.4-1,5.9-2.8,7.3-5.2c1.4-2.4,2.3-7.2,2.5-14.4c0.3-7.2,0.6-27,1-59.4V63.8l-67.4,141
 +
c-16.9,35.3-31.7,68.5-44.3,99.6h-7.6c-7.3-16.8-13.3-30.2-18-40.2L220,70.3v136.5c0,12.8,0.2,27.4,0.5,44
 +
c0.3,16.6,1.1,26.2,2.4,28.8c1.3,2.6,3.6,4.6,6.8,5.9c3.3,1.3,12.5,2.1,27.7,2.3l1.6,1.6v9.4l-1.8,1.8l-12.5-0.6
 +
c-12.9-0.7-24-1-33.2-1c-4.2,0-19.7,0.5-46.7,1.6l-1.6-1.6v-9.4l1.6-1.8c14.3-0.3,23.2-0.9,26.6-2c3.4-1,5.8-2.8,7.3-5.3
 +
c1.5-2.5,2.3-7.1,2.5-13.9c0.2-6.8,0.5-26.8,0.9-60v-89.5c0-11.8-0.2-26.3-0.5-43.3c-0.3-17-1.1-26.8-2.3-29.5
 +
c-1.2-2.7-3.5-4.7-6.7-6c-3.3-1.3-12.5-2.1-27.7-2.3l-1.6-1.6v-9.4l1.8-1.8c9,0.7,21.1,1,36.3,1c14.3,0,26.8-0.3,37.5-1
 +
c10.9,25.3,21.4,48.1,31.4,68.6l74,152l66.8-139.3c18.1-37.6,30.3-64.7,36.5-81.3c12.5,0.7,24.8,1,36.9,1
 +
C495.6,24.6,508.5,24.3,523.3,23.6z"/>
 +
<path class="st0" d="M545.8,23c32.8,1,53.7,1.6,62.7,1.6c12.2,0,26-0.3,41.2-1c16.1-0.5,26.1-0.8,29.9-0.8
 +
c18.2,0,33.3,1.9,45.2,5.7c11.9,3.8,21.8,10.7,29.6,20.7c7.8,10,11.7,22.1,11.7,36.3c0,11.7-2.7,23-8.2,34s-13.1,20.2-22.9,27.9
 +
c-9.8,7.7-19.7,13.2-29.7,16.5c-10,3.3-20.4,5-31.3,5c-8.1,0-17.1-0.9-27-2.7l-3.3-11.9l1.8-2c9.8,2.2,17.7,3.3,23.8,3.3
 +
c17.1,0,30.8-5.6,41.1-16.9c10.4-11.3,15.5-25.7,15.5-43.3c0-17.7-5.4-31.8-16.1-42.4s-27-15.8-48.7-15.8
 +
c-11.8,0-24.9,2.2-39.1,6.6c-1.2,10-1.8,34.2-1.8,72.7V207l0.2,38.1c0.1,14.7,0.5,24.2,1.2,28.5c0.7,4.3,1.6,7.2,2.8,8.6
 +
c1.2,1.4,3.6,2.6,7.1,3.6s12.2,1.7,26,2.2l1.6,1.2v9.8l-1.6,1.6c-33.2-1-51.9-1.6-56.1-1.6c-4.4,0-23,0.5-55.9,1.6l-1.6-1.6v-9.8
 +
l1.6-1.2c12.1-0.5,20.2-1.2,24.2-2c4-0.8,6.7-1.8,8.1-3c1.4-1.2,2.5-3.9,3.3-7.9c0.8-4,1.3-13,1.5-27l0.2-41.2v-90.4l-0.4-38.1
 +
c-0.1-14.8-0.5-24.4-1.1-28.7s-1.5-7.2-2.7-8.6c-1.2-1.4-3.6-2.6-7.1-3.5c-3.5-0.9-12.2-1.6-26-2.1l-1.6-1.4v-9.8L545.8,23z"/>
 +
<path class="st0" d="M784.1,24.4l1.6-1.4c23.8,1,42.4,1.6,55.7,1.6c14.7,0,34.6-0.5,59.6-1.4c9.2-0.3,15.9-0.4,20.1-0.4
 +
c32.9,0,55.3,6,67,18c11.7,12,17.6,26.2,17.6,42.6c0,10.9-2.9,21.7-8.6,32.2c-5.7,10.5-14.2,19.6-25.4,27.1
 +
c-11.2,7.5-26.6,13.1-46.3,16.9c3.6,5.1,10.2,13.9,19.7,26.4l27.7,36.7c9,12.1,18.6,24.9,28.9,38.4c10.3,13.5,16.9,21.1,19.9,22.9
 +
c3,1.8,5.6,2.8,7.7,3.2s5.6,0.6,10.3,0.6l1.6,1.6v9.2l-1.8,1.8c-6.3-0.8-13.7-1.2-22.3-1.2c-9.2,0-19.3,0.4-30.3,1.2
 +
c-9-10.9-23.1-29.9-42.4-56.8c-22.4-31.3-45.3-60.2-68.8-86.9l2-6.1c6.8,0.4,12,0.6,15.8,0.6c22.5,0,40.2-5.4,52.9-16.2
 +
c12.8-10.8,19.1-25.8,19.1-44.9c0-17.2-5.7-30.2-17.2-39c-11.5-8.8-27-13.2-46.5-13.2c-13.7,0-26.6,1.9-38.7,5.7
 +
c-2,2.9-2.9,27.3-2.9,73.2V207l0.2,38.1c0.1,14.7,0.5,24.2,1.2,28.5c0.7,4.3,1.6,7.2,2.8,8.6c1.2,1.4,3.6,2.6,7.1,3.6
 +
s12.2,1.7,26,2.2l1.6,1.2v9.8l-1.6,1.6c-0.7,0-12.1-0.4-34.4-1.2c-9.2-0.3-16.5-0.4-21.7-0.4c-4,0-22.7,0.5-55.9,1.6l-1.6-1.6v-9.8
 +
l1.6-1.2c12.1-0.5,20.2-1.2,24.2-2c4-0.8,6.7-1.8,8.1-3c1.4-1.2,2.5-3.9,3.3-7.9c0.8-4,1.3-13,1.5-27l0.2-41.2v-90.4l-0.4-38.1
 +
c-0.1-14.8-0.5-24.4-1.1-28.7s-1.5-7.2-2.7-8.6c-1.2-1.4-3.6-2.6-7.1-3.5c-3.5-0.9-12.2-1.6-26-2.1l-1.6-1.4V24.4z"/>
 +
<path class="st0" d="M1052.4,164.4c0-19.5,2.8-37.8,8.4-54.7c5.6-16.9,15.1-32.6,28.6-47c13.5-14.4,29.7-25.5,48.7-33.4
 +
c19-7.9,40.5-11.8,64.5-11.8c44.4,0,79.8,12.1,106.1,36.2c26.3,24.2,39.5,57.1,39.5,98.9c0,29.4-6.4,55.9-19.3,79.3
 +
s-31.3,41.7-55.4,54.7s-51,19.5-81,19.5c-21.2,0-40.8-3.5-58.6-10.6c-17.8-7.1-33-17.7-45.6-31.7c-12.6-14.1-21.7-30.3-27.3-48.8
 +
C1055.3,196.5,1052.4,179.7,1052.4,164.4z M1093.1,151.5c0,15.9,2.6,33,7.7,51.3c5.1,18.3,12.8,34,23,47.1
 +
c10.2,13.1,22,22.8,35.4,29.2c13.3,6.4,28.5,9.6,45.6,9.6c20.2,0,38.2-4.6,53.9-13.9c15.8-9.2,27.7-23.6,35.9-43.1
 +
c8.2-19.5,12.3-41.3,12.3-65.5c0-26.3-4.7-50.1-14.1-71.3c-9.4-21.2-22.7-36.7-40-46.3c-17.3-9.6-36.5-14.5-57.6-14.5
 +
c-31.6,0-56.6,9.9-74.8,29.7C1102.2,83.6,1093.1,112.9,1093.1,151.5z"/>
 +
<path class="st0" d="M1491.9,302.5c-2-5.7-10.1-27.6-24.4-65.6l-66.4-164.3c-7.6-18.8-12.3-29.4-14.3-31.9s-9.8-4.3-23.4-5.2
 +
l-1.8-1.8v-9l1.8-1.8c19.9,1,36.8,1.6,50.8,1.6c13,0,30.3-0.5,51.8-1.6l1.6,1.6v10.7l-1.6,1.6c-15.8,0-25.2,0.5-28.2,1.5
 +
c-3.1,1-4.6,2.8-4.6,5.6c0,1.6,2.1,8.5,6.3,20.8c4.2,12.3,7.9,22.7,11.1,31.2l61.1,154.5l51-128.1c3.5-8.7,8.7-22.8,15.4-42.2
 +
c6.8-19.4,10.2-31.1,10.2-35c0-3.3-1.6-5.3-4.8-6.3c-3.2-0.9-12.7-2-28.6-3.3L1553,34v-9.4l1.8-1.6c22.8,1,37.3,1.6,43.6,1.6
 +
c5.1,0,18.2-0.5,39.5-1.6l1.6,1.6V34l-1.6,1.6c-9.4,0.4-15,1.1-17,2.1c-2,1-3.7,3.1-5.2,6.1c-1.5,3-6.2,13.3-14,30.9l-60.9,150
 +
c-13.7,33.5-23.4,59.4-29.1,77.9H1491.9z"/>
 +
<path class="st0" d="M1660.6,24.4l1.6-1.4c44.7,0.8,73.2,1.2,85.7,1.2c42.7,0,80.7-0.4,114.1-1.2l1,1.4
 +
c-3.3,12.5-5.7,32.1-7.2,58.8l-1.2,1.6h-9.6l-1.8-1.6c0.1-1.2,0.2-2.2,0.2-3.1c0-11.1-0.8-21.6-2.5-31.6c-8.2-3.6-19.6-6-34.1-7.1
 +
c-14.5-1.1-25.4-1.7-32.7-1.7c-10.3,0-23.4,0.7-39.5,2.1l-0.8,31.3l-0.6,35.7l-0.6,39.6c14.1,0.8,27,1.2,38.9,1.2
 +
c12,0,22-0.4,30.1-1.2c8.1-0.8,12.8-1.6,14.2-2.4c1.4-0.8,2.4-2.5,3.1-4.9c0.7-2.4,1.3-6.7,1.9-12.8l0.8-12.1l1.6-1.6h9l1.6,1.6
 +
c-0.3,14.2-0.6,28.5-1,42.8l1,43.9l-1.6,1.6h-9l-1.6-1.6l-1.4-11.7c-1.2-9.1-2-14.6-2.5-16.3c-0.5-1.8-1.7-3.3-3.6-4.6
 +
c-1.9-1.3-6.7-2.3-14.6-3.1s-18.6-1.2-32.2-1.2c-7.6,0-19.1,0.3-34.6,1c-0.7,10.9-1,29.2-1,54.7c0,27.3,0.3,47.5,1,60.4h35.9
 +
c31.6,0,51.4-0.4,59.4-1.2c7.9-0.8,15.5-2.7,22.7-5.7c1.2-3,3.1-9.9,5.8-20.8c2.7-10.9,4.2-17.7,4.6-20.4l2-1.4h9.4l1.6,1.4
 +
c-1.2,5.6-2.3,15.4-3.4,29.3c-1.1,13.9-1.7,25.8-1.7,35.7l-1.4,1.6c-24.9-0.8-57.4-1.2-97.7-1.2l-53.1-0.4
 +
c-12.4,0-25.3,0.5-38.7,1.6l-1.6-1.6v-6.4l1.6-2c7.7-3.9,12.1-6.3,13.2-7.3c1.1-1,2-12.4,2.7-34.2c0.7-21.8,1.1-38.4,1.1-49.9
 +
v-71.7l-0.2-44.3c0-9.6-0.1-17.5-0.4-23.5c-0.3-6.1-0.7-10.4-1.4-13c-0.7-2.6-1.4-4.4-2.2-5.5c-0.8-1-2.2-1.9-4.1-2.6
 +
c-1.9-0.7-5.1-1.3-9.7-1.9l-14.8-1.2l-1.6-1.4V24.4z"/>
 +
 +
</g>
 +
</svg>
 +
 +
 +
 +
 +
</div>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
     </head>
 
     </head>
  
Line 27: Line 269:
 
             <div class ="content-text" id="scrolldown" >
 
             <div class ="content-text" id="scrolldown" >
 
                 <div style="height:5em;"></div>
 
                 <div style="height:5em;"></div>
 +
                <!-- FROM THIS POINT DOWNWARDS YOU START ADDING YOUR STUFF -->
 +
 
                 <!-- FROM THIS POINT DOWNWARDS YOU START ADDING YOUR STUFF -->
 
                 <!-- FROM THIS POINT DOWNWARDS YOU START ADDING YOUR STUFF -->
  

Revision as of 14:19, 12 October 2018



/*****Code related to Animations*/