Difference between revisions of "Template:Groningen"

Line 103: Line 103:
  
 
/* START GENERAL STYLES */
 
/* START GENERAL STYLES */
 +
 +
 +
 +
   
 +
h1,h2,h3,h4,h5{
 +
    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
 +
 +
    WATER: http://ipolitics.ca/wp-content/uploads/2016/06/Underwater-slowed-1.gif*/
 +
}
 +
   
 +
.header {
 +
    display: table;
 +
    position: relative;
 +
    width: 100%;
 +
    height: 100%;
 +
    margin-bottom: 0px;
 +
    background: url('https://static.igem.org/mediawiki/2017/7/7d/Grun_wiki.jpeg') no-repeat center center scroll;
 +
    -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
    z-index: 1;
 +
}
 +
   
 +
#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;
 +
}
 +
   
 +
.main-col{
 +
    /*background-image: url("../imgs/gradient.jpg");*/
 +
/*    background-color: aqua;*/
 +
    background-attachment: fixed;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    margin-left:auto;
 +
    margin-right:auto;
 +
/*  margin-top: auto;
 +
    margin-bottom: auto;*/
 +
    text-align: center;
 +
    padding-top: 5px;
 +
/*  padding-bottom: 0px;*/
 +
    height: auto !important;
 +
    height:1000px;
 +
    width: 1000px;
 +
    overflow: auto;
 +
    overflow-y: hidden; // hide vertical
 +
    overflow-x: hidden; // hide horizontal
 +
}
 +
   
 +
.fixed-bg {
 +
    /* The background image */
 +
    background-image: url("../imgs/projectBack.jpg");
 +
/*    background-color: brown;*/
 +
    /*height: auto !important;*/
 +
    height: 1000px;
 +
    /*width: auto !important;*/
 +
    width: 100%;
 +
    /* Set a specified height, or the minimum height for the background image */
 +
    min-height: 750px;
 +
    /* Set background image to fixed (don't scroll along with the page) */
 +
    background-attachment: scroll;
 +
    overflow-x: hidden;
 +
    /* Center the background image */
 +
    background-position: center;
 +
    /* Set the background image to no repeat */
 +
    background-repeat: no-repeat;
 +
    /* Scale the background image to be as large as possible */
 +
    background-size: cover;
 +
    overflow-y: hidden; // hide vertical
 +
    overflow-x: hidden; // hide horizontal
 +
}
 +
   
 +
.content {
 +
    margin-left:auto;
 +
    margin-right:auto;
 +
    margin-top: auto;
 +
    margin-bottom: auto;
 +
    text-align: center;
 +
    padding-top: 1px;
 +
    padding-bottom: 0px;
 +
    height:100%;
 +
}
 +
   
 +
.about{
 +
    height: 150px;
 +
}
 +
 +
.services{
 +
    height: 350px;
 +
}
 +
 +
.video{
 +
    height: 500px;
 +
}
 +
 +
.contact{
 +
    width: 500px;
 +
    height: 350px;
 +
}
 +
 +
.intro{
 +
padding-top: 10px;
 +
margin-top: 10px;
 +
}
 +
   
 +
.first-text{
 +
    padding-top: 20px;
 +
    width:100%;
 +
}
 +
 +
.second-text{
 +
    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 {
 +
    display: flex;
 +
    padding-top: 20px;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
}
 +
   
 +
#container {
 +
    position: relative;
 +
    padding-top: 1px;
 +
    padding-bottom: 0px;
 +
    height:1000px;
 +
}
 +
 +
.column {
 +
    flex: 1;
 +
}
 +
 +
.column-one {
 +
    order: 2;
 +
}
 +
.column-two {
 +
    order: 3;
 +
}
 +
.column-three {
 +
    order: 4;
 +
}
 +
.column-four {
 +
    order: 5;
 +
}
 +
   
 +
.2-rows div {
 +
    height:100%;padding:50px 0;
 +
}
 +
 +
.3-rows div {
 +
    height:100%;padding:20px 0;
 +
}
 +
 +
.icon-text{
 +
    padding-top: 20px;
 +
    height: 100%;
 +
}
 +
   
 +
.imgsize{
 +
    position: relative;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
    padding-top: 20px;
 +
    max-width: 500px;
 +
    height: 100px;
 +
}
 +
 +
.scmedimgsize{
 +
    position: relative;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
    padding-top: 20px;
 +
    max-width: 200px;
 +
    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 {
 +
    max-width: 1000px;
 +
    border: 0;
 +
    height: 1px;
 +
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0));
 +
}
 +
 +
.navbar {
 +
    position: absolute
 +
  overflow: hidden;
 +
  background-color: #333;
 +
  position: fixed;
 +
  top: 0;
 +
  width: 100%;
 +
    z-index: -1;
 +
}
 +
 +
.navbar a {
 +
  float: left;
 +
  display: block;
 +
  color: #f2f2f2;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 +
  font-size: 17px;
 +
}
 +
   
 +
   
 +
 +
 +
 +
  
 
</style>
 
</style>

Revision as of 11:57, 20 June 2017