diff --git a/app/assets/javascripts/parallax.coffee b/app/assets/javascripts/parallax.coffee index 5117d5b..aa63965 100644 --- a/app/assets/javascripts/parallax.coffee +++ b/app/assets/javascripts/parallax.coffee @@ -11,9 +11,10 @@ App.init = -> App.scroll = -> v_scroll = $(document).scrollTop() section = Math.floor(v_scroll / $(window).innerHeight()) + bg_pos = (v_scroll-(section*$(window).innerHeight()))/2 $($(".section")[section]).css( - "background-position", "center -" + - (v_scroll-(section*$(window).innerHeight()))/2 + "px") + "background-position", + "center -" + bg_pos + "px") $(document).on "page:change", -> App.init() diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss index 9a68fae..01b3b1c 100644 --- a/app/assets/stylesheets/welcome.scss +++ b/app/assets/stylesheets/welcome.scss @@ -5,6 +5,7 @@ * { font-family: Verdana, sans-serif; + color: rgb(41, 49, 51); margin: 0; padding: 0; } @@ -86,21 +87,60 @@ a:visited { width: 100%; height: 100%; } - #section1 { background: image_url("resized/blown.jpg") fixed; background-position: center top; } - +#section1,#section3 .content { + color: rgb(214,206,204); +} #section2,#section4 { background-color: rgb(255,255,255); } - #section3 { background: image_url("resized/beach3.jpg") fixed; background-position: center top; } +#footer { + background: rgb(22, 27, 28); + + position: relative; + width: 100%; + height: 40px; + + color: rgb(255,255,255); +} + +#about { + display: block; + list-style: none; + text-align: justify; + width: 100%; + height: 30%; + top: 50%; + transform: translate(0, -50%); + position: absolute; +} +#about:after { + display: inline-block; + width: 100%; + height: 0; + content: ''; +} +#about .box { + display: inline-block; + width: 30%; + height: 100%; + overflow: hidden; + border-style: solid; + border-color: rgba(100,190,12,0.7); + border-radius: 10px; + border-width: 3px; + background-color: rgba(255,255,255,0.7); + box-shadow: 10px 10px 10px rgba(0,0,0,0.7); +} + .section { position: relative; height: 100%; @@ -110,9 +150,11 @@ a:visited { .content { position: absolute; + width: 90%; + height: 90%; top: 50%; - height: 400px; - padding: 30px; + left: 50%; + transform: translate(-50%, -50%); z-index: 1; } .text { diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 88d2094..053b1c0 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -24,6 +24,10 @@
<%= yield %> + +
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index 94570f4..100520a 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -1,9 +1,16 @@
-

About

-

- Some other stuff here... -

+
+
+

Free as in "Free speach"

+
+
+

Custom Code

+
+
+

Linux Consulting

+
+