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

433 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="Harambee Nerds Commissie [nerds@harambee.nl]">
<meta name="keywords" content="volleybal, volleyball, enschede, universiteit, twente, university, of, twente, student, studenten, vereniging, association">
<meta name="description" content="Harambee is the student volleyball club of Enschede, connected to the University of Twente. Come visit us during the Kick-In!">
<meta name="theme-color" content="#66008C">
<meta property="og:title" content="🏐 v.v Harambee — Student volleyball in Enschede">
<meta property="og:description" content="Harambee is the student volleyball club of Enschede, connected to the University of Twente 🎉. Come visit us during the Kick-In! 😊">
<meta property="og:image" content="https://harambee.utwente.nl/layout/images/logo-harambee.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://join.harambee.utwente.nl">
<title>Harambee - Student volleyball 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>
<script type="text/javascript">
function toProductionSite() {
var name="site-preference";
var value="0";
var days=30;
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; domain=.harambee.utwente.nl; path=/";
window.location.href = "https://harambee.utwente.nl";
};
</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(./h2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 2% 0 0 0;
}
#section1 #bever{
z-index: 3
}
#section2{
background-image: url(./teampresentaties.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
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="#" onclick="toProductionSite()" role="button" class="shadow regular-site btn" 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">Hey (new) student in Enschede! Do you 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 7 September <i>(time TBA)</i><br>
Thursday 9 September <i>(time TBA)</i>
</p>
<a href="" role="button" class="btn btn-sm btn-disabled btn-tryout shadow" aria-pressed="true">
<strong><i class="fas fa-pencil-alt"></i> Come back soon to register</strong>
</a>
</div>
<div class="animated fadeInDown fast alert alert-member shadow">
<h2 style="padding-bottom: 10px;">Kick-In programme 2021</h2>
<ul class="list-unstyled">
<li>
<h5 class="kick-in_content">Opening market</h5>
<p>Wednesday, August 25th</p>
<h5 class="kick-in_content">Harambee Night Out</h5>
<p>Wednesday, August 25th - 21:00</p>
<h5 class="kick-in_content">Sports Games and BBQ</h5>
<p>Friday, August 27nd<br>12:00 - 20:00</p>
<h5 class="kick-in_content">Sports party</h5>
<p>Friday, August 27nd - 21:00</p>
<h5 class="kick-in_content">Chilling @ Rutbeek</h5>
<p>Sunday, August 29th - 12:00</p>
<h5 class="kick-in_content">Campus Experience [Master program]</h5>
<p>Monday, August 30th</p>
<h5 class="kick-in_content">Kick-Out Festival</h5>
<p>Thursday, September 2nd</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>Only training:</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>: 3<sup>e</sup> Divisie to 3<sup>e</sup> Klasse.</li>
<li><strong>Ladies' teams</strong>: 3<sup>e</sup> Divisie to 4<sup>e</sup> Klasse.</li>
<li><strong>Mixed 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, from September till April!</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 trainings and home matches take place at the University's Sports Centre.</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>Some of the activities:</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>