├── .gitignore
├── LICENSE
├── README.md
├── css
├── application.css
└── application.css.map
├── fonts
├── abolition-regular-webfont.eot
├── abolition-regular-webfont.ttf
└── abolition-regular-webfont.woff
├── gulpfile.js
├── img
├── arrow.svg
├── bear.jpg
├── mountains.jpg
├── mtn-landscape.jpg
└── resort.jpg
├── index.html
├── js
├── app.js
├── app.js.map
├── app.min.js
├── jquery.js
├── main.js
└── sticky
│ └── jquery.sticky.js
├── package.json
└── scss
├── application.scss
├── base
├── _base.scss
├── _index.scss
├── _mixins.scss
└── _variables.scss
├── components
├── _buttons.scss
├── _icons.scss
├── _index.scss
└── _typography.scss
└── layout
├── _columns.scss
├── _containers.scss
├── _extends.scss
├── _footer.scss
├── _header.scss
└── _index.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | CC0 1.0 Universal
2 |
3 | Statement of Purpose
4 |
5 | The laws of most jurisdictions throughout the world automatically confer
6 | exclusive Copyright and Related Rights (defined below) upon the creator and
7 | subsequent owner(s) (each and all, an "owner") of an original work of
8 | authorship and/or a database (each, a "Work").
9 |
10 | Certain owners wish to permanently relinquish those rights to a Work for the
11 | purpose of contributing to a commons of creative, cultural and scientific
12 | works ("Commons") that the public can reliably and without fear of later
13 | claims of infringement build upon, modify, incorporate in other works, reuse
14 | and redistribute as freely as possible in any form whatsoever and for any
15 | purposes, including without limitation commercial purposes. These owners may
16 | contribute to the Commons to promote the ideal of a free culture and the
17 | further production of creative, cultural and scientific works, or to gain
18 | reputation or greater distribution for their Work in part through the use and
19 | efforts of others.
20 |
21 | For these and/or other purposes and motivations, and without any expectation
22 | of additional consideration or compensation, the person associating CC0 with a
23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
25 | and publicly distribute the Work under its terms, with knowledge of his or her
26 | Copyright and Related Rights in the Work and the meaning and intended legal
27 | effect of CC0 on those rights.
28 |
29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
30 | protected by copyright and related or neighboring rights ("Copyright and
31 | Related Rights"). Copyright and Related Rights include, but are not limited
32 | to, the following:
33 |
34 | i. the right to reproduce, adapt, distribute, perform, display, communicate,
35 | and translate a Work;
36 |
37 | ii. moral rights retained by the original author(s) and/or performer(s);
38 |
39 | iii. publicity and privacy rights pertaining to a person's image or likeness
40 | depicted in a Work;
41 |
42 | iv. rights protecting against unfair competition in regards to a Work,
43 | subject to the limitations in paragraph 4(a), below;
44 |
45 | v. rights protecting the extraction, dissemination, use and reuse of data in
46 | a Work;
47 |
48 | vi. database rights (such as those arising under Directive 96/9/EC of the
49 | European Parliament and of the Council of 11 March 1996 on the legal
50 | protection of databases, and under any national implementation thereof,
51 | including any amended or successor version of such directive); and
52 |
53 | vii. other similar, equivalent or corresponding rights throughout the world
54 | based on applicable law or treaty, and any national implementations thereof.
55 |
56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
59 | and Related Rights and associated claims and causes of action, whether now
60 | known or unknown (including existing as well as future claims and causes of
61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
62 | duration provided by applicable law or treaty (including future time
63 | extensions), (iii) in any current or future medium and for any number of
64 | copies, and (iv) for any purpose whatsoever, including without limitation
65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
66 | the Waiver for the benefit of each member of the public at large and to the
67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
68 | shall not be subject to revocation, rescission, cancellation, termination, or
69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
70 | by the public as contemplated by Affirmer's express Statement of Purpose.
71 |
72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
73 | judged legally invalid or ineffective under applicable law, then the Waiver
74 | shall be preserved to the maximum extent permitted taking into account
75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
77 | non transferable, non sublicensable, non exclusive, irrevocable and
78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
80 | provided by applicable law or treaty (including future time extensions), (iii)
81 | in any current or future medium and for any number of copies, and (iv) for any
82 | purpose whatsoever, including without limitation commercial, advertising or
83 | promotional purposes (the "License"). The License shall be deemed effective as
84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
85 | License for any reason be judged legally invalid or ineffective under
86 | applicable law, such partial invalidity or ineffectiveness shall not
87 | invalidate the remainder of the License, and in such case Affirmer hereby
88 | affirms that he or she will not (i) exercise any of his or her remaining
89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
90 | and causes of action with respect to the Work, in either case contrary to
91 | Affirmer's express Statement of Purpose.
92 |
93 | 4. Limitations and Disclaimers.
94 |
95 | a. No trademark or patent rights held by Affirmer are waived, abandoned,
96 | surrendered, licensed or otherwise affected by this document.
97 |
98 | b. Affirmer offers the Work as-is and makes no representations or warranties
99 | of any kind concerning the Work, express, implied, statutory or otherwise,
100 | including without limitation warranties of title, merchantability, fitness
101 | for a particular purpose, non infringement, or the absence of latent or
102 | other defects, accuracy, or the present or absence of errors, whether or not
103 | discoverable, all to the greatest extent permissible under applicable law.
104 |
105 | c. Affirmer disclaims responsibility for clearing rights of other persons
106 | that may apply to the Work or any use thereof, including without limitation
107 | any person's Copyright and Related Rights in the Work. Further, Affirmer
108 | disclaims responsibility for obtaining any necessary consents, permissions
109 | or other rights required for any use of the Work.
110 |
111 | d. Affirmer understands and acknowledges that Creative Commons is not a
112 | party to this document and has no duty or obligation with respect to this
113 | CC0 or use of the Work.
114 |
115 | For more information, please see
116 |
117 |
118 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Gulp Basics Treehouse Course
2 | This repository contains the project code for my [Gulp Basics course on Treehouse](https://teamtreehouse.com/library/gulp-basics).
3 |
4 | ## Using this Repo
5 | This is a node project. On the master branch is the "final" version of our app. Each video has a corresponding branch and you can run `git checkout ` to follow along. Instruction's are in the Teacher's Notes with each video.
6 |
7 | ## Quick Start
8 | ```
9 | # Clone this repo
10 | git clone https://github.com/hdngr/treehouse-gulp-basics.git
11 | # Navigate into the directory
12 | cd treehouse-gulp-basics
13 | # Install the project's node dependencies
14 | npm install
15 | # Checkout the branch for the video you want to follow along with
16 | git checkout
17 | ```
18 |
19 | ## Installing gulp and http server
20 | This course requires you to have global installations of [gulp](http://gulpjs.com/) and [http-server](https://www.npmjs.com/package/http-server).
21 |
22 | ```
23 | # Install gulp globally
24 | npm install -g gulp
25 | # Install http-server globally
26 | npm install -g http-server
27 | ```
28 |
--------------------------------------------------------------------------------
/css/application.css:
--------------------------------------------------------------------------------
1 | /* Base Styles -------------------- */
2 | * {
3 | box-sizing: border-box; }
4 |
5 | body {
6 | font-size: 1em;
7 | line-height: 1.5;
8 | color: #878787;
9 | margin: 0;
10 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
11 |
12 | h1,
13 | h2 {
14 | font-family: "Abolition Regular", Helvetica, Arial, sans-serif; }
15 |
16 | h2 {
17 | font-size: 3.3125em;
18 | line-height: 1.1;
19 | font-weight: normal;
20 | margin: 0 0 0.5em; }
21 |
22 | h3 {
23 | font-size: 1.25em;
24 | line-height: 1.2;
25 | color: #48525c;
26 | margin-bottom: 1.7em; }
27 |
28 | img {
29 | max-width: 100%;
30 | margin-bottom: 20px;
31 | border-radius: 10px; }
32 |
33 | ul,
34 | ol {
35 | margin: 30px 0; }
36 |
37 | li {
38 | margin-bottom: 10px; }
39 |
40 | /* Pseudo-classes ------------------ */
41 | a:link {
42 | color: #ffa949;
43 | text-decoration: none; }
44 |
45 | a:visited {
46 | color: #add8e6; }
47 |
48 | a:hover {
49 | color: rgba(255, 169, 73, 0.5); }
50 |
51 | .main-header {
52 | padding-top: 170px;
53 | height: 850px;
54 | background: linear-gradient(red, transparent 90%), linear-gradient(0deg, #fff, transparent), red url("../img/mountains.jpg") no-repeat center;
55 | background-size: cover; }
56 | @media (max-width: 768px) {
57 | .main-header {
58 | max-height: 380px;
59 | padding: 50px 25px 0; } }
60 |
61 | .main-footer {
62 | padding-top: 60px;
63 | padding-bottom: 60px;
64 | border-bottom: 10px solid #ffa949; }
65 | @media (max-width: 768px) {
66 | .main-footer {
67 | padding: 20px 0; } }
68 |
69 | .primary-content {
70 | padding-top: 25px;
71 | padding-bottom: 95px; }
72 |
73 | .secondary-content {
74 | padding-top: 80px;
75 | padding-bottom: 70px;
76 | border-bottom: 2px solid #e0e0e0; }
77 |
78 | .wildlife {
79 | color: #fff;
80 | text-align: left;
81 | padding: 18% 24%;
82 | border-top: 10px solid #ffa949;
83 | margin: 105px 0 60px;
84 | background: #48525c url("../img/bear.jpg") no-repeat center;
85 | background-size: cover;
86 | box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, 0.8);
87 | border-radius: 10px; }
88 | @media (max-width: 1024px) {
89 | .wildlife {
90 | padding: 10% 12%;
91 | margin: 50px 0 20px; } }
92 |
93 | .tips {
94 | float: left; }
95 |
96 | .resorts {
97 | float: right; }
98 |
99 | .main-header, .main-footer, .primary-content {
100 | text-align: center; }
101 |
102 | .primary-content, .secondary-content {
103 | border-top: 2px solid #e0e0e0; }
104 |
105 | .primary-content, .secondary-content {
106 | width: 75%;
107 | padding-left: 50px;
108 | padding-right: 50px;
109 | margin: auto;
110 | max-width: 960px; }
111 | @media (max-width: 1024px) {
112 | .primary-content, .secondary-content {
113 | width: 90%; } }
114 | @media (max-width: 768px) {
115 | .primary-content, .secondary-content {
116 | width: 100%;
117 | padding: 20px;
118 | border-top: none; } }
119 |
120 | .tips, .resorts {
121 | width: 46.5%; }
122 | @media (max-width: 768px) {
123 | .tips, .resorts {
124 | float: none;
125 | width: 100%; } }
126 |
127 | .secondary-content:after {
128 | content: "";
129 | display: table;
130 | clear: both; }
131 |
132 | /* Web Fonts -------------------- */
133 | @font-face {
134 | font-family: "Abolition Regular";
135 | src: url("../fonts/abolition-regular-webfont.eot");
136 | src: url("../fonts/abolition-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/abolition-regular-webfont.woff") format("woff"), url("../fonts/abolition-regular-webfont.ttf") format("truetype"); }
137 |
138 | .main-heading {
139 | font-size: 5.625rem;
140 | line-height: 1.3;
141 | font-weight: normal;
142 | color: #fff;
143 | text-transform: uppercase;
144 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
145 | margin: 12px 0 0; }
146 | @media (max-width: 768px) {
147 | .main-heading {
148 | font-size: 5rem;
149 | line-height: 1.1; } }
150 |
151 | .main-title {
152 | font-size: 1.625rem;
153 | font-weight: 200;
154 | color: #fff;
155 | letter-spacing: .065em;
156 | border-bottom: 2px solid;
157 | padding-bottom: 10px; }
158 | @media (max-width: 768px) {
159 | .main-title {
160 | font-size: 1.3rem;
161 | border: none; } }
162 |
163 | .intro {
164 | font-size: 1.25em;
165 | line-height: 1.6;
166 | color: initial; }
167 | @media (max-width: 768px) {
168 | .intro {
169 | font-size: 1rem; } }
170 |
171 | .callout {
172 | font-size: 1.25em;
173 | border-bottom: 3px solid;
174 | padding: 0 9px 3px;
175 | margin-top: 20px;
176 | display: inline-block; }
177 |
178 | .arrow {
179 | width: 50px;
180 | margin-top: 150px; }
181 | @media (max-width: 768px) {
182 | .arrow {
183 | display: none; } }
184 |
185 | /*# sourceMappingURL=application.css.map */
--------------------------------------------------------------------------------
/css/application.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["base/_base.scss","base/_mixins.scss","base/_variables.scss","layout/_header.scss","layout/_footer.scss","layout/_containers.scss","layout/_columns.scss","layout/_extends.scss","components/_typography.scss","components/_buttons.scss","components/_icons.scss"],"names":[],"mappings":"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","file":"application.css","sourcesContent":["/* Base Styles -------------------- */\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n @include text(1em, 1.5, $color: $color-text-base);\n margin: 0;\n font-family: $stack-helvetica;\n}\n\nh1,\nh2 {\n font-family: $stack-abolition;\n}\n\nh2 {\n @include text(3.3125em, 1.1, normal);\n margin: 0 0 .5em;\n}\n\nh3 {\n @include text(1.25em, 1.2, $color: $color-text-dark);\n margin-bottom: 1.7em;\n}\n\nimg {\n max-width: 100%;\n margin-bottom: 20px;\n border-radius: $br;\n}\n\nul,\nol {\n margin: 30px 0;\n}\n\nli {\n margin-bottom: 10px;\n}\n\n/* Pseudo-classes ------------------ */\n\na {\n &:link {\n color: $color-link-default;\n text-decoration: none;\n }\n &:visited {\n color: $color-link-visited;\n }\n &:hover {\n color: rgba($color-link-default, .5);\n }\n}","// Web fonts\n\n@mixin font-face($family, $file) {\n @font-face {\n font-family: $family;\n src: url('#{$path-font}/#{$file}-webfont.eot');\n src: url('#{$path-font}/#{$file}-webfont.eot?#iefix') format('embedded-opentype'),\n url('#{$path-font}/#{$file}-webfont.woff') format('woff'),\n url('#{$path-font}/#{$file}-webfont.ttf') format('truetype');\n }\n}\n\n// Text\n\n@mixin text($size, $l-height: null, $weight: null, $color: null) {\n font-size: $size;\n line-height: $l-height;\n font-weight: $weight;\n color: $color;\n}\n\n\n\n\n\n\n\n\n\n\n","// Descriptive color variables\n\n$white : #fff;\n$black : #000;\n$grey : #878787;\n$regent-st-blue : #add8e6;\n$river-bed : #48525c;\n$yellow-orange : #ffa949;\n$green : red;\n\n// Functional color variables\n\n$color-prim : $green;\n$color-sec : $river-bed;\n\n$color-text-light : $white;\n$color-text-base : $grey;\n$color-text-dark : $river-bed;\n\n$color-border-light : lighten($grey, 35%);\n$color-border-dark : $yellow-orange;\n\n$color-link-default : $yellow-orange;\n$color-link-visited : $regent-st-blue;\n\n$color-shadow : rgba($black,.8);\n$color-body : $white;\n\n// Font stacks\n\n$stack-sans-serif : Helvetica, Arial, sans-serif;\n$stack-helvetica : 'Helvetica Neue', $stack-sans-serif;\n$stack-abolition : 'Abolition Regular', $stack-sans-serif;\n\n// Border radius\n\n$br: 10px;\n\n// Asset paths\n\n$path-img : '../img';\n$path-font : '../fonts';\n\n// Media query breakpoints\n\n$brk-narrow : '(max-width: 768px)';\n$brk-wide : '(max-width: 1024px)';",".main-header {\n @extend %centered;\n padding-top: 170px;\n height: 850px;\n background: linear-gradient($color-prim, transparent 90%),\n linear-gradient(0deg, $color-body, transparent),\n $color-prim url('#{$path-img}/mountains.jpg') no-repeat center;\n background-size: cover;\n @media #{$brk-narrow} {\n max-height: 380px;\n padding: 50px 25px 0;\n }\n}",".main-footer {\n @extend %centered;\n padding-top: 60px;\n padding-bottom: 60px;\n border-bottom: 10px solid $color-border-dark;\n @media #{$brk-narrow} {\n \tpadding: 20px 0;\n }\n}",".primary-content {\n @extend %content;\n @extend %centered;\n @extend %t-border;\n\tpadding-top: 25px;\n padding-bottom: 95px;\n}\n\n.secondary-content {\n @extend %content;\n @extend %t-border;\n @extend %clearfix;\n padding-top: 80px;\n\tpadding-bottom: 70px;\n border-bottom: 2px solid $color-border-light;\n}\n\n.wildlife {\n color: $color-text-light;\n text-align: left;\n padding: 18% 24%;\n border-top: 10px solid $color-border-dark;\n margin: 105px 0 60px;\n background: $color-sec url('#{$path-img}/bear.jpg') no-repeat center;\n background-size: cover;\n box-shadow: inset 0 0 50px 10px $color-shadow;\n border-radius: $br;\n @media #{$brk-wide} {\n padding: 10% 12%;\n margin: 50px 0 20px;\n }\n}",".tips {\n @extend %columns;\n float: left;\n}\n\n.resorts {\n @extend %columns;\n float: right;\n}","// Center text\n\n%centered {\n text-align: center;\n}\n\n// Top border\n\n%t-border {\n border-top: 2px solid $color-border-light;\n}\n\n// Containers\n\n%content {\n width: 75%;\n padding-left: 50px;\n padding-right: 50px;\n margin: auto;\n max-width: 960px;\n @media #{$brk-wide} {\n width: 90%;\n }\n @media #{$brk-narrow} {\n width: 100%;\n padding: 20px;\n border-top: none;\n }\n}\n\n// Columns\n\n%columns {\n width: 46.5%;\n @media #{$brk-narrow} {\n float: none;\n width: 100%;\n }\n}\n\n// Clearfix\n\n%clearfix {\n &:after {\n content: \"\";\n display: table;\n clear: both;\n }\n}","/* Web Fonts -------------------- */\n\n@include font-face('Abolition Regular', abolition-regular);\n\n.main {\n &-heading { \n @include text(5.625rem, 1.3, normal, $color-text-light);\n text-transform: uppercase; \n text-shadow: 0 1px 1px $color-shadow;\n margin: 12px 0 0;\n \n @media #{$brk-narrow} {\n \t\t@include text(5rem, 1.1);\n }\n }\n \n &-title {\n @include text(1.625rem, $weight: 200, $color: $color-text-light);\n letter-spacing: .065em;\n border-bottom: 2px solid;\n padding-bottom: 10px;\n \n @media #{$brk-narrow} {\n font-size: 1.3rem;\n border: none;\n }\n }\n}\n\n.intro {\n @include text(1.25em, 1.6, $color: initial);\n \n @media #{$brk-narrow} {\n font-size: 1rem;\n }\n}\n\n","// Callout link/button\n\n.callout {\n font-size: 1.25em;\n border-bottom: 3px solid;\n padding: 0 9px 3px;\n margin-top: 20px;\n display: inline-block;\n}","// Arrow image icon\n\n.arrow {\n width: 50px;\n margin-top: 150px;\n \n @media #{$brk-narrow} {\n display: none;\n }\n}"],"sourceRoot":"/source/"}
--------------------------------------------------------------------------------
/fonts/abolition-regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hdngr/treehouse-gulp-basics/8c80bb8df134b20fb2212bbb926e9a63a8f903ca/fonts/abolition-regular-webfont.eot
--------------------------------------------------------------------------------
/fonts/abolition-regular-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hdngr/treehouse-gulp-basics/8c80bb8df134b20fb2212bbb926e9a63a8f903ca/fonts/abolition-regular-webfont.ttf
--------------------------------------------------------------------------------
/fonts/abolition-regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hdngr/treehouse-gulp-basics/8c80bb8df134b20fb2212bbb926e9a63a8f903ca/fonts/abolition-regular-webfont.woff
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var gulp = require('gulp'),
4 | concat = require('gulp-concat'),
5 | uglify = require('gulp-uglify'),
6 | rename = require('gulp-rename'),
7 | sass = require('gulp-sass'),
8 | maps = require('gulp-sourcemaps'),
9 | del = require('del');
10 |
11 | gulp.task("concatScripts", function() {
12 | return gulp.src([
13 | 'js/jquery.js',
14 | 'js/sticky/jquery.sticky.js',
15 | 'js/main.js'
16 | ])
17 | .pipe(maps.init())
18 | .pipe(concat('app.js'))
19 | .pipe(maps.write('./'))
20 | .pipe(gulp.dest('js'));
21 | });
22 |
23 | gulp.task("minifyScripts", ["concatScripts"], function() {
24 | return gulp.src("js/app.js")
25 | .pipe(uglify())
26 | .pipe(rename('app.min.js'))
27 | .pipe(gulp.dest('js'));
28 | });
29 |
30 | gulp.task('compileSass', function() {
31 | return gulp.src("scss/application.scss")
32 | .pipe(maps.init())
33 | .pipe(sass())
34 | .pipe(maps.write('./'))
35 | .pipe(gulp.dest('css'));
36 | });
37 |
38 | gulp.task('watchFiles', function() {
39 | gulp.watch('scss/**/*.scss', ['compileSass']);
40 | gulp.watch('js/main.js', ['concatScripts']);
41 | })
42 |
43 | gulp.task('clean', function() {
44 | del(['dist', 'css/application.css*', 'js/app*.js*']);
45 | });
46 |
47 | gulp.task("build", ['minifyScripts', 'compileSass'], function() {
48 | return gulp.src(["css/application.css", "js/app.min.js", 'index.html',
49 | "img/**", "fonts/**"], { base: './'})
50 | .pipe(gulp.dest('dist'));
51 | });
52 |
53 | gulp.task('serve', ['watchFiles']);
54 |
55 | gulp.task("default", ["clean"], function() {
56 | gulp.start('build');
57 | });
58 |
--------------------------------------------------------------------------------
/img/arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
--------------------------------------------------------------------------------
/img/bear.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hdngr/treehouse-gulp-basics/8c80bb8df134b20fb2212bbb926e9a63a8f903ca/img/bear.jpg
--------------------------------------------------------------------------------
/img/mountains.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hdngr/treehouse-gulp-basics/8c80bb8df134b20fb2212bbb926e9a63a8f903ca/img/mountains.jpg
--------------------------------------------------------------------------------
/img/mtn-landscape.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hdngr/treehouse-gulp-basics/8c80bb8df134b20fb2212bbb926e9a63a8f903ca/img/mtn-landscape.jpg
--------------------------------------------------------------------------------
/img/resort.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hdngr/treehouse-gulp-basics/8c80bb8df134b20fb2212bbb926e9a63a8f903ca/img/resort.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Lake Tahoe
5 |
6 |
7 |
8 |
9 |
10 | Journey Through the Sierra Nevada Mountains
11 |
Lake Tahoe, California
12 |
13 |
14 |
15 |
16 |
17 | Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
18 |
24 | As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and bald eagles.
25 |
36 | Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
37 |