diff --git a/static/img/about/bg1.png b/static/img/about/bg1.png
new file mode 100644
index 0000000..48a9ad9
Binary files /dev/null and b/static/img/about/bg1.png differ
diff --git a/static/img/about/bg2.png b/static/img/about/bg2.png
new file mode 100644
index 0000000..d5a337a
Binary files /dev/null and b/static/img/about/bg2.png differ
diff --git a/static/img/about/bg3.png b/static/img/about/bg3.png
new file mode 100644
index 0000000..abfcc17
Binary files /dev/null and b/static/img/about/bg3.png differ
diff --git a/static/js/about.js b/static/js/about.js
new file mode 100644
index 0000000..b83ca89
--- /dev/null
+++ b/static/js/about.js
@@ -0,0 +1,17 @@
+var lastVertPos = $(window).scrollTop();
+
+function parallax(){
+ var currVertPos = $(window).scrollTop();
+ var delta = currVertPos - lastVertPos;
+ $(".bg").each(function(){
+ $(this).css("top", parseFloat($(this).css("top")) - delta * 1.35 + "px");
+ });
+ $(".bg#img-1").each(function(){
+ console.log($(this).css("top"));
+ });
+ lastVertPos = currVertPos;
+}
+
+$(window).scroll(function(e){
+ parallax();
+});
diff --git a/static/sass/about.sass b/static/sass/about.sass
new file mode 100644
index 0000000..9d82b42
--- /dev/null
+++ b/static/sass/about.sass
@@ -0,0 +1,37 @@
+body
+ // background-color: red
+
+.bg
+ $img-height: 600px
+
+ position: fixed
+ width: 100%
+ left: 0
+ z-index: -1
+
+ &#img-1
+ background: url("../img/about/bg1.png") no-repeat
+ background-size: cover
+ height: $img-height
+ top: 0px
+
+ &#img-2
+ background: url("../img/about/bg2.png") no-repeat
+ height: $img-height + 200
+ top: $img-height
+
+ &#img-3
+ background: url("../img/about/bg3.png") no-repeat
+ background-size: cover
+ height: $img-height + 100
+ top: 2 * $img-height + 200
+
+div.section
+ background-color: white
+ color: black
+ height: 250px
+ font-family: arial
+ margin-bottom: 35px
+ margin-top: 365px
+ line-height: 20px
+ font-size: 16px
diff --git a/templates/about.html b/templates/about.html
index 986be23..0caf4b6 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -1,11 +1,45 @@
-= extends "layout.html"
+
+
-= block title
- About
-= endblock
+
+
+
+ bitshift «
+ = filter lower
+ = block title
+ = endblock
+ = endfilter
+
-= block body
-
- About us, son.
-
-= endblock
+
+
+
+
+
+ {{ assets.tag("lib/jquery.min.js") }}
+ {{ assets.tag("main.css") }}
+ {{ assets.tag("about.css") }}
+ {{ assets.tag("about.js") }}
+
+ = block head
+ = endblock
+
+
+
+
+
+
+
+
Section one
+ Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
+
+
+
Section two
+ Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
+
+
+
Section three
+ Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
+
+
+
diff --git a/templates/index.html b/templates/index.html
index 67ba677..7de4ff9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -108,6 +108,7 @@
j : move window down to the next result
h : move to the previous symbol match
l : move to the next symbol match
+ ? : toggle help
= endblock