Difference between revisions of "Template:Groningen/CSS"

 
(129 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
/* HIER MOET DE CSS*/
 
/* HIER MOET DE CSS*/
  
 +
#menu-btn {
 +
    top: 5em !important;
 +
    right: 0.3em !important;
 +
}
 +
 +
.fa-arrow-circle-down {
 +
width:100px;height:100px;font-size: 4em;
 +
}
 +
.startbutton {
 +
    color: #ffffff61 !important;
 +
    font-weight: bold;
 +
    position: relative;
 +
    top: 500px;
 +
}
 +
.greenbutton {
 +
color: #009739 !important;
 +
}
 +
 +
.blackbutton {
 +
color: #00140F !important;
 +
}
 +
 +
.brownbutton {
 +
color: #805113 !important;
 +
}
 +
 +
.redbutton {
 +
color: #E4140F !important;
 +
}
 +
 +
.bluebutton {
 +
color: #174290 !important;
 +
}
 +
 +
 +
 +
figcaption {
 +
    display: block;
 +
}
 +
.box {
 +
    float: left;
 +
    width: 200px;
 +
    margin-left: 10px;
 +
    margin-top: 10px;
 +
    padding: 5px;
 +
    border: 2px white;
 +
}
 +
.boxed {
 +
  border: 10px solid green ;
 +
  padding: 20px
 +
}
 +
 +
 +
 +
@media only screen and (max-width: 1100px) {
 +
  .startbutton {
 +
    top: 200px;
 +
  }
 +
}
 +
@media only screen and (max-width: 900px) {
 +
  .startbutton {
 +
    top: 20px;
 +
  }
 +
 +
img.mainimg {
 +
display:none;
 +
}
 +
.greenbutton {display:none; }
 +
.blackbutton {display:none; }
 +
.brownbutton {display:none; }
 +
.bluebutton {display:none; }
 +
.redbutton {display:none; }
 +
 +
}
 +
.startbutton:hover, .startbutton:active  {
 +
color:white !important;
 +
}
 +
.greenbutton:hover, .greenbutton:active {
 +
    color: #009739ad !important;
 +
}
 +
 +
.blackbutton:hover, .blackbutton:active {
 +
    color: #00140Fad !important;
 +
}
 +
 +
.brownbutton:hover, .brownbutton:active {
 +
    color: #805113ad !important;
 +
}
 +
 +
.bluebutton:hover, .bluebutton:active {
 +
    color: #174290ad !important;
 +
}
 +
 +
.redbutton:hover, .redbutton:active {
 +
    color: #E4140Fad !important;
 +
}
 +
 +
 +
 +
.div1, div2{
 +
 +
display: inline-block;
 +
 +
}
 +
.tab {
 +
margin-left: 2.5em
 +
}
 +
.contentvid {
 +
position: absolute;
 +
    top: 5%;
 +
    left: 30%;
 +
width:40%;
 +
z-index:200
 +
}
 +
#myVideo {
 +
    width: 100%;
 +
    position: relative;
 +
    z-index: 100;
 +
}
 +
 +
 +
 +
#up-btn {
 +
    background-image: url(https://static.igem.org/mediawiki/2018/f/f2/T--Groningen--2018_tothetop.png) !important;
 +
}
 +
#up-btn:hover {
 +
    opacity: .7;
 +
}
 +
 
 +
 +
.igem_2018_team_content {
 +
max-width: 1920px;
 +
    margin: 0 auto;
 +
}
 +
 +
h1, h2, h3, h4 {
 +
font-family: 'Lato', sans-serif !important;
 +
}
 +
 +
h1 {
 +
margin-left:0.5em !important;
 +
border-bottom: 2px solid #0097392e !important;
 +
padding-bottom: 5px !important;
 +
    max-width: 95% !important;
 +
font-weight: 900 !important;
 +
color: #009739 !important;
 +
margin-top: 0 !important;
 +
    padding-top: 0.4em !important;
 +
}
 +
 +
h4 {
 +
    font-weight: normal !important;
 +
    color: #009739 !important;
 +
}
 +
 +
h5 {
 +
    width: 95%;
 +
    margin: 0 auto;
 +
}
 +
 +
ol li {
 +
opacity: 0.87 !important;
 +
}
 +
 +
.line_divider {
 +
border-top: 2px solid #00973933 !important;
 +
    margin: auto !important;
 +
    width: 95% !important;
 +
}
 
footer .sponsors a img {
 
footer .sponsors a img {
 
opacity:0.8 !important;
 
opacity:0.8 !important;
Line 15: Line 184:
 
}
 
}
  
−
.igem_2018_team_content {background:#c6c6c6 !important;}
+
.igem_2018_team_content {background:#E2E2E2!important;}
 
.igem_2018_team_column_wrapper {background:white !important;}
 
.igem_2018_team_column_wrapper {background:white !important;}
  
Line 21: Line 190:
 
#blok01 {
 
#blok01 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 200px !important;
+
     top: 324px !important;
−
     left: 700px;
+
     left: 700px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
 +
    a:link color: #000000;
 +
}
 +
#titleblok01 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok01 {
 +
    color: #42AC55 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #42AC55 !important;
 
}
 
}
 +
 +
  
 
#blok02 {
 
#blok02 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 900px !important;
+
     top: 988px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 40px;
+
     left: 40px !important;
 
}
 
}
 +
#titleblok02 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok02 {
 +
    color: #00140F !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #00140F !important;
 +
}
 +
 
#blok03 {
 
#blok03 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 1450px !important;
+
     top: 1578px !important ;
−
     z-index: 100 !important;
+
     z-index: 100 !important ;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 700px;
+
     left: 700px !important;
 
}
 
}
 +
#titleblok03 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok03 {
 +
    color: #805113 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #805113 !important;
 +
}
 +
 
#blok04 {
 
#blok04 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 2100px !important;
+
     top: 2205px  !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 40px;
+
     left: 40px !important;
 
}
 
}
 +
#titleblok04 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok04 {
 +
    color: #E4140F !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #E4140F !important;
 +
}
 +
 
#blok05 {
 
#blok05 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 2700px !important;
+
     top: 2828px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 700px;
+
     left: 700px !important;
 
}
 
}
 +
#titleblok05 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok05 {
 +
    color: #174290 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #174290 !important;
 +
}
 +
 
#blok06 {
 
#blok06 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 3400px !important;
+
     top: 3528px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 40px;
+
     left: 40px !important;
 +
}
 +
#titleblok06 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok06 {
 +
    color: #93B131 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #93B131 !important;
 
}
 
}
  
 
h4.mainpageh4{
 
h4.mainpageh4{
−
color: #020203;
+
    color: #020203;
−
font-weight: bold;
+
    font-weight: bold;
−
text-align: left;
+
    text-align: left;
 
}
 
}
  
 
.mainpageblok {
 
.mainpageblok {
 
}
 
}
−
.zwart {color:black;}
+
    font-seize: 3em; !important
 +
    .zwart {color:black;}
  
 
#tocc {
 
#tocc {
Line 89: Line 332:
 
         background: #0000001c;
 
         background: #0000001c;
 
     border-radius: 50%;
 
     border-radius: 50%;
 +
}
 +
a.design_block {
 +
    height: 11%;
 +
    width: 21.6%;
 +
    background: #00973917;
 +
    border-radius: 2%;
 
}
 
}
 
a.tree_block:hover {
 
a.tree_block:hover {
 +
    background: #ffffff24;
 +
}
 +
a.design_block:hover {
 
     background: #ffffff24;
 
     background: #ffffff24;
 
}
 
}
Line 101: Line 353:
 
a.tree_block_big:hover {
 
a.tree_block_big:hover {
 
     background: #ffffff24;
 
     background: #ffffff24;
 +
}
 +
div.collapsible-header {
 +
background:#009739;
 +
color:white;
 +
}
 +
div.collapsible-header:hover {
 +
background:#009739bf;
 +
}
 +
div.collapsible-header:active {
 +
background:#009739;
 +
}
 +
 +
 +
@media only screen and (max-width: 1450px) {
 +
    .startbutton {
 +
      top: 300px;
 +
  }
 +
  .igem_2018_team_content .igem_2018_team_column_wrapper {
 +
    margin: 0 auto;
 +
    width:95%;
 +
}
 +
 +
@media only screen and (max-width: 1200px) {
 +
#blok01, #blok02, #blok03, #blok04, #blok05, #blok06 {
 +
    position: relative !important;
 +
    width: 95% !important;
 +
    top: 0 !important;
 +
    left: 0 !important;
 +
    margin: 50px 0 10px 0 !important;
 +
    background: #00973930;
 +
    padding: 20px;
 +
}
 +
.mainimg {display:none;}
 +
.startbutton {
 +
      display:none;
 +
  }
 +
#menu-btn {
 +
z-index:2000 !important;
 +
}
 +
}
 +
 +
 +
 +
h4 .quoteh4 {
 +
    text-align: center !important;
 +
    font-style: italic !important;
 +
    font-size: 1.6em !important;
 +
    padding: 40px !important;
 +
    background: #e2e2e2 !important;
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 23:32, 17 October 2018