harambee-public
/
kick-in-promo-site
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improvements

Browse Source
remotes/origin/HEAD
Yuri van Midden 6 years ago
parent 6d008143f0
commit 1d9c6b7734
1 changed files with 91 additions and 37 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 128
      src/index.html

128
src/index.html
Unescape View File

@ -3,19 +3,27 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Harambee - Studentenvolleybal in Enschede!</title> <title>Harambee - Student volleybal in Enschede!</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.css" /> <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 href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet"> <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">
<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://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.js"></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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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 src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style> <style>
p {
font-size: 120%;
}
#subtitle{
padding-top: 20px;
}
.section{ .section{
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@ -38,11 +46,11 @@
} }
.container{ .container{
position: absolute; position: relative;
z-index: 4; z-index: 4;
width: 100%; width: 100%;
left: 10%; left: 0%;
top: 10%; top: 0%;
font-family: 'Exo 2', sans-serif; font-family: 'Exo 2', sans-serif;
} }
@ -60,12 +68,12 @@
} }
.alert-member{ .alert-member{
background: rgba(102, 0, 140, 0.5); background: rgba(102, 0, 140, 0.6);
color: white; color: white;
} }
.alert-moreinfo{ .alert-moreinfo{
background: rgba(230, 230, 230, 0.45); background: rgba(230, 230, 230, 0.6);
color: black; color: black;
} }
@ -90,7 +98,7 @@
#section2{ #section2{
background-image: url(./somuchfun.jpg); background-image: url(./somuchfun.jpg);
background-size: 100%; background-size: 100%;
padding: 6% 0 0 0; padding: 2% 0 0 0;
} }
#gezelligheid{ #gezelligheid{
@ -109,6 +117,29 @@
.volleyballforms{ .volleyballforms{
text-align: left; text-align: left;
} }
.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);
}
</style> </style>
</head> </head>
<body> <body>
@ -122,12 +153,12 @@
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div class="jumbotron jumbotron-transparent"> <div class="jumbotron jumbotron-transparent">
<img src="harambee-logo.png"> <img class="animated fadeIn" src="harambee-logo.png">
<h1>Try out <b>volleyball</b> with Harambee at the University of Twente!</h1> <h1>Try out <b>volleyball</b> <i class="fas fa-volleyball-ball"></i> with Harambee at the University of Twente!</h1>
<p>Are you starting your new study on the campus, 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 for yourself!</p> <p id="subtitle">Are you starting your new study on the campus, 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>
</div> </div>
<div class="alert alert-member shadow"> <div class="alert alert-member shadow">
<h4>Do you want to sign up?</h4> <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> <p>Let the Technical Committee know, and join a regular training with a team.</p>
<a href="https://site.harambee.utwente.nl/en/membership/tryout" role="button" class="btn btn-lg btn-tryout" aria-pressed="true"> <a href="https://site.harambee.utwente.nl/en/membership/tryout" role="button" class="btn btn-lg btn-tryout" aria-pressed="true">
Fill out the sign-up form! Fill out the sign-up form!
@ -136,14 +167,15 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="alert alert-tryouts shadow"> <div class="alert alert-tryouts shadow">
<p><strong>New to volleyball, and do you want to know if it's your sport?</strong></p> <p><strong>New to volleyball,</strong> and do you want to know if it's your sport?</p>
<h2><strong>Our try-outs are:</strong></h2> <h2><i class="fas fa-calendar-check"></i></h2>
<h2>Our try-outs are:</h2>
<ul> <ul>
<li>Tuesday September 4th, 18:00</li> <li>Tuesday September 4th, 18:00</li>
<li>Thursday September 6th, 19:30</li> <li>Thursday September 6th, 19:30</li>
</ul> </ul>
<a href="https://goo.gl/forms/5K1IZwAOscE17Vwj2" role="button" class="btn btn-lg btn-tryout" aria-pressed="true"> <a href="https://goo.gl/forms/5K1IZwAOscE17Vwj2" role="button" class="btn btn-lg btn-tryout" aria-pressed="true">
Join the try-outs! <strong>Join the try-outs!</strong>
</a> </a>
</div> </div>
<div class="alert alert-member shadow"> <div class="alert alert-member shadow">
@ -152,10 +184,11 @@
Click here Click here
</a> </a>
</div> </div>
<div class="alert alert-moreinfo"> </div>
<p>Scroll down for more info about volleyball at Harambee!</p> </div>
<img src="angle-double-down-solid.svg" width="20px"> <div class="row">
</div> <div class="col-md-12">
<h2><i style="color: white" class="animated slow bounce infinite delay-2s fas fa-angle-double-down"></i></h2>
</div> </div>
</div> </div>
</div> </div>
@ -165,7 +198,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>Volleyball types at Harambee:</h1> <h1><i class="fas fa-volleyball-ball"></i> Volleyball types at Harambee:</h1>
<ul class="volleyballforms"> <ul class="volleyballforms">
<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>
@ -177,12 +210,33 @@
<div class="jumbotron jumbotron-transparent"> <div class="jumbotron jumbotron-transparent">
<h2>All teams at Harambee have their own dedicated (student) trainer! Teams consist of about 12 players.</h2> <h2>All teams at Harambee have their own dedicated (student) trainer! Teams consist of about 12 players.</h2>
</div> </div>
<div class="alert alert-moreinfo"> <div class="alert alert-member">
<p>Scroll down to learn more about the association</p> <div class="row">
<img src="angle-double-down-solid.svg" width="20px"> <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>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-12">
<h2><i style="color: white" class="animated slower bounce infinite delay-2s fas fa-angle-double-down"></i></h2>
</div>
</div>
</div> </div>
</div> </div>
<div class="section" id="section2"> <div class="section" id="section2">
@ -195,27 +249,27 @@
<div class="alert alert-member" id="gezelligheid"> <div class="alert alert-member" id="gezelligheid">
<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> <ul class="no-bullet">
<li><strong>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><strong>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 of high cocktail with your crush.</li>
<li><strong>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><strong>Harambee's monthly night out:</strong> where 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>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="alert alert-member"> <div class="alert alert-member">
<h5>Did you know that...</h5> <h3>Did you know that...</h3>
<p>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 name Harambee comes from a Swahili term which stands for "together we are strong and let us fight together"</p>
<p>The term was first used on the 5th anniversary of the University, by the former Rector Magnificus.</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>
<div class="alert alert-moreinfo"> <div class="alert alert-moreinfo">
<h3>Questions?</h3> <h3>Questions?</h3>
<p>We are here to answer them!</p> <p>We are here to answer them!</p>
<p>Please contact us at <a href="mailto:tc@harambee.nl">tc@harambee.nl</a> if you have any questions about volleyball at Harambee.</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>If you have any questions about the association, terms of membership, etc. send a mail to the board: <a href="mailto:bestuur@harambee.nl">bestuur@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>Also, be sure to visit our regular site at <a href="https://site.harambee.utwente.nl">harambee.utwente.nl</a>!</p> <p class="text-left">Also, be sure to visit our regular site at <a class="link" href="https://site.harambee.utwente.nl">harambee.utwente.nl</a>!</p>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save