Permalink
Browse files

updated landing page with face pile and collapsed 'learn more'

  • Loading branch information...
1 parent bcb3484 commit b548c477236af25ff81eefbe1b77c2a8cbdeea08 @danielgrippi danielgrippi committed Aug 25, 2012
@@ -1,18 +1,3 @@
-app.views.SignUpBanner = app.views.Base.extend({
- templateName : 'sign-up-banner',
-
- presenter : function(){
- return {
- onFrontPage : window.location.pathname == '/'
- }
- },
-
- postRenderTemplate : function(){
- var words = ['nonsense', 'parties', 'laughs', 'stories', 'culture', 'sloths', 'awesome', 'fun', 'love', 'remixes','pizza', 'jokes',"high-5s", 'fuzzies', 'moments', 'lolz', 'in-jokes']
- _.delay(function(){$('#typist').loadText(words, 5000)}, 3000)
- }
-});
-
app.pages.Base = app.views.Base.extend({
// default options object to be overridden
// this ensures presence of the object.
@@ -0,0 +1,22 @@
+app.views.SignUpBanner = app.views.Base.extend({
+ templateName : 'sign-up-banner',
+
+ events : {
+ "click .learn-more-btn" : "toggleLearnMore"
+ },
+
+ presenter : function(){
+ return {
+ onFrontPage : window.location.pathname == '/'
+ }
+ },
+
+ postRenderTemplate : function(){
+ var words = ['nonsense', 'parties', 'laughs', 'stories', 'culture', 'sloths', 'awesome', 'fun', 'love', 'remixes','pizza', 'jokes',"high-5s", 'fuzzies', 'moments', 'lolz', 'in-jokes']
+ _.delay(function(){$('#typist').loadText(words, 5000)}, 3000)
+ },
+
+ toggleLearnMore : function() {
+ this.$(".more-info").slideToggle()
+ }
+});
@@ -470,53 +470,6 @@ a.imgfave-button{
}
-
-
-#landing_banner {
- padding-bottom: 40px;
- width:100%;
-
- #landing_header {
- margin: 0 auto;
- width: 840px;
- font-family:RobotoLight;
- border-bottom: 1px solid #CCC;
- padding: 0px 40px 30px 50px;
-
- h1, h2 {
- font-family:inherit;
- }
-
- h2 {
- color:#888;
- }
-
- #email-link{
- padding-left: 30px;
- line-height: 35px;
- }
-
- #sign_up{
- float:right;
- margin-right:30px;
- margin-top:13px;
- }
-
- #typist-container {
- width: 105px;
- display: inline-block;
- border-bottom: 1px dotted black;
- height: 35px;
- text-align: center;
- margin:0 5px;
- }
- #typist {
- -webkit-font-smoothing:antialiased;
- }
- }
-
-}
-
.btn-group {
a {
padding: 4px 10px;
@@ -229,3 +229,88 @@ ul.login {
height:$sub-header-height;
}
}
+
+
+/* landing (sign up) banner */
+#landing_banner {
+ -webkit-font-smoothing: antialiased;
+
+ padding-bottom: 40px;
+ width:100%;
+ text-align:center;
+
+ #landing_header {
+ margin: 0 auto;
+ width: 840px;
+ font-family:RobotoLight;
+ border-bottom: 1px solid #CCC;
+ padding: 0px 40px 30px 50px;
+
+ h1, h2 {
+ font-family:inherit;
+ }
+
+ h1 {
+ font-size:3em;
+ }
+
+ h2 {
+ font-size:2em;
+ color:#888;
+ margin-bottom:1.1em;
+ }
+
+ #email-link{
+ line-height: 35px;
+ color:#888;
+ font-family:RobotoBold;
+ }
+
+ .fb-facepile {
+ margin-top:5px;
+ }
+
+ .fb-btn {
+ font-size:1.5em;
+ margin-bottom:20px;
+ .fb-f {
+ margin-right: 10px;
+ }
+ }
+
+ .learn-more-wrapper {
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ left: 0;
+
+ a {
+ position: relative;
+ top: 16px;
+ }
+ }
+
+ #sign_up{
+ margin-top:20px;
+ margin-top:13px;
+ }
+
+ #typist-container {
+ width: 105px;
+ display: inline-block;
+ border-bottom: 1px dotted black;
+ height: 35px;
+ text-align: center;
+ margin:0 5px;
+ }
+ #typist {
+ -webkit-font-smoothing:antialiased;
+ }
+ }
+
+ .more-info {
+ text-align:center;
+ margin-top:30px;
+ display:none;
+ }
+}
@@ -1,28 +1,35 @@
<div class="container">
<div id="landing_banner">
- <div id='landing_header'>
- <div id='sign_up'>
- <a href="/users/auth/facebook" class="login btn-large new-btn fb-btn" ><img alt="Fb_f" class="fb-f" src="/assets/logos/fb_f.png">Login with Facebook</a>
- <br/>
- <a id='email-link' href="/users/sign_up">
- Sign up the email way
- </a>
- </div>
-
+ <div id='landing_header'>
<h1>
Makr.io is a new kind of meme generator.
</h1>
<h2>
A simple way to create <span id='typist-container'><span id='typist'>memes</span> </span>with friends.
</h2>
- </div>
- {{#if onFrontPage}}
- <div style="text-align:center;padding-top:20px;">
- <img width=819 src='{{imageUrl "branding/landing2.jpg"}}'>
+
+ <div id='sign_up'>
+ <a href="/users/auth/facebook" class="login btn-large new-btn fb-btn" ><img alt="Fb_f" class="fb-f" src="/assets/logos/fb_f.png">Login with Facebook</a>
+ <div style="margin-top:10px;">
+ <a id='email-link' href="/users/sign_up">
+ Sign up the email way
+ </a>
+ </div>
</div>
- <h2 style='text-align:center;font-family:RobotoLight;color:#999; padding-top: 15px;'>↓ See what people are saying about Makr.io! </h2>
+ <iframe src="http://www.facebook.com/plugins/facepile.php?app_id=223055781146202" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:60px; width:450px;" allowTransparency="true"></iframe>
+
+ <div class="learn-more-wrapper">
+ <a href="#" class="btn new-btn learn-more-btn">Learn More</a>
+ </div>
+ </div>
+ <div class="more-info">
+ <img width=819 src='{{imageUrl "branding/landing2.jpg"}}'>
+ </div>
+
+ {{#if onFrontPage}}
+ <h2 style='text-align:center;font-family:RobotoLight;color:#999;margin-top:15px;'>↓ See what people are saying about Makr.io ↓</h2>
{{/if}}
</div>
-</div>
+</div>

0 comments on commit b548c47

Please sign in to comment.