Difference between revisions of "Template:TPHS San Diego"

 
(187 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;
 
}
 
}
−
 
−
.logo
 
−
{
 
−
  padding:0px;
 
−
  height:110px;
 
−
  width:300px;
 
−
  display:inline-block;
 
−
  float:left;
 
−
  background-color:#FFFACD;
 
−
 
 
−
}
 
−
.navbar
 
−
{
 
−
  overflow: hidden;
 
−
  background-color:#FFFACD;
 
−
  font-family: Arial;
 
−
  font-size:16px;
 
−
  padding:30px;
 
−
  padding-left:300px;
 
−
}
 
−
 
−
/* Links inside the navbar */
 
−
.navbar a
 
−
{
 
−
  float: left;
 
−
  font-size: 20px;
 
−
  font-weight:500;
 
−
  color:black;
 
−
  text-align: center;
 
−
  padding: 14px 16px;
 
−
  text-decoration: none;
 
−
}
 
−
 
−
/* The dropdown container */
 
−
.dropdown
 
−
{
 
−
  float: left;
 
−
  overflow: hidden;
 
−
}
 
−
 
−
/* Dropdown button */
 
−
.dropdown .dropbtn
 
−
{
 
−
  display:inline-block;
 
−
  font-size: 16px;
 
−
  border: none;
 
−
  outline: none;
 
−
  color: black;
 
−
  font-weight:700;
 
−
  font-size:20px;
 
−
  padding: 14px 50px;
 
−
  background-color: inherit;
 
−
  font-family: inherit; /* Important for vertical align on mobile phones */
 
−
  margin: 0; /* Important for vertical align on mobile phones */
 
−
}
 
−
 
−
/* Add a red background color to navbar links on hover */
 
−
.navbar a:hover, .dropdown:hover .dropbtn
 
−
{
 
−
  background-color:rgba(255, 229, 7, 0.47);
 
−
}
 
−
 
−
/* Dropdown content (hidden by default) */
 
−
.dropdown-content
 
−
{
 
−
  display: none;
 
−
  position: absolute;
 
−
  background-color: #f9f9f9;
 
−
  min-width: 160px;
 
−
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
−
  z-index: 1;
 
−
}
 
−
 
−
/* Links inside the dropdown */
 
−
.dropdown-content a
 
−
{
 
−
  float: none;
 
−
  color: black;
 
−
  padding: 12px 16px;
 
−
  text-decoration: none;
 
−
  display: block;
 
−
  text-align: left;
 
−
}
 
−
 
−
/* Add a grey background color to dropdown links on hover */
 
−
.dropdown-content a:hover
 
−
{
 
−
  background-color: #ddd;
 
−
}
 
−
 
−
/* Show the dropdown menu on hover */
 
−
.dropdown:hover .dropdown-content
 
−
{
 
−
  display: block;
 
−
}
 
−
 
  
 
.fullscreen_section{
 
.fullscreen_section{
 
     width: 100vw;
 
     width: 100vw;
 
     height: 100vh;
 
     height: 100vh;
 +
background: #444444;
 
}
 
}
  
Line 129: Line 34:
 
     width: 100vw;
 
     width: 100vw;
 
     height: 30vh;
 
     height: 30vh;
 +
    box-shadow: inset 0 0 20px #333333;
 
}
 
}
  
Line 145: Line 51:
 
     font-weight: bold;
 
     font-weight: bold;
 
     color: black;
 
     color: black;
 +
animation-name: title_in;
 +
                animation-duration: 1s;
 
}
 
}
 +
 +
            @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 194: Line 113:
  
 
#section4{
 
#section4{
−
     margin-bottom: 10vh;
+
     background-color: #EEEEEE;
−
    background-color: rgb(68, 68, 68);
+
margin: 0;
 
}
 
}
  
Line 214: Line 133:
 
     left: 15vw;
 
     left: 15vw;
 
     width: 70vw;
 
     width: 70vw;
−
    margin-bottom: 5vh;
 
 
}
 
}
  
Line 220: 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;
 
}
 
}
  
Line 310: Line 229:
 
     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