Difference between revisions of "Template:Groningen"

Line 103: Line 103:
  
 
/* START GENERAL STYLES */
 
/* START GENERAL STYLES */
 +
html {
 +
    height: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
}
  
 +
body {
 +
    width: auto !important;
 +
    height: 100%;
 +
    width: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
    font-family: "Calibri";
 +
}
  
 
   
 
 
h1,h2,h3,h4,h5{
 
h1,h2,h3,h4,h5{
 
     color: #0C1948;
 
     color: #0C1948;
 
}
 
}
   
 
.header_img{
 
    background: url(bronze.png) no-repeat center center scroll;
 
    width: 100%;
 
    height: 100%;
 
    -webkit-background-size: cover;
 
    -moz-background-size: cover;
 
    -o-background-size: cover;
 
    background-size: cover;
 
    /*MUSHROOM: https://www.google.nl/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Ff%2Ffa%2FPanellusStipticusAug12_2009_Animated.gif&imgrefurl=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3APanellusStipticusAug12_2009_Animated.gif&docid=XwyN6eisgYu6wM&tbnid=EybkmibTyPoYlM%3A&vet=1&w=1350&h=920&bih=759&biw=1600&q=gif%20biology&ved=0ahUKEwiKxdf5oNHSAhXGCMAKHXwSAE4QMwg8KBYwFg&iact=mrc&uact=8#h=920&imgrc=EybkmibTyPoYlM:&vet=1&w=1350
 
        'http://stormandsky.com/gif/7.gif'
 
    CLOUD: http://stormandsky.com/gif/7.gif
 
  
    FLOWER:https://a.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2014/03/3028382-poster-g-slow-life.gif
+
/* HOT LINKS */
  
     WATER: http://ipolitics.ca/wp-content/uploads/2016/06/Underwater-slowed-1.gif*/
+
a{
 +
     color: black;
 +
    text-align: center;
 +
    font-weight: bold;
 +
    text-decoration:none;
 
}
 
}
      
+
 
 +
a:hover {
 +
     text-decoration: underline;
 +
}
 +
 
 +
a
 +
 +
    text-decoration:none;
 +
}
 +
 
 +
/* HOT LINKS */
 +
 
 
.header {
 
.header {
 
     display: table;
 
     display: table;
Line 141: Line 155:
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}
   
+
 
#title_container{
+
.header_img{
     position: relative;
+
     background: url(bronze.png) no-repeat center center scroll;
     padding-top: 200px;
+
     width: 100%;
     padding-bottom: 100px;
+
     height: 100%;
     height:375px;
+
     -webkit-background-size: cover;
}
+
     -moz-background-size: cover;
      
+
     -o-background-size: cover;
#title{
+
     background-size: cover;
    position: relative;
+
     /*MUSHROOM: https://www.google.nl/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Ff%2Ffa%2FPanellusStipticusAug12_2009_Animated.gif&imgrefurl=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3APanellusStipticusAug12_2009_Animated.gif&docid=XwyN6eisgYu6wM&tbnid=EybkmibTyPoYlM%3A&vet=1&w=1350&h=920&bih=759&biw=1600&q=gif%20biology&ved=0ahUKEwiKxdf5oNHSAhXGCMAKHXwSAE4QMwg8KBYwFg&iact=mrc&uact=8#h=920&imgrc=EybkmibTyPoYlM:&vet=1&w=1350
     text-align: center;
+
        'http://stormandsky.com/gif/7.gif'
     vertical-align: middle;
+
     CLOUD: http://stormandsky.com/gif/7.gif
     color: #0C1948;
+
 
     font-size: 150px;
+
    FLOWER:https://a.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2014/03/3028382-poster-g-slow-life.gif
 +
 
 +
    WATER: http://ipolitics.ca/wp-content/uploads/2016/06/Underwater-slowed-1.gif*/
 
}
 
}
  
#subtitle{
 
    position: relative;
 
    margin-top: -100px;
 
    text-align: center;
 
    vertical-align: middle;
 
    color: white;
 
    font-size: 50px;
 
}
 
   
 
 
.main-col{
 
.main-col{
    /*background-image: url("../imgs/gradient.jpg");*/
 
/*    background-color: aqua;*/
 
 
     background-attachment: fixed;
 
     background-attachment: fixed;
 
     background-position: center;
 
     background-position: center;
Line 209: Line 214:
 
     overflow-y: hidden; // hide vertical
 
     overflow-y: hidden; // hide vertical
 
     overflow-x: hidden; // hide horizontal
 
     overflow-x: hidden; // hide horizontal
 +
}
 +
 +
/* IMAGES */
 +
 +
 
 +
.imgsize{
 +
    position: relative;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
    max-width: 500px;
 +
    height: 100px;
 +
    z-index: 1;
 +
}
 +
 +
.scmedimgsize{
 +
    position: relative;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
    padding-top: 20px;
 +
    max-width: 200px;
 +
    height: 50px;
 +
}
 +
 +
/* IMAGES */
 +
 +
/* BUTTONS */
 +
 +
.button {
 +
    display: inline-block;
 +
    margin-left: 10px;
 +
    padding: 0.75rem 1rem;
 +
    border: 0;
 +
    border-style: solid;
 +
    border-width: 1px;
 +
    border-color: #969696;
 +
    border-radius: 0.317rem;
 +
    background-color: #0C1948;
 +
    color: white;
 +
    width: 100px;
 +
    text-decoration: none;
 +
    font-weight: 500;
 +
    font-size: 1rem;
 +
    line-height: 1.5;
 +
    font-family: "Calibri";
 +
    cursor: pointer;
 +
    -webkit-appearance: none;
 +
    -webkit-font-smoothing: antialiased;
 +
}
 +
 +
.button:hover {
 +
    opacity: 0.85;
 +
}
 +
 +
.button:active {
 +
    box-shadow: inset 0 3px 4px hsla(0, 0%, 0%, 0.2);
 +
}
 +
 +
.button:focus {
 +
    outline: thin dotted #444;
 +
    outline: 5px auto -webkit-focus-ring-color;
 +
    outline-offset: -2px;
 +
}
 +
 +
.button-icon {
 +
    display: inline-block;
 +
    position: relative;
 +
    top: -0.1em;
 +
    vertical-align: middle;
 +
    margin-right: 0.317rem;
 
}
 
}
 
      
 
      
 +
.btn-content {
 +
    margin: 64px auto;
 +
    width: 94%;
 +
    max-width: 640px;
 +
    text-align: center;
 +
}
 +
 +
/* BUTTONS */
 +
     
 +
#title_container{
 +
    position: relative;
 +
    padding-top: 200px;
 +
    padding-bottom: 100px;
 +
    height:375px;
 +
}
 +
   
 +
#title{
 +
    position: relative;
 +
    text-align: center;
 +
    vertical-align: middle;
 +
    color: #0C1948;
 +
    font-size: 150px;
 +
}
 +
 +
#subtitle{
 +
    position: relative;
 +
    margin-top: -100px;
 +
    text-align: center;
 +
    vertical-align: middle;
 +
    color: white;
 +
    font-size: 50px;
 +
}
 +
   
 +
 
.content {
 
.content {
 
     margin-left:auto;
 
     margin-left:auto;
Line 252: Line 360:
 
     width:100%;
 
     width:100%;
 
}
 
}
   
 
body {
 
    width: auto !important;
 
    height: 100%;
 
    width: 100%;
 
    margin: 0;
 
    padding: 0;
 
    font-family: "Calibri";
 
}
 
 
html {
 
    height: 100%;
 
    margin: 0;
 
    padding: 0;
 
}
 
 
a{
 
    color: black;
 
    text-align: center;
 
    font-weight: bold;
 
    text-decoration:none;
 
}
 
 
a:hover {
 
    text-decoration: underline;
 
}
 
 
a
 
 
    text-decoration:none;
 
}
 
 
      
 
      
 
.container {
 
.container {
Line 344: Line 421:
 
     max-width: 200px;
 
     max-width: 200px;
 
     height: 50px;
 
     height: 50px;
}
 
   
 
.button {
 
    display: inline-block;
 
    margin-left: 10px;
 
    padding: 0.75rem 1rem;
 
    border: 0;
 
    border-style: solid;
 
    border-width: 1px;
 
    border-color: #969696;
 
    border-radius: 0.317rem;
 
    background-color: #0C1948;
 
    color: white;
 
    width: 100px;
 
    text-decoration: none;
 
    font-weight: 500;
 
    font-size: 1rem;
 
    line-height: 1.5;
 
    font-family: "Calibri";
 
    cursor: pointer;
 
    -webkit-appearance: none;
 
    -webkit-font-smoothing: antialiased;
 
 
}
 
}
  
.button:hover {
 
opacity: 0.85;
 
}
 
 
.button:active {
 
box-shadow: inset 0 3px 4px hsla(0, 0%, 0%, 0.2);
 
}
 
 
.button:focus {
 
outline: thin dotted #444;
 
outline: 5px auto -webkit-focus-ring-color;
 
outline-offset: -2px;
 
}
 
 
.button-icon {
 
display: inline-block;
 
  position: relative;
 
  top: -0.1em;
 
  vertical-align: middle;
 
margin-right: 0.317rem;
 
}
 
   
 
.btn-content {
 
    margin: 64px auto;
 
    width: 94%;
 
    max-width: 640px;
 
    text-align: center;
 
}
 
   
 
.menu{
 
/*    background-color: coral;*/
 
    text-align: left;
 
    margin-top: 0;
 
    padding-top: 0;
 
}
 
 
      
 
      
 
hr.small {
 
hr.small {
Line 410: Line 430:
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0));
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0));
 
}
 
}
 +
 +
/* NAVIGATION BAR */
  
 
.navbar {
 
.navbar {
Line 430: Line 452:
 
   font-size: 17px;
 
   font-size: 17px;
 
}
 
}
 +
 +
/* NAVIGATION BAR */p.sponsor-txt{
 +
    text-align: left;   
 +
    }
 
      
 
      
      
+
p.left{
 
+
     text-align: left;
 
+
}
 
+
  
 +
/* PARAGRAPHS */
  
 +
p.sponsor-txt{
 +
    text-align: left;   
 +
    }
 +
   
 +
p.left{
 +
    text-align: left;
 +
}
 +
   
 
</style>
 
</style>
  
 
<!-- start of content -->
 
<!-- start of content -->
 
<!--<div class="igem_2017_content_wrapper">-->
 
<!--<div class="igem_2017_content_wrapper">-->

Revision as of 11:59, 20 June 2017