Difference between revisions of "Template:TPHS San Diego"

 
(224 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
−
body{background: white}
+
body{background: #444444}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; margin:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; margin:0px; width:100%;}
  
Line 20: Line 20:
 
*/
 
*/
  
−
html, body{
+
*{
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
Line 28: Line 28:
 
     width: 100vw;
 
     width: 100vw;
 
     height: 100vh;
 
     height: 100vh;
 +
background: #444444;
 
}
 
}
  
Line 33: Line 34:
 
     width: 100vw;
 
     width: 100vw;
 
     height: 30vh;
 
     height: 30vh;
 +
    box-shadow: inset 0 0 20px #333333;
 
}
 
}
  
Line 43: Line 45:
  
 
#section1 > .content_wrapper > .title{
 
#section1 > .content_wrapper > .title{
−
    height: 100px;
 
 
     text-align: center;
 
     text-align: center;
 
     font-family: Arial;
 
     font-family: Arial;
−
     font-size: 5em;
+
    min-height: 200px;
 +
     font-size: 7em;
 
     font-weight: bold;
 
     font-weight: bold;
 
     color: black;
 
     color: black;
−
    background: url(https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/2017/5-studyidentif.jpg) no-repeat;
+
animation-name: title_in;
−
    background-position: 0 60%;
+
                animation-duration: 1s;
−
    background-size: cover;
+
−
    background-clip: text;
+
−
    -moz-background-clip: text;
+
−
    -webkit-background-clip: text;
+
−
    -webkit-text-fill-color: transparent;
+
 
}
 
}
 +
 +
            @keyframes title_in{
 +
                0%{
 +
                    transform: translateY(-50px) scale(1.1, 1.1);
 +
                    opacity: 0.5;
 +
                }
 +
                100%{
 +
                    transform: translateY(0px) scale(1, 1);
 +
                    opacity: 1;
 +
                }
 +
            }
  
 
#section1 > .content_wrapper > .desc{
 
#section1 > .content_wrapper > .desc{
Line 99: Line 107:
 
#section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{
 
#section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{
 
     font-family: Arial;
 
     font-family: Arial;
 +
    font-size: 1em;
 
     color: rgb(148, 148, 148);
 
     color: rgb(148, 148, 148);
 
     margin: 5px;
 
     margin: 5px;
Line 104: Line 113:
  
 
#section4{
 
#section4{
−
     margin-bottom: 10vh;
+
     background-color: #EEEEEE;
−
    background-color: rgb(68, 68, 68);
+
margin: 0;
 
}
 
}
  
Line 124: Line 133:
 
     left: 15vw;
 
     left: 15vw;
 
     width: 70vw;
 
     width: 70vw;
−
    margin-bottom: 5vh;
 
 
}
 
}
  
Line 130: Line 138:
 
     font-family: Arial;
 
     font-family: Arial;
 
     font-size: 2em;
 
     font-size: 2em;
−
     color: rgb(68, 68, 68);
+
     color: #EEEEEE;
−
     margin: 20px;
+
     padding: 20px;
 +
    z-index: 10;
 
}
 
}
  
 
#section5 > .menu{
 
#section5 > .menu{
−
     width: 100vw;
+
     width: 100%;
 
}
 
}
  
Line 191: Line 200:
  
 
#section5 > .menu > .project{
 
#section5 > .menu > .project{
−
     width: 100vw;
+
     width: 100%;
 
     min-width: 400px;
 
     min-width: 400px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
Line 199: Line 208:
  
 
#section5 > .menu > .outreach{
 
#section5 > .menu > .outreach{
−
     width: 40vw;
+
     width: 40%;
 
     min-width: 200px;
 
     min-width: 200px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
Line 207: Line 216:
  
 
#section5 > .menu > .team{
 
#section5 > .menu > .team{
−
     width: 40vw;
+
     width: 40%;
 
     min-width: 200px;
 
     min-width: 200px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
Line 215: Line 224:
  
 
#section5 > .menu > .attribution{
 
#section5 > .menu > .attribution{
−
     width: 40vw;
+
     width: 40%;
 
     min-width: 200px;
 
     min-width: 200px;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
 
     background-size: cover;
 
     background-size: cover;
 
     display: inline-block;
 
     display: inline-block;
 +
}
 +
 +
.fullscreen {
 +
background-color: #111111;
 +
  background-image:url("https://static.igem.org/mediawiki/2018/0/0f/T--TPHS_San_Diego--Fungal_wall.jpg");
 +
  -webkit-background-size: contain;
 +
  -moz-background-size: contain;
 +
  -o-background-size: contain;
 +
  background-size: contain;
 +
background-repeat: no-repeat;
 +
padding-bottom: 200px;
 +
}
 +
 +
slider {
 +
                display:block;
 +
                width:100%;
 +
                height:100%;
 +
                background-color:#1f1f1f;
 +
                overflow:hidden;
 +
                position:relative;
 +
            }
 +
           
 +
            slider > * {
 +
                position:absolute;
 +
                display:block;
 +
                width:100%;
 +
                height:100%;
 +
                background:#1f1f1f;
 +
                animation: slide 12s infinite;
 +
                overflow:hidden;
 +
box-shadow: inset 0 0 20px black;
 +
            }
 +
           
 +
            slide:nth-child(1){
 +
                left:0%;
 +
                animation-delay: -1s;
 +
                background-image: url("https://static.igem.org/mediawiki/2018/5/52/T--TPHS_San_Diego--back_1.jpg");
 +
                background-size:cover;
 +
                background-position:center;
 +
background-attachment: fixed;
 +
visibility: hidden;
 +
image-rendering: -webkit-optimize-contrast;
 +
background-size: cover;
 +
background-position:50% 50%;
 +
            }
 +
           
 +
            slide:nth-child(2){
 +
                left:0%;
 +
                animation-delay: 2s;
 +
                background-image: url("https://static.igem.org/mediawiki/2018/2/2a/T--TPHS_San_Diego--back_2.jpg");
 +
                background-size:cover;
 +
                background-position:center;
 +
background-attachment: fixed;
 +
visibility: hidden;
 +
image-rendering: -webkit-optimize-contrast;
 +
background-size: cover;
 +
background-position:50% 50%;
 +
            }
 +
           
 +
            slide:nth-child(3){
 +
                animation-delay: 5s;
 +
                background-image: url("https://static.igem.org/mediawiki/2018/1/11/T--TPHS_San_Diego--back_3.jpg");
 +
                background-size:cover;
 +
                background-position:center;
 +
background-attachment: fixed;
 +
visibility: hidden;
 +
image-rendering: -webkit-optimize-contrast;
 +
background-size: cover;
 +
background-position:50% 50%;
 +
            }
 +
           
 +
            slide:nth-child(4){
 +
                left:0%;
 +
                animation-delay: 8s;
 +
                background-image: url("https://static.igem.org/mediawiki/2018/b/b3/T--TPHS_San_Diego--Homepage4.png");
 +
                background-size:cover;
 +
                background-position:center;
 +
background-attachment: fixed;
 +
visibility: hidden;
 +
image-rendering: -webkit-optimize-contrast;
 +
background-size: cover;
 +
background-position:50% 50%;
 +
            }
 +
         
 +
 +
            .slide_container {
 +
display:inline-block;
 +
                position: absolute;
 +
bottom: 0;
 +
                font-family:Arial;
 +
                font-size:30px;
 +
                text-align:center;
 +
margin: 50px;
 +
                padding: 20px;
 +
                width:40%;
 +
               
 +
                /*height: 40%;*/
 +
                background: #333333;
 +
                color:#fff;
 +
box-shadow: 0 0 20px black;
 +
line-height: 30px;
 +
            }
 +
           
 +
            @keyframes slide {
 +
                0% {left: 100%; width:100%;visibility: visible;}
 +
                5% {left: 0%; visibility: visible;}
 +
                25% {left: 0%;visibility: visible;}
 +
                30%{left :-100%; width:100%;visibility: visible;}
 +
                30.001%{left:-100%; width:0%;visibility: visible;}
 +
                100% {left:100%; width:0%;visibility: visible;}
 +
            }
 +
 +
p{
 +
margin: 0 !important;
 +
padding: 0 !important;
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 00:34, 18 October 2018