<header class="group">
			<svg class="coderspace-logo" alt="CoderSpace logo" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600.000000 1200.000000" preserveAspectRatio="xMidYMid meet">
						<g transform="translate(0.000000,1200.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
									<path d="M7710 11619 c-1231 -87 -2357 -697 -3100 -1679 -724 -958 -1009
                  -2177 -784 -3355 248 -1299 1090 -2412 2272 -3004 1196 -599 2608 -599 3804 0
                  813 407 1488 1080 1893 1889 682 1361 590 2967 -243 4240 -357 547 -869 1029
                  -1436 1355 -726 416 -1577 612 -2406 554z m486 -619 c522 -32 974 -151 1419
                  -375 383 -191 683 -411 983 -719 286 -294 480 -569 662 -941 390 -795 471
                  -1709 229 -2575 -106 -378 -298 -781 -522 -1095 -236 -331 -524 -621 -852
                  -860 -897 -652 -2080 -850 -3157 -529 -378 113 -759 301 -1073 529 -398 290
                  -743 662 -990 1070 -87 144 -232 439 -288 590 -332 884 -307 1878 71 2742 292
                  668 817 1266 1447 1648 138 83 414 219 566 279 326 127 724 213 1089 235 185
                  12 239 12 416 1z"></path>
									<path d="M6140 9090 c-507 -90 -891 -436 -1035 -935 -59 -206 -60 -217 -60
                  -875 0 -590 1 -608 23 -718 78 -388 267 -686 555 -879 236 -158 465 -218 827
                  -217 231 0 334 13 508 60 506 137 811 518 878 1097 l6 57 -356 0 c-196 0 -356
                  -3 -356 -7 0 -42 -36 -207 -58 -270 -87 -247 -249 -366 -534 -392 -427 -39
                  -682 175 -774 649 -13 67 -17 176 -21 526 -7 641 10 796 116 1009 79 158 166
                  249 298 312 177 85 463 79 651 -13 170 -83 277 -266 316 -539 l12 -80 353 -3
                  354 -2 -6 60 c-19 181 -80 388 -159 543 -186 363 -486 560 -948 622 -153 21
                  -457 18 -590 -5z"></path>
									<path d="M9380 9104 c-413 -51 -746 -225 -931 -487 -102 -145 -143 -288 -143
                  -497 1 -214 37 -347 139 -500 141 -211 473 -405 965 -562 461 -147 588 -202
                  693 -298 100 -92 146 -215 134 -358 -16 -190 -133 -318 -347 -379 -100 -28
                  -433 -25 -545 5 -273 74 -414 234 -433 492 l-7 85 -356 3 -356 2 4 -77 c10
                  -177 62 -351 145 -490 49 -83 187 -223 286 -291 284 -194 626 -292 1022 -292
                  611 0 1073 229 1230 610 84 205 92 479 20 704 -43 132 -107 235 -209 336 -187
                  186 -455 323 -901 461 -306 94 -518 184 -630 268 -213 159 -191 480 43 634
                  107 71 221 98 409 98 199 0 330 -38 443 -128 98 -78 169 -215 181 -353 l7 -70
                  355 0 355 0 -6 83 c-13 181 -63 331 -157 474 -168 256 -448 433 -797 504 -90
                  18 -147 22 -343 24 -129 2 -251 1 -270 -1z"></path>
									<path d="M5120 2275 c0 -195 -2 -355 -5 -355 -2 0 -25 21 -50 46 -70 70 -140
                  98 -254 102 -301 12 -480 -183 -522 -567 -30 -275 32 -527 162 -659 95 -97
                  210 -138 366 -130 76 3 101 9 155 36 39 19 84 52 112 82 26 27 49 50 51 50 2
                  0 9 -34 16 -75 l12 -75 153 0 154 0 0 950 0 950 -175 0 -175 0 0 -355z m-113
                  -503 c22 -12 57 -40 77 -63 l36 -43 0 -276 0 -277 -29 -40 c-71 -98 -250 -121
                  -349 -46 -71 54 -102 160 -102 351 0 237 60 375 177 412 45 15 144 5 190 -18z"></path>
									<path d="M1825 2514 c-245 -54 -431 -241 -497 -500 -22 -83 -23 -109 -22 -404
                  0 -291 2 -321 22 -395 56 -205 170 -353 333 -434 108 -53 193 -71 347 -71 311
                  0 515 107 627 328 31 64 65 189 65 244 l0 38 -174 0 -174 0 -6 -45 c-20 -129
                  -75 -219 -162 -261 -49 -24 -74 -29 -154 -32 -79 -3 -105 0 -152 18 -71 26
                  -148 106 -176 183 -39 104 -44 159 -40 472 4 279 6 304 26 360 47 128 129 210
                  234 235 61 15 172 8 240 -15 91 -32 158 -128 181 -261 l11 -64 173 0 173 0 0
                  33 c0 19 -9 69 -20 113 -60 237 -206 388 -435 450 -87 23 -330 28 -420 8z"></path>
									<path d="M8478 2520 c-215 -39 -380 -147 -451 -297 -31 -65 -32 -73 -32 -188
                  1 -159 20 -212 114 -306 87 -86 211 -149 458 -233 265 -89 325 -122 364 -199
                  26 -50 29 -149 6 -193 -19 -36 -62 -77 -103 -97 -81 -41 -238 -43 -362 -5
                  -110 33 -182 131 -182 245 l0 33 -181 0 -181 0 6 -57 c22 -196 124 -335 310
                  -427 136 -67 208 -81 416 -81 146 0 199 4 250 18 273 74 414 253 397 502 -18
                  257 -161 387 -575 524 -271 91 -346 133 -378 216 -43 113 26 231 159 270 64
                  19 190 19 251 1 103 -31 170 -105 184 -203 l7 -48 178 -3 177 -2 0 23 c0 55
                  -22 136 -55 203 -64 131 -213 245 -380 290 -69 19 -323 28 -397 14z"></path>
									<path d="M3302 2050 c-102 -27 -166 -64 -242 -140 -77 -76 -131 -172 -162
                  -287 -30 -111 -30 -354 0 -464 63 -233 217 -390 427 -434 160 -34 369 -11 488
                  52 126 67 234 214 279 382 30 110 30 353 0 464 -62 227 -213 382 -423 432 -92
                  21 -275 19 -367 -5z m309 -278 c101 -53 149 -176 149 -384 -1 -289 -94 -420
                  -291 -406 -80 6 -121 27 -166 86 -50 66 -65 128 -70 288 -6 161 4 225 48 314
                  47 93 105 128 215 129 49 1 73 -5 115 -27z"></path>
									<path d="M6130 2054 c-87 -23 -157 -62 -223 -124 -74 -69 -128 -157 -164 -265
                  -23 -70 -27 -101 -31 -247 -5 -199 8 -276 70 -400 102 -203 290 -308 553 -308
                  123 0 197 10 295 42 80 25 180 77 180 92 0 13 -67 216 -73 222 -2 2 -39 -11
                  -83 -30 -103 -45 -183 -59 -291 -54 -131 6 -202 49 -258 158 -21 40 -46 136
                  -37 144 3 3 182 6 399 6 l393 0 0 139 c0 172 -18 272 -67 371 -64 132 -176
                  220 -325 255 -81 19 -265 18 -338 -1z m265 -273 c76 -35 115 -106 115 -207 l0
                  -54 -221 0 -222 0 7 42 c16 97 72 185 141 221 41 22 131 21 180 -2z"></path>
									<path d="M7585 2046 c-53 -24 -121 -91 -151 -147 l-18 -34 -7 50 c-4 28 -8 69
                  -8 93 l-1 42 -165 0 -165 0 0 -660 0 -660 175 0 175 0 0 450 0 450 43 44 c52
                  54 91 66 218 66 l95 0 18 156 c15 130 16 158 4 165 -7 5 -47 9 -88 9 -58 0
                  -86 -6 -125 -24z"></path>
									<path d="M10083 2056 c-59 -19 -103 -48 -156 -104 l-45 -49 -6 30 c-3 16 -6
                  42 -6 57 0 61 2 60 -171 60 l-159 0 0 -915 0 -915 175 0 175 0 0 316 0 317 46
                  -43 c74 -68 141 -94 260 -98 194 -8 325 58 426 212 82 127 121 346 100 563
                  -15 142 -33 215 -77 308 -90 189 -226 276 -429 274 -50 0 -110 -6 -133 -13z
                  m134 -281 c100 -50 143 -154 150 -366 9 -227 -33 -352 -137 -407 -39 -21 -55
                  -23 -125 -20 -91 5 -146 28 -189 78 l-26 32 0 291 0 292 31 38 c70 85 196 112
                  296 62z"></path>
									<path d="M11292 2050 c-195 -52 -331 -183 -351 -337 l-8 -53 177 0 177 0 7 38
                  c6 38 39 79 81 99 65 32 184 20 237 -25 44 -37 58 -79 58 -175 l0 -84 -177 -6
                  c-98 -3 -208 -13 -245 -21 -144 -32 -251 -105 -305 -208 -26 -50 -28 -61 -28
                  -178 0 -114 2 -130 26 -181 69 -146 208 -216 411 -207 82 3 104 8 161 37 37
                  17 90 55 118 82 28 28 52 49 53 47 1 -2 12 -36 24 -75 l23 -73 178 0 178 0
                  -25 83 c-25 80 -26 91 -32 497 -7 463 -9 471 -77 570 -45 65 -133 128 -225
                  160 -93 33 -331 39 -436 10z m378 -854 l0 -114 -46 -40 c-111 -99 -301 -97
                  -349 4 -32 67 -13 153 44 208 43 41 101 55 234 55 l117 1 0 -114z"></path>
									<path d="M12652 2050 c-158 -42 -262 -130 -337 -283 -57 -117 -75 -209 -75
                  -377 0 -214 38 -349 133 -475 62 -82 144 -141 242 -174 95 -32 289 -40 389
                  -17 207 49 369 215 384 393 l5 63 -167 0 -166 0 0 -25 c0 -36 -34 -98 -70
                  -128 -85 -72 -253 -60 -323 22 -106 127 -100 588 11 694 60 58 177 75 258 38
                  69 -32 124 -117 124 -195 l0 -26 166 0 167 0 -6 73 c-14 188 -128 335 -313
                  404 -60 23 -88 27 -209 30 -115 2 -153 0 -213 -17z"></path>
									<path d="M13970 2054 c-87 -23 -157 -62 -223 -124 -74 -69 -128 -157 -164
                  -265 -23 -70 -27 -101 -31 -247 -5 -199 8 -276 70 -400 102 -203 290 -308 553
                  -308 123 0 197 10 295 42 80 25 180 77 180 92 0 13 -67 216 -73 222 -2 2 -39
                  -11 -83 -30 -103 -45 -183 -59 -291 -54 -131 6 -202 49 -258 158 -21 40 -46
                  136 -37 144 3 3 182 6 399 6 l393 0 0 139 c0 172 -18 272 -67 371 -64 132
                  -176 220 -325 255 -81 19 -265 18 -338 -1z m265 -273 c76 -35 115 -106 115
                  -207 l0 -54 -221 0 -222 0 7 42 c16 97 72 185 141 221 41 22 131 21 180 -2z"></path>
						</g>
			</svg>
			<h1>Student Roster</h1>
			<nav>
						<div class="btn-group group" id="gender">
									<a href="#" id="gender-ladies">Ladies</a>
									<a href="#" id="gender-gents">Gents</a>
						</div>

						<div class="btn-group group" id="state">
									<a href="#" id="state-here">Still With Us</a>
									<a href="#" id="state-school">Back to School</a>
						</div>

						<div class="btn-group group" id="year">
									<a href="#" id="year-freshmen">Freshmen</a>
									<a href="#" id="year-sophomores">Sophomores</a>
									<a href="#" id="year-juniors">Juniors</a>
									<a href="#" id="year-seniors">Seniors</a>
									<a href="#" id="year-other">Other</a>
						</div>

						<div class="btn-group group" id="clear">
									<a href="#" id="clear-all">Clear</a>
						</div>
			</nav>
</header>

<section class="students group">

			<div class="studentInfo" data-gender="f" data-state="here" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/ameena.jpg">
						<p>Ameena</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/briana.jpg">
						<p>Briana</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/derek.jpg">
						<p>Derek</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/diamond.jpg">
						<p>Diamond</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="college">
						<img src="https://coderspace.github.io/coderspace2/images/pl.jpg">
						<p>Dominique</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/imani.jpg">
						<p>Imani</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/imari.jpg">
						<p>Imari</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="freshman">
						<img src="https://coderspace.github.io/coderspace2/images/meermeer.jpg">
						<p>Jameer</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="freshman">
						<img src="https://coderspace.github.io/coderspace2/images/jonathon.jpg">
						<p>Jonathan</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/baldridge.jpg">
						<p>Justin</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/pl.jpg">
						<p>Justin</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/mar.jpg">
						<p>Marquis</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="school" data-year="pre-freshman">
						<img src="https://coderspace.github.io/coderspace2/images/ny.jpg">
						<p>Nychia</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/samara.jpg">
						<p>Samara</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/serenity.jpg">
						<p>Serenity</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/siobhan.jpg">
						<p>Siobhan</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/me.jpg">
						<p>Whitney</p>
			</div>

</section>
.group:after {
  content: "";
  display: table;
  clear: both;
}

.hide {
  display: none;
}

body {
  font-family: sans-serif;
  width: 90%;
  margin: auto;
}

svg.coderspace-logo {
  width: 10em;
  position: relative;
  left: -0.3em;
  float: left;
}

h1 {
  margin: 10px 0;
  font-size: 2.5em;
  line-height: 3em;
}



/*NAV*/

nav {
  margin: 20px auto;
  padding: 20px;
  border: 5px solid #ddd;
}

div.btn-group:before{
    display: inline-block;
    min-width: 150px;
    float: left;
    margin-right: 15px;
    padding: 10px 0;
    font-weight: bold;
    text-align: right;
    content: " ";

}

div#gender:before {
    content: "Filter By Gender: ";
}

div#state:before {
    content: "Filter By Status: ";
}

div#year:before {
  content: "Filter By Year: ";
}

div#clear {
  margin-top: 30px;
}

a#clear-all {
  padding: 10px 30px;
  border-color: #888;
  color: #888;
}

a:hover#clear-all {
  border-color: #333;
  color: #fff;
  background-color: #888;
}

.btn-group {
  margin: 15px 0;
}

.btn-group a {
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid gray;
    margin: 0;
    text-decoration: none;
    float: left;
    color: black;
}

#gender a {
  background-color: rgba(102, 51, 153, 0.3);;
}

#gender a:hover {
  background-color: rgba(102, 51, 153, 0.5);;
}

#gender a.active {
  background-color: rgba(102, 51, 153, 0.9);;
}

#state a {
  background-color: rgba(74, 164, 228, 0.3);
}

#state a:hover {
  background-color: rgba(74, 164, 228, 0.5);
}

#state a.active {
  background-color: rgba(74, 164, 228, 0.9);
}

#year a {
  background-color: rgba(0, 136, 1, 0.3);
}

#year a:hover {
  background-color: rgba(0, 136, 1, 0.5);
}

#year a.active {
  background-color: rgba(0, 136, 1, 0.9);
}

.btn-group a:not(:first-child) {
    border-left: 0;
}

.btn-group a:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.btn-group a:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/*STUDENT INFO*/

.students {
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.studentInfo {
  text-align: center;
}

.studentInfo img {
  width: 250px;
  margin: 10px 10px 0;
}

.studentInfo p {
  margin-top: 10px;
  font-weight: bold;
}

@media (max-width: 815px) {
  nav {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  div.btn-group:before {
    width: 100%;
    text-align: left;
  }

}

@media (max-width: 600px) {
  svg.coderspace-logo {
    float: none;
    left: -0.6em;
  }

  h1 {
  line-height: normal;
  }
	
  .btn-group a {
    display: inline-block;
    margin: 5px 0;
    float: none;
    border-radius: 4px;
  }

  .btn-group a:not(:first-child) {
    border-left: 1px solid gray;
  }
	
}
// Remember to add jQuery
// You can close the CSS window to give yourself more room. You won't have to edit any of the styles.
// You may want to keep the HTML window open so you can refer to the classes and IDs



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.