MusareFork/frontend/components/pages/Team.vue

<template>
	<div class='app'>
		<main-header></main-header>
		<div class='container'>
			<h3 class="center">Current members</h3>
			<br>
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Kris
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag purple">senior-project-manager</span>
							<span class="custom-tag blue">co-founder</span>
							<ul>
								<li>
									<b>Joined: </b>
									September 23, 2015
								</li>
								<li>
									<b>Email: </b>
									<a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Owen Diffey
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag purple">project-manager</span>
							<span class="custom-tag light-blue">developer</span>
							<ul>
								<li>
									<b>Joined: </b>
									February 29, 2016
								</li>
								<li>
									<b>Email: </b>
									<a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#111;&#119;&#101;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">&#111;&#119;&#101;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Jonathan
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag light-blue">lead-developer</span>
							<ul>
								<li>
									<b>Joined: </b>
									August 28, 2016
								</li>
								<li>
									<b>Email: </b>
									<a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#106;&#111;&#110;&#097;&#116;&#104;&#097;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">&#106;&#111;&#110;&#097;&#116;&#104;&#097;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Antonio
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag light-green">moderator</span>
							<ul>
								<li>
									<b>Joined: </b>
									November 11, 2015
								</li>
								<li>
									<b>Email: </b>
									<a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#108;&#108;&#100;&#106;&#115;&#104;&#097;&#100;&#111;&#119;&#108;&#108;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;">&#108;&#108;&#100;&#106;&#115;&#104;&#097;&#100;&#111;&#119;&#108;&#108;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<h3 class="center">Old/inactive members</h3>
			<br />
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Adryd
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag pink">designer</span>
							<ul>
								<li>
									<b>Joined: </b>
									April 21, 2017
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Cameron Kline
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag light-blue">developer</span>
							<ul>
								<li>
									<b>Joined: </b>
									August 26, 2016
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Wesley McCann
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag light-blue">developer</span>
							<ul>
								<li>
									<b>Joined: </b>
									November 8, 2015
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Nex
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag light-blue">developer</span>
							<ul>
								<li>
									<b>Joined: </b>
									February 29, 2016
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Akira Laine
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag blue">co-founder</span>
							<span class="custom-tag light-blue">lead-developer</span>
							<ul>
								<li>
									<b>Joined: </b>
									September 23, 2015
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Johannes Andersen
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag light-blue">developer</span>
							<ul>
								<li>
									<b>Joined: </b>
									September 23, 2015
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="columns">
				<div class='card column is-6-desktop is-offset-3-desktop is-12-mobile'>
					<header class='card-header'>
						<p class='card-header-title'>
							Aaron Gildea
						</p>
					</header>
					<div class='card-content'>
						<div class='content'>
							<span class="custom-tag light-green">moderator</span>
							<ul>
								<li>
									<b>Joined: </b>
									November 7, 2015
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<main-footer></main-footer>
	</div>
</template>

<script>
	import MainHeader from '../MainHeader.vue';
	import MainFooter from '../MainFooter.vue';

	export default {
		components: { MainHeader, MainFooter }
	}
</script>

<style lang='scss' scoped>
	li a {
		color: dodgerblue;
    	border-bottom: 0 !important;
	}

	ul {
		margin-left: 0;
		margin-right: 0;
		list-style: none;
	}

	.custom-tag {
		padding: 2px 7px;
		border-radius: 10px;
		display: inline-block;
	}

	.custom-tag.blue {
		background-color: #0066f4;
		color: white;
	}

	.custom-tag.pink {
		background-color: #ff99dd;
		color: white;
	}

	.custom-tag.light-blue {
		background-color: #00baf4;
		color: white;
	}

	.custom-tag.light-green {
		background-color: #019875;
		color: white;
	}

	.custom-tag.purple {
		background-color: #90298C;
    	color: white;
	}
</style>