De promotiewebsite die de reguliere site vervangt tijdens de Kick-In. https://join.harambee.utwente.nl
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
kick-in-promo-site/src/index.html

414 lines
20 KiB

<!DOCTYPE html>
<html>
<head>
<!--
Hoi! Welkom in de broncode van deze pagina. Zo te zien vind je dit soort dingen mooi en word je nu heel erg teleurgesteld door de kwaliteit waarmee deze pagina gebouwd is.
Geeft niet, het is in een middagje gebouwd ;). Gelukkig is de pagina verder wel mooi.
Denk jij: "Hey ik kan dit beter!" of "Hey, ik vind dit lijp!" Kom dan gezellig bij de Nerds van Harambee een keer klussen. Stuur gerust een mailtje naar nerds@harambee.nl!
Veel plezier bij Harambee!
- Nerds Harambee
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Yuri van Midden [me@yurivanmidden.nl]">
<meta name="keywords" content="volleybal, volleyball, enschede, universiteit, twente, university, of, twente, student, studenten, vereniging, association">
<meta name="description" content="Harambee is the single student volleyball club of Enschede, connected to the University of Twente. Come visit us during the Kick-In!">
<title>Harambee - Student volleybal in Enschede!</title>
<link rel="shortcut icon" href="harambee.ico" type="image/x-icon" />
<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://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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=Exo+2" >
<link rel="stylesheet" href="tropicalasian.ttf" >
<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/fullpage.min.js" integrity="sha384-6yU9abmAgbGzbp5/zFigT6Ltjr3M5b0gSE6XFSO+ZMMuS1AXZlyh2tqWSVgIHRu+" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
p {
font-size: 120%;
}
#subtitle{
padding-top: 20px;
}
.section{
text-align: center;
overflow: hidden;
}
#harambeeVideo{
position: absolute;
right: 0;
bottom: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: orange;
background-position: center center;
background-size: contain;
object-fit: cover;
z-index: 3;
}
.container{
position: relative;
z-index: 4;
width: 100%;
left: 0%;
top: 0.5%;
font-family: 'Exo 2', sans-serif;
}
#section0 .jumbotron{
color: purple;
}
.jumbotron-transparent{
background: rgba(230, 230, 230, 0.85);
}
.alert-tryouts{
background: rgba(255, 89, 0, 0.8);
color: white;
}
.alert-member{
background: rgba(102, 0, 140, 0.65);
color: white;
}
.alert-moreinfo{
background: rgba(230, 230, 230, 0.6);
color: black;
}
.btn-tryout{
background: rgba(255, 89, 0, 1);
color: white;
}
.btn-member{
background: lightblue;
color: black;
}
.btn-disabled{
background: rgba(230, 230, 230, 0.2);
color: rgba(230, 230, 230, 0.5);
font-style: italic;
font-weight: lighter;
}
#section1{
background-image: url(./beaver.jpeg);
background-size: 100%;
padding: 2% 0 0 0;
}
#section1 #bever{
z-index: 3
}
#section2{
background-image: url(./somuchfun.jpg);
background-size: 100%;
padding: 2% 0 0 0;
}
.haramPaars{
color: purple;
font-weight: bold;
}
.haramOranje{
color: rgb(255, 89, 0);
}
.link{
color: purple;
}
.jumbotron img{
padding-bottom: 15px;
}
ul.no-bullet{
list-style: none;
}
ul.no-bullet li{
padding-top: 0.35em;
padding-left: 1.0em;
text-indent: -1.0em;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
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;
}
.regular-site{
position: absolute;
display: block;
top: 0.4em;
right: 0.4em;
z-index: 6;
font-family: 'Exo 2', sans-serif;
color: white;
background-color: rgba(255, 89, 0, 0.6)
}
.fa-rocket {
font-size: 130%;
}
</style>
</head>
<body>
<div id="fullscreen">
<div class="section" id="section0">
<video id="harambeeVideo" loop muted data-autoplay>
<source src="video.mp4" type="video/mp4">
</video>
<a href="https://harambee.utwente.nl" role="button" class="shadow regular-site btn btn-sm" aria-pressed="true">
<i class="align-middle fas fa-rocket"></i>&nbsp; To the regular site
</a>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="jumbotron jumbotron-transparent">
<img class="animated" src="harambee-logo.png">
<h1 class= "animated jackInTheBox">Student <b>(beach) volleyball</b> <i class="fas fa-volleyball-ball"></i> association at the <br>University of Twente!</h1>
<p id="subtitle">Are you starting your new study in Enschede or have you been around for a while, and want to try volleyball? Then join one of our try-outs and experience the fantastic sport yourself!</p>
<img class="" src="ut-logo.png">
</div>
<div class="alert alert-member shadow">
<h4>Do you want to sign up? <i class="fas fa-pencil-alt"></i></h4>
<p>Let the Technical Committee know, and join a regular training with a team.</p>
<a href="https://harambee.utwente.nl/en/membership/tryout" role="button" class="btn btn-lg btn-tryout" aria-pressed="true">
Fill out the sign-up form!
</a>
</div>
</div>
<div class="col-md-4">
<div class="animated fadeInUp faster alert alert-tryouts shadow">
<p><strong>New to volleyball,</strong> and do you want to know if it's your sport?</p>
<h2><i class="fas fa-calendar-alt"></i></h2>
<h2>Our try-outs are:</h2>
<p>
Tuesday September 3rd, 18:00 <br>
Thursday September 5th, 20:00
</p>
<a href="#" role="button" class="btn btn-sm btn-disabled" aria-pressed="true" aria-disabled="true">
<strong>Join the try-outs!</strong>
</a>
</div>
<!-- <div class="animated fadeInUp fast alert alert-member shadow">
<h3>Want to visit the regular site?</h3>
<a href="https://harambee.utwente.nl" role="button" class="btn btn-member" aria-pressed="true">
Click here
</a>
</div> -->
<div class="animated fadeInDown fast alert alert-member shadow">
<h2 style="padding-bottom: 10px;">Kick-In program 2019</h2>
<ul class="list-unstyled">
<li>
<h5 class="kick-in_content">Opening fair</h5>
<p>August 21st @ Ganzenveld</p>
</li>
<li>
<h5 class="kick-in_content">Sports games</h5>
<p>August 22nd @ Sports Centre and Beach fields</p>
</li>
<li>
<h5 class="kick-in_content">Sports party</h5>
<p>August 22nd @ Large tent</p>
</li>
<li>
<h5 class="kick-in_content">Lounge day</h5>
<p>August 25th @ Rutbeek</p>
</li>
<li>
<h5 class="kick-in_content">Hoi summer festival</h5>
<p>August 28th @ Volkspark</p>
</li>
<li>
<h5 class="kick-in_content">Kick-Out festival</h5>
<p>August 29th @ Ganzenveld</p>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<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 class="section" id="section1">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="alert alert-tryouts">
<h2><i class="fas fa-volleyball-ball"></i> Volleyball types at Harambee:</h2>
<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>Mix:</strong> 1x training a week + matches every 4 weeks against other Mix teams.</li>
<li><strong>Recreational:</strong> 1x training a week with Mix teams.</li>
<li><strong>Beach volleyball:</strong> in April, the beach <i class="fas fa-umbrella-beach"></i> accommodation of the UT opens up, and Harambee organises an internal beach competition. It's open for anyone to join!</li>
</ul>
</div>
<div class="alert alert-tryouts">
<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>
<ul class="text-left">
<li><strong>Men's teams</strong>: Dutch 3<sup>e</sup> Divisie to 3<sup>e</sup> Klasse.</li>
<li><strong>Ladies' teams</strong>: Dutch Promotieklasse to 4<sup>e</sup> Klasse.</li>
<li><strong>Mix teams</strong> participate in an internal competition and is generally of beginner to intermediate level.</li>
</ul>
</div>
</div>
<div class="col-md-7">
<div class="jumbotron jumbotron-transparent">
<h3>All indoor teams at Harambee have their own dedicated (student) trainer! <br>Teams consist of about 12 players.</h3>
</div>
<div class="alert alert-member">
<div class="row">
<div class="col-sm-2">
<h1><i class="align-middle fas fa-trophy"></i></h1>
</div>
<div class="col-sm-10">
<h4>Match days are on Fridays and Saturdays, throughout the year!</h4>
</div>
</div>
</div>
<div class="alert alert-member">
<div class="row">
<div class="col-sm-2">
<h1><i class="align-middle fas fa-map-marker-alt"></i></h1>
</div>
<div class="col-sm-10">
<h4>All practices and home matches take place in the Sports Centre of the University.</h4>
</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>From May to July we enjoy the summer weather and also play beach volleyball.</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<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 class="section" id="section2">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="alert alert-tryouts">
<h2>Join our <strong>family </strong><i class="fas fa-users"></i> during one of the many activities throughout the year!</h2>
</div>
<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>
<p>You will find Harambee at:</p>
<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 club.</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="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>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-member">
<h3>Did you know that...</h3>
<p class="text-left">the name Harambee comes from a Swahili term which stands for "together we are strong and let us fight together"</p>
<p class="text-left">The term was first used on the 5th anniversary of the University, by the former Rector Magnificus.</p>
</div>
<div class="alert alert-moreinfo animated">
<h3><strong>Questions?</strong></h3>
<p>We are here to answer them!</p>
<p class="text-left">If you have any questions about volleyball at Harambee, contact us at <a class="link" href="mailto:tc@harambee.nl">tc@harambee.nl</a>.</p>
<p class="text-left">If you have any questions about the association, terms of membership, etc. send a mail to the board: <a class="link" href="mailto:bestuur@harambee.nl">bestuur@harambee.nl</a>.</p>
<p class="text-left">Also, be sure to visit our regular site at <a class="link" href="https://harambee.utwente.nl">harambee.utwente.nl</a>!</p>
</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>
<script type="text/javascript">
new fullpage('#fullscreen', {
// options
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
anchors: ['home','volleyball','association'],
navigation: true,
navigationPosition: 'right',
scrollOverflow: true
});
</script>
</body>
</html>