Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Adding promo-block in homepage and images

  • Loading branch information...
commit 6a5662bc9fb978458571916500de1723b08b5bd2 1 parent 53f679b
@tx2z tx2z authored
View
35 apps/landing/templates/landing/home.html
@@ -79,47 +79,38 @@
<section id="home-promos" class="home-promos">
- <div class="promo" id="promo-learn">
+ <div class="promo" id="promo-webapps">
<a href="{{ url('learn') }}">
- <h2>{{_("Learn")}}</h2>
- <p>{{_("Our collection of resources shows you how to use the technologies that power the Web.")}}</p>
+ <h2>{{_("Create")}}<br />{{_("Web Apps")}}</h2>
+ <p>{{_("Develop apps using Web standards and open technologies")}}</p>
</a>
<div></div>
</div>
- <div class="promo" id="promo-demos">
+ <div class="promo" id="promo-fosdev">
<a href="{{ url('demos') }}">
- <h2>{{_("Demos")}}</h2>
- <p>{{_("Check out what developers are doing with the latest Web standards and open technologies.")}}</p>
+ <h2>{{_("Firefox OS")}}<br />{{_("for developers")}}</h2>
+ <p>{{_("Open source mobile OS built with HTML, JavaScript, & WebAPIs")}}</p>
</a>
<div></div>
</div>
- <div class="promo" id="promo-foxdev">
+ <div class="promo" id="promo-fosmob">
<a href="{{ devmo_url('Firefox_for_developers') }}">
- <h2>{{_("Firefox for Devs")}}</h2>
- <p>{{_("See what's new for Web developers in the latest version of Firefox.")}}</p>
+ <h2>{{_("Firefox MOBILE")}}<br />{{_("for developers")}}</h2>
+ <p>{{_("How to use device APIs, test sites, & build mobile add-ons")}}</p>
</a>
<div></div>
</div>
- {% if waffle.switch('social_promo') %}
- <div class="promo" id="promo-social">
- <a href="{{_("docs/Social_API")}}">
- <h2>{{_("Make Firefox more social")}}</h2>
- <p>{{_("Learn about the social API")}} &raquo;</p>
- </a>
- <div></div>
- </div>
- {% else %}
- <div class="promo" id="promo-aurora">
+ <div class="promo" id="promo-fxdev">
<a href="{{_("http://www.mozilla.com/en-US/firefox/channel/")}}">
- <h2>{{_("Firefox Aurora")}}</h2>
- <p>{{_("Experience the latest desktop and mobile features in Aurora and help shape the future of Firefox.")}}</p>
+ <h2>{{_("Firefox")}}<br />{{_("for developers")}}</h2>
+ <p>{{_("See what’s new for web developers in the latest version of Firefox")}}</p>
</a>
<div></div>
</div>
- {% endif %}
+
</section><!-- /#home-promos -->
View
19 media/css/mdn-screen.css
@@ -416,11 +416,12 @@ footer .languages { float: right; text-align: right; margin: 0 0 .5em; }
/*** @Promos *********/
#home-promos { clear: both; overflow: hidden; }
-.home-promos .promo { float: left; position: relative; width: 218px; min-height: 163px; margin: 0 20px 40px 0; border: 1px solid rgba(0,0,0,.1); color: #fff; font-size: .714em; text-align: center; background: #666 url("../img/bg-check-dk.png"); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.15); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.15); box-shadow: 0 2px 2px rgba(0,0,0,.15); }
+.home-promos .promo { float: left; position: relative; width: 218px; min-height: 163px; margin: 0 20px 40px 0; border: 1px solid #333; color: #fff; font-size: .714em; background: #666 url("../img/bg-check-dk.png"); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.15); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.15); box-shadow: 0 2px 2px rgba(0,0,0,.15); }
.home-promos .promo:last-child { margin-right: 0; }
.home-promos .promo a { position: absolute; left: 0; top: 0; z-index: 10; display: block; height: 133px; width: 188px; padding: 15px; color: #fff; text-decoration: none; }
.home-promos .promo h2 { margin: 0 0 .1em; font: 2.4em/1 "Bebas Neue"; text-transform: uppercase; letter-spacing: .5px; }
.home-promos .promo .more { font-size: 1.3em; }
+.home-promos .promo p { width: 125px; }
.home-promos .promo div { position: absolute; z-index: 5; height: 163px; width: 218px; background: url("../img/bg-homepromos.png") no-repeat;
opacity: .6;
-moz-transition-property: opacity, background-position;
@@ -469,6 +470,22 @@ html[lang="en-US"] #promo-social div { background: url("../img/bg-social-promo-n
#promo-apps:hover .more { margin-top: -.1em; font-size: 1.4em; text-shadow: 2px 3px 5px rgba(0,0,0,.25); -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; }
#promo-apps:hover div { box-shadow: inset 0 0 30px rgba(150,30,0,.25); -moz-transition: box-shadow .2s ease-in; -webkit-transition: box-shadow .2s ease-in; -o-transition: box-shadow .2s ease-in; transition: box-shadow .2s ease-in; }
+.home-promos .promo { background-image: url("../img/bg-promos-homepage.jpg"); }
+.home-promos .promo div { background-image: url("../img/bg-promos-top-homepage.jpg"); }
+.home-promos .promo#promo-webapps { background-color: #667680; background-position: 0 0; }
+.home-promos .promo#promo-webapps div { background-position: 10px 0; }
+.home-promos .promo#promo-webapps:hover div { background-position: -12px 0; }
+.home-promos .promo#promo-fosdev { background-color: #088dd2; background-position: 0 489px; }
+.home-promos .promo#promo-fosdev div { background-position: 10px -163px; }
+.home-promos .promo#promo-fosdev:hover div { background-position: -12px -163px; }
+.home-promos .promo#promo-fosmob { background-color: #de5d0a; background-position: 0 326px; }
+.home-promos .promo#promo-fosmob div { background-position: 10px -326px; }
+.home-promos .promo#promo-fosmob:hover div { background-position: -12px -326px; }
+.home-promos .promo#promo-fxdev { background-color: #022856; background-position: 0 163px; }
+.home-promos .promo#promo-fxdev div { background-position: 10px -489px; }
+.home-promos .promo#promo-fxdev:hover div { background-position: -12px -489px; }
+
+
.home-extra #webfwd-promo { margin: -15px 0 1.5em; }
.home-extra #snippet-promo a { background: url("../img/features/labs_snippets_landing.png"); width:456px; height:150px; position:relative; display: block; font-family: "Open Sans", sans-serif; text-shadow: 1px 1px 0 #fff; }
.home-extra #snippet-promo a span.heading { display: block; color: #484848; font-size: 1.9em; position: absolute; top:20px; left: 20px; display: inline-block; line-height: 1.2em; }
View
BIN  media/img/bg-promos-homepage.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/bg-promos-top-homepage.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.