Difference between revisions of "Template:ETH Zurich/index css"

Line 6: Line 6:
  
 
#wrap {
 
#wrap {
−
  width: 100%;
+
font-size:80%;
−
  height: 100%;
+
font-family:tahoma;
−
  position: relative;
+
color:#222;
−
  overflow: hidden;
+
width:250px;
−
}
+
float:left;
−
+
position:absolute;
−
#wrap p {
+
margin:5px;
−
  position: absolute;
+
background-color:rgba(255, 255, 255, 0.5);
−
  left: 50%;
+
−
  top: 50%;
+
−
  transform: translateX(-50%) translateY(-50%);
+
−
  color: rgba(255, 255, 255, 0.5);
+
−
  font-size: 30px;
+
−
  text-transform: uppercase;
+
−
  letter-spacing: 5px;
+
−
  text-align: center;
+
−
}
+
−
+
−
.ball {
+
−
  pointer-events: none;
+
−
  position: absolute;
+
−
  width: 10px;
+
−
  height: 10px;
+
−
  border-radius: 50%;
+
−
  background: gray;
+
−
  animation: implode 1s ease-in-out;
+
−
  animation-fill-mode: both;
+
−
  opacity: .5;
+
−
}
+
−
+
−
@keyframes implode {
+
−
  100% {
+
−
    transform: scale(0);
+
−
  }
+
 
}
 
}
  

Revision as of 12:53, 29 October 2017

main h1 { 

   color: black;
   font-weight: bold;
   font-size: 24px;

}

  1. wrap {

font-size:80%; font-family:tahoma; color:#222; width:250px; float:left; position:absolute; margin:5px; background-color:rgba(255, 255, 255, 0.5); }

main a { 

   color: #181818;

}

main button { 

   background-color: #d8d8d8;
   padding: 13px;
   border: none;
   letter-spacing: 2px;
   transition: all 0.3s ease 0s;
   text-align: center;
   color: #181818;

}

main button:hover { 

     background: #ff7e5f;
    background-image: -webkit-linear-gradient(top, #ff7e5f, #fab682);
 background-image: -moz-linear-gradient(top, #ff7e5f, #fab682);
 background-image: -ms-linear-gradient(top, #ff7e5f, #fab682);
 background-image: -o-linear-gradient(top, #ff7e5f, #fab682);
 background-image: linear-gradient(to bottom, #ff7e5f, #fab682);
 text-decoration: none;
   padding: 10px;
   border: none;
   letter-spacing: 2px;

}

button a:link { 

   color: #181818;
   font-size: 16px;
   text-decoration: none;
   text-transform: uppercase;

}

button a:visited{ 

   color: #181818;
   font-size: 16px;
   text-decoration: none;
   text-transform: uppercase;

}

button a:hover { 

   text-decoration: none;
   color: #181818;

}

main p { 

   font-size: 24px;
   line-height: 130%;

}


  1. banner {
   margin-top: -30px;
   margin: auto;
   width: 100%;

}



main section { 

   padding-bottom: 50px;

}


div.space { 

   padding: 40px;

}


.vision > figure.EcN { 

   float:left;
   width: 250px;
   padding-right: 80px;

}

.circuit > figure.andgate { 

   float: right;
   width: 250px;
   padding-left: 80px;

}

.step > figure { 

   float: right;
   width: 400px;

}

.step.invert > figure { 

   float: left;
   width: 250px;

}


div.why { 

   width: 100%

}

}

.step > a { 

   display: block;
   margin: 0px;

}

.break > figure { 

   margin-right: auto;
   margin-left: auto;
   width: 650px;

}


figure.process { 

   width: 1200px;
   margin: auto;
   padding-top: 45px;

}

.drylab > figure.drylab { 

   width: 220px;
   float: left;
   padding-right: 80px;
   padding-top: 20px;
   padding-bottom: 20px;

}

.wetlab > figure.wetlab { 

   width: 150px;
   float: right;
   padding-left: 80px;

}

.goals > figure.goals { 

   float:left;
   width: 320px;
   padding-right: 80px;
   padding-bottom: 100px;
   margin-top: 20px;

}


figure.scroll { 

   -webkit-transition:all .3s ease-out;
   -moz-transition:all .3s ease-out;
   -ms-transition:all .3s ease-out;
   -o-transition:all .3s ease-out;
   transition:all .3s ease-out;

}

figure.scroll:hover { 

   -webkit-transform:translate(0px,10px);
   -moz-transform:translate(0px,10px);
   -ms-transform:translate(0px,10px);
   -o-transform:translate(0px,10px);
   transform:translate(0px,10px);

}


.scroll-down-button { 

   background-image: url('https://static.igem.org/mediawiki/2017/1/14/T--ETH_Zurich--Scroll.png') no-repeat center;
   margin: auto;
   display: block;
   width: 50px;
   padding: 90px;

}


@media screen and (min-width: 620px) { 

   .step {/*
       align-items: center;
       flex-flow: row nowrap;
   */}
   .step.invert {/*
       flex-flow: row-reverse nowrap;
   */}

}