index.html

---
layout: default
image: /img/gallery/IMG_2071.jpg
---
<!-- Start Hero -->
<div class="hero" style="background: url('{{ site.baseurl }}/img/{{ site.hero.hero_img }}') no-repeat center; background-size: cover; height: 50vh;">
</div>
<!-- End Hero -->

<!-- Start 3 columns -->
<div class="three-shade-col">
	<div class="col-sm-4">
		<h3>Next Concert</h3>
		{% for season in site.data.concerts %}
			{% if season.current %}
				{% for concert in season.concerts %}
					{% if concert.current %}
						<h4>
							{% if concert.pdf %}
								<a href="{{ concert.pdf }}" target="_blank">
									{{ concert.title }}
								</a>
							{% else %}
								{{ concert.title }}
							{% endif %}
						</h4>
						<h5>{{ concert.date }}, {{ concert.time }}</h5>
						<h5><a href="{{ concert.mapLink }}" target="_blank">{{ concert.location }}</a></h5>
						{% if concert.youtube %}
						<p><svg class="icon icon-youtube"><use xlink:href="#icon-youtube"></use></svg>
						<a href="https://www.youtube.com/watch?v={{ concert.youtube }}" target="_blank">Watch Now!</a></p>
						{% endif %}
						{% if concert.mapLink %}
							<p><svg class="icon icon-map-marker"><use xlink:href="#icon-map-marker"></use></svg>
								<a href="{{ concert.mapLink }}" target="_blank">{{ concert.address }}</a>
							</p>
						{% else %}
							<p>{{ concert.address }}</p>
						{% endif %}
					{% endif %}
				{% endfor %}
			{% endif %}
		{% endfor %}
		<h4><a href="#concerts" data-toggle="modal" data-target="#concerts">See a list of upcoming and past concerts</a></h4>
	</div>
	<div class="col-sm-4">
		<h3>Rehearsals</h3>
		<h4>
			{{ site.rehearsal.day }}, {{ site.rehearsal.time}}
		</h4>
		<h5>
			{{ site.rehearsal.location }}
		</h5>
		<p><svg class="icon icon-map-marker"><use xlink:href="#icon-map-marker"></use></svg>
			<a href="{{ site.rehearsal.mapLink }}" target="_blank">{{ site.rehearsal.address }}</a>
		</p>
	</div>
	<div class="col-sm-4">
		<h3>Contact Us</h3>
		<ul>
			{% for contact in site.data.contacts %}
				<li>
					<strong>{{ contact.name }}</strong>, {{ contact.title }} <br> <em><a href="mailto:{{ contact.email }}">{{ contact.email }}</a></em>
				</li>
			{% endfor %}
		</ul>
		
	</div>
</div>
<!-- End 3 columns -->


<!-- Start last video -->
<div id="video" class="concertvideo">
	<div class="container-fluid">
		<h2 class="section-title">Our Last Concert</h2>
			{% for season in site.data.concerts %}
				{% for concert in season.concerts %}
					{% if concert.video %}
					<div class="video-container">
						<iframe width="560" height="315" src="//www.youtube.com/embed/{{ concert.youtube }}" frameborder="0" allowfullscreen></iframe>
					</div>
					{% endif %}
				{% endfor %}
			{% endfor %}				
		<h3><a href="{{ site.youtube }}">Watch our previous concerts on YouTube</a></h3>
	</div>
</div>
<!-- End last video -->

<!-- Start About -->
<div id="about" class="about">
	<div class="container-fluid">
		<h2 class="section-title">About Us</h2>
		{% capture about %}{% include about.md %}{% endcapture %}
		{{ about | markdownify }}
		{% include donate.html %}
	</div>
</div>
<!-- End About -->
<!-- Start support -->
<div id="support" class="support">
	<div class="container-fluid">
		<h2 class="section-title">Support</h2> 
		{% capture support %}{% include support.md %}{% endcapture %}
		{{ support | markdownify }}

		{% include donate.html %}
	</div>
</div>
<!-- End support -->

<!-- Start new members -->
<div id="newmembers" class="newmembers">
	<div class="container-fluid">
		<h2 class="section-title">New Members</h2>
		{% capture newmembers %}{% include newmembers.md %}{% endcapture %}
		{{ newmembers | markdownify }}
		<h3><a href="#sample" data-toggle="modal" data-target="#sample">See a list of some of our prior material (difficulty levels range from 3 to 5)</a></h3>
	</div>
</div>
<!-- End new members -->

<!-- Start Gallery -->
<div id="gallery" class="gallery">
		
	<h2 class="section-title">Gallery</h2>

	{% for images in site.data.gallery %}
		<a href="{{ site.baseurl }}/img/gallery/{{ images.name }}" class="gallery-item image-link">
				<img src="{{ site.baseurl }}/img/gallery/thumb/{{ images.name }}" alt="" />
		</a>
	{% endfor %}

</div>
<!-- End Gallery -->

<!-- start sample -->
<div class="modal fade" id="sample" tabindex="-1" role="dialog" aria-labelledby="sampleTitle">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title" id="sampleTitle">Concert Material Examples</h4>
			</div>
			<div class="modal-body">
				<table class="table">
					<thead>
						<tr>
							<th>Title</th>
							<th>Composer</th>
						</tr>
					</thead>
					<tbody>
						{% for piece in site.data.sample %}
							<tr>
								<td>{{ piece.title }}</td>
								<td>{{ piece.composer }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<!-- end sample -->
<!-- start concerts -->
<div class="modal fade" id="concerts" tabindex="-1" role="dialog" aria-labelledby="concertsTitle">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title" id="concertsTitle">Concerts</h4>
			</div>
			<div class="modal-body">
			{% for season in site.data.concerts %}
				<h3>{{ season.Season }} Season</h3>
				<table class="table">
					<thead>
						<th style="width: 40%;">Date</th>
						<th style="width: 30%;">Title</th>
						<th style="width: 30%;">Location</th>
					</thead>
					<tbody>
						{% for concert in season.concerts %}
							<tr>
								<td>{{ concert.date }}{% if concert.time %}, {{ concert.time }}{% endif %}</td>
								<td>
									{% if concert.pdf %}
									<a href="{{ concert.pdf }}" target="_blank">
										{{ concert.title }}
									</a>
									{% else %}
										{{ concert.title }}
									{% endif %}
									{% if concert.youtube %}
									<a href="https://www.youtube.com/watch?v={{ concert.youtube }}"><svg class="icon icon-youtube"><use xlink:href="#icon-youtube"></use></svg></a>
									{% endif %}
								</td>
								<td>{{ concert.location }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			{% endfor %}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<!-- end concerts -->