<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> <!-- html5 세팅 -->
<html>
<head>
<style>
	.gray{
		background-color:#E1E1E1;
	}
	.red{
		color :#E04848;
	}
	.ex{
	color:white;
	}
	.ex1{
	background-color:green;
	}
	.ex2{
	background-color:green;
	color:white;
	}
</style>

<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>20172302송지은</title>
</head>
<body>
	<div class="container">
	<h1>20172302송지은</h1>
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12">
				<ul class="nav nav-pills">
					<li><a href="#"><span class="glyphicon glyphicon-home"></span>나의 이력서</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-education"></span>학력사항</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-globe"></span>경력사항</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-heart"></span>관심사</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-thumbs-up"></span>포토폴리오</a></li>
					<li class="dropdown pull-right">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-menu-hamburger"></span><span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#myModal" data-toggle="modal" data-targer="#myModal">로그인</a></li>
								<li><a href="#">회원가입</a></li>
								<li><a href="#">아이디/비밀번호 찾기</a></li>
							</ul>
					</ul>
				</div>
					<!-- Modal -->
	<div class="modal" id="myModal" role="dialog">
		
		<div class="modal-dialog">

			<!-- Modal content -->
			<div class="modal-content">
					<div class="ex1">
				<div class="modal-header">
				<center>
				<div class="ex">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span> Login</h4>
				</div>
				</center>
				</div>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="username"><span class="glyphicon glyphicon-user"></span> Username</label>
							<input type="text" class="form-control" id="username" placeholder="Enter email" name="username">
						</div>
						<div class="form-group">
							<label for="pwd"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
							<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
						</div>
						<div class="form-group">
							<label><input type="checkbox" name="remember"> Remember me</label>
						</div>
						
							<button class="btn btn-block ex2"><span class="glyphicon glyphicon-off"></span> Login</button>
					</form>
				</div>
				<div class="modal-footer">
					
					<button type="button" class="btn btn-danger pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
						Not a member?<a href="#">Sign Up</a><br>
						Forgot <a href="#">Password?</a>
					
				</div>
			</div>
		</div>
				
			</div>
			<div class="col-xs-12 col-sm-12 col-md-3">
			<div class="gray">
			<div class="thumbnail" style="background-color:#E1E1E1">
			<img src="one.png" class="img-rounded img-responsive" style="width:100%">
			<div class="caption">
			<p>18331 경기도 화성시 봉담읍 삼천병마로 1182 장안대학교</p>
			</div>
			</div>
			<h3><code><span class="glyphicon glyphicon-tags"></span> Language</code></h3>
			
			<label for="progress">c++</label>
			<div class="progress" id="progress">
				<div class="progress-bar progress-bar-success progress-bar-striped" style="width:40%"></div>
			</div>
			
			<label for="progress">Java</label>
			<div class="progress" id="progress">
				<div class="progress-bar progress-bar-info progress-bar-striped" style="width:50%"></div>
			</div>
			
			<label for="progress">Spring</label>
			<div class="progress" id="progress">
				<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:60%"></div>
			</div>
			
			<label for="progress">English</label>
			<div class="progress" id="progress">
				<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:70%"></div>
			</div>

			<h3><code><span class="glyphicon glyphicon-envelope"></span> Contact</code></h3>
			<form class="form-horizontal">
				<div class="form-group">
					<label class="control-label col-sm-3 col-md-3" for="name">Name:</label>
					<div class="col-sm-9 col-md-9">
						<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label col-sm-3 col-md-3" for="email">Email:</label>
					<div class="col-sm-9 col-md-9">
						<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label col-sm-3 col-md-3" for="comment">내용:</label>
					<div class="col-sm-9 col-md-9">
					<textarea class="form-control" id="comment" rows="5">
					</textarea>
					</div>
				</div>
				<button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span> 연락하기</button>
			</form>
			</div>
			</div>
			
			<div class="col-xs-12 col-sm-12 col-md-9">
				<div class="panel-group" id="accordion">
					<div class="panel panel-info">
						<div class="panel-heading">
							<a data-toggle="collapse" data-parent="#accordion" href="#collapse_list1"><span class="glyphicon glyphicon-education"></span>학력사항</a>
						</div>
						<div id="collapse_list1" class="panel-collapse collapse">
							 <div class="table table-hover">
							 <table class="table table-hover">
							 	<tr>
							 		<td>June 1995</td>
							 		<td>YG Family</td>
							 		<td>Singing Engineering</td>
							 	</tr>
							 	<tr>
							 		<td>June 2000</td>
							 		<td>JYP Production</td>
							 		<td>dancing Engineering</td>
							 	</tr>
							 	<tr>
							 		<td>March 2005</td>
							 		<td>Andromeda University</td>
							 		<td>Business Administration</td>
							 	</tr>
							 	<tr>
							 		<td>June 2012</td>
							 		<td>Avex Production</td>
							 		<td>Business Administration</td>
							 	</tr>
							 </table>
							 </div>
						</div>
					</div>
					<div class="panel panel-info">
						<div class="panel-heading">
							<a data-toggle="collapse" data-parent="#accordion" href="#collapse_list2"><span class="glyphicon glyphicon-globe"></span>경력사항</a>
						</div>
						<div id="collapse_list2" class="panel-collapse collapse">
							<table class="table">
							 	<tr>
							 		<td>2019년 1월 5일 데뷔</td>
							 		<td>RBW Ent</td>
							 		<td>RIGHT-US 발키리</td>
							 	</tr>
							 </table>
						</div>
					</div>
					<div class="panel panel-info">
						<div class="panel-heading">
							<a data-toggle="collapse" data-parent="#accordion" href="#collapse_list3"><span class="glyphicon glyphicon-heart"></span>관심사항</a>
						</div>
						<div id="collapse_list3" class="panel-collapse collapse">
							<table class="table">
							 	<tr>
							 		<td>Vlive</td>
							 		<td>Youtube</td>
							 		<td>Naver</td>
							 	</tr>
							 </table>
						</div>
					</div>
					<div class="panel panel-info">
						<div class="panel-heading">
							<a data-toggle="collapse" data-parent="#accordion" href="#collapse-4"><span class="glyphicon glyphicon-thumbs-up"></span>포토폴리오</a>
						</div>
						<div id="collapse-4" class="panel-collapse collapse">
							<div class="panel-body">
								<div class="row">
									<div class="col-md-3">
										<img src="sh.png">	
									</div>
									<div class="col-md-3">
										<img src="ed.png">	
									</div>
									<div class="col-md-3">
										<img src="hy.jpg">	
									</div>
									<div class="col-md-3">
										<img src="kh.png">	
									</div>
									
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			
		</div>
		
		
	</div>
</body>
</html>