├── README.md
├── css
└── style.css
├── LICENSE
├── index.html
└── images
├── alien_comet.svg
├── ufo.svg
├── alien_landing.svg
└── background.svg
/README.md:
--------------------------------------------------------------------------------
1 | ### Envato Tuts+ Tutorial: [How to Code a Scrolling “Alien Lander” Website](http://webdesign.tutsplus.com/tutorials/how-to-code-a-scrolling-alien-lander-website--cms-26826)
2 | #### Instructor: Kezz Bracey
3 |
4 | In this tutorial, the second in a two part series, we’ll be taking the awesome vector-based illustration produced in How to Create a Long Scrolling Background for a Website and coding it up into a live site.
5 |
6 | **Available on Tuts+ July 2016**
7 |
8 | [View the demo](http://tutsplus.github.io/how-to-code-a-scrolling-alien-lander-website)
9 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | }
4 |
5 | img {
6 | display: block;
7 | }
8 |
9 | .foreground {
10 | position: absolute;
11 | top: 0;
12 | left: 0;
13 | height: 100%;
14 | width: 100%;
15 | z-index: 1;
16 | }
17 |
18 | .ufo_section {
19 | height: 100%;
20 | background: url(../images/ufo.svg);
21 | background-repeat: no-repeat;
22 | background-position: center;
23 | background-size: 40% auto;
24 | background-attachment: fixed;
25 | }
26 |
27 | .comet_section {
28 | height: 100%;
29 | background: url(../images/alien_comet.svg);
30 | background-repeat: no-repeat;
31 | background-position: center;
32 | background-size: 15% auto;
33 | background-attachment: fixed;
34 | }
35 |
36 | .landing_section {
37 | height: 100%;
38 | background: url(../images/alien_landing.svg);
39 | background-repeat: no-repeat;
40 | background-position: center;
41 | background-size: 15% auto;
42 | background-attachment: fixed;
43 | position: relative;
44 | }
45 |
46 | a {
47 | color: #CAFEFF;
48 | font-family: sans-serif;
49 | }
50 |
51 | footer {
52 | width: 100%;
53 | text-align: center;
54 | position: absolute;
55 | bottom: 0;
56 | left: 0;
57 | z-index: 2;
58 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2016, Tuts+
2 | All rights reserved.
3 |
4 | Redistribution and use in source and binary forms, with or without
5 | modification, are permitted provided that the following conditions are met:
6 |
7 | * Redistributions of source code must retain the above copyright notice, this
8 | list of conditions and the following disclaimer.
9 |
10 | * Redistributions in binary form must reproduce the above copyright notice,
11 | this list of conditions and the following disclaimer in the documentation
12 | and/or other materials provided with the distribution.
13 |
14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Scrolling Alien Lander
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
12 |
13 |