single-our-team.twig

{% extends "base.twig" %}

{% block content %}

<main class="u-container">	
		{% set colors = ['red', 'orange', 'yellow', 'green', 'blue'] %}
		{% for instructor in instructors %}
		<div class="contactCard__outer">
			<a href="#{{instructor.slug}}" class="contactCard contactCard--{{colors[loop.index0 % 5]}}" id="{{instructor.slug}}-card">
				<figure class="contactCard__top">
					<img src="{{theme.link}}/dist/img/silhouettes/{{instructor.get_field('wpcf-sex')}}--{{colors[loop.index0 % 5]}}.png" alt="{{instructor.title}}">
					<figcaption>
						<h3>{{instructor.get_field('wpcf-first-name')}} {{instructor.get_field('wpcf-last-name')}}</h3>
						<h3>{{ instructor.get_field('wpcf-position') }}</h3>
					</figcaption>
				</figure>
				<figure class="contactCard__bottom">
					<div class="contactCard__bottomInner">
						<h4>{{ instructor.get_field('wpcf-email') }}</h4>
						<h4>{{ instructor.get_field('wpcf-concentration') }}</h4>
					</div>
					<hr>
				</figure>
			</a>
		</div>
		<div class="contactModal contactModal--{{colors[loop.index0 % 5]}}" id="{{instructor.slug}}">
			<div class="contactModal__inner">
				<header class="contactModal__header">
						<h1>{{instructor.get_field('wpcf-first-name')}} {{instructor.get_field('wpcf-last-name')}}</h1>
						<h3>{{ instructor.get_field('wpcf-position') }}</h3>
				</header>
				<section class="contactModal__body">
					<figure class="contactModal__bodyInfo">
						<img src="{{ instructor.thumbnail.src }}" alt="{{ instructor.slug }}" class="contactModal__profilePicture">
						<figcaption>
							<a href="mailto:{{ instructor.get_field('wpcf-email') }}">{{ instructor.get_field('wpcf-email') }}</a>
							<p>{{ instructor.get_field('wpcf-phone-number') }}</p>
							<p>{{ instructor.get_field('wpcf-address') }}</p>
						</figcaption>
					</figure>
					<p>{{ instructor.content }}</p>
				</section>
				<footer class="contactModal__footer">
					<a href="#all">Close</a>
				</footer>
			</div>
		</div>
		<a href="#all" class="contactModal__cover"></a>
		{% endfor %}
</main>

{% endblock %}