@@ -1,7 +1,8 @@ |
||
1 | 1 |
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable |
2 | 2 |
$( document ).ready(function() { |
3 |
- var mainbottom = $('#myCarousel').offset().top + $('#myCarousel').height(); |
|
4 |
- |
|
3 |
+ var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10; |
|
4 |
+ var about_bottom = $('#post').offset().top + $('#post-image').height() - (screen.height - $('#post-image').height() + 152); |
|
5 |
+ var post_bottom = $('.feature-post-text').offset().top + $('.feature-post-text').height() - (screen.height - $('.feature-post-text').height() + 232); |
|
5 | 6 |
|
6 | 7 |
// on scroll, |
7 | 8 |
$(window).on('scroll',function(){ |
@@ -15,5 +16,34 @@ $( document ).ready(function() { |
||
15 | 16 |
} |
16 | 17 |
|
17 | 18 |
}); |
19 |
+ |
|
20 |
+ // on scroll, |
|
21 |
+ $(window).on('scroll',function(){ |
|
22 |
+ |
|
23 |
+ // we round here to reduce a little workload |
|
24 |
+ stop = Math.round($(window).scrollTop()); |
|
25 |
+ if (stop > about_bottom) { |
|
26 |
+ $('#post-image').addClass('affix top-affix '); |
|
27 |
+ } else { |
|
28 |
+ $('#post-image').removeClass('affix top-affix '); |
|
29 |
+ } |
|
30 |
+ |
|
31 |
+ }); |
|
32 |
+ |
|
33 |
+ // on scroll, |
|
34 |
+ $(window).on('scroll',function(){ |
|
35 |
+ |
|
36 |
+ // we round here to reduce a little workload |
|
37 |
+ stop = Math.round($(window).scrollTop()); |
|
38 |
+ if (stop > post_bottom && stop > about_bottom) { |
|
39 |
+ $('#post-image').removeClass('affix top-affix '); |
|
40 |
+ var textsize = $('.feature-post-text').height() - $('#post-image').height()/2 - 80 |
|
41 |
+ $('#post-image').css('margin-top', textsize); |
|
42 |
+ } else { |
|
43 |
+ $('#post-image').css('margin-top', '0'); |
|
44 |
+ } |
|
45 |
+ |
|
46 |
+ }); |
|
47 |
+ |
|
18 | 48 |
|
19 | 49 |
}); |
@@ -2,28 +2,39 @@ |
||
2 | 2 |
// They will automatically be included in application.css. |
3 | 3 |
// You can use Less here: http://lesscss.org/ |
4 | 4 |
|
5 |
+body { |
|
6 |
+ max-width:100%; |
|
7 |
+} |
|
8 |
+ |
|
9 |
+.navbar .nav { |
|
10 |
+ margin-top: 30px; |
|
11 |
+} |
|
12 |
+ |
|
5 | 13 |
.navbar-inner { |
6 |
- background-color :transparent; |
|
14 |
+ background-color: rgba(0, 0, 0, 0.75); |
|
7 | 15 |
color: white; |
8 | 16 |
transition: all 0.25s ease; |
9 | 17 |
border: none; |
10 | 18 |
text-shadow: 0 0 0 #ffffff; |
19 |
+ max-width:100%; |
|
11 | 20 |
/* make sure to add vendor prefixes here */ |
12 | 21 |
} |
13 | 22 |
|
14 | 23 |
.navbar .nav > li > a { |
15 | 24 |
text-shadow: 0 0 0 #ffffff; |
16 |
- color: white; |
|
25 |
+ color: #00A0E3; |
|
26 |
+ font-size: 18px; |
|
27 |
+ text-transform: uppercase; |
|
17 | 28 |
} |
18 | 29 |
|
19 | 30 |
.navbar .nav > li > a:hover { |
20 | 31 |
text-shadow: 0 0 0 #ffffff; |
21 | 32 |
color: white; |
22 |
- text-decoration: underline; |
|
33 |
+ //text-decoration: underline; |
|
23 | 34 |
} |
24 | 35 |
|
25 | 36 |
.navbar-inner.past-main { |
26 |
- background-color:#fff; |
|
37 |
+ background-color:#202020; |
|
27 | 38 |
color:#444; |
28 | 39 |
} |
29 | 40 |
|
@@ -35,4 +46,112 @@ |
||
35 | 46 |
#below-main { |
36 | 47 |
height:1000px; |
37 | 48 |
background-color:#eee; |
38 |
-} |
|
49 |
+} |
|
50 |
+ |
|
51 |
+h1.header { |
|
52 |
+ text-transform: uppercase; |
|
53 |
+ color: white; |
|
54 |
+ font-size: 72px; |
|
55 |
+} |
|
56 |
+ |
|
57 |
+h2.header { |
|
58 |
+ text-transform: uppercase; |
|
59 |
+ color: #202020; |
|
60 |
+ font-size: 60px; |
|
61 |
+ text-align: center; |
|
62 |
+ font-weight: 100; |
|
63 |
+ line-height: 70px; |
|
64 |
+} |
|
65 |
+ |
|
66 |
+h4.header { |
|
67 |
+ text-transform: uppercase; |
|
68 |
+ color: #202020; |
|
69 |
+ text-align: center; |
|
70 |
+ font-weight: 100; |
|
71 |
+ margin-bottom: 20px; |
|
72 |
+ margin-top: 100px; |
|
73 |
+} |
|
74 |
+ |
|
75 |
+p.header { |
|
76 |
+ color: white; |
|
77 |
+} |
|
78 |
+ |
|
79 |
+a:hover > .caret { |
|
80 |
+display: inline-block; |
|
81 |
+width: 0; |
|
82 |
+height: 0; |
|
83 |
+vertical-align: top; |
|
84 |
+border-top: 4px solid #000000; |
|
85 |
+border-right: 4px solid transparent; |
|
86 |
+border-left: 4px solid transparent; |
|
87 |
+content: ""; |
|
88 |
+margin-top: 8px; |
|
89 |
+} |
|
90 |
+ |
|
91 |
+ |
|
92 |
+.thumb { |
|
93 |
+ margin-top: 20px; |
|
94 |
+ min-height:100%; |
|
95 |
+ background-size: cover; |
|
96 |
+ background-repeat: no-repeat; |
|
97 |
+ background-position: center center; |
|
98 |
+ float: left; |
|
99 |
+} |
|
100 |
+ |
|
101 |
+#design { |
|
102 |
+ background-image: url(thumb_design.jpg); |
|
103 |
+ width: 33%; |
|
104 |
+} |
|
105 |
+ |
|
106 |
+#agencia { |
|
107 |
+ background-image: url(thumb_agencia.jpg); |
|
108 |
+ width: 34%; |
|
109 |
+} |
|
110 |
+ |
|
111 |
+#editora { |
|
112 |
+ background-image: url(thumb_editora.jpg); |
|
113 |
+ width: 33%; |
|
114 |
+} |
|
115 |
+ |
|
116 |
+.thumb-text { |
|
117 |
+ text-transform: uppercase; |
|
118 |
+ color: white; |
|
119 |
+ font-size: 60px; |
|
120 |
+ text-align: center; |
|
121 |
+ margin-top: 35%; |
|
122 |
+ font-weight: bold; |
|
123 |
+} |
|
124 |
+ |
|
125 |
+.lead-big { |
|
126 |
+ font-size: 32px; |
|
127 |
+ font-weight: 100; |
|
128 |
+ line-height: 40px; |
|
129 |
+} |
|
130 |
+ |
|
131 |
+.feature-post-text p { |
|
132 |
+ line-height: 1.2; |
|
133 |
+} |
|
134 |
+ |
|
135 |
+.top-affix { |
|
136 |
+ top: 102px; |
|
137 |
+} |
|
138 |
+ |
|
139 |
+.Absolute-Center { |
|
140 |
+height: 50%; |
|
141 |
+width: 50%; |
|
142 |
+overflow: auto; |
|
143 |
+margin: auto; |
|
144 |
+position: absolute; |
|
145 |
+top: 0; |
|
146 |
+left: 0; |
|
147 |
+bottom: 0; |
|
148 |
+right: 0; |
|
149 |
+} |
|
150 |
+ |
|
151 |
+.Absolute-Center.is-Responsive { |
|
152 |
+width: 60%; |
|
153 |
+height: 60%; |
|
154 |
+min-width: 200px; |
|
155 |
+max-width: 400px; |
|
156 |
+padding: 40px; |
|
157 |
+} |
@@ -4,6 +4,7 @@ class StartController < ApplicationController |
||
4 | 4 |
|
5 | 5 |
def index |
6 | 6 |
@blog_posts = BlogPost.order('created_at DESC').take(4) |
7 |
+ @last_post = BlogPost.last |
|
7 | 8 |
end |
8 | 9 |
|
9 | 10 |
end |
@@ -46,14 +46,27 @@ |
||
46 | 46 |
<span class="icon-bar"></span> |
47 | 47 |
<span class="icon-bar"></span> |
48 | 48 |
</a> |
49 |
- <a class="brand" href="#">RailsWebsiteTemplate</a> |
|
50 |
- <div class="container nav-collapse"> |
|
51 |
- <ul class="nav"> |
|
52 |
- <li><%= link_to "Link1", "/path1" %></li> |
|
53 |
- <li><%= link_to "Link2", "/path2" %></li> |
|
54 |
- <li><%= link_to "Link3", "/path3" %></li> |
|
55 |
- </ul> |
|
56 |
- </div><!--/.nav-collapse --> |
|
49 |
+ <%= image_tag "logotipo_velvet.png", class: 'brand', style: 'width: 250px;' %> |
|
50 |
+ |
|
51 |
+ <div class="container nav-collapse "> |
|
52 |
+ <ul class="nav pull-right"> |
|
53 |
+ <li><%= link_to "Blog", blog_path %></li> |
|
54 |
+ <li ><%= link_to (t 'contact.contact'), contact_messages_path %></li> |
|
55 |
+ <% if current_user.admin %> |
|
56 |
+ <li><%= link_to ('<i class="fa fa-cogs"></i>').html_safe, admin_dashboard_path %></li> |
|
57 |
+ <% end %> |
|
58 |
+ <% if user_signed_in? %> |
|
59 |
+ <li><%= link_to ('<i class="fa fa-user"></i>').html_safe, edit_user_registration_path %></li> |
|
60 |
+ <li><%= link_to ('<i class="fa fa-sign-out"></i>').html_safe, destroy_user_session_path, method: :delete %></li> |
|
61 |
+ <% else %> |
|
62 |
+ <li><%= link_to ('<i class="fa fa-sign-in"></i>').html_safe, new_user_session_path %></li> |
|
63 |
+ <li><%= link_to (t "nav.signup"), new_user_registration_path %></li> |
|
64 |
+ <% end %> |
|
65 |
+ |
|
66 |
+ </ul> |
|
67 |
+ |
|
68 |
+ </div><!--/.nav-collapse --> |
|
69 |
+ |
|
57 | 70 |
</div> |
58 | 71 |
</div> |
59 | 72 |
</div> |
@@ -10,10 +10,18 @@ |
||
10 | 10 |
<div class="carousel-inner" role="listbox"> |
11 | 11 |
<div class="item active"> |
12 | 12 |
<%= image_tag "header.jpg", style: 'width: 100%;' %> |
13 |
- <div class="container"> |
|
14 |
- <div class="carousel-caption"> |
|
15 |
- <h1><%= @config.website_name %></h1> |
|
16 |
- <p><%= @config.tagline %></p> |
|
13 |
+ <div class="container" > |
|
14 |
+ <div class="row"> |
|
15 |
+ <div class="span12" style="height: 20px;"> |
|
16 |
+ <div class="" style="background-color: transparent; position: relative; top: -500px;"> |
|
17 |
+ |
|
18 |
+ <h1 class="header">Design Conectivo</h1> |
|
19 |
+ <p class="lead header lead-big"> |
|
20 |
+ <%= @config.tagline %> |
|
21 |
+ |
|
22 |
+ </p> |
|
23 |
+ </div> |
|
24 |
+ </div> |
|
17 | 25 |
</div> |
18 | 26 |
</div> |
19 | 27 |
</div> |
@@ -21,53 +29,79 @@ |
||
21 | 29 |
|
22 | 30 |
<div class="container" style="margin-top: 30px;"> |
23 | 31 |
<div class="row"> |
32 |
+ |
|
24 | 33 |
<div class="span12"> |
25 |
- |
|
26 |
- <div class="page-header"> |
|
27 |
- <h1><%= t 'blog.latest_posts'%> <%= link_to (t 'blog.more_posts'), blog_path, class: 'btn btn-large pull-right' %></h1> |
|
28 |
- </div> |
|
29 |
- |
|
30 |
- <ul class="thumbnails"> |
|
31 |
- <% @blog_posts.each do |post| %> |
|
32 |
- <li class="span3"> |
|
33 |
- <div class="thumbnail" style="height: 300px;"> |
|
34 |
- <% if post.image.file != nil %> |
|
35 |
- <%= image_tag post.image.thumb.to_s %> |
|
36 |
- <% else %> |
|
37 |
- <img src="http://placehold.it/300x200" alt=""> |
|
38 |
- <% end %> |
|
39 |
- <h3><%= link_to post.title, post_path(post) %></h3> |
|
40 |
- <p><%= post.description %></p> |
|
41 |
- </div> |
|
42 |
- </li> |
|
43 |
- <% end %> |
|
44 |
- </ul> |
|
45 |
- |
|
46 | 34 |
<div class="page-header"> |
47 |
- <h1>Sobre</h1> |
|
35 |
+ <h2 class="header">Sobre nós</h2> |
|
48 | 36 |
</div> |
49 | 37 |
|
50 |
- <p>Em tempos de conexões, como o nosso, em que as informações chegam à velocidade da luz aos quatro cantos do mundo e que as trocas se intensificam, irradiando em múltiplos focos, a comunicação deixa de ser matéria exclusiva de um ou dois campos do conhecimento para se tornar plataforma colaborativa entre diversas linguagens.</p> |
|
38 |
+ <p class="lead lead-big">Em tempos de conexões, como o nosso, em que as informações chegam à velocidade da luz aos quatro cantos do mundo e que as trocas se intensificam, irradiando em múltiplos focos, a comunicação deixa de ser matéria exclusiva de um ou dois campos do conhecimento para se tornar plataforma colaborativa entre diversas linguagens.</p> |
|
51 | 39 |
|
52 |
- <p>E, na medida em que a esfera digital se configura como um hub, por onde passam todas as formas de criação, ela coloca novos desafios para a criação, tanto no plano bidimensional quanto no tridimensional - que tende a se tornar cada vez mais experiêncial.</p> |
|
40 |
+ <p class="lead">E, na medida em que a esfera digital se configura como um hub, por onde passam todas as formas de criação, ela coloca novos desafios para a criação, tanto no plano bidimensional quanto no tridimensional - que tende a se tornar cada vez mais experiêncial.</p> |
|
53 | 41 |
|
54 |
- <p>A Velvet Design nasce de um profundo afinamento com as dinâmicas da comunicação de nossa época e, ao mesmo tempo, da convergência entre duas trajetórias no campo da criação.</p> |
|
42 |
+ <p class="lead ">A <b>Velvet Design</b> nasce de um profundo afinamento com as dinâmicas da comunicação de nossa época e, ao mesmo tempo, da convergência entre duas trajetórias no campo da criação.</p> |
|
55 | 43 |
|
56 |
- <p>Por um lado, da experiência de anos de trabalho com cenografia e design gráfico, de Roberta Queiroz. Por outro, do percurso consolidado na pintura, nacional e internacionalmente, do artista plástico André Poli. Dessa parceria entre linguagens e da afinidade com o propósito de uma atuação multidisciplinar, surge a Velvet em 2006, com a meta de desenvolver projetos, em diferentes escalas e suportes, que respondam às necessidades específicas de cada cliente.</p> |
|
44 |
+ <p class="lead">Por um lado, da experiência de anos de trabalho com cenografia e design gráfico, de <b>Roberta Queiroz</b>. Por outro, do percurso consolidado na pintura, nacional e internacionalmente, do artista plástico <b>André Poli</b>. Dessa parceria entre linguagens e da afinidade com o propósito de uma atuação multidisciplinar, surge a Velvet em 2006, com a meta de desenvolver projetos, em diferentes escalas e suportes, que respondam às necessidades específicas de cada cliente.</p> |
|
57 | 45 |
|
58 |
- <p>Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p> |
|
46 |
+ </div> |
|
47 |
+ |
|
48 |
+ </div> |
|
49 |
+</div> |
|
50 |
+<div style="margin-top: 50px;"></div> |
|
51 |
+ |
|
52 |
+ <div id="design" class="thumb"><div class="thumb-text">Design</div></div> |
|
53 |
+ <div id="agencia" class="thumb"><div class="thumb-text">Agência</div></div> |
|
54 |
+ <div id="editora" class="thumb"><div class="thumb-text">Editora</div></div> |
|
59 | 55 |
|
60 |
- <p>Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p> |
|
61 | 56 |
|
62 |
- <p>Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p> |
|
63 | 57 |
|
64 |
- <div class="page-header"> |
|
65 |
- <h1>Contato</h1> |
|
66 |
- </div> |
|
67 |
- |
|
68 | 58 |
|
59 |
+<div id="about2" class="container"> |
|
60 |
+ <div class="row" style="margin-top: 80px;"> |
|
61 |
+ <div class="span12"> |
|
62 |
+ |
|
63 |
+ <p class="lead lead-big">Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p> |
|
64 |
+ |
|
65 |
+ <p class="lead">Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p> |
|
66 |
+ |
|
67 |
+ <p class="lead">Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p> |
|
68 |
+ </div> |
|
69 |
+ |
|
70 |
+ </div> |
|
71 |
+</div> |
|
69 | 72 |
|
70 |
- <br> |
|
73 |
+<div id="post" style="margin-top: 80px; " class=""> |
|
74 |
+ <div id="post-image" class="pull-left" style="width: 50%; height: 1000px; overflow: hide;"> |
|
75 |
+ <%= image_tag "post_maison.jpg", style: 'width: 100%; max-height: 1000px;'%> |
|
76 |
+ </div> |
|
77 |
+ <div class="pull-right" style="width: 50%; background-color: #F7F7F7;"> |
|
78 |
+ <div style="padding: 50px; padding-top: 20px; width: 70%"> |
|
79 |
+ <h4 class="header">Notícias</h4> |
|
80 |
+ <h2 class="header" style="margin-bottom: 50px;"><%= @last_post.title.html_safe %></h2> |
|
81 |
+ <div class="feature-post-text"><%= @last_post.content.html_safe %></div> |
|
71 | 82 |
</div> |
72 | 83 |
</div> |
73 | 84 |
</div> |
85 |
+ |
|
86 |
+<div id="about2" class="container"> |
|
87 |
+ <div class="row" style="margin-top: 80px;"> |
|
88 |
+ <div class="span12"> |
|
89 |
+ |
|
90 |
+ <p class="lead lead-big">Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p> |
|
91 |
+ |
|
92 |
+ <p class="lead">Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p> |
|
93 |
+ |
|
94 |
+ <p class="lead">Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p> |
|
95 |
+ </div> |
|
96 |
+ |
|
97 |
+ </div> |
|
98 |
+</div> |
|
99 |
+ |
|
100 |
+<div class="container" style="backgroun-color: white;"> |
|
101 |
+ <footer style="margin-top: 100px; height: 80px;"> |
|
102 |
+ <hr> |
|
103 |
+ <p style="text-align: center;">© <%= @config.website_name %> <%= Time.now.year %></p> |
|
104 |
+ </footer> |
|
105 |
+</div> |
|
106 |
+ |
|
107 |
+ |