-
Notifications
You must be signed in to change notification settings - Fork 0
/
templates.html
133 lines (126 loc) · 5.05 KB
/
templates.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
<!doctype html>
<html>
<head>
<title>stanier</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css' rel='stylesheet'>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<style>
.clearfix {
height: 60px;
width: 100%;
position: relative;
}
.jumbotron {
background: url('//unsplash.imgix.net/reserve/wPCyys8TPCHY3GXm2N2D_ssp_inthewoods_1.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
}
.divider-right {
border-right: 1px solid #cccccc;
}
ul {
list-style-type: none;
}
.footer {
margin: 50px 0;
display: flex;
text-align: center;
align-items: center;
}
.footer-inner {
margin-left: auto;
margin-right: auto;
}
.footer-inner a {
color: #bbbbbb;
text-decoration: none;
}
.footer-inner a:hover {
color: #a6a6a6;
}
.fa-md {
font-size: 3em;
padding: 5px;
margin: 5px;
}
.label-small {
font-size: 0.5em;
}
.card {
padding: 20px 10px;
margin: 20px;
background: #eeeeee;
}
</style>
</head>
<body>
<div class='navbar navbar-default navbar-fixed-top'>
<div class='container'>
<div class='navbar-header'>
<a class='navbar-brand' href='./index.html'>stanier</a>
</div>
</div>
</div>
<div class='clearfix'></div>
<div class='jumbotron'>
</div>
<div class='container'>
<div class='col-md-2 col-lg-2 hidden-xs divider-right'>
<h3>links</h3>
<ul>
<li><a href='./index.html#about'>about</a>
</li>
<li><a href='./index.html#projects'>projects</a>
</li>
<li><a href='./index.html#resume'>resume</a>
</li>
<li><a href='./templates.html'>templates</a>
</li>
<li><a href='https://github.com/stanier'>github profile</a>
</li>
</ul>
</div>
<div class='col-md-9 col-md-offset-1 col-lg-9 col-lg-offset-1'>
<p>This is just a little collection of HTML5 templates that I've created in my spare time. I plan to make more and continue work on those labeled WIP. All of them are licensed by me under GNU GPL and free (as in beer).</p>
<div id='parallel' class='col-md-12 card'>
<img class='col-md-9' src='./images/parallel_preview.png'>
<div class='col-md-3'>
<h3>Parallel <span class='label label-success label-small'>Complete</span></h3>
<p>Started as an experiment with parallax effects. May update with a more recent private template.</p>
<a href='https://github.com/stanier/parallel/'>GitHub repo</a>
</div>
</div>
<div id='revolt' class='col-md-12 card'>
<img class='col-md-9' src='./images/revolt_preview.png'>
<div class='col-md-3'>
<h3>ReVolt <span class='label label-warning label-small'>Work in Progress</span></h3>
<p>A jean company inspired template. Mostly done to test the functionality of a CSS3-rendered navbar header. Needs a little more development, but works for basic pages.</p>
<a href='https://github.com/stanier/revolt/'>GitHub repo</a>
</div>
</div>
<div id='forward' class='col-md-12 card'>
<img class='col-md-9' src='./images/forward_preview.png'>
<div class='col-md-3'>
<h3>forward <span class='label label-warning label-small'>Work in Progress</span></h3>
<p>This was going to be my github pages layout originally. Very basic, do plan on improving.</p>
<a href='https://github.com/stanier/forward/'>GitHub repo</a>
</div>
</div>
</div>
<div class='footer col-md-12 col-xs-12 col-lg-12'>
<div class='footer-inner'>
<a href='https://github.com/stanier' class='fa fa-github fa-md'></a>
<a href='https://twitter.com/notKeyton' class='fa fa-twitter fa-md'></a>
<a href='mailto://[email protected]' class='fa fa-envelope fa-md'></a>
<br/>
<br/>© Keyton Stanier 2014
</div>
</div>
</div>
</body>
</html>