Nicolae Claudius
13 years ago
20 changed files with 1347 additions and 51 deletions
|
Before Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,85 @@
|
||||
@import "compass/css3/gradient"; |
||||
@import "compass/css3/border-radius"; |
||||
@import "compass/css3/box-shadow"; |
||||
|
||||
@mixin slick-black { |
||||
@include background( |
||||
image-url("marketing/action/slick-black.png"), |
||||
linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%)); |
||||
border: 0; |
||||
@include border-radius(4px); |
||||
@include box-shadow(inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1)); |
||||
color: #fff; |
||||
line-height: 1; |
||||
padding: 8px 0; |
||||
text-shadow: 0px -1px 1px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, 0.3); |
||||
|
||||
&:hover { |
||||
@include background( |
||||
image-url("marketing/action/slick-black-hover.png"), |
||||
linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%)); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&:active { |
||||
@include background( |
||||
image-url("marketing/action/slick-black-hover.png"), |
||||
linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%)); |
||||
} |
||||
} |
||||
|
||||
.marketing .header-inner { |
||||
width: 77%; |
||||
margin: auto; |
||||
position: relative; |
||||
} |
||||
|
||||
#main.marketing-main { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
float: none; |
||||
|
||||
.block .content .marketing-inner { |
||||
padding: 0 30px 30px; |
||||
p { |
||||
line-height: 1em; |
||||
color: #555; |
||||
} |
||||
} |
||||
|
||||
.marketing-text { |
||||
padding-right: 20px; |
||||
} |
||||
.marketing-images { |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
h1 { |
||||
text-transform: uppercase; |
||||
font-size: 34px; |
||||
} |
||||
|
||||
li { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.action { |
||||
padding: 0 20px 20px 20px; |
||||
button { |
||||
@include slick-black; |
||||
width: 300px; |
||||
height: 60px; |
||||
margin: auto; |
||||
display: block; |
||||
font-family: "MuseoSans500", helvetica, arial, sans-serif; |
||||
strong { |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
} |
||||
em { |
||||
font-size: 13px; |
||||
font-weight: normal; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,85 @@
|
||||
#slidesWrapper { |
||||
width:470px; |
||||
position:relative; |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
#slides { |
||||
position:relative; |
||||
} |
||||
|
||||
#slides .slidesContainer { |
||||
background:#fff; |
||||
border:8px solid #fff; |
||||
margin-left:-8px; |
||||
box-shadow: 0 2.5px 5px rgba(0,0,0,.6); |
||||
} |
||||
|
||||
/* |
||||
Next/prev buttons |
||||
*/ |
||||
|
||||
#slides .slidesNext,#slides .slidesPrevious { |
||||
position:absolute; |
||||
top:134px; |
||||
left:-40px; |
||||
width:24px; |
||||
height:0; |
||||
padding-top:32px; |
||||
display:block; |
||||
z-index:101; |
||||
overflow:hidden; |
||||
background:url(<%= image_path 'slides/navigation-previous.png' %>) no-repeat 0 0; |
||||
} |
||||
|
||||
#slides .slidesNext { |
||||
left:488px; |
||||
background:url(<%= image_path 'slides/navigation-next.png' %>) no-repeat 0 0; |
||||
} |
||||
|
||||
/* |
||||
Pagination |
||||
*/ |
||||
|
||||
.slidesPagination { |
||||
margin-top: 10px; |
||||
position: relative; |
||||
width: 100px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
.slidesPagination li { |
||||
float:left; |
||||
margin:0 1px; |
||||
list-style:none; |
||||
} |
||||
|
||||
.slidesPagination li a { |
||||
display:block; |
||||
width:14px; |
||||
height:0; |
||||
padding-top:14px; |
||||
background-image:url(<%= image_path 'slides/pagination.png' %>); |
||||
background-position:0 0; |
||||
overflow:hidden; |
||||
} |
||||
|
||||
.slidesPagination li.slidesCurrent a { |
||||
background-position:0 -14px; |
||||
} |
||||
|
||||
.current_slide { |
||||
font:bold 10px/1.33 sans-serif; |
||||
float:left; |
||||
margin-top:12px; |
||||
} |
||||
|
||||
.controls { |
||||
display:block; |
||||
margin-top:12px; |
||||
float:left; |
||||
color:#333; |
||||
font:bold 10px/1.33 sans-serif; |
||||
margin-right:10px; |
||||
} |
||||
@ -0,0 +1,33 @@
|
||||
<h2>Free, no hassle service you can use right away</h2> |
||||
|
||||
<p> |
||||
We're System Administrators who built Simple DNS to fill our own needs. |
||||
We know how important is to have a reliable DNS service that you can |
||||
configure in no time, and we'd like to show how you too can take advantage of it. |
||||
</p> |
||||
|
||||
<ul> |
||||
<li> |
||||
Simple, intuitive interface you can use right away |
||||
</li> |
||||
<li> |
||||
Friendly and reliable support you can count on |
||||
</li> |
||||
<li> |
||||
Global infrastructure using fast and secure systems |
||||
</li> |
||||
<li> |
||||
Full offsite backup, daily |
||||
</li> |
||||
</ul> |
||||
|
||||
<div class="action"> |
||||
|
||||
<%= link_to new_user_registration_path, :style => 'text-decoration: none' do %> |
||||
<button> |
||||
<strong>Create an Account Now</strong><br> |
||||
<em>It's free, sign up in 60 seconds.</em> |
||||
</button> |
||||
<% end %> |
||||
|
||||
</div> |
||||
@ -0,0 +1,21 @@
|
||||
<div id="slidesWrapper"> |
||||
<div id="slides"> |
||||
<img src="http://slidesjs.com/examples/standard/img/slide-1.jpg"> |
||||
<img src="http://slidesjs.com/examples/standard/img/slide-2.jpg"> |
||||
<img src="http://slidesjs.com/examples/standard/img/slide-3.jpg"> |
||||
<img src="http://slidesjs.com/examples/standard/img/slide-4.jpg"> |
||||
</div> |
||||
</div> |
||||
|
||||
<script type="text/javascript"> |
||||
$("#slides") |
||||
.slides({ |
||||
width: 470, |
||||
navigation: false, |
||||
//responsive: true, |
||||
slide: { |
||||
interval: 500 |
||||
} |
||||
}) |
||||
.slides('play'); |
||||
</script> |
||||
@ -1,16 +1,20 @@
|
||||
<div class="block"> |
||||
<div class="content"> |
||||
<div class="inner marketing-inner"> |
||||
|
||||
<p>Marketing ...</p> |
||||
<h1>A DNS service created by sysadmins for sysadmins</h1> |
||||
|
||||
<p> |
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium |
||||
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore |
||||
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam |
||||
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur |
||||
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam |
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed |
||||
quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam |
||||
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam |
||||
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis |
||||
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil |
||||
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? |
||||
</p> |
||||
<table> |
||||
<tr> |
||||
<td class="marketing-text"> |
||||
<%= render :partial => 'headlines' %> |
||||
</td> |
||||
<td class="marketing-images"> |
||||
<%= render :partial => 'slides' %> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
Loading…
Reference in new issue