Difference between revisions of "Team:KU Leuven/Research/Results"

Line 1: Line 1:
 
<html>
 
<html>
 
<body>
 
<body>
 +
<style>
 +
@import "compass/css3";
 +
 +
@mixin arrow-down($size: 10px, $color: #fff){
 +
width: 0;
 +
height: 0;
 +
border-left: $size solid transparent;
 +
border-right: $size solid transparent;
 +
border-top: $size solid $color;
 +
}
 +
 +
@mixin arrow-right($size: 10px, $color: #fff){
 +
width: 0;
 +
height: 0;
 +
border-top: $size solid transparent;
 +
border-bottom: $size solid transparent;
 +
border-left: $size solid $color;
 +
}
 +
 +
@mixin sans-serif() {
 +
  font-family: "proxima-nova", "helvetica neue", helvetica, arial, sans-serif;
 +
}
 +
 +
@mixin text-smooth()
 +
{
 +
  -webkit-font-smoothing: antialiased;
 +
}
 +
 +
html, body {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 +
body {
 +
  background-color: #13487e;
 +
  @include background-image(linear-gradient(top, rgb(19, 72, 126), rgb(14, 41, 69)));
 +
  @include filter-gradient(rgb(19, 72, 126), rgb(14, 41, 69), vertical);
 +
}
 +
 +
.accordion {
 +
  width: 302px;
 +
  margin: 0 auto;
 +
  padding-top: 50px;
 +
}
 +
 +
/* all accordion styles below here */
 +
 +
.accordion {
 +
 
 +
  dl {
 +
   
 +
    width: 302px;
 +
    @include sans-serif;
 +
    @include text-smooth;
 +
    @include transition-duration(350ms);
 +
   
 +
    &:hover {
 +
      @include box-shadow(0px 0px 10px 3px rgba(0, 0, 0, .25));
 +
    }
 +
   
 +
    dt {
 +
     
 +
      a {
 +
        background-color: #82A1BD;
 +
        position: relative;
 +
        text-transform: uppercase;
 +
        width: 100%;
 +
        height: 50px;
 +
        display: block;
 +
        line-height: 50px;
 +
        text-align: center;
 +
        cursor: pointer;
 +
        font-weight: bold;
 +
        color: #fff;
 +
        text-decoration: none;
 +
       
 +
        .arrow {
 +
            @include arrow-right(6px);
 +
            position: absolute;
 +
            left: 14px;
 +
            top: 18px;
 +
           
 +
            .cssanimations & {
 +
              @include transition-duration(350ms);
 +
 +
              &.down-anim {
 +
                @include rotate(90deg);
 +
              }
 +
            }
 +
         
 +
            &.down {
 +
              @include arrow-down(6px);
 +
              top: 21px;
 +
              left: 12px;
 +
            }
 +
        }
 +
      }
 +
     
 +
      &.active, &:hover {
 +
        a {
 +
            background-color: #507BA2;
 +
        }
 +
      }
 +
      &.active {
 +
        a {
 +
          @include box-shadow(inset 0px -4px 8px 0px rgba(0, 0, 0, .2));
 +
        }
 +
      }
 +
    }
 +
   
 +
    dd {
 +
      background-color: #ffffff;
 +
      @include background-image(linear-gradient(top, rgb(255, 255, 255), rgb(247, 247, 247)));
 +
      @include filter-gradient(rgb(255, 255, 255), rgb(247, 247, 247), vertical);
 +
      padding: 10px;
 +
      display: none;
 +
      height: 293px;
 +
     
 +
      &.active {
 +
        display: block;
 +
      }
 +
     
 +
      p {
 +
        line-height: 1.4;
 +
      }
 +
    }
 +
   
 +
  }
 +
}
 +
</style>
 
<div class="accordion">
 
<div class="accordion">
 
   <dl>
 
   <dl>

Revision as of 09:08, 8 September 2015

Quality

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Products

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

About Us

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.