asiaH5/modules/recruitment/exchanges.html.erb

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

	#page-wrapper .job-title span.label{
		font-size: 12px;
		font-weight: 100;;
	}

	#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 .posted-time{
		margin-top: 8px;
		color: #8c8c8c;
	}

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

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

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

	#page-wrapper .overview{
		display: inline-block;
		border: 1px dotted #8c8c8c;
		width: 27%;
		margin-left: 20px;
		min-height: 500px;
		vertical-align: top;
		border-radius: 5px;
		padding: 10px;
	}

	#page-wrapper .overview 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 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;
	}


</style>

<div id="page-wrapper">
	<div class="job-title">
		<h3>
			{{job-title}}
			<span class="pull-right">{{post-type}}</span>
		</h3>
	</div>
	<hr>
	<div class="content">
		<div class="company-info">
			<div class="avatar-holder">
				<img src="{{avatar}}" alt="company logo">
			</div>
			<div class="company-title">
				<h3>{{company-name}}</h3>
				<div class="industry-type">
					{{industry}}
				</div>
				<div class="posted-time">
					<span date-format="%d %B %Y"><i class="fa fa-clock-o" aria-hidden="true"></i> {{post-date}}</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>
	<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-tachometer" aria-hidden="true"></i>
				<span>{{min-credit-title}}</span>
				<div>{{min-credit}}</div>
			</li>
			<li>
				<i class="fa fa-history" aria-hidden="true"></i>
				<span>{{exchange-duration-title}}</span>
				<div>{{internship-duration}}</div>
			</li>
			<li>
				<i class="fa fa-calendar" aria-hidden="true"></i>
				<span>{{exchange-start-title}}</span>
				<div date-format="%d %B %Y">{{exchange-start}}</div>
			</li>
			<li>
				<i class="fa fa-graduation-cap" aria-hidden="true"></i>
				<span>{{min-qualification-title}}</span> 
				<div>{{min-qualification}}</div>
			</li>
			<li>
				<i class="fa fa-certificate" aria-hidden="true"></i> 
				<span>{{qualification-title}}</span> 
				<div>{{qualification}}</div>
			</li>
			<li>
				<i class="fa fa-language" aria-hidden="true"></i>
				<span>{{language-title}}</span>
				<div>{{language}}</div>
			</li>
		</ul>
		<div class="apply-btn" data-jobid="{{job-id}}" data-jobtitle="{{job-title}}">
			{{apply-btn}}
		</div>
	</div>

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