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

Added cool effects and stuff

Browse Source
remotes/origin/HEAD
Yuri van Midden 6 years ago
parent 7cf10f782b
commit 8a37980597
3 changed files with 80 additions and 14 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. BIN
      src/black.ttf
  2. 94
      src/index.html
  3. BIN
      src/tropicalasian.ttf

BIN
src/black.ttf
View File

Binary file not shown.

94
src/index.html
Unescape View File

@ -9,7 +9,9 @@
<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 href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet"> <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 href="tropicalasian.ttf" rel="stylesheet">
<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>
@ -51,7 +53,7 @@
z-index: 4; z-index: 4;
width: 100%; width: 100%;
left: 0%; left: 0%;
top: 0%; top: 0.5%;
font-family: 'Exo 2', sans-serif; font-family: 'Exo 2', sans-serif;
} }
@ -102,10 +104,6 @@
padding: 2% 0 0 0; padding: 2% 0 0 0;
} }
#gezelligheid{
text-align: left;
}
.haramPaars{ .haramPaars{
color: purple; color: purple;
font-weight: bold; font-weight: bold;
@ -137,6 +135,25 @@
background-color: rgba(230, 230, 230, 1); 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;
}
</style> </style>
</head> </head>
<body> <body>
@ -175,17 +192,47 @@
<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://site.harambee.utwente.nl" role="button" class="btn btn-member" aria-pressed="true">
Click here Click here
</a> </a>
</div> -->
<div class="animated fadeInDown fast alert alert-member shadow">
<h2 style="padding-bottom: 10px;">Kick-In program</h2>
<ul class="list-unstyled">
<li>
<h5 class="kick-in_content">Opening fair</h5>
<p>August 22nd @ Ganzeveld</p>
</li>
<li>
<h5 class="kick-in_content">Sports Day</h5>
<p>August 23rd @ Sports Centre and Beach fields</p>
</li>
<li>
<h5 class="kick-in_content">Sports party</h5>
<p>August 23rd @ 'de Veste' tent</p>
</li>
<li>
<h5 class="kick-in_content">Lounge day</h5>
<p>August 26th @ Rutbeek</p>
</li>
<li>
<h5 class="kick-in_content">Hoi summer festival</h5>
<p>August 29th @ Volkspark</p>
</li>
<li>
<h5 class="kick-in_content">Kick-Out festival</h5>
<p>August 31st @ Ganzenveld</p>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2><i style="color: white" class="animated slow bounce infinite delay-2s fas fa-angle-double-down"></i></h2> <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> </div>
@ -195,7 +242,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><i class="fas fa-volleyball-ball"></i> Volleyball types at Harambee:</h1> <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> 1 training a week + matches every 4 weeks against other Mix teams.</li>
@ -204,12 +251,12 @@
</ul> </ul>
</div> </div>
<div class="alert alert-tryouts"> <div class="alert alert-tryouts">
<h1><i class="fas fa-chart-line"></i> Levels of playing:</h1> <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> play matching from the 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> play levels reaching from 1<sup>e</sup>> Klasse to 4<sup>e</sup> Klasse.</li>
<li><strong>Mix teams</strong> participate in an internal competition and is generally of beginner to novice 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>
@ -237,11 +284,22 @@
</div> </div>
</div> </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>In May and June we enjoy the summer sun and play beach volleyball on the campus.</h4>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2><i style="color: white" class="animated slower bounce infinite delay-2s fas fa-angle-double-down"></i></h2> <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> </div>
@ -253,12 +311,12 @@
<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>Harambee is the biggest <strong>family</strong> <i class="fas fa-users"></i> you've ever known!</h2>
</div> </div>
<div class="alert alert-member" id="gezelligheid"> <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 them 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 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 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 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="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 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>
@ -280,6 +338,13 @@
</div> </div>
</div> </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> </div>
</div> </div>
@ -287,6 +352,7 @@
<script type="text/javascript"> <script type="text/javascript">
new fullpage('#fullscreen', { new fullpage('#fullscreen', {
// options // options
anchors: ['home','volleyball','association'],
navigation: true, navigation: true,
navigationPosition: 'right', navigationPosition: 'right',
scrollOverflow: true scrollOverflow: true

BIN
src/tropicalasian.ttf
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save