Initial work on the landing page

remotes/origin/master
Yuri van Midden 4 years ago
parent 75a8874a85
commit 6d008143f0
  1. 3
      package.json
  2. 1
      src/angle-double-down-solid.svg
  3. BIN
      src/beaver.jpeg
  4. BIN
      src/harambee-logo.png
  5. 235
      src/index.html
  6. BIN
      src/somuchfun.jpg
  7. BIN
      src/video.mp4

@ -50,5 +50,8 @@
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^3.0.0"
},
"dependencies": {
"fullscreen.js": "^0.1.3"
}
}

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-double-down" class="svg-inline--fa fa-angle-double-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"></path></svg>

After

Width:  |  Height:  |  Size: 610 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Harambee - Studentenvolleybal in Enschede!</title>
<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://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">
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
.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: absolute;
z-index: 4;
width: 100%;
left: 10%;
top: 10%;
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.7);
color: white;
}
.alert-member{
background: rgba(102, 0, 140, 0.5);
color: white;
}
.alert-moreinfo{
background: rgba(230, 230, 230, 0.45);
color: black;
}
.btn-tryout{
background: rgba(255, 89, 0, 1);
color: white;
}
.btn-member{
background: lightblue;
color: black;
}
#section1{
background-image: url(./beaver.jpeg);
}
#section1 #bever{
z-index: 3
}
#section2{
background-image: url(./somuchfun.jpg);
background-size: 100%;
padding: 6% 0 0 0;
}
#gezelligheid{
text-align: left;
}
.haramPaars{
color: purple;
font-weight: bold;
}
.haramOranje{
color: rgb(255, 89, 0);
}
.volleyballforms{
text-align: left;
}
</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>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="jumbotron jumbotron-transparent">
<img src="harambee-logo.png">
<h1>Try out <b>volleyball</b> 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>
</div>
<div class="alert alert-member shadow">
<h4>Do you want to sign up?</h4>
<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">
Fill out the sign-up form!
</a>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-tryouts shadow">
<p><strong>New to volleyball, and do you want to know if it's your sport?</strong></p>
<h2><strong>Our try-outs are:</strong></h2>
<ul>
<li>Tuesday September 4th, 18:00</li>
<li>Thursday September 6th, 19:30</li>
</ul>
<a href="https://goo.gl/forms/5K1IZwAOscE17Vwj2" role="button" class="btn btn-lg btn-tryout" aria-pressed="true">
Join the try-outs!
</a>
</div>
<div class="alert alert-member shadow">
<h3>Want to visit the regular site?</h3>
<a href="https://site.harambee.utwente.nl" role="button" class="btn btn-member" aria-pressed="true">
Click here
</a>
</div>
<div class="alert alert-moreinfo">
<p>Scroll down for more info about volleyball at Harambee!</p>
<img src="angle-double-down-solid.svg" width="20px">
</div>
</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">
<h1>Volleyball types at Harambee:</h1>
<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>Mix:</strong> 1 training a week + matches every 4 weeks against other Mix teams.</li>
<li><strong>Recreational:</strong> 1 training a week with Mix teams.</li>
</ul>
</div>
</div>
<div class="col-md-7">
<div class="jumbotron jumbotron-transparent">
<h2>All teams at Harambee have their own dedicated (student) trainer! Teams consist of about 12 players.</h2>
</div>
<div class="alert alert-moreinfo">
<p>Scroll down to learn more about the association</p>
<img src="angle-double-down-solid.svg" width="20px">
</div>
</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>Harambee is the biggest family you've ever known!</h2>
</div>
<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>
<p>You will find them at:</p>
<ul>
<li><strong>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><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><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>... 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">
<h5>Did you know that...</h5>
<p>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>
</div>
<div class="alert alert-moreinfo">
<h3>Questions?</h3>
<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>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>Also, be sure to visit our regular site at <a href="https://site.harambee.utwente.nl">harambee.utwente.nl</a>!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
new fullpage('#fullscreen', {
// options
navigation: true,
navigationPosition: 'right'
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.
Loading…
Cancel
Save