asiaH5/modules/recruitment/candidate_show.html.erb.bk

<style type="text/css">
	#page-wrapper{
		margin-top: 30px;
		width: 100%;
		min-height: 500px;
	}

	#page-wrapper hr{
		border-top: 1px solid #8c8c8c;
	}

	#page-wrapper .content{
		display: inline-block;
		width: 70%;
	}

	#page-wrapper .content .company-info{
		max-height: 200px;
		width: 100%;
	}

	#page-wrapper .content .company-info .avatar-holder{
		display: inline-block;
		margin: 3px;
		margin-top: 5px;
		line-height: 150px;
	}

	#page-wrapper .content .company-info .avatar-holder img{
		width: 150px;
		vertical-align: middle;
	}

	#page-wrapper .content .company-info .company-title{
		display: inline-block;
		width: calc(100% - 215px);
		margin-left: 10px;
		vertical-align: top;
	}

	#page-wrapper .content .company-info .company-title h3{
		margin-bottom: 0px;
	}

	#page-wrapper .content .company-info .company-title .attribs{
		margin-top: 8px;
		color: #8c8c8c;
		max-width: 500px;
	}
	#page-wrapper .content .company-info .company-title .attribs li{
		margin-left: 50px;
	}
	#page-wrapper .content .company-info .company-title .skills{
		margin-top: 10px;
	}

	#page-wrapper .content .block h4{
		color: #545454;
		font-weight: bold;
	}

	#page-wrapper .content .job-info p{
		text-align: justify;
	}

	#page-wrapper .content .block{
		margin-top: 25px;
		margin-bottom: 
	}

	#page-wrapper .overview-wrapper{
		display: inline-block;
		width: 27%;
		margin-left: 20px;
		min-height: 500px;
		vertical-align: top;
	}

	#page-wrapper .overview {
		border: 1px dotted #8c8c8c;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 20px;
	}

	#page-wrapper .overview-wrapper h3{
		text-align: center;
		border-bottom: 1px solid #9c9c9c;
		padding-bottom: 10px;
	}

	#page-wrapper .overview ul{
		list-style: none;
		margin-left: -20px;
		margin-right: 10px;
		margin-top: 15px;
	}

	#page-wrapper .overview > ul li{
		margin-top: 15px;
		border-bottom: 1px dotted #cecece;
		padding-bottom: 10px;
	}
	
	/*#page-wrapper .overview ol ul li{
		border: none !important;
	}*/

	#page-wrapper .overview ul li span{
		color: #545454;
		font-weight: bold;	
	}

	#page-wrapper .overview ul li div span.label{
		color: #fff;
	}

	#page-wrapper .overview ul li div{
		margin-left: 20px;
	}

	#page-wrapper .overview ul li i{
		color: #545454;
		margin-right: 10px;
	}

	#page-wrapper .apply-btn{
		text-align: center;
	}

	#page-wrapper .employee-recommendations ul{
		list-style: none;
		margin-bottom: 20px;
	}

	#page-wrapper .employee-recommendations .email{
		color: #545454;
	}

	#page-wrapper .employee-recommendations .info{
		text-align: justify;
	}

</style>

<div id="page-wrapper">
	<div class="content">
		<div class="company-info">
			<div class="avatar-holder">
				<img src="{{avatar}}" alt="member pic">
			</div>
			<div class="company-title">
				<h3>{{name}}</h3>
				<div class="industry-type">
					{{job-title}} - {{company-name}}
				</div>
				<div class="attribs">
					<span><i class="fa fa-phone" aria-hidden="true"></i> {{phone}}</span>
					<span><i class="fa fa-at" aria-hidden="true"></i> {{email}}</span><br />
					<span><i class="fa fa-globe" aria-hidden="true"></i> <a href="{{website}}" target="_blank">{{website}}</a></span><br />
					<span><i class="fa fa-file-text" aria-hidden="true"></i> <a href="{{resume-url}}" target="_blank">{{resume-text}}</a></span>
				</div>
				<div class="skills" data-list="skills" data-level="0">
					<span class="label label-default">{{skill-name}}</span>
				</div>
			</div>
		</div>
		<hr>
		<div class="job-info" data-list="infos" data-level="0">
			<div class="block">
				<h4 class="sub-heading">{{title}}</h4>
				<p>{{text}}</p>
			</div>
		</div>
		<div class="employee-recommendations block">
			<h4 class="sub-heading">{{recommendation-title}}</h4>
			<ol class="recommendations" data-level="0" data-list="recommendations">
				<li>
					<ul>
						<li><strong>{{name}}</strong></li>
						<li class="email">{{email}}</li>
						<li>{{download-file}}</li>
						<li class="info">{{rec-letter}}</li>
					</ul>
				</li>
			</ol>
		</div>
	</div>
	<div class="overview-wrapper">
		<div class="overview">
			<h3>Overview</h3>
			<ul class="attributes">
				<li>
					<i class="fa fa-map-marker" aria-hidden="true"></i>
					<span>{{location-title}}</span>
					<div>{{location}}</div>
				</li>
				<li>
					<i class="fa fa-line-chart" aria-hidden="true"></i>
					<span>{{experience-title}}</span> 
					<div>{{experience}}</div>
				</li>
				<li>
					<i class="fa fa-genderless" aria-hidden="true"></i>
					<span>{{gender-title}}</span> 
					<div>{{gender}}</div>
				</li> 
				<li>
					<i class="fa fa-heart" aria-hidden="true"></i>
					<span>{{martial-title}}</span>
					<div>{{martial}}</div>
				</li>
				<li>
					<i class="fa fa-language" aria-hidden="true"></i>
					<span>{{language-title}}</span>
					<div>{{language}}</div>
				</li>
					<li>
					<i class="fa fa-clock-o" aria-hidden="true"></i>
					<span>{{workingtime-title}}</span>
					<div>{{workingtime}}</div>
				</li>
			</ul>
		</div>
		<div class="overview">
			<h3>Experience</h3>
			<ol class="experiences" data-level="0" data-list="experiences">
				<li>
					<ul>
						<li><b>{{job-title}}</b> ({{company-name}})</li>
						<li><i>{{period}}</i></li>
						<li>{{responsibilities}}</li>
					</ul>
				</li>
			</ol>
		</div>
		<div class="overview">
			<h3>Academics</h3>
			<ol class="academics" data-level="0" data-list="academics">
				<li>
					<ul>
						<li><b>{{title}}</b></li>
						<li><i>{{period}}</i></li>
						<li>{{note}}</li>
					</ul>
				</li>
			</ol>
		</div>
	</div>

	<a href="#" onclick="window.history.back();return false;" class="btn btn-warning" >Back</a>
</div>