<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="../../js/jquery-1.9.1.min.js"></script>
		<script src="../../js/jquery.i18n.properties.js"></script>
		<script src="../../assets/js/language.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../../assets/plugin/zeroModal/css/normalize.css" />
		<script src="../../js/jspdf.umd.js"></script>
		<script  src="../../js//html2canvas.js"></script>

		
		<style type="text/css">
			body{
				font-family: Avenir-Black;
			}
			.top{
						   padding:10px 50px 0px 50px;
						   border-bottom: 1px solid #e8e8e8;
						   display: flex;
						   flex-flow: row nowrap;
						   justify-content: space-between;
						   align-items: center;
						   height: 80px;
			}
			
			.top-item{
						   padding:0px 20px;
						   line-height: 70px;
						   font-weight: bold;
						   cursor: pointer;
			}
			.top-item-active{
						   border-bottom: 3px solid #f83d5a;
						   color: #f83d5a;
			}
			.us-name-item{
						   width:160px;
			}
			.contact-dtl{
				padding:20px 20px 5px 20px;
				display: flex;
				flex-flow:column nowrap;
				justify-content: flex-start;
				align-items: flex-start;
				background-color: #eff1f4;
				border-radius: 10px;
				
			}
			.contact-dtl .item-icon{
				margin-right: 10px;
				font-weight: bold;
				font-size:14px;
			}
			
			.contact-dtl .dtl-item{
				font-weight: bold;
				color:#444;
				margin-bottom: 5px;
			}
			
		</style>
	</head>
	<body>
		
		<div id="head" ></div>
		<script>
			$(function() {
				$("#head").load("../head.html",function(){
					$("#common-navbar-head .active").removeClass("active")
					$("#common-navbar-head .head_li_user").addClass("active")
				});
			})
		</script>
		<main class="jpmain" style="margin-top:85px;margin-bottom: 0px;">
		<div class="container-fluid" style="padding:0;">
			
			<div class="row" style="margin:0px;">
				<!-- <div class="col-md-5" style="padding: 0px;">
					<img src="../../assets/img/wedloveto.png" style="width:100%;height:calc(100vh - 85px)">
				</div> -->
				<div  id="print" class="col-md-6 col-md-offset-3" style="padding: 0px 60px;box-sizing: border-box;min-width: 800px;">
					<img  id="logo" src="../../assets/img/contact_icon.png" style="width: 85px;
								    height: 85px;margin-top:80px;">
					<p id="companyName" style="font-size: 18px; margin:30px 0px 20px 0px;">Helen studio CHINA | interior</p>
					<p  id="introduction" style="margin:20px 0px;font-size: 16px;color:#999;">
						It is a long established fact that a readerwill be distracted by the readable content of a page when looking at its layout.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
					</p>
					<p style="font-size:16px;font-weight: bold;margin:25px 0px;" id="Disciplines" >Interior design/Lighting(室内设计/照明)</p>
					<div class="contact-dtl">
						
						
					</div>
					
				
				</div>
				<div  class="col-md-6 col-md-offset-3" style="padding: 0px 60px;box-sizing: border-box;min-width: 600px;">
					<button type="button" class="btn btn-default" id="down" style="height: 42px;background-color: #000000;color: #fff;padding:0px 30px;margin:20px;float:right;">
						<img src="../../assets/img/down_load.png" style="height:30px;margin-right:10px;" > <span  class="i18n-text" i18n="landingpage_Download portoflio"></span>
					</button>
				</div>
			</div>
		</div>
		</div>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../assets/plugin/template-web.js"></script>
		<script src="../../assets/js/company_contact.js"></script>
		<script id="list-contacts" type="text/html">
			{{each  contacts  contact index}}
				<p class="dtl-item"><span class="glyphicon glyphicon-user item-icon" aria-hidden="true">&nbsp;<span>Name:</span>&nbsp;{{contact.personName}}</span></p>
				<div>
					<p class="dtl-item" style="float:left;"><span class="glyphicon glyphicon-education item-icon">&nbsp;<span>Title:</span>&nbsp;{{contact.title}}</span></p>
					<p class="dtl-item" style="margin-left:300px;"><span class="glyphicon glyphicon-globe item-icon">&nbsp;<span>Region:</span>&nbsp;{{contact.region}}</span></p>
				</div>
				<div>
					<p class="dtl-item" style="float:left;"><span class="glyphicon glyphicon-earphone item-icon">&nbsp;<span>Phone:</span>&nbsp;{{contact.contactNumberSelect}}&nbsp;{{contact.contactNumber}}</span></p>
					<p class="dtl-item" style="margin-left:300px;"><span class="glyphicon glyphicon-envelope item-icon">&nbsp;<span>Emai:</span>&nbsp;{{contact.contactEmail}}</span></p>
				</div>
				<p></p>
			{{ /each }}
		</script>
	</body>
</html>
