Added favicon, ut-logo and changed texts

remotes/origin/master
Yuri van Midden 5 years ago
parent e587433181
commit 82303631fe
Signed by: yuri
GPG Key ID: 2910D560EC1F82C9
  1. BIN
      src/harambee.ico
  2. 100
      src/index.html
  3. BIN
      src/ut-logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

@ -12,18 +12,31 @@
<title>Harambee - Student volleybal in Enschede!</title> <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://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 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://fonts.googleapis.com/css?family=Exo+2" >
<link href="tropicalasian.ttf" rel="stylesheet"> <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://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>
<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" 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 src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--
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
-->
<style> <style>
p { p {
font-size: 120%; font-size: 120%;
@ -72,12 +85,12 @@
} }
.alert-tryouts{ .alert-tryouts{
background: rgba(255, 89, 0, 0.7); background: rgba(255, 89, 0, 0.8);
color: white; color: white;
} }
.alert-member{ .alert-member{
background: rgba(102, 0, 140, 0.6); background: rgba(102, 0, 140, 0.65);
color: white; color: white;
} }
@ -96,8 +109,17 @@
color: black; 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{ #section1{
background-image: url(./beaver.jpeg); background-image: url(./beaver.jpeg);
background-size: 100%;
padding: 2% 0 0 0;
} }
#section1 #bever{ #section1 #bever{
@ -161,7 +183,7 @@
} }
.regular-site{ .regular-site{
position: fixed; position: absolute;
display: block; display: block;
top: 0.4em; top: 0.4em;
right: 0.4em; right: 0.4em;
@ -181,24 +203,28 @@
<div id="fullscreen"> <div id="fullscreen">
<div class="section" id="section0"> <div class="section" id="section0">
<video id="harambeeVideo" loop muted data-autoplay> <video id="harambeeVideo" loop muted data-autoplay>
<source src="video.mp4" type="video/mp4"> <source src="video.mp4" type="video/mp4">
</video> </video>
<a href="https://site.harambee.utwente.nl" role="button" class="shadow regular-site btn btn-sm" aria-pressed="true">
<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 <i class="align-middle fas fa-rocket"></i>&nbsp; To the regular site
</a> </a>
<div class="container"> <div class="container">
<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 class="animated fadeIn" src="harambee-logo.png"> <img class="animated" src="harambee-logo.png">
<h1>Try out <b>volleyball</b> <i class="fas fa-volleyball-ball"></i> with Harambee at the University of Twente!</h1> <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 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> <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>
<div class="alert alert-member shadow"> <div class="alert alert-member shadow">
<h4>Do you want to sign up? <i class="fas fa-pencil-alt"></i></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://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!
</a> </a>
</div> </div>
@ -206,48 +232,48 @@
<div class="col-md-4"> <div class="col-md-4">
<div class="animated fadeInUp faster alert alert-tryouts shadow"> <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> <p><strong>New to volleyball,</strong> and do you want to know if it's your sport?</p>
<h2><i class="fas fa-calendar-check"></i></h2> <h2><i class="fas fa-calendar-alt"></i></h2>
<h2>Our try-outs are:</h2> <h2>Our try-outs are:</h2>
<ul> <p>
<li>Tuesday September 4th, 18:00</li> Tuesday September 3rd, 18:00 <br>
<li>Thursday September 6th, 20:00</li> Thursday September 5th, 20:00
</ul> </p>
<a href="https://goo.gl/forms/5K1IZwAOscE17Vwj2" role="button" class="btn btn-lg btn-tryout" aria-pressed="true"> <a href="#" role="button" class="btn btn-sm btn-disabled" aria-pressed="true" aria-disabled="true">
<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://harambee.utwente.nl" role="button" class="btn btn-member" aria-pressed="true">
Click here Click here
</a> </a>
</div> --> </div> -->
<div class="animated fadeInDown fast alert alert-member shadow"> <div class="animated fadeInDown fast alert alert-member shadow">
<h2 style="padding-bottom: 10px;">Kick-In program</h2> <h2 style="padding-bottom: 10px;">Kick-In program 2019</h2>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li> <li>
<h5 class="kick-in_content">Opening fair</h5> <h5 class="kick-in_content">Opening fair</h5>
<p>August 22nd @ Ganzenveld</p> <p>August 21st @ Ganzenveld</p>
</li> </li>
<li> <li>
<h5 class="kick-in_content">Sports Day</h5> <h5 class="kick-in_content">Sports games</h5>
<p>August 23rd @ Sports Centre and Beach fields</p> <p>August 22nd @ Sports Centre and Beach fields</p>
</li> </li>
<li> <li>
<h5 class="kick-in_content">Sports party</h5> <h5 class="kick-in_content">Sports party</h5>
<p>August 23rd @ 'de Veste' tent</p> <p>August 22nd @ Large tent</p>
</li> </li>
<li> <li>
<h5 class="kick-in_content">Lounge day</h5> <h5 class="kick-in_content">Lounge day</h5>
<p>August 26th @ Rutbeek</p> <p>August 25th @ Rutbeek</p>
</li> </li>
<li> <li>
<h5 class="kick-in_content">Hoi summer festival</h5> <h5 class="kick-in_content">Hoi summer festival</h5>
<p>August 29th @ Volkspark</p> <p>August 28th @ Volkspark</p>
</li> </li>
<li> <li>
<h5 class="kick-in_content">Kick-Out festival</h5> <h5 class="kick-in_content">Kick-Out festival</h5>
<p>August 30st @ Ganzenveld</p> <p>August 29th @ Ganzenveld</p>
</li> </li>
</ul> </ul>
</div> </div>
@ -269,8 +295,8 @@
<h2><i class="fas fa-volleyball-ball"></i> Volleyball types at Harambee:</h2> <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> 1x training a week + matches every 4 weeks against other Mix teams.</li>
<li><strong>Recreational:</strong> 1 training a week with 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> <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> </ul>
</div> </div>
@ -278,15 +304,15 @@
<h2><i class="fas fa-chart-line"></i> Levels of playing:</h2> <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>: 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>: 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> <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>
<div class="col-md-7"> <div class="col-md-7">
<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> <h3>All indoor teams at Harambee have their own dedicated (student) trainer! <br>Teams consist of about 12 players.</h3>
</div> </div>
<div class="alert alert-member"> <div class="alert alert-member">
<div class="row"> <div class="row">
@ -301,7 +327,7 @@
<div class="alert alert-member"> <div class="alert alert-member">
<div class="row"> <div class="row">
<div class="col-sm-2"> <div class="col-sm-2">
<h1><i class="align-middle fas fa-map-marker-alt"></i> </h1> <h1><i class="align-middle fas fa-map-marker-alt"></i></h1>
</div> </div>
<div class="col-sm-10"> <div class="col-sm-10">
<h4>All practices and home matches take place in the Sports Centre of the University.</h4> <h4>All practices and home matches take place in the Sports Centre of the University.</h4>
@ -314,7 +340,7 @@
<h1><i class="align-middle fas fa-umbrella-beach"></i> </h1> <h1><i class="align-middle fas fa-umbrella-beach"></i> </h1>
</div> </div>
<div class="col-sm-10"> <div class="col-sm-10">
<h4>In May and June we enjoy the summer sun and play beach volleyball on the campus.</h4> <h4>From May to July we enjoy the summer weather and also play beach volleyball.</h4>
</div> </div>
</div> </div>
</div> </div>
@ -333,11 +359,11 @@
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<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>Join our <strong>family </strong><i class="fas fa-users"></i> during one of the many activities throughout the year!</h2>
</div> </div>
<div class="alert alert-member text-left"> <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 Harambee 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 club.</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 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="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>
@ -353,12 +379,12 @@
<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 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> <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 animated">
<h3>Questions?</h3> <h3><strong>Questions?</strong></h3>
<p>We are here to answer them!</p> <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 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">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://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://harambee.utwente.nl">harambee.utwente.nl</a>!</p>
</div> </div>
</div> </div>
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Loading…
Cancel
Save