-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.html
executable file
·221 lines (208 loc) · 11.6 KB
/
post.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<title>CV</title>
<meta name="description" content="some some some">
<meta name="author" content="some">
<meta name="keywords" content="some, some, some">
<!--[if lt IE 9]>
<script src="js/html5shiv/html5shiv.js" type="text/javascript"></script>
<script src="js/html5shiv/html5shiv-printshiv.js" type="text/javascript"></script>
<style type="text/css">.site_nav { border-bottom: 1px solid #d4d4d4; }</style>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fontello/css/-ontello.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/progressbar.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="upbtnwrapp"><div class="upbtn"><span class="icon-up-open-big"></span></div></div>
<!-- NAVIGATION -->
<nav class="site_nav" id="site_nav">
<ul class="">
<li><a href="index.html#about_me">About me</a></li>
<li><a href="index.html#my_expertise">My Expertise</a></li>
<li><a href="index.html#experience">Experience</a></li>
<li><a href="index.html#education">Education</a></li>
<li><a href="index.html#portfolio">Portfolio</a></li>
<li><a href="index.html#blog">My Blog</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav> <!-- /site_nav -->
<div id="aftermenuspace"></div>
<!-- HEADER -->
<header class="site_header centerise borderbtn">
<div id="logoline"><h1>JOHN DOE</h1></div>
<h2>FREELANCE DESIGNER</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius risus ut purus dignissim sed sagittis libero rutrum. </h3>
</header> <!-- /site_header -->
<!-- end HEADER -->
<div class="container-fluid page">
<!-- POST -->
<section class="row-fluid single_post" id="">
<aside class="span3 aside_el">
<h2>AngularJS</h2>
<h5>March 20th, 2013.</h5>
<h5 style="font-style: italic;">3 comments</h5>
</aside>
<article class="span9 borderleft par_el">
<p>Hello, I’m Lorem ipsum dolor sit amet, conseur adipiscing elit puella magna est.</p>
<p><img src="http://i.imgur.com/9p2HLt4.jpg" alt="Picture" /></p>
<p><i>Lava flow meats the ocean</i></p>
<p>Etiam sem eros, interdum at rutrum et, hendrerit id nisi. Etiam iaculis lorem eget arcu gravida lacinia. Fringilla justo ullamcorper ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Raesent sem elit, volutpat id vulputate faucibus, fringilla vel massa. Proin nec mi a mi tincidunt elementum sed vel ipsum.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
<img src="http://placehold.it/125x125/eeeeee/aaaaaa" style="float:right">
<p>Etiam sem eros, interdum at rutrum et, hendrerit id nisi. Etiam iaculis lorem eget arcu gravida lacinia. Fringilla justo ullamcorper ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Raesent sem elit, volutpat id vulputate faucibus, fringilla vel massa. Proin nec mi a mi tincidunt elementum sed vel ipsum.</p>
<h5>Heading perfecte</h5>
<p>Etiam sem eros, interdum at rutrum et, hendrerit id nisi. Etiam iaculis lorem eget arcu gravida lacinia. Fringilla justo ullamcorper ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Raesent sem elit, volutpat id vulputate faucibus, fringilla vel massa. Proin nec mi a mi tincidunt elementum sed vel ipsum.</p>
<div class="postedcomments">
<h3>Posted comments</h3>
<div class="media">
<a class="pull-left" href="#">
<img data-src="holder.js/64x64" class="media-object" alt="64x64" style="width: 64px; height: 64px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABWUlEQVR4nO2VMY7CMBBFuf9RfAMfwL17t67nCkM1aHBIASF5QvziSbtLGD0/T7Q3M/N/5kYL0CgALUCjALQAjQLQAjQKQAvQKAAtQKMAtACNAtACNApAC9AoAC1AowC0AI0C0AI0CkAL0HwlQCnlQe998/kYY/ezK2eeEqDW6q01NzNvrXkpxeecm2fekT1j5ikB5pxeSvExxu4zvfeNbHwvDtl7fxzy05lIgFjDkFnF82FW2bhZM3uKcWTm5QHi5kJiXddY5ZBeZfN7/q2ZyAbEDeXfX631KhuHy38/OvPSAOv7mmXzCmdi1eO78Vzc8JGZlwfIK5lvdC9Uvq1aq9daNz8fmYkEMHt+l9d/V69kY5XXW86HeXcmGuCXUQBagEYBaAEaBaAFaBSAFqBRAFqARgFoARoFoAVoFIAWoFEAWoBGAWgBGgWgBWgUgBagUQBagEYBaAGaO387LYipKEKVAAAAAElFTkSuQmCC">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img data-src="holder.js/64x64" class="media-object" alt="64x64" style="width: 64px; height: 64px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABWUlEQVR4nO2VMY7CMBBFuf9RfAMfwL17t67nCkM1aHBIASF5QvziSbtLGD0/T7Q3M/N/5kYL0CgALUCjALQAjQLQAjQKQAvQKAAtQKMAtACNAtACNApAC9AoAC1AowC0AI0C0AI0CkAL0HwlQCnlQe998/kYY/ezK2eeEqDW6q01NzNvrXkpxeecm2fekT1j5ikB5pxeSvExxu4zvfeNbHwvDtl7fxzy05lIgFjDkFnF82FW2bhZM3uKcWTm5QHi5kJiXddY5ZBeZfN7/q2ZyAbEDeXfX631KhuHy38/OvPSAOv7mmXzCmdi1eO78Vzc8JGZlwfIK5lvdC9Uvq1aq9daNz8fmYkEMHt+l9d/V69kY5XXW86HeXcmGuCXUQBagEYBaAEaBaAFaBSAFqBRAFqARgFoARoFoAVoFIAWoFEAWoBGAWgBGgWgBWgUgBagUQBagEYBaAGaO387LYipKEKVAAAAAElFTkSuQmCC">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<a class="pull-left" href="#">
<img data-src="holder.js/64x64" class="media-object" alt="64x64" style="width: 64px; height: 64px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABWUlEQVR4nO2VMY7CMBBFuf9RfAMfwL17t67nCkM1aHBIASF5QvziSbtLGD0/T7Q3M/N/5kYL0CgALUCjALQAjQLQAjQKQAvQKAAtQKMAtACNAtACNApAC9AoAC1AowC0AI0C0AI0CkAL0HwlQCnlQe998/kYY/ezK2eeEqDW6q01NzNvrXkpxeecm2fekT1j5ikB5pxeSvExxu4zvfeNbHwvDtl7fxzy05lIgFjDkFnF82FW2bhZM3uKcWTm5QHi5kJiXddY5ZBeZfN7/q2ZyAbEDeXfX631KhuHy38/OvPSAOv7mmXzCmdi1eO78Vzc8JGZlwfIK5lvdC9Uvq1aq9daNz8fmYkEMHt+l9d/V69kY5XXW86HeXcmGuCXUQBagEYBaAEaBaAFaBSAFqBRAFqARgFoARoFoAVoFIAWoFEAWoBGAWgBGgWgBWgUgBagUQBagEYBaAGaO387LYipKEKVAAAAAElFTkSuQmCC">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</article>
</section>
<!-- end POST -->
</div> <!-- /page -->
<footer class="row-fluid siteFooter">
<div id="contact">
<aside class="span3 aside_el">
<h2>Comment</h2>
<h5>Leave a Comment</h5>
</aside>
<div class="span9 borderleft">
<form class="comment_form" data-validate="parsley">
<fieldset>
<input type="text" id="form_name" data-required="true" data-trigger="focusin focusout" placeholder="Name">
<input type="text" id="form_email" data-required="true" data-trigger="focusin focusout" data-type="email" placeholder="Email Address">
<textarea rows="8" id="form_message" data-required="true" data-trigger="focusin focusout" placeholder="Message"></textarea>
<div class="send-button pull-right"> <a>Comment Now ! </a> </div>
</fieldset>
</form>
</div>
</div>
</footer>
</div> <!-- /container -->
</div> <!-- /wrapper -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/parsley.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/retina.js"></script>
<script>
$(document).ready(function(){
$('.comment_form input, .comment_form textarea').focus(function () {
$(this).css({"-webkit-box-shadow": "0px 0px 0px rgba(0, 0, 0, 0)", "-moz-box-shadow": "0px 0px 0px rgba(0, 0, 0, 0)", "box-shadow": "0px 0px 0px rgba(0, 0, 0, 0)", "border": "1px solid #999"});
});
$('.comment_form input, .comment_form textarea').blur(function () {
$(this).css({"-webkit-box-shadow": "0px 0px 0px rgba(0, 0, 0, 0)", "-moz-box-shadow": "0px 0px 0px rgba(0, 0, 0, 0)", "box-shadow": "0px 0px 0px rgba(0, 0, 0, 0)", "border": "1px solid #e0e0e0"});
});
});
$(".send-button").click(function () {
if ( $( '.comment_form' ).parsley('validate') ) {
var form_name = $("#form_name").val();
var form_email = $("#form_email").val();
var form_message = $("#form_message").val();
$.post("php/mailer.php", { name : form_name , email : form_email , message : form_message }, function(results){
alert(results);
});
}
});
$(window).on('load resize', function () {
current_width = $(window).width();
if ( current_width < 767 ) {
$("br").hide();
} else {
$("br").show();
}
});
// Cache selectors
if ( $(window).width() > 940 ) {
var lastId,
topMenu = $("#site_nav")
topMenuHeight = topMenu.outerHeight()+40,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
} else {
var lastId,
topMenu = $("#site_nav")
topMenuHeight = topMenu.outerHeight()-140,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if (pos > 55 && current_width > 940) {
$(".site_nav").css({
"position": "fixed",
"top": "0",
"width": "940px",
"margin-bottom": "55px",
});
$("#aftermenuspace").css({
"height": "55px",
});
} else {
$(".site_nav").css({
"position": "relative",
"margin-bottom": "0",
"width": "100%",
});
$("#aftermenuspace").css({
"height": "0",
});
}
if ( pos > 600 ) { $('.upbtn').fadeIn();} else { $('.upbtn').fadeOut(); }
});
$('.upbtn').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
</script>
</body>
</html>