rubydesign
/
webdev.camp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

net slide, minor spelling

This commit is contained in:
Torsten Ruger 2016-03-29 21:04:26 +03:00
parent 7348eb9155
commit 9afa384e19
8 changed files with 59 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/slider/desktop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
app/assets/images/slider/villa_taika1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 924 KiB

BIN
app/assets/images/villa_taika1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 748 KiB

192
app/assets/stylesheets/business-casual.css
View File

@ -1,192 +0,0 @@
/*!
* Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
background: url('http://ironsummitmedia.github.io/startbootstrap-business-casual/img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
font-size: 1.25em;
line-height: 1.6;
color: #000;
}
hr {
max-width: 400px;
border-color: #999999;
}
.brand,
.address-bar {
display: none;
}
.navbar-brand {
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
}
.navbar-nav {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.img-full {
min-width: 100%;
}
.brand-before,
.brand-name {
text-transform: capitalize;
}
.brand-before {
margin: 15px 0;
}
.brand-name {
margin: 0;
font-size: 4em;
}
.tagline-divider {
margin: 15px auto 3px;
max-width: 250px;
border-color: #999999;
}
.box {
margin-bottom: 20px;
padding: 30px 15px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.intro-text {
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 1px;
}
.img-border {
float: none;
margin: 0 auto 0;
border: #999999 solid 1px;
}
.img-left {
float: none;
margin: 0 auto 0;
}
footer {
background: #fff;
background: rgba(255,255,255,0.9);
}
footer p {
margin: 0;
padding: 50px 0;
}
@media screen and (min-width:768px) {
.brand {
display: inherit;
margin: 0;
padding: 30px 0 10px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #fff;
}
.top-divider {
margin-top: 0;
}
.img-left {
float: left;
margin-right: 25px;
}
.address-bar {
display: inherit;
margin: 0;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #fff;
}
.navbar {
border-radius: 0;
}
.navbar-header {
display: none;
}
.navbar {
min-height: 0;
}
.navbar-default {
border: none;
background: #fff;
background: rgba(255,255,255,0.9);
}
.nav>li>a {
padding: 35px;
}
.navbar-nav>li>a {
line-height: normal;
}
.navbar-nav {
display: table;
float: none;
margin: 0 auto;
table-layout: fixed;
font-size: 1.25em;
}
}
@media screen and (min-width:1200px) {
.box:after {
content: '';
display: table;
clear: both;
}
}

60
app/helpers/application_helper.rb
View File

@ -1,17 +1,61 @@
module ApplicationHelper
def slide2
slide = "<div class='ls-slide'"
slide = data_ls( slide , slidedelay: 8000 , transition2d: 1)
slide += ">"
slide += bg "slider/development.jpg"
slide += text delayin:300 , durationin: 1500 , rotatein:20 , rotatexin: 30 , scalexin:1.5 ,
scaleyin:1.5 , transformoriginin:"left 50% 0" , durationout: 750 , rotateout:20 ,
rotatexout:-30 , scalexout:0 , scaleyout:0 , transformoriginout:"left 50% 0" ,
style: "top:50px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;" ,
text: "FULLY RESPONSIVE"
slide += text delayin:700, offsetxin:0 , durationin:1500, rotateyin:90 , skewxin:60 ,
transformoriginin:"25% 50% 0" , offsetxout:100 , durationout:750, skewxout:60,
text: "with the latest technologies",
style: "top:90px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;"
slide += text delayin:1000, durationin:1500, rotatein:20 , rotatexin:30 , scalexin:1.5 ,
scaleyin:1.5 , transformoriginin:"left 50% 0" , durationout:750 , rotateout:20 ,
rotatexout:-30 , scalexout:0 , scaleyout:0 , transformoriginout:"left 50% 0" ,
style: "top:150px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;" ,
text: "SMOOTH RENDERING"
slide += text delayin:1400 , offsetxin:0 , durationin:1500 , rotateyin:90 , skewxin:60 ,
transformoriginin:"25% 50% 0" , offsetxout:100 , durationout:750 , skewxout:60 ,
style: "top:190px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;",
text: "with hardware-acceleration"
slide += text delayin:1700 , durationin:1500 , rotatein:20 , rotatexin:30 , scalexin:1.5 ,
scaleyin:1.5 , transformoriginin:"left 50% 0" , durationout:750 , rotateout:20 ,
rotatexout:-30 , scalexout:0 , scaleyout:0 , transformoriginout:"left 50% 0",
style: "top:250px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;",
text: "NEW TRANSITIONS"
slide += text delayin:2100, offsetxin:0 , durationin:1500 ,rotateyin:90 , skewxin:60 ,
transformoriginin:"25% 50% 0" , offsetxout:100 , durationout:750 , skewxout:60,
style: "top:290px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;",
text: "slide, fade, scale, skew and rotate layers even in 3D"
slide += text delayin:2400, durationin:1500 ,rotatein:20 , rotatexin:30 , scalexin:1.5 ,
scaleyin:1.5 , transformoriginin:"left 50% 0" , durationout:750 , rotateout:20,
rotatexout:-30 , scalexout:0 , scaleyout:0, transformoriginout:"left 50% 0",
style: "top:350px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;",
text: "CLEANER MARKUP"
slide += text delayin:2800 , offsetxin:0 , durationin:1500 , rotateyin:90 , skewxin:60 ,
transformoriginin:"25% 50% 0" , offsetxout:100 , durationout:750 , skewxout:60 ,
style: "top:390px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;",
text: "working with the plugin is more easy"
slide += "</div>"
slide
end
def slide1
slide = "<div class='ls-slide'"
slide = data_ls( slide , slidedelay: 8000 , transition2d: 1 , timeshift: -1000)
slide = data_ls( slide , slidedelay: 10000 , transition2d: 1 , timeshift: -1000)
slide += ">"
slide += bg "slider/net.jpg"
slide += text delayin: 200 , offsetxin: -50 , durationin: 2000 , offsetxout: -50 , durationout: 1000 ,
slide += text delayin: 500 , offsetxin: -50 , durationin: 2000 , offsetxout: -50 , durationout: 1000 ,
style: "top: 80px ; left: 80px ; font-weight: 500 ; font-size: 40px ; line-height: 37px ; white-space: nowrap ;" ,
text: "You know the web"
slide += text delayin: 1200 , offsetxin: 50 , skewxin: -60 , offsetxout: -50 , durationout: 1000 ,
slide += text delayin: 1500 , offsetxin: 50 , skewxin: -60 , offsetxout: -50 , durationout: 1000 ,
skewxout: -60 ,
style: "top: 260px ; left: 140px ; font-weight: 500 ; font-size: 40px ; color: #fff ; white-space: nowrap;",
text: "now learn how it works!"
slide += img delayin: 3000 , durationin: 1500 , offsetxin: 0, easingin: :linear ,
slide += img delayin: 2500 , durationin: 1500 , offsetxin: 0, easingin: :linear ,
scalexin: 0 , scaleyin: 0 , offsetxout: 0 , durationout: 1500 , showuntil: 1 ,
easingout: :linear , scalexout: 2 , scaleyout: 2 , src: "slider/circle.png",
style: "top: 20px ; left: 50% ; white-space: nowrap ;"
@ -19,18 +63,18 @@ module ApplicationHelper
durationout: 1500 ,offsetxout: 0 , transformoriginout: "right bottom 0" ,
style: "top: 60px ; left: 960px ; font-weight: 500 ; text-align: right ; font-size: 40px ; color: #fff ; white-space: nowrap;",
text: "8 weeks"
slide += text delayin: 3250 ,durationin: 2500 , offsetxin: 0 , easingin: "easeOutElastic" ,
slide += text delayin: 3500 ,durationin: 2500 , offsetxin: 0 , easingin: "easeOutElastic" ,
rotatexin: 90 , transformoriginin: "50% top 0" , offsetxout: 0 , durationout: 1000 ,
rotatexout: 90 , transformoriginout: "50% bottom 0" ,
style: "top: 160px ; left: 800px ; font-weight: 500 ; text-align: right ; width: 240px ; height: 40px ; padding-right: 10px ; font-size: 30px ; line-height: 37px ; color: #ffffff ; background: #179446 ; white-space: nowrap;",
text: "Intensive course"
slide += img delayin: 4200 , durationin: 1500 , scalexin: 0.8 , scaleyin: 0.8 ,
slide += img delayin: 3500 , durationin: 1500 , scalexin: 0.8 , scaleyin: 0.8 ,
scalexout: 0.8 , scaleyout: 0.8 ,
src: "slider/web_matrix.png",
style: "top: 40px ; left: 50% ; white-space: nowrap; width: 300px;"
slide += text delayin: 3500 , durationout: 1000 ,offsetxin: -50 , skewxin: 60 , scalexin: 1.5 ,
slide += text delayin: 4500 , durationout: 1000 ,offsetxin: -50 , skewxin: 60 , scalexin: 1.5 ,
offsetxout: -50 , skewxout: 60 , scalexout: 1.5 ,
style: "top: 220px ; left: 740px ; font-size: 30px ; color: #fff ; white-space: nowrap;",
style: "top: 250px ; left: 740px ; font-weight: 500 ; font-size: 30px ; color: #fff ; white-space: nowrap;",
text: "to jumpstart your new career!"
slide += "</div>"
slide

2
app/views/faq/_course.haml
View File

@ -52,6 +52,6 @@
to low quality code and an enthusiasm to repeat known mistakes and reinvent the wheel as
square.
%br
We are by no means of the opinion that javascrit is bad, it's uniquiquesness is a great
We are by no means of the opinion that javascrit is bad, it's uniqueness is a great
opertunity and many good things are being done in js. It is just not a good first language
and maybe best seen as a platform.

6
app/views/faq/_stay.haml
View File

@ -14,14 +14,14 @@
%p.clearfix
We arrange all transport that is needed for the course.
%br
Otherwise there are busses, cars or taxis. We have a bus stop right in fron of our house,
though busses are infrequent. Our day off is monday partly for the reason that busses run.
Otherwise there are buses, cars or taxis. We have a bus stop right in fron of our house,
though buses are infrequent. Our day off is monday partly for the reason that buses run.
%br
Some people may come with their car and you may be able to share. Also ride sharing is quite
common here and even hitchhiking works relatively well as transport is a shared problem.
%br
If you share a taxi it actually quite ok priced, and either that or the bus will get you
to Karjaa from which trains leave to Helsinki or Turkku (1 hour either way).
to Karjaa from which trains leave to Helsinki or Turku (1 hour either way).
%br
last but not least you can ask us to organize transport. Especially for group activities
we are happy to help.

28
app/views/pages/index.html.haml
View File

@ -13,34 +13,12 @@
\.height-700
\.height-750
\.height-800
.layerslider.height-350{:style => "width:100%;"}
/ SLIDE
.layerslider.height-400{:style => "width:100%;"}
= raw slide2
= raw slide1
/ SLIDE
.ls-slide{"data-ls" => "slidedelay:8000;transition2d:1;"}
/ background image
%img.ls-bg{:alt => "Slide background", :src => image_path("slider/development.jpg")}/
%img.ls-l{:alt => "", "data-ls" => "durationin:1500;scalexin:0.8;scaleyin:0.8;scalexout:0.8;scaleyout:0.8;", :src => image_path("slider/desktop.png"), :style => "top:40px;left:65%;white-space: nowrap;"}/
%p.ls-l{"data-ls" => "durationin:1500;delayin:300;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;", :style => "top:50px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;"}
FULLY RESPONSIVE
%p.ls-l{"data-ls" => "offsetxin:0;durationin:1500;delayin:700;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;", :style => "top:90px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;"}
with the latest technologies
%p.ls-l{"data-ls" => "durationin:1500;delayin:1000;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;", :style => "top:150px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;"}
SMOOTH RENDERING
%p.ls-l{"data-ls" => "offsetxin:0;durationin:1500;delayin:1400;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;", :style => "top:190px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;"}
with hardware-acceleration
%p.ls-l{"data-ls" => "durationin:1500;delayin:1700;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;", :style => "top:250px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;"}
NEW TRANSITIONS
%p.ls-l{"data-ls" => "offsetxin:0;durationin:1500;delayin:2100;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;", :style => "top:290px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;"}
slide, fade, scale, skew and rotate layers even in 3D
%p.ls-l{"data-ls" => "durationin:1500;delayin:2400;rotatein:20;rotatexin:30;scalexin:1.5;scaleyin:1.5;transformoriginin:left 50% 0;durationout:750;rotateout:20;rotatexout:-30;scalexout:0;scaleyout:0;transformoriginout:left 50% 0;", :style => "top:350px;left:100px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#fa6b4b;border-radius:4px;white-space: nowrap;"}
CLEANER MARKUP
%p.ls-l{"data-ls" => "offsetxin:0;durationin:1500;delayin:2800;rotateyin:90;skewxin:60;transformoriginin:25% 50% 0;offsetxout:100;durationout:750;skewxout:60;", :style => "top:390px;left:100px;font-weight: 300;font-size:24px;color:#333;white-space: nowrap;"}
working with the plugin is more easy
/ SLIDE
.ls-slide{"data-ls" => "slidedelay:8000;transition2d:1;"}
/ background image
%img.ls-bg{:alt => "Slide background", :src => image_path("villa_taika1.png")}/
%img.ls-bg{:alt => "Slide background", :src => image_path("slider/villa_taika1.png")}/
%p.ls-l{"data-ls" => "offsetxin:50;durationin:750;easingin:easeOutBack;skewxin:-50;offsetxout:-50;durationout:600;showuntil:500;easingout:easeInBack;skewxout:50;", :style => "top:44%;left:50%;font-weight: 300;font-size:30px;color:#ffffff;white-space: nowrap;"}
welcome
%p.ls-l{"data-ls" => "offsetxin:-100;durationin:750;delayin:250;easingin:easeOutBack;skewxin:-50;offsetxout:100;durationout:600;showuntil:500;easingout:easeInBack;skewxout:50;", :style => "top:52%;left:50%;font-weight: 300;font-size:50px;color:#ffffff;white-space: nowrap;"}