Damephena/casual.html Secret

## casual.html
<!DOCTYPE html>
<html>
<head>
<title>{{ resume.first_name }} - Curriculum Vitae</title>

<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The Curriculum Vitae of {{ resume.first_name }}."/>
<meta charset="UTF-8">

<!-- <link type="text/css" rel="stylesheet" href="style.css"> -->
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Lato:400,300' rel='stylesheet' type='text/css'>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<style>
	html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	border:0;
	font:inherit;
	font-size:100%;
	margin:0;
	padding:0;
	vertical-align:baseline;
	}

	{% comment %} @media print{
		@page {
			size: landscape;
			margin: 2px;
			}} {% endcomment %}
	@page{
		height: 100%
	}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}

html, body {background: #181818; font-family: 'Lato', helvetica, arial, sans-serif; font-size: 16px; color: #222;}

.clear {clear: both;}

p {
	font-size: 1em;
	line-height: 1.4em;
	margin-bottom: 20px;
	color: #444;
}

#cv {
	width: 100%;
	height: 100%;
	max-width: 800px;
	background: #f3f3f3;
	{% comment %} margin: 3px auto; {% endcomment %}
}

.mainDetails {
	padding: 25px 35px;
	border-bottom: 2px solid #cf8a05;
	background: #ededed;
}

#name h1 {
	font-size: 2.5em;
	font-weight: 700;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	margin-bottom: -6px;
}

#name h2 {
	font-size: 2em;
	margin-left: 2px;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}

#mainArea {
	padding: 0 40px;
}

#headshot {
	width: 12.5%;
	float: left;
	margin-right: 30px;
}

#headshot img {
	width: 100%;
	height: auto;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

#name {
	float: left;
}

#contactDetails {
	float: right;
}

#contactDetails ul {
	list-style-type: none;
	font-size: 0.9em;
	margin-top: 2px;
}

#contactDetails ul li {
	margin-bottom: 3px;
	color: #444;
}

#contactDetails ul li a, a[href^=tel] {
	color: #444;
	text-decoration: none;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

#contactDetails ul li a:hover {
	color: #cf8a05;
}


section {
	border-top: 1px solid #dedede;
	padding: 20px 0 0;
}

section:first-child {
	border-top: 0;
}

section:last-child {
	padding: 20px 0 10px;
}

.sectionTitle {
	float: left;
	width: 25%;
}

.sectionContent {
	float: right;
	width: 72.5%;
}

.sectionTitle h1 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 1.5em;
	color: #cf8a05;
}

.sectionContent h2 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	margin-bottom: -2px;
}

.subDetails {
	font-size: 0.8em;
	font-style: italic;
	margin-bottom: 3px;
}

.keySkills {
	list-style-type: none;
	-moz-column-count:3;
	-webkit-column-count:3;
	column-count:3;
	margin-bottom: 20px;
	font-size: 1em;
	color: #444;
}

.keySkills ul li {
	margin-bottom: 3px;
}

</style>
<body id="top">
<div id="cv" class="instaFade">
	<div class="mainDetails">

		<div id="name">
			<h1 class="quickFade delayTwo">{{ resume.first_name }} {{ resume.last_name }}</h1>
			<h2 class="quickFade delayThree">{{ resume.job_title }}</h2>
		</div>

		<div id="contactDetails" class="quickFade delayFour">
			<ul>
				<li>e: <a href="mailto:{{ resume.email }}" target="_blank">{{ resume.email }}</a></li>
				{% comment %} <li>w: <a href="http://www.bloggs.com">www.bloggs.com</a></li> {% endcomment %}
                <li>{{ profile.phone_number }}</li>
                {% for weblink in web_links %}
                <li>w: <a href={{ weblink.link }}>{{ weblink.name }}</a></li>
                {% endfor %}

			</ul>
		</div>
		<div class="clear"></div>
	</div>

	<div id="mainArea" class="quickFade delayFive">
		<section>
			<article>
				<div class="sectionTitle">
					<h1>Personal Profile</h1>
				</div>

				<div class="sectionContent">
					<p>{{ resume.professional_summary }}</p>
				</div>
			</article>
			<div class="clear"></div>
		</section>

		{% if employment_history %}
		<section>
			<div class="sectionTitle">
				<h1>Work Experience</h1>
			</div>

			<div class="sectionContent">
			{% for exp in employment_history %}
				<article>
					<h2>{{ exp.role_title }} at {{ exp.employer }}</h2>
					<p class="subDetails">{{ exp.start_date }} - {{ exp.end_date }}</p>
					<p>{{ exp.description }}</p>
				</article>
			{% endfor %}
			</div>
			<div class="clear"></div>
		</section>
		{% endif %}

		{% if skills %}
		<section>
			<div class="sectionTitle">
				<h1>Key Skills</h1>
			</div>

			<div class="sectionContent">
				<ul class="keySkills">
					{% for sk in skills %}
					<li>{{ sk.skill }}</li>
					{% endfor %}
				</ul>
			</div>
			<div class="clear"></div>
		</section>
		{% endif %}

		{% if education_history %}
		<section>
			<div class="sectionTitle">
				<h1>Education</h1>
			</div>

			<div class="sectionContent">
			{% for edu in education_history %}
				<article>
					<h2>{{ edu.school}}, {{ edu.city }}</h2>
					<p class="subDetails">{{ edu.degree }}, {{ edu.start_date }} - {{ edu.end_date }}</p>
					<p>{{ edu.description }}</p>
				</article>
			{% endfor %}
			</div>
			<div class="clear"></div>
		</section>
		{% endif %}


        {% if qualifications %}
		<section>
			<div class="sectionTitle">
				<h1>Qualifications</h1>
			</div>

			<div class="sectionContent">
			{% for qualification in qualifications %}
				<article>
					<h2>{{ qualification.institution}}</h2>
					<p class="subDetails">{{ qualification.course }}, {{ qualification.start_date }} - {{ qualification.end_date }}</p>
				</article>
			{% endfor %}
			</div>
			<div class="clear"></div>
		</section>
		{% endif %}

        {% if references %}
		<section>
			<div class="sectionTitle">
				<h1>References</h1>
			</div>

			<div class="sectionContent">
			{% for reference in references %}
				<article>
					<h2>{{ reference.company}}</h2>
					<p class="subDetails">{{ reference.reference_full_name }}, <a href="mailto:{{ reference.email }}" target="_blank">{{ reference.email }}</a></p>
				</article>
			{% endfor %}
			</div>
			<div class="clear"></div>
		</section>
		{% endif %}
	</div>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>{{ resume.first_name }} - Curriculum Vitae</title>

	<meta name="viewport" content="width=device-width"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="The Curriculum Vitae of {{ resume.first_name }}."/>
	<meta charset="UTF-8">

	<!-- <link type="text/css" rel="stylesheet" href="style.css"> -->
	<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700\|Lato:400,300' rel='stylesheet' type='text/css'>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
	<style>
	html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	border:0;
	font:inherit;
	font-size:100%;
	margin:0;
	padding:0;
	vertical-align:baseline;
	}

	{% comment %} @media print{
	@page {
	size: landscape;
	margin: 2px;
	}} {% endcomment %}
	@page{
	height: 100%
	}
	article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
	}

	html, body {background: #181818; font-family: 'Lato', helvetica, arial, sans-serif; font-size: 16px; color: #222;}

	.clear {clear: both;}

	p {
	font-size: 1em;
	line-height: 1.4em;
	margin-bottom: 20px;
	color: #444;
	}

	#cv {
	width: 100%;
	height: 100%;
	max-width: 800px;
	background: #f3f3f3;
	{% comment %} margin: 3px auto; {% endcomment %}
	}

	.mainDetails {
	padding: 25px 35px;
	border-bottom: 2px solid #cf8a05;
	background: #ededed;
	}

	#name h1 {
	font-size: 2.5em;
	font-weight: 700;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	margin-bottom: -6px;
	}

	#name h2 {
	font-size: 2em;
	margin-left: 2px;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	}

	#mainArea {
	padding: 0 40px;
	}

	#headshot {
	width: 12.5%;
	float: left;
	margin-right: 30px;
	}

	#headshot img {
	width: 100%;
	height: auto;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	}

	#name {
	float: left;
	}

	#contactDetails {
	float: right;
	}

	#contactDetails ul {
	list-style-type: none;
	font-size: 0.9em;
	margin-top: 2px;
	}

	#contactDetails ul li {
	margin-bottom: 3px;
	color: #444;
	}

	#contactDetails ul li a, a[href^=tel] {
	color: #444;
	text-decoration: none;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
	}

	#contactDetails ul li a:hover {
	color: #cf8a05;
	}


	section {
	border-top: 1px solid #dedede;
	padding: 20px 0 0;
	}

	section:first-child {
	border-top: 0;
	}

	section:last-child {
	padding: 20px 0 10px;
	}

	.sectionTitle {
	float: left;
	width: 25%;
	}

	.sectionContent {
	float: right;
	width: 72.5%;
	}

	.sectionTitle h1 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 1.5em;
	color: #cf8a05;
	}

	.sectionContent h2 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	margin-bottom: -2px;
	}

	.subDetails {
	font-size: 0.8em;
	font-style: italic;
	margin-bottom: 3px;
	}

	.keySkills {
	list-style-type: none;
	-moz-column-count:3;
	-webkit-column-count:3;
	column-count:3;
	margin-bottom: 20px;
	font-size: 1em;
	color: #444;
	}

	.keySkills ul li {
	margin-bottom: 3px;
	}

	</style>
	<body id="top">
	<div id="cv" class="instaFade">
	<div class="mainDetails">

	<div id="name">
	<h1 class="quickFade delayTwo">{{ resume.first_name }} {{ resume.last_name }}</h1>
	<h2 class="quickFade delayThree">{{ resume.job_title }}</h2>
	</div>

	<div id="contactDetails" class="quickFade delayFour">
	<ul>
	<li>e: <a href="mailto:{{ resume.email }}" target="_blank">{{ resume.email }}</a></li>
	{% comment %} <li>w: <a href="http://www.bloggs.com">www.bloggs.com</a></li> {% endcomment %}
	<li>{{ profile.phone_number }}</li>
	{% for weblink in web_links %}
	<li>w: <a href={{ weblink.link }}>{{ weblink.name }}</a></li>
	{% endfor %}

	</ul>
	</div>
	<div class="clear"></div>
	</div>

	<div id="mainArea" class="quickFade delayFive">
	<section>
	<article>
	<div class="sectionTitle">
	<h1>Personal Profile</h1>
	</div>

	<div class="sectionContent">
	<p>{{ resume.professional_summary }}</p>
	</div>
	</article>
	<div class="clear"></div>
	</section>

	{% if employment_history %}
	<section>
	<div class="sectionTitle">
	<h1>Work Experience</h1>
	</div>

	<div class="sectionContent">
	{% for exp in employment_history %}
	<article>
	<h2>{{ exp.role_title }} at {{ exp.employer }}</h2>
	<p class="subDetails">{{ exp.start_date }} - {{ exp.end_date }}</p>
	<p>{{ exp.description }}</p>
	</article>
	{% endfor %}
	</div>
	<div class="clear"></div>
	</section>
	{% endif %}

	{% if skills %}
	<section>
	<div class="sectionTitle">
	<h1>Key Skills</h1>
	</div>

	<div class="sectionContent">
	<ul class="keySkills">
	{% for sk in skills %}
	<li>{{ sk.skill }}</li>
	{% endfor %}
	</ul>
	</div>
	<div class="clear"></div>
	</section>
	{% endif %}

	{% if education_history %}
	<section>
	<div class="sectionTitle">
	<h1>Education</h1>
	</div>

	<div class="sectionContent">
	{% for edu in education_history %}
	<article>
	<h2>{{ edu.school}}, {{ edu.city }}</h2>
	<p class="subDetails">{{ edu.degree }}, {{ edu.start_date }} - {{ edu.end_date }}</p>
	<p>{{ edu.description }}</p>
	</article>
	{% endfor %}
	</div>
	<div class="clear"></div>
	</section>
	{% endif %}


	{% if qualifications %}
	<section>
	<div class="sectionTitle">
	<h1>Qualifications</h1>
	</div>

	<div class="sectionContent">
	{% for qualification in qualifications %}
	<article>
	<h2>{{ qualification.institution}}</h2>
	<p class="subDetails">{{ qualification.course }}, {{ qualification.start_date }} - {{ qualification.end_date }}</p>
	</article>
	{% endfor %}
	</div>
	<div class="clear"></div>
	</section>
	{% endif %}

	{% if references %}
	<section>
	<div class="sectionTitle">
	<h1>References</h1>
	</div>

	<div class="sectionContent">
	{% for reference in references %}
	<article>
	<h2>{{ reference.company}}</h2>
	<p class="subDetails">{{ reference.reference_full_name }}, <a href="mailto:{{ reference.email }}" target="_blank">{{ reference.email }}</a></p>
	</article>
	{% endfor %}
	</div>
	<div class="clear"></div>
	</section>
	{% endif %}
	</div>
	</div>

	</body>
	</html>