Difference between revisions of "Team:UCL/Playingaround3"

Line 69: Line 69:
  
 
#header {background: #F0F0F5; margin: -5px; text-align: center; }  
 
#header {background: #F0F0F5; margin: -5px; text-align: center; }  
−
  .logophoto {width: 300px; height: 400px; height: 100%; }
 
−
#logo {padding-top: 100px; padding-bottom: 200px;}
 
−
 
 
  #intro1 { background: #EFE2E5;}
 
  #intro1 { background: #EFE2E5;}
 
  #intro2 { background: #70C4BB;}
 
  #intro2 { background: #70C4BB;}
Line 79: Line 76:
  
  
 +
/* logo and buttons */
 +
 +
 +
  .logophoto {width: 300px; height: 400px; height: 100%; }
 +
#logo {padding-top: 100px; padding-bottom: 200px;}
 +
 +
.intro-buttons {
 +
padding-top: 20px;  color: #FFFFFF;
 +
}
 +
 +
.intro-buttons a {  color: #FFFFFF; text-decoration: none;}
 +
 +
 +
.button1 .button2 .button3
 +
{
 +
  display: inline-block;
 +
  margin-bottom: 10px;
 +
  margin-right: 5px;
 +
  margin-left: 5px;
 +
  font-size: 14px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border: 1px solid transparent;
 +
  border-radius: 4px;
 +
  -webkit-user-select: none;
 +
    -moz-user-select: none;
 +
      -ms-user-select: none;
 +
      -o-user-select: none;
 +
          user-select: none;
 +
            color: #FFFFFF;
 +
  border: none;
 +
    padding: 10px 16px;
 +
  line-height: 1.33;
 +
  text-decoration: none;
 +
  width:90px;
 +
}
 +
 +
.button1 {  background-color: #F49794;}
 +
.button2 {  background-color: #61D9D2;}
 +
.button3
 +
{
 +
  background-color: #006C93;
 +
}
 +
 +
.button1:hover {text-decoration: none; background-color: #FE6C68;}
 +
  .button2:hover {text-decoration: none; background-color: #4EAEA8;}
 +
    .button3:hover {text-decoration: none; background-color: #1E6073}
 +
 
 
</style>
 
</style>
 
</head>
 
</head>
Line 85: Line 133:
 
<div id="header">
 
<div id="header">
 
<div id="logo">  <img src="http://s8.postimg.org/vaknrdpid/mind_the_gut_logo.png" class="logophoto" />  
 
<div id="logo">  <img src="http://s8.postimg.org/vaknrdpid/mind_the_gut_logo.png" class="logophoto" />  
 +
 +
 +
      <div class="intro-buttons" id="box-links">
 +
        <a  data-scroll data-options='{ "easing": "linear" }' href="#intro" class="button1">Intro</a>
 +
            <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" class="button2">Abstract</a>
 +
              <a data-scroll data-options='{ "easing": "linear" }' href="#why" class="button3">Why to do it?</a>
 +
      </div>
  
 
</div>
 
</div>
Line 113: Line 168:
  
 
</div>
 
</div>
 +
 +
<script src='https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js'></script>
  
  
 +
<script>
 +
smoothScroll.init({
 +
speed: 1000,
 +
easing: 'easeInOutCubic',
 +
offset: 0,
 +
updateURL: true,
 +
callbackBefore: function ( toggle, anchor ) {},
 +
callbackAfter: function ( toggle, anchor ) {}
 +
});
 +
</script>
 +
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 22:36, 29 June 2015

1
2
3
abstract
why