rework layout structure
to include header and footer and let page just be the page
This commit is contained in:
Torsten Ruger
parent
14ea57d2b9
commit
9256526505
|
|
@ -29,4 +29,84 @@
|
|||
/ PAGE LEVEL SCRIPTS
|
||||
%link{:href => "assets/css/header-1.css", :rel => "stylesheet", :type => "text/css"}/
|
||||
%link#color_scheme{:href => "assets/css/color_scheme/green.css", :rel => "stylesheet", :type => "text/css"}/
|
||||
= yield
|
||||
/
|
||||
AVAILABLE BODY CLASSES:
|
||||
|
||||
smoothscroll = create a browser smooth scroll
|
||||
enable-animation = enable WOW animations
|
||||
|
||||
bg-grey = grey background
|
||||
grain-grey = grey grain background
|
||||
grain-blue = blue grain background
|
||||
grain-green = green grain background
|
||||
grain-blue = blue grain background
|
||||
grain-orange = orange grain background
|
||||
grain-yellow = yellow grain background
|
||||
|
||||
boxed = boxed layout
|
||||
pattern1 ... patern11 = pattern background
|
||||
menu-vertical-hide = hidden, open on click
|
||||
|
||||
BACKGROUND IMAGE [together with .boxed class]
|
||||
data-background="assets/images/boxed_background/1.jpg"
|
||||
%body.smoothscroll.enable-animation
|
||||
= render 'layouts/slidetop'
|
||||
/ wrapper
|
||||
#wrapper
|
||||
/
|
||||
AVAILABLE HEADER CLASSES
|
||||
|
||||
Default nav height: 96px
|
||||
\.header-md = 70px nav height
|
||||
\.header-sm = 60px nav height
|
||||
|
||||
\.noborder = remove bottom border (only with transparent use)
|
||||
\.transparent = transparent header
|
||||
\.translucent = translucent header
|
||||
\.sticky = sticky header
|
||||
\.static = static header
|
||||
\.dark = dark header
|
||||
\.bottom = header on bottom
|
||||
|
||||
shadow-before-1 = shadow 1 header top
|
||||
shadow-after-1 = shadow 1 header bottom
|
||||
shadow-before-2 = shadow 2 header top
|
||||
shadow-after-2 = shadow 2 header bottom
|
||||
shadow-before-3 = shadow 3 header top
|
||||
shadow-after-3 = shadow 3 header bottom
|
||||
|
||||
\.clearfix = required for mobile menu, do not remove!
|
||||
|
||||
Example Usage: class="clearfix sticky header-sm transparent noborder"
|
||||
#header.sticky.clearfix
|
||||
/ TOP NAV
|
||||
%header#topNav
|
||||
.container
|
||||
/ Mobile Menu Button
|
||||
%button.btn.btn-mobile{"data-target" => ".nav-main-collapse", "data-toggle" => "collapse"}
|
||||
%i.fa.fa-bars
|
||||
/ BUTTONS
|
||||
%ul.pull-right.nav.nav-pills.nav-second-main
|
||||
/ SEARCH
|
||||
%li.search
|
||||
%a{:href => "javascript:;"}
|
||||
%i.fa.fa-user
|
||||
.search-box
|
||||
%form{:action => "page-search-result-1.html", :method => "get"}
|
||||
.input-group
|
||||
%input.form-control{:name => "src", :placeholder => "Search", :type => "text"}/
|
||||
%span.input-group-btn
|
||||
%button.btn.btn-primary{:type => "submit"} Search
|
||||
/ /SEARCH
|
||||
/ /BUTTONS
|
||||
/ Logo
|
||||
%a.logo.pull-left{:href => "index.html"}
|
||||
= image_tag "web_logo.png"
|
||||
= render 'layouts/navigation'
|
||||
/ /Top Nav
|
||||
/ LAYER SLIDER
|
||||
|
||||
= yield
|
||||
= render 'layouts/footer'
|
||||
/ /wrapper
|
||||
= render 'layouts/wrapper'
|
||||
|
|
|
|||
|
|
@ -1,247 +1,166 @@
|
|||
%section#slider
|
||||
.slider
|
||||
/
|
||||
AVAILABLE CLASSES
|
||||
\.height-300
|
||||
\.height-350
|
||||
\.height-400
|
||||
\.height-450
|
||||
\.height-500
|
||||
\.height-550
|
||||
\.height-600
|
||||
\.height-650
|
||||
\.height-700
|
||||
\.height-750
|
||||
\.height-800
|
||||
.layerslider.height-350{:style => "width:100%;"}
|
||||
/ SLIDE
|
||||
.ls-slide{"data-ls" => "slidedelay:8000;transition2d:1;timeshift:-1000;"}
|
||||
/ background
|
||||
%img.ls-bg{:alt => "Slide background", :src => image_path("slider/net.jpg")}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:0;durationin:1500;delayin:3000;easingin:linear;scalexin:0;scaleyin:0;offsetxout:0;durationout:1500;showuntil:1;easingout:linear;scalexout:2;scaleyout:2;", :src => "assets/images/demo/layerslider/circle.png", :style => "top:20px;left:50%;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:0;durationin:1500;delayin:4000;easingin:linear;scalexin:0;scaleyin:0;offsetxout:0;durationout:1500;showuntil:1;easingout:linear;scalexout:2;scaleyout:2;", :src => "assets/images/demo/layerslider/circle.png", :style => "top:20px;left:50%;white-space: nowrap;"}/
|
||||
/ left
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2500;delayin:1000;scalexin:0;scaleyin:0;offsetxout:0;scalexout:0;scaleyout:0;", :style => "top:124px;left:156px;font-weight: 300; opacity: .4;font-size:200px;color:#fff;white-space: nowrap;"}
|
||||
\&
|
||||
%p.ls-l{"data-ls" => "offsetxin:-50;durationin:2000;delayin:1000;offsetxout:-50;durationout:1000;", :style => "top:320px;left:120px;font-weight: 300; background: white; background: rgba(255,255,255,.85); height:40px; padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#A94545;white-space: nowrap;"}
|
||||
ALL THESE FEATURES
|
||||
%p.ls-l{"data-ls" => "offsetxin:50;delayin:2000;skewxin:-60;offsetxout:-50;durationout:1000;skewxout:-60;", :style => "top:360px;left:273px;font-weight: 500;font-size:30px;color:#fff;white-space: nowrap;"}
|
||||
much more!
|
||||
/ right
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;delayin:2500;rotatein:90;transformoriginin:right bottom 0;offsetxout:0;durationout:1500;transformoriginout:right bottom 0;", :style => "top:320px;left:1013px;font-weight: 500; text-align: right;font-size:30px;color:#fff;white-space: nowrap;"}
|
||||
\...to create
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2500;delayin:3250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0;durationout:1000;rotatexout:90;transformoriginout:50% bottom 0;", :style => "top:360px;left:890px;font-weight: 300; text-align: right;width:260px;height:40px;padding-right:10px;font-size:30px;line-height:37px;color:#ffffff;background:#f06a52;white-space: nowrap;"}
|
||||
THE BEST SLIDER
|
||||
%p.ls-l{"data-ls" => "offsetxin:-50;delayin:3500;skewxin:60;scalexin:1.5;offsetxout:-50;durationout:1000;skewxout:60;scalexout:1.5;", :style => "top:405px;left:883px;font-size:30px;color:#fff;white-space: nowrap;"}
|
||||
with no compromises!
|
||||
%img.ls-l{:alt => "", "data-ls" => "durationin:1500;scalexin:0.8;scaleyin:0.8;scalexout:0.8;scaleyout:0.8;", :src => "assets/images/demo/layerslider/ls5box.png", :style => "top:80px;left:50%;white-space: nowrap;"}/
|
||||
/ SLIDE
|
||||
.ls-slide{"data-ls" => "slidedelay:8000;transition2d:1;"}
|
||||
/ background image
|
||||
%img.ls-bg{:alt => "Slide background", :src => image_path("slider/bg.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 => "assets/images/demo/layerslider/slide-b-bg.jpg"}/
|
||||
%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;"}
|
||||
SMARTY TEMPLATE
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:-100;durationin:2000;delayin:1500;offsetxout:-100;durationout:1000;parallaxlevel:-2;", :src => "assets/images/demo/layerslider/slide-b-1.png", :style => "top:30%;left:50%;width:120%;height:auto;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:50;durationin:2000;delayin:1500;offsetxout:50;durationout:1000;parallaxlevel:1;", :src => "assets/images/demo/layerslider/slide-b-2.png", :style => "top:3px;left:137px;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:100;durationin:2000;delayin:1500;offsetxout:100;durationout:1000;parallaxlevel:3;", :src => "assets/images/demo/layerslider/slide-b-3.png", :style => "top:203px;left:383px;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:150;durationin:2000;delayin:1500;offsetxout:150;durationout:1000;parallaxlevel:5;", :src => "assets/images/demo/layerslider/slide-b-4.png", :style => "top:206px;left:486px;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:200;durationin:2000;delayin:1500;offsetxout:200;durationout:1000;parallaxlevel:7;", :src => "assets/images/demo/layerslider/slide-b-5.png", :style => "top:171px;left:559px;white-space: nowrap;"}/
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:1500;delayin:1500;rotateyin:90;transformoriginin:left 50% 0;offsetxout:0;durationout:1500;showuntil:1000;rotateyout:-90;transformoriginout:left 50% 0;", :style => "top:47%;left:690px;font-weight: 500;font-size:35px;color:#ffffff;white-space: nowrap;"}
|
||||
Move your mouse
|
||||
%br/
|
||||
over this slide!
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:0;durationin:1500;delayin:1500;rotateyin:90;transformoriginin:right 50% 0;offsetxout:0;durationout:1500;showuntil:1000;rotateyout:-90;transformoriginout:right 50% 0;", :src => "assets/images/demo/layerslider/mouse.png", :style => "top:45%;left:585px;white-space: nowrap;"}/
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2000;delayin:3500;rotatein:-45;rotateyin:-1;scalexin:0.5;scaleyin:0.5;transformoriginin:left bottom 0;offsetxout:0;durationout:1000;rotateout:45;scalexout:2;scaleyout:2;transformoriginout:right bottom 0;", :style => "top:340px;left:150px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#849e00;background:#ffffff;border-radius:4px;white-space: nowrap;"}
|
||||
INCREDIBLE FEATURES
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2000;delayin:3500;rotatein:-45;scalexin:2;scaleyin:2;transformoriginin:right top 0;offsetxout:0;durationout:1000;rotateout:45;scalexout:2;scaleyout:2;transformoriginout:left top 0;", :style => "top:300px;left:150px;font-weight: 500;font-size:30px;color:#ffffff;white-space: nowrap;"}
|
||||
responsive template
|
||||
:javascript
|
||||
var layer_options = {
|
||||
showBarTimer: true ,
|
||||
responsive: false,
|
||||
responsiveUnder: 1280,
|
||||
layersContainer: 1280,
|
||||
hoverPrevNext: true,
|
||||
skinsPath: 'assets/plugins/slider.layerslider/skins/'
|
||||
}
|
||||
/ /LAYER SLIDER
|
||||
/
|
||||
AVAILABLE BODY CLASSES:
|
||||
|
||||
smoothscroll = create a browser smooth scroll
|
||||
enable-animation = enable WOW animations
|
||||
|
||||
bg-grey = grey background
|
||||
grain-grey = grey grain background
|
||||
grain-blue = blue grain background
|
||||
grain-green = green grain background
|
||||
grain-blue = blue grain background
|
||||
grain-orange = orange grain background
|
||||
grain-yellow = yellow grain background
|
||||
|
||||
boxed = boxed layout
|
||||
pattern1 ... patern11 = pattern background
|
||||
menu-vertical-hide = hidden, open on click
|
||||
|
||||
BACKGROUND IMAGE [together with .boxed class]
|
||||
data-background="assets/images/boxed_background/1.jpg"
|
||||
%body.smoothscroll.enable-animation
|
||||
= render 'layouts/slidetop'
|
||||
/ wrapper
|
||||
#wrapper
|
||||
%section#readMore
|
||||
.container
|
||||
.row
|
||||
.col-md-4
|
||||
.heading-title.heading-border-bottom.heading-color
|
||||
%h3=link_to "Web" , page_path(:web)
|
||||
%p
|
||||
The web is still growing and with it the demand for developers.
|
||||
Change your profession and your life by learning to create web application.
|
||||
=link_to page_path(:web) do
|
||||
More about
|
||||
%span.word-rotator{"data-delay" => "2000"}
|
||||
%span.items
|
||||
%span programming
|
||||
%span html
|
||||
%span css
|
||||
%span javascript
|
||||
%span databases
|
||||
%i.glyphicon.glyphicon-menu-right.size-12
|
||||
.col-md-4
|
||||
.heading-title.heading-border-bottom.heading-color
|
||||
%h3=link_to "Dev" , page_path(:dev)
|
||||
%p
|
||||
Applications, web, mobile and desktop are converging more and more on web standards.
|
||||
We give you a good foundation in programming and current techniques. You decide where to go from there.
|
||||
=link_to page_path(:dev) do
|
||||
More about
|
||||
%span.word-rotator{"data-delay" => "2000"}
|
||||
%span.items
|
||||
%span course modules
|
||||
%span course structure
|
||||
%span css
|
||||
%i.glyphicon.glyphicon-menu-right.size-12
|
||||
.col-md-4
|
||||
.heading-title.heading-border-bottom.heading-color
|
||||
%h3=link_to "Camp" , page_path(:camp)
|
||||
%p
|
||||
During the course you stay at a beautiful place in the middle of nature.
|
||||
Small groups, an iterative teaching approach and the fact that everything else is taken care for you, let you jumpstart your new career.
|
||||
=link_to page_path(:camp) do
|
||||
More about
|
||||
%span.word-rotator{"data-delay" => "2000"}
|
||||
%span.items
|
||||
%span where you stay
|
||||
%span food
|
||||
%i.glyphicon.glyphicon-menu-right.size-12
|
||||
.divider.double-line.margin-top-80.margin-bottom-80
|
||||
/ divider
|
||||
/
|
||||
AVAILABLE HEADER CLASSES
|
||||
controlls-over = navigation buttons over the image
|
||||
buttons-autohide = navigation buttons visible on mouse hover only
|
||||
|
||||
Default nav height: 96px
|
||||
\.header-md = 70px nav height
|
||||
\.header-sm = 60px nav height
|
||||
|
||||
\.noborder = remove bottom border (only with transparent use)
|
||||
\.transparent = transparent header
|
||||
\.translucent = translucent header
|
||||
\.sticky = sticky header
|
||||
\.static = static header
|
||||
\.dark = dark header
|
||||
\.bottom = header on bottom
|
||||
|
||||
shadow-before-1 = shadow 1 header top
|
||||
shadow-after-1 = shadow 1 header bottom
|
||||
shadow-before-2 = shadow 2 header top
|
||||
shadow-after-2 = shadow 2 header bottom
|
||||
shadow-before-3 = shadow 3 header top
|
||||
shadow-after-3 = shadow 3 header bottom
|
||||
|
||||
\.clearfix = required for mobile menu, do not remove!
|
||||
|
||||
Example Usage: class="clearfix sticky header-sm transparent noborder"
|
||||
#header.sticky.clearfix
|
||||
/ TOP NAV
|
||||
%header#topNav
|
||||
.container
|
||||
/ Mobile Menu Button
|
||||
%button.btn.btn-mobile{"data-target" => ".nav-main-collapse", "data-toggle" => "collapse"}
|
||||
%i.fa.fa-bars
|
||||
/ BUTTONS
|
||||
%ul.pull-right.nav.nav-pills.nav-second-main
|
||||
/ SEARCH
|
||||
%li.search
|
||||
%a{:href => "javascript:;"}
|
||||
%i.fa.fa-user
|
||||
.search-box
|
||||
%form{:action => "page-search-result-1.html", :method => "get"}
|
||||
.input-group
|
||||
%input.form-control{:name => "src", :placeholder => "Search", :type => "text"}/
|
||||
%span.input-group-btn
|
||||
%button.btn.btn-primary{:type => "submit"} Search
|
||||
/ /SEARCH
|
||||
/ /BUTTONS
|
||||
/ Logo
|
||||
%a.logo.pull-left{:href => "index.html"}
|
||||
= image_tag "web_logo.png"
|
||||
= render 'layouts/navigation'
|
||||
/ /Top Nav
|
||||
/ LAYER SLIDER
|
||||
%section#slider
|
||||
.slider
|
||||
/
|
||||
AVAILABLE CLASSES
|
||||
\.height-300
|
||||
\.height-350
|
||||
\.height-400
|
||||
\.height-450
|
||||
\.height-500
|
||||
\.height-550
|
||||
\.height-600
|
||||
\.height-650
|
||||
\.height-700
|
||||
\.height-750
|
||||
\.height-800
|
||||
.layerslider.height-350{:style => "width:100%;"}
|
||||
/ SLIDE
|
||||
.ls-slide{"data-ls" => "slidedelay:8000;transition2d:1;timeshift:-1000;"}
|
||||
/ background
|
||||
%img.ls-bg{:alt => "Slide background", :src => image_path("slider/net.jpg")}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:0;durationin:1500;delayin:3000;easingin:linear;scalexin:0;scaleyin:0;offsetxout:0;durationout:1500;showuntil:1;easingout:linear;scalexout:2;scaleyout:2;", :src => "assets/images/demo/layerslider/circle.png", :style => "top:20px;left:50%;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:0;durationin:1500;delayin:4000;easingin:linear;scalexin:0;scaleyin:0;offsetxout:0;durationout:1500;showuntil:1;easingout:linear;scalexout:2;scaleyout:2;", :src => "assets/images/demo/layerslider/circle.png", :style => "top:20px;left:50%;white-space: nowrap;"}/
|
||||
/ left
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2500;delayin:1000;scalexin:0;scaleyin:0;offsetxout:0;scalexout:0;scaleyout:0;", :style => "top:124px;left:156px;font-weight: 300; opacity: .4;font-size:200px;color:#fff;white-space: nowrap;"}
|
||||
\&
|
||||
%p.ls-l{"data-ls" => "offsetxin:-50;durationin:2000;delayin:1000;offsetxout:-50;durationout:1000;", :style => "top:320px;left:120px;font-weight: 300; background: white; background: rgba(255,255,255,.85); height:40px; padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#A94545;white-space: nowrap;"}
|
||||
ALL THESE FEATURES
|
||||
%p.ls-l{"data-ls" => "offsetxin:50;delayin:2000;skewxin:-60;offsetxout:-50;durationout:1000;skewxout:-60;", :style => "top:360px;left:273px;font-weight: 500;font-size:30px;color:#fff;white-space: nowrap;"}
|
||||
much more!
|
||||
/ right
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;delayin:2500;rotatein:90;transformoriginin:right bottom 0;offsetxout:0;durationout:1500;transformoriginout:right bottom 0;", :style => "top:320px;left:1013px;font-weight: 500; text-align: right;font-size:30px;color:#fff;white-space: nowrap;"}
|
||||
\...to create
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2500;delayin:3250;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:0;durationout:1000;rotatexout:90;transformoriginout:50% bottom 0;", :style => "top:360px;left:890px;font-weight: 300; text-align: right;width:260px;height:40px;padding-right:10px;font-size:30px;line-height:37px;color:#ffffff;background:#f06a52;white-space: nowrap;"}
|
||||
THE BEST SLIDER
|
||||
%p.ls-l{"data-ls" => "offsetxin:-50;delayin:3500;skewxin:60;scalexin:1.5;offsetxout:-50;durationout:1000;skewxout:60;scalexout:1.5;", :style => "top:405px;left:883px;font-size:30px;color:#fff;white-space: nowrap;"}
|
||||
with no compromises!
|
||||
%img.ls-l{:alt => "", "data-ls" => "durationin:1500;scalexin:0.8;scaleyin:0.8;scalexout:0.8;scaleyout:0.8;", :src => "assets/images/demo/layerslider/ls5box.png", :style => "top:80px;left:50%;white-space: nowrap;"}/
|
||||
/ SLIDE
|
||||
.ls-slide{"data-ls" => "slidedelay:8000;transition2d:1;"}
|
||||
/ background image
|
||||
%img.ls-bg{:alt => "Slide background", :src => image_path("slider/bg.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 => "assets/images/demo/layerslider/slide-b-bg.jpg"}/
|
||||
%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;"}
|
||||
SMARTY TEMPLATE
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:-100;durationin:2000;delayin:1500;offsetxout:-100;durationout:1000;parallaxlevel:-2;", :src => "assets/images/demo/layerslider/slide-b-1.png", :style => "top:30%;left:50%;width:120%;height:auto;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:50;durationin:2000;delayin:1500;offsetxout:50;durationout:1000;parallaxlevel:1;", :src => "assets/images/demo/layerslider/slide-b-2.png", :style => "top:3px;left:137px;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:100;durationin:2000;delayin:1500;offsetxout:100;durationout:1000;parallaxlevel:3;", :src => "assets/images/demo/layerslider/slide-b-3.png", :style => "top:203px;left:383px;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:150;durationin:2000;delayin:1500;offsetxout:150;durationout:1000;parallaxlevel:5;", :src => "assets/images/demo/layerslider/slide-b-4.png", :style => "top:206px;left:486px;white-space: nowrap;"}/
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:200;durationin:2000;delayin:1500;offsetxout:200;durationout:1000;parallaxlevel:7;", :src => "assets/images/demo/layerslider/slide-b-5.png", :style => "top:171px;left:559px;white-space: nowrap;"}/
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:1500;delayin:1500;rotateyin:90;transformoriginin:left 50% 0;offsetxout:0;durationout:1500;showuntil:1000;rotateyout:-90;transformoriginout:left 50% 0;", :style => "top:47%;left:690px;font-weight: 500;font-size:35px;color:#ffffff;white-space: nowrap;"}
|
||||
Move your mouse
|
||||
%br/
|
||||
over this slide!
|
||||
%img.ls-l{:alt => "", "data-ls" => "offsetxin:0;durationin:1500;delayin:1500;rotateyin:90;transformoriginin:right 50% 0;offsetxout:0;durationout:1500;showuntil:1000;rotateyout:-90;transformoriginout:right 50% 0;", :src => "assets/images/demo/layerslider/mouse.png", :style => "top:45%;left:585px;white-space: nowrap;"}/
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2000;delayin:3500;rotatein:-45;rotateyin:-1;scalexin:0.5;scaleyin:0.5;transformoriginin:left bottom 0;offsetxout:0;durationout:1000;rotateout:45;scalexout:2;scaleyout:2;transformoriginout:right bottom 0;", :style => "top:340px;left:150px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#849e00;background:#ffffff;border-radius:4px;white-space: nowrap;"}
|
||||
INCREDIBLE FEATURES
|
||||
%p.ls-l{"data-ls" => "offsetxin:0;durationin:2000;delayin:3500;rotatein:-45;scalexin:2;scaleyin:2;transformoriginin:right top 0;offsetxout:0;durationout:1000;rotateout:45;scalexout:2;scaleyout:2;transformoriginout:left top 0;", :style => "top:300px;left:150px;font-weight: 500;font-size:30px;color:#ffffff;white-space: nowrap;"}
|
||||
responsive template
|
||||
:javascript
|
||||
var layer_options = {
|
||||
showBarTimer: true ,
|
||||
responsive: false,
|
||||
responsiveUnder: 1280,
|
||||
layersContainer: 1280,
|
||||
hoverPrevNext: true,
|
||||
skinsPath: 'assets/plugins/slider.layerslider/skins/'
|
||||
}
|
||||
/ /LAYER SLIDER
|
||||
/
|
||||
%section#readMore
|
||||
.container
|
||||
.row
|
||||
.col-md-4
|
||||
.heading-title.heading-border-bottom.heading-color
|
||||
%h3=link_to "Web" , page_path(:web)
|
||||
%p
|
||||
The web is still growing and with it the demand for developers.
|
||||
Change your profession and your life by learning to create web application.
|
||||
=link_to page_path(:web) do
|
||||
More about
|
||||
%span.word-rotator{"data-delay" => "2000"}
|
||||
%span.items
|
||||
%span programming
|
||||
%span html
|
||||
%span css
|
||||
%span javascript
|
||||
%span databases
|
||||
%i.glyphicon.glyphicon-menu-right.size-12
|
||||
.col-md-4
|
||||
.heading-title.heading-border-bottom.heading-color
|
||||
%h3=link_to "Dev" , page_path(:dev)
|
||||
%p
|
||||
Applications, web, mobile and desktop are converging more and more on web standards.
|
||||
We give you a good foundation in programming and current techniques. You decide where to go from there.
|
||||
=link_to page_path(:dev) do
|
||||
More about
|
||||
%span.word-rotator{"data-delay" => "2000"}
|
||||
%span.items
|
||||
%span course modules
|
||||
%span course structure
|
||||
%span css
|
||||
%i.glyphicon.glyphicon-menu-right.size-12
|
||||
.col-md-4
|
||||
.heading-title.heading-border-bottom.heading-color
|
||||
%h3=link_to "Camp" , page_path(:camp)
|
||||
%p
|
||||
During the course you stay at a beautiful place in the middle of nature.
|
||||
Small groups, an iterative teaching approach and the fact that everything else is taken care for you, let you jumpstart your new career.
|
||||
=link_to page_path(:camp) do
|
||||
More about
|
||||
%span.word-rotator{"data-delay" => "2000"}
|
||||
%span.items
|
||||
%span where you stay
|
||||
%span food
|
||||
%i.glyphicon.glyphicon-menu-right.size-12
|
||||
.divider.double-line.margin-top-80.margin-bottom-80
|
||||
/ divider
|
||||
/
|
||||
controlls-over = navigation buttons over the image
|
||||
buttons-autohide = navigation buttons visible on mouse hover only
|
||||
|
||||
data-plugin-options:
|
||||
"singleItem": true
|
||||
"autoPlay": true (or ms. eg: 4000)
|
||||
"navigation": true
|
||||
"pagination": true
|
||||
.text-center
|
||||
.owl-carousel.nomargin{"data-plugin-options" => "{\"singleItem\": false, \"autoPlay\": true}"}
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/1.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/2.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/3.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/4.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/5.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/6.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/7.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/8.jpg"}/
|
||||
|
||||
|
||||
= render 'layouts/footer'
|
||||
/ /wrapper
|
||||
= render 'layouts/wrapper'
|
||||
data-plugin-options:
|
||||
"singleItem": true
|
||||
"autoPlay": true (or ms. eg: 4000)
|
||||
"navigation": true
|
||||
"pagination": true
|
||||
.text-center
|
||||
.owl-carousel.nomargin{"data-plugin-options" => "{\"singleItem\": false, \"autoPlay\": true}"}
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/1.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/2.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/3.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/4.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/5.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/6.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/7.jpg"}/
|
||||
%div
|
||||
%img.img-responsive{:alt => "", :src => "assets/images/demo/brands/8.jpg"}/
|
||||
|
|
|
|||
Loading…
Reference in New Issue