Added cool effects and stuff

remotes/origin/master
Yuri van Midden 6 years ago
parent 7cf10f782b
commit 8a37980597
  1. BIN
      src/black.ttf
  2. 94
      src/index.html
  3. BIN
      src/tropicalasian.ttf

Binary file not shown.

@ -9,7 +9,9 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.css" integrity="sha384-5ifpfhR/+nZGyBOnFGX9Blzx7418/Cj6eK1kMEJFUCgv39+AfAt9reg9LtRPdCQs" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.css" integrity="sha384-5ifpfhR/+nZGyBOnFGX9Blzx7418/Cj6eK1kMEJFUCgv39+AfAt9reg9LtRPdCQs" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" integrity="sha384-xyZLiqnBEFn1hDkS8VeG/YHoqOjS/ucimT8TI6GDr9+ZP1UNbZr6d/q0ldMi/xvL" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" integrity="sha384-xyZLiqnBEFn1hDkS8VeG/YHoqOjS/ucimT8TI6GDr9+ZP1UNbZr6d/q0ldMi/xvL" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<link href="tropicalasian.ttf" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/vendors/scrolloverflow.min.js" integrity="sha384-JidlVB7YmUUH+vUfjaYKep1qGThQCAoL90VJQDRqiS2xAjWJuAIc7Nn5dxb8fOnJ" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/vendors/scrolloverflow.min.js" integrity="sha384-JidlVB7YmUUH+vUfjaYKep1qGThQCAoL90VJQDRqiS2xAjWJuAIc7Nn5dxb8fOnJ" crossorigin="anonymous"></script>
@ -51,7 +53,7 @@
z-index: 4; z-index: 4;
width: 100%; width: 100%;
left: 0%; left: 0%;
top: 0%; top: 0.5%;
font-family: 'Exo 2', sans-serif; font-family: 'Exo 2', sans-serif;
} }
@ -102,10 +104,6 @@
padding: 2% 0 0 0; padding: 2% 0 0 0;
} }
#gezelligheid{
text-align: left;
}
.haramPaars{ .haramPaars{
color: purple; color: purple;
font-weight: bold; font-weight: bold;
@ -137,6 +135,25 @@
background-color: rgba(230, 230, 230, 1); background-color: rgba(230, 230, 230, 1);
} }
@font-face {
font-family: 'Tropical Asian';
src: url(./tropicalasian.ttf);
}
@font-face{
font-family: 'BLACK';
src: url(./black.ttf);
}
.kick-in_header{
font-family: 'Tropical Asian', sans-serif;
}
.kick-in_content{
font-family: 'BLACK', sans-serif;
margin-bottom: -5px;
}
</style> </style>
</head> </head>
<body> <body>
@ -175,17 +192,47 @@
<strong>Join the try-outs!</strong> <strong>Join the try-outs!</strong>
</a> </a>
</div> </div>
<div class="animated fadeInUp fast alert alert-member shadow"> <!-- <div class="animated fadeInUp fast alert alert-member shadow">
<h3>Want to visit the regular site?</h3> <h3>Want to visit the regular site?</h3>
<a href="https://site.harambee.utwente.nl" role="button" class="btn btn-member" aria-pressed="true"> <a href="https://site.harambee.utwente.nl" role="button" class="btn btn-member" aria-pressed="true">
Click here Click here
</a> </a>
</div> -->
<div class="animated fadeInDown fast alert alert-member shadow">
<h2 style="padding-bottom: 10px;">Kick-In program</h2>
<ul class="list-unstyled">
<li>
<h5 class="kick-in_content">Opening fair</h5>
<p>August 22nd @ Ganzeveld</p>
</li>
<li>
<h5 class="kick-in_content">Sports Day</h5>
<p>August 23rd @ Sports Centre and Beach fields</p>
</li>
<li>
<h5 class="kick-in_content">Sports party</h5>
<p>August 23rd @ 'de Veste' tent</p>
</li>
<li>
<h5 class="kick-in_content">Lounge day</h5>
<p>August 26th @ Rutbeek</p>
</li>
<li>
<h5 class="kick-in_content">Hoi summer festival</h5>
<p>August 29th @ Volkspark</p>
</li>
<li>
<h5 class="kick-in_content">Kick-Out festival</h5>
<p>August 31st @ Ganzenveld</p>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2><i style="color: white" class="animated slow bounce infinite delay-2s fas fa-angle-double-down"></i></h2> <a href="#volleyball">
<h2><i style="color: white" class="animated slow bounce infinite delay-2s fas fa-angle-double-down"></i></h2></a>
</div> </div>
</div> </div>
</div> </div>
@ -195,7 +242,7 @@
<div class="row"> <div class="row">
<div class="col-md-5"> <div class="col-md-5">
<div class="alert alert-tryouts"> <div class="alert alert-tryouts">
<h1><i class="fas fa-volleyball-ball"></i> Volleyball types at Harambee:</h1> <h2><i class="fas fa-volleyball-ball"></i> Volleyball types at Harambee:</h2>
<ul class="text-left"> <ul class="text-left">
<li><strong>Competition:</strong> 2x training a week + matches against teams throughout the region in the Nevobo competition. Matches are of all levels, beginner through (very) experienced.</li> <li><strong>Competition:</strong> 2x training a week + matches against teams throughout the region in the Nevobo competition. Matches are of all levels, beginner through (very) experienced.</li>
<li><strong>Mix:</strong> 1 training a week + matches every 4 weeks against other Mix teams.</li> <li><strong>Mix:</strong> 1 training a week + matches every 4 weeks against other Mix teams.</li>
@ -204,12 +251,12 @@
</ul> </ul>
</div> </div>
<div class="alert alert-tryouts"> <div class="alert alert-tryouts">
<h1><i class="fas fa-chart-line"></i> Levels of playing:</h1> <h2><i class="fas fa-chart-line"></i> Levels of playing:</h2>
<p class="text-left">Harambee offers volleyball practise and matches at any level. Are you a beginner? Be welcome to join! We all have to start somewhere, right? Are you an advanced player? Then you'll also certainly feel at home in a higher team.</p> <p class="text-left">Harambee offers volleyball practise and matches at any level. Are you a beginner? Be welcome to join! We all have to start somewhere, right? Are you an advanced player? Then you'll also certainly feel at home in a higher team.</p>
<ul class="text-left"> <ul class="text-left">
<li><strong>Men's teams</strong> play matching from the Dutch 3<sup>e</sup> Divisie to 3<sup>e</sup> Klasse.</li> <li><strong>Men's teams</strong> play matching from the Dutch 3<sup>e</sup> Divisie to 3<sup>e</sup> Klasse.</li>
<li><strong>Ladies' teams</strong> play levels reaching from 1<sup>e</sup>> Klasse to 4<sup>e</sup> Klasse.</li> <li><strong>Ladies' teams</strong> play levels reaching from 1<sup>e</sup>> Klasse to 4<sup>e</sup> Klasse.</li>
<li><strong>Mix teams</strong> participate in an internal competition and is generally of beginner to novice level.</li> <li><strong>Mix teams</strong> participate in an internal competition and is generally of beginner to intermediate level.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -237,11 +284,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="alert alert-member">
<div class="row">
<div class="col-sm-2">
<h1><i class="align-middle fas fa-umbrella-beach"></i> </h1>
</div>
<div class="col-sm-10">
<h4>In May and June we enjoy the summer sun and play beach volleyball on the campus.</h4>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2><i style="color: white" class="animated slower bounce infinite delay-2s fas fa-angle-double-down"></i></h2> <a href="#association">
<h2><i style="color: white" class="animated slower bounce infinite delay-2s fas fa-angle-double-down"></i></h2></a>
</div> </div>
</div> </div>
</div> </div>
@ -253,12 +311,12 @@
<div class="alert alert-tryouts"> <div class="alert alert-tryouts">
<h2>Harambee is the biggest <strong>family</strong> <i class="fas fa-users"></i> you've ever known!</h2> <h2>Harambee is the biggest <strong>family</strong> <i class="fas fa-users"></i> you've ever known!</h2>
</div> </div>
<div class="alert alert-member" id="gezelligheid"> <div class="alert alert-member text-left">
<h3>You will get to know all kinds of people who share at least one interest with you: <strong>volleyball</strong>.</h3> <h3>You will get to know all kinds of people who share at least one interest with you: <strong>volleyball</strong>.</h3>
<p>You will find them at:</p> <p>You will find them at:</p>
<ul class="no-bullet"> <ul class="no-bullet">
<li class="beer"><strong><i class="fas fa-beer"></i> The team presentations:</strong> where every team presents itself to the rest of the association.</li> <li class="beer"><strong><i class="fas fa-beer"></i> The team presentations:</strong> where every team presents itself to the rest of the association.</li>
<li class="cocktail"><strong><i class="fas fa-cocktail"></i> The yearly prom:</strong> where you are definitely going to have that high wine of high cocktail with your crush.</li> <li class="cocktail"><strong><i class="fas fa-cocktail"></i> The yearly prom:</strong> where you are definitely going to have that high wine or high cocktail with your crush.</li>
<li class="trophy"><strong><i class="fas fa-trophy"></i> Every home-matches weekend:</strong> where your fellow volleyball friends are playing their matches. Cheer them to the top! That's what Harambee stands for!</li> <li class="trophy"><strong><i class="fas fa-trophy"></i> Every home-matches weekend:</strong> where your fellow volleyball friends are playing their matches. Cheer them to the top! That's what Harambee stands for!</li>
<li class="moon"><strong><i class="fas fa-moon"></i> Harambee's monthly night out:</strong> every first Thursday we get away from the Sports Centre, and have a drink (or two) in the city.</li> <li class="moon"><strong><i class="fas fa-moon"></i> Harambee's monthly night out:</strong> every first Thursday we get away from the Sports Centre, and have a drink (or two) in the city.</li>
<li>... and all other activities Harambee organises to make sure you have a great time!</li> <li>... and all other activities Harambee organises to make sure you have a great time!</li>
@ -280,6 +338,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-sm-12">
<a href="#home">
<h2><i style="color: white" class="animated slow bounce infinite fas fa-angle-double-up"></i></h2>
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -287,6 +352,7 @@
<script type="text/javascript"> <script type="text/javascript">
new fullpage('#fullscreen', { new fullpage('#fullscreen', {
// options // options
anchors: ['home','volleyball','association'],
navigation: true, navigation: true,
navigationPosition: 'right', navigationPosition: 'right',
scrollOverflow: true scrollOverflow: true

Binary file not shown.
Loading…
Cancel
Save