Skip to content

Commit 73a197d

Browse files
csadevcsadev
committedApr 5, 2018
template aerial
1 parent 567112a commit 73a197d

18 files changed

+1470
-882
lines changed
 

Diff for: ‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
html5up-identity.zip
1+
html5up-identity.zip
2+
html5up-aerial.zip

Diff for: ‎README.txt

+47-9
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,68 @@
1-
Identity by HTML5 UP
1+
Aerial by HTML5 UP
22
html5up.net | @ajlkn
33
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
44

55

6-
Just a fun little profile/card-style template I whipped up during a break between major
7-
projects. Minimal, responsive, and powered by Skel + Sass. Enjoy :)
6+
This is Aerial, a single page, single screen responsive site template. Real simple.
7+
Makes heavy use of CSS animation (something I've been messing with a lot lately).
8+
Should work well as a landing page that just directs folks to your stuff elsewhere
9+
on the www. Sass sources are also included, so if you've never used Sass and you're
10+
interested in giving it a try, head on over to sass-lang.com (and if not, you can
11+
safely delete the "sass/" folder).
812

9-
Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
10-
you can use for pretty much whatever.
13+
The scrolling mountainous background was derived from "Icefields" by Ryan Schroeder,
14+
a talented photographer from Vancouver who graciously released it on Unsplash under
15+
the CC0 license. Be sure to check out his other stuff over at flickr (link below)
16+
as well as all the other kickass CC0-licensed images at Unsplash (unsplash.com).
1117

12-
(* = not included)
18+
Questions/comments/issues = just email or find me on Twitter. Have fun!
1319

1420
AJ
1521
aj@lkn.io | @ajlkn
1622

1723

24+
The Scrolling Background:
25+
26+
This relies entirely on CSS to do its thing, which is cool, but that makes
27+
changing it a bit weird/tricky at first. You can still use pretty much any image
28+
you want, but for best results make sure yours is:
29+
30+
- Horizontally tileable.
31+
- Wide and short.
32+
- About 1500px wide.
33+
- Fades to a solid color either at the top of bottom (which is used to fill
34+
the empty space above or below your image).
35+
36+
Now, there are two ways to use it: with CSS, or with Sass:
37+
38+
CSS:
39+
40+
Look for this line in css/style.css (line 108 as of this writing):
41+
42+
background: #348cb2 url("images/bg.jpg") bottom left;
43+
44+
and use it to set the page background color, URL, and placement of
45+
your image. It should be as close to 1500px wide as you can get it.
46+
47+
Sass:
48+
49+
Set the value of $bg to the page background color, URL, and placement
50+
of your image. Change $bg-width if your image is something other than
51+
1500px wide.
52+
53+
1854
Credits:
1955

20-
Demo Images:
21-
Unsplash (unsplash.com)
56+
Background Image:
57+
Ryan Schroeder via Unsplash (unsplash.com - CC0 licensed)
58+
"Icefields" (flickr.com/photos/ryanschroeder/11876741703)
2259

2360
Icons:
2461
Font Awesome (fortawesome.github.com/Font-Awesome)
2562

2663
Other:
2764
html5shiv.js (@afarkas @jdalton @jon_neal @rem)
28-
CSS3 Pie (css3pie.com)
65+
CSS3 PIE (css3pie.com)
66+
Sass (sass-lang.com)
2967
Respond.js (j.mp/respondjs)
3068
Skel (skel.io)

Diff for: ‎assets/css/ie8.css

+13-23
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,26 @@
11
/*
2-
Identity by HTML5 UP
2+
Aerial by HTML5 UP
33
html5up.net | @ajlkn
44
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
55
*/
66

7-
/* List */
7+
/* Header */
88

9-
ul.icons li a {
10-
-ms-behavior: url("assets/js/PIE.htc");
9+
#header nav a {
10+
position: relative;
11+
border: solid 1px #fff;
12+
border-radius: 100%;
13+
-ms-behavior: url("assets/js/ie/PIE.htc");
1114
}
1215

13-
ul.icons li a:before {
14-
text-align: center;
15-
font-size: 26px;
16-
}
17-
18-
/* Main */
19-
20-
#main {
21-
-ms-behavior: url("assets/js/PIE.htc");
22-
}
23-
24-
#main .avatar img {
25-
-ms-behavior: url("assets/js/PIE.htc");
16+
#header nav a:before {
17+
border: 0;
2618
}
2719

2820
/* Footer */
2921

3022
#footer {
31-
color: #fff;
32-
}
33-
34-
#footer .copyright li {
35-
border-left: solid 1px #fff;
36-
}
23+
background-image: url("images/ie/footer.png");
24+
background-position: bottom left;
25+
background-repeat: repeat-x;
26+
}

Diff for: ‎assets/css/ie9.css

+17-25
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,33 @@
11
/*
2-
Identity by HTML5 UP
2+
Aerial by HTML5 UP
33
html5up.net | @ajlkn
44
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
55
*/
66

7-
/* Basic */
7+
/* Wrapper */
88

9-
body {
10-
background-image: url("../../images/bg.jpg");
11-
background-repeat: no-repeat;
12-
background-size: cover;
13-
background-position: bottom center;
14-
background-attachment: fixed;
9+
#wrapper {
10+
opacity: 1;
1511
}
1612

17-
body:after {
18-
display: none;
19-
}
20-
21-
/* List */
22-
23-
ul.icons li a:before {
24-
color: #c8cccf;
25-
}
13+
/* Overlay */
2614

27-
ul.icons li a:hover:before {
28-
color: #ff7496;
15+
#overlay {
16+
opacity: 1;
2917
}
3018

31-
/* Wrapper */
19+
/* Header */
3220

33-
#wrapper {
34-
text-align: center;
21+
#header {
22+
opacity: 1;
3523
}
3624

37-
/* Main */
25+
#header nav li {
26+
opacity: 1;
27+
}
28+
29+
/* Footer */
3830

39-
#main {
40-
display: inline-block;
31+
#footer {
32+
background-image: url("images/ie/footer.svg");
4133
}

Diff for: ‎assets/css/images/bg.jpg

232 KB
Loading

Diff for: ‎assets/css/images/ie/footer.png

424 Bytes
Loading

Diff for: ‎assets/css/images/ie/footer.svg

+9
Loading

Diff for: ‎assets/css/images/overlay-pattern.png

13.6 KB
Loading

Diff for: ‎assets/css/images/overlay.svg

+27
Loading

Diff for: ‎assets/css/main.css

+815-630
Large diffs are not rendered by default.

Diff for: ‎assets/js/ie/PIE.htc

+96
Large diffs are not rendered by default.

Diff for: ‎assets/js/ie/html5shiv.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎assets/js/ie/respond.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎assets/sass/ie8.scss

+14-30
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,32 @@
44
@import 'libs/skel';
55

66
/*
7-
Identity by HTML5 UP
7+
Aerial by HTML5 UP
88
html5up.net | @ajlkn
99
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
1010
*/
1111

12-
/* List */
12+
/* Header */
1313

14-
ul {
15-
&.icons {
16-
li {
17-
a {
18-
-ms-behavior: url('assets/js/PIE.htc');
14+
#header {
15+
nav {
16+
a {
17+
position: relative;
18+
border: solid 1px _palette(fg);
19+
border-radius: 100%;
20+
-ms-behavior: url('assets/js/ie/PIE.htc');
1921

20-
&:before {
21-
text-align: center;
22-
font-size: 26px;
23-
}
22+
&:before {
23+
border: 0;
2424
}
2525
}
2626
}
2727
}
2828

29-
/* Main */
30-
31-
#main {
32-
-ms-behavior: url('assets/js/PIE.htc');
33-
34-
.avatar {
35-
img {
36-
-ms-behavior: url('assets/js/PIE.htc');
37-
}
38-
}
39-
}
40-
4129
/* Footer */
4230

4331
#footer {
44-
color: #fff;
45-
46-
.copyright {
47-
li {
48-
border-left: solid 1px #fff;
49-
}
50-
}
32+
background-image: url('images/ie/footer.png');
33+
background-position: bottom left;
34+
background-repeat: repeat-x;
5135
}

Diff for: ‎assets/sass/ie9.scss

+18-34
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,37 @@
44
@import 'libs/skel';
55

66
/*
7-
Identity by HTML5 UP
7+
Aerial by HTML5 UP
88
html5up.net | @ajlkn
99
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
1010
*/
1111

12-
/* Basic */
12+
/* Wrapper */
13+
14+
#wrapper {
15+
opacity: 1;
16+
}
1317

14-
body {
15-
background-image: url('../../images/bg.jpg');
16-
background-repeat: no-repeat;
17-
background-size: cover;
18-
background-position: bottom center;
19-
background-attachment: fixed;
18+
/* Overlay */
2019

21-
&:after {
22-
display: none;
23-
}
20+
#overlay {
21+
opacity: 1;
2422
}
2523

26-
/* List */
24+
/* Header */
25+
26+
#header {
27+
opacity: 1;
2728

28-
ul {
29-
&.icons {
29+
nav {
3030
li {
31-
a {
32-
&:before {
33-
color: _palette(border);
34-
}
35-
36-
&:hover {
37-
&:before {
38-
color: _palette(highlight);
39-
}
40-
}
41-
}
31+
opacity: 1;
4232
}
4333
}
4434
}
4535

46-
/* Wrapper */
47-
48-
#wrapper {
49-
text-align: center;
50-
}
51-
52-
/* Main */
36+
/* Footer */
5337

54-
#main {
55-
display: inline-block;
38+
#footer {
39+
background-image: url('images/ie/footer.svg');
5640
}

Diff for: ‎assets/sass/libs/_vars.scss

+18-21
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
// Misc.
22
$misc: (
3-
z-index-base: 10000
3+
bg: #348cb2 url("images/bg.jpg") bottom left,
4+
bg-width: 1500px
45
);
56

67
// Duration.
78
$duration: (
8-
transition: 0.2s,
9-
bg: 1.75s,
10-
main: 1s
9+
bg: 60s,
10+
wrapper: 3s,
11+
overlay: 1.5s,
12+
header: 1s,
13+
nav-icons: 0.5s
1114
);
1215

1316
// Size.
1417
$size: (
15-
border-radius: 4px,
16-
border-width: 1px,
17-
element-height: 2.75em,
18-
element-margin: 1.5em,
19-
letter-spacing: 0.2em
18+
nav-icon-wrapper: 5.35em,
19+
nav-icon: 1.75em
2020
);
2121

2222
// Font.
2323
$font: (
24-
family: ('Source Sans Pro', Helvetica, sans-serif),
25-
family-fixed: ('Courier New', monospace),
26-
weight: 300
2724
);
2825

2926
// Palette.
3027
$palette: (
31-
bg: #ffffff,
32-
bg-alt: #e1dfe8,
33-
fg: #414f57,
34-
fg-bold: #313f47,
35-
fg-light: #616f77,
36-
border: #c8cccf,
37-
accent1: #ffa596,
38-
accent2: #00e4ff,
39-
highlight: #ff7496
28+
bg: #fff,
29+
fg: #fff,
30+
31+
nav-icon: (
32+
hover-bg: rgba(255,255,255,0.175),
33+
hover-fg: #fff,
34+
active-bg: rgba(255,255,255,0.35),
35+
active-fg: #fff
36+
)
4037
);

Diff for: ‎assets/sass/main.scss

+350-36
Large diffs are not rendered by default.

Diff for: ‎index.html

+30-73
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,52 @@
11
<!DOCTYPE HTML>
22
<!--
3-
Identity by HTML5 UP
3+
Aerial by HTML5 UP
44
html5up.net | @ajlkn
55
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
66
-->
77
<html>
88
<head>
9-
<title>Identity by HTML5 UP</title>
9+
<title>Aerial by HTML5 UP</title>
1010
<meta charset="utf-8" />
1111
<meta name="viewport" content="width=device-width, initial-scale=1" />
12-
<!--[if lte IE 8]><script src="assets/js/html5shiv.js"></script><![endif]-->
12+
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
1313
<link rel="stylesheet" href="assets/css/main.css" />
14-
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
1514
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
16-
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
15+
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
1716
</head>
18-
<body class="is-loading">
19-
20-
<!-- Wrapper -->
21-
<div id="wrapper">
17+
<body class="loading">
18+
<div id="wrapper">
19+
<div id="bg"></div>
20+
<div id="overlay"></div>
21+
<div id="main">
2222

23-
<!-- Main -->
24-
<section id="main">
25-
<header>
26-
<span class="avatar"><img src="images/avatar.jpg" alt="" /></span>
27-
<h1>Jane Doe</h1>
28-
<p>Senior Psychonautics Engineer</p>
29-
</header>
30-
<!--
31-
<hr />
32-
<h2>Extra Stuff!</h2>
33-
<form method="post" action="#">
34-
<div class="field">
35-
<input type="text" name="name" id="name" placeholder="Name" />
36-
</div>
37-
<div class="field">
38-
<input type="email" name="email" id="email" placeholder="Email" />
39-
</div>
40-
<div class="field">
41-
<div class="select-wrapper">
42-
<select name="department" id="department">
43-
<option value="">Department</option>
44-
<option value="sales">Sales</option>
45-
<option value="tech">Tech Support</option>
46-
<option value="null">/dev/null</option>
47-
</select>
48-
</div>
49-
</div>
50-
<div class="field">
51-
<textarea name="message" id="message" placeholder="Message" rows="4"></textarea>
52-
</div>
53-
<div class="field">
54-
<input type="checkbox" id="human" name="human" /><label for="human">I'm a human</label>
55-
</div>
56-
<div class="field">
57-
<label>But are you a robot?</label>
58-
<input type="radio" id="robot_yes" name="robot" /><label for="robot_yes">Yes</label>
59-
<input type="radio" id="robot_no" name="robot" /><label for="robot_no">No</label>
60-
</div>
61-
<ul class="actions">
62-
<li><a href="#" class="button">Get Started</a></li>
23+
<!-- Header -->
24+
<header id="header">
25+
<h1>Adam Jensen</h1>
26+
<p>Security Chief &nbsp;&bull;&nbsp; Cyborg &nbsp;&bull;&nbsp; Never asked for this</p>
27+
<nav>
28+
<ul>
29+
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
30+
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
31+
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
32+
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
33+
<li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
6334
</ul>
64-
</form>
65-
<hr />
66-
-->
67-
<footer>
68-
<ul class="icons">
69-
<li><a href="#" class="fa-twitter">Twitter</a></li>
70-
<li><a href="#" class="fa-instagram">Instagram</a></li>
71-
<li><a href="#" class="fa-facebook">Facebook</a></li>
72-
</ul>
73-
</footer>
74-
</section>
35+
</nav>
36+
</header>
7537

7638
<!-- Footer -->
7739
<footer id="footer">
78-
<ul class="copyright">
79-
<li>&copy; Jane Doe</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
80-
</ul>
40+
<span class="copyright">&copy; Untitled. Design: <a href="http://html5up.net">HTML5 UP</a>.</span>
8141
</footer>
8242

8343
</div>
84-
85-
<!-- Scripts -->
86-
<!--[if lte IE 8]><script src="assets/js/respond.min.js"></script><![endif]-->
87-
<script>
88-
if ('addEventListener' in window) {
89-
window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
90-
document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
91-
}
92-
</script>
93-
44+
</div>
45+
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
46+
<script>
47+
window.onload = function() { document.body.className = ''; }
48+
window.ontouchmove = function() { return false; }
49+
window.onorientationchange = function() { document.body.scrollTop = 0; }
50+
</script>
9451
</body>
9552
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.