Skip to content

Instantly share code, notes, and snippets.

@justinrainbow

justinrainbow/newest-prize.png

Forked from aforwark/newest-prize.png
Created April 2, 2012 17:41
Show Gist options
  • Save justinrainbow/2285539 to your computer and use it in GitHub Desktop.
Save justinrainbow/2285539 to your computer and use it in GitHub Desktop.
Download ZIP
Rewards Widget
Raw
rewards-widget.css
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.hide-text {
text-indent: 150%;
white-space: nowrap;
overflow: hidden;
}
.shadow-box {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
background: #ffffff;
width: auto;
padding: 5px;
}
.font-normal {
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
}
.font-light {
font-family: "Open Sans Light", "Open Sans", Arial, sans-serif;
font-weight: 300;
}
body {
width: 1000px;
margin: 100px auto;
font-family: Arial, sans-serif;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
margin: 0;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
a,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
a.redeem {
background: #b6c317;
padding: 2px 5px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-shadow: 1px 1px #666;
display: block;
width: auto;
margin-left: 90px;
margin-top: 5px;
font-size: 11px;
font-weight: bold;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
a.rewards-shop-expand {
background: url('rewards-button.png') 0 0 no-repeat;
width: 75px;
height: 109px;
position: absolute;
top: -3px;
left: -53px;
text-indent: 150%;
white-space: nowrap;
overflow: hidden;
display: block;
}
.rewards-widget-hd {
margin: 0;
height: 102px;
overflow: hidden;
*zoom: 1;
background: #3a9ba3;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOWJhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzUyYjJiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYTliYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a9ba3), color-stop(50%, #52b2be), color-stop(100%, #3a9ba3));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%);
/* IE10+ */
background: linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%);
/* W3C */
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3a9ba3', endColorstr='#3a9ba3', GradientType=0);
/* IE6-8 */
}
.rewards-widget-hd:before,
.rewards-widget-hd:after {
display: table;
content: "";
}
.rewards-widget-hd:after {
clear: both;
}
.rewards-widget-hd .rewards-logo {
float: left;
display: block;
width: 248px;
margin: 0 0 0 20px;
}
.rewards-widget-hd .rewards-logo h1 {
display: block;
width: 248px;
height: 102px;
margin: 0;
text-indent: 150%;
white-space: nowrap;
overflow: hidden;
background: url(rewards-logo.png) 0 0 no-repeat;
}
.rewards-widget-hd .yui3-profile .yui3-profile-content {
float: left;
display: block;
border-left: 1px solid #99d3d6;
padding: 0 20px;
margin: 10px 0;
height: 82px;
width: 180px;
color: #FFF;
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
}
.rewards-widget-hd .yui3-profile .yui3-profile-content img.gravatar {
float: left;
margin: 0 5px 0 0;
}
.rewards-widget-hd .yui3-profile .yui3-profile-content h2 {
font-size: 20px;
line-height: 20px;
font-family: "Open Sans Light", "Open Sans", Arial, sans-serif;
font-weight: 300;
}
.rewards-widget-hd .yui3-carousel .yui3-carousel-content {
float: left;
display: block;
border-left: 1px solid #99d3d6;
padding: 0 10px;
margin: 10px 0;
height: 82px;
width: 235px;
color: #FFF;
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
}
.rewards-widget-hd .yui3-carousel .yui3-carousel-content h2 {
font-size: 17px;
line-height: 17px;
text-transform: uppercase;
font-family: "Open Sans Light", "Open Sans", Arial, sans-serif;
font-weight: 300;
}
.rewards-widget-hd .yui3-carousel .yui3-carousel-content ul {
margin: 5px 0 0 0;
}
.rewards-widget-hd .yui3-carousel .yui3-carousel-content ul li {
float: left;
display: block;
margin: 0 0 0 5px;
}
.rewards-widget-hd .yui3-prize .yui3-prize-content {
float: left;
display: block;
border-left: 1px solid #99d3d6;
padding: 0 20px;
margin: 10px 0;
height: 82px;
width: 210px;
color: #FFF;
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
}
.rewards-widget-hd .yui3-prize .yui3-prize-content img {
float: left;
margin: 0 5px 0 0;
}
.rewards-widget-hd .yui3-prize .yui3-prize-content h2 {
font-size: 15px;
line-height: 15px;
}
.rewards-widget-hd .yui3-prize .yui3-prize-content p {
font-style: italic;
font-family: Georgia, serif;
font-size: 12px;
margin: 2px 0;
line-height: 15px;
}
.rewards-widget-hd .yui3-prize .yui3-prize-content p.credits {
text-transform: uppercase;
font-size: 16px;
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
font-style: normal;
}
.rewards-widget-bd {
margin: 0;
background: #e2e2e2;
border: 1px solid #9b9ea3;
border-top: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
*zoom: 1;
height: 195px;
}
.rewards-widget-bd:before,
.rewards-widget-bd:after {
display: table;
content: "";
}
.rewards-widget-bd:after {
clear: both;
}
.rewards-widget-bd .yui3-carousel .yui3-carousel-content {
float: left;
width: 320px;
display: block;
margin: 10px 0;
padding: 0 20px;
color: #3d3d3d;
text-align: center;
height: 175px;
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
}
.rewards-widget-bd .yui3-carousel .yui3-carousel-content h2 {
font-size: 22px;
line-height: 22px;
text-transform: uppercase;
font-family: "Open Sans Light", "Open Sans", Arial, sans-serif;
font-weight: 300;
}
.rewards-widget-bd .yui3-carousel .yui3-carousel-content ul {
margin: 5px auto;
width: 300px;
*zoom: 1;
}
.rewards-widget-bd .yui3-carousel .yui3-carousel-content ul:before,
.rewards-widget-bd .yui3-carousel .yui3-carousel-content ul:after {
display: table;
content: "";
}
.rewards-widget-bd .yui3-carousel .yui3-carousel-content ul:after {
clear: both;
}
.rewards-widget-bd .yui3-carousel .yui3-carousel-content ul li {
float: left;
margin: 0 0 0 10px;
text-align: center;
}
.rewards-widget-bd .yui3-carousel .yui3-carousel-content ul li p {
margin: 3px 0;
font-size: 12px;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content {
margin: 10px 0;
padding: 25px 20px 0 20px;
float: left;
width: 340px;
border-left: 1px solid #8f8f8f;
position: relative;
color: #3d3d3d;
height: 150px;
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .newest-prize {
display: block;
text-indent: 150%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 20px;
right: 25px;
background: url('newest-prize.png') 0 0 no-repeat;
width: 79px;
height: 77px;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box {
width: 280px;
*zoom: 1;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box:before,
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box:after {
display: table;
content: "";
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content .shadow-box:after {
clear: both;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content img {
float: right;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content h2 {
font-size: 14px;
line-height: 18px;
margin-bottom: 15px;
font-family: "Open Sans Light", "Open Sans", Arial, sans-serif;
font-weight: 300;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content h2 strong {
font-size: 16px;
font-family: "Open Sans", Arial, sans-serif;
font-weight: normal;
}
.rewards-widget-bd .yui3-newest-prize .yui3-newest-prize-content p {
margin: 0;
padding: 0;
font-size: 11px;
}
.rewards-widget-bd .yui3-recent-activity .yui3-recent-activity-content {
margin: 10px 0;
padding: 0 20px;
float: left;
width: 215px;
height: 175px;
border-left: 1px solid #8f8f8f;
font-family: "Open Sans Light", "Open Sans", Arial, sans-serif;
font-weight: 300;
}
.rewards-widget-bd .yui3-recent-activity .yui3-recent-activity-content ul li {
background: #FFF;
padding: 5px 10px;
margin: 5px 0;
}
.rewards-widget-bd .yui3-recent-activity .yui3-recent-activity-content ul li a {
color: #3d3d3d;
font-size: 15px;
}
Raw
rewards-widget.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rewards Widget</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="rewards-widget.css" />
</head>
<body>
<a href="#" class="rewards-shop-expand">Rewards Shop</a>
<div class="rewards-widget-hd">
<div class="rewards-logo">
<h1>SheKnows Rewards Shop</h1>
</div>
<div class="yui3-profile">
<div class="yui3-profile-content">
<img class="gravatar" src="http://www.placekitten.com/85/85" />
<h2>Benjamin</h2>
<strong>525 Credits</strong>
<a href="#" class="redeem">Redeem Your Points</a>
</div>
</div>
<div class="yui3-carousel">
<div class="yui3-carousel-content">
<h2>Eligible For These Prizes</h2>
<ul class="carousel">
<li><img src="http://www.placekitten.com/65/65" alt="Kitteh" /></li>
<li><img src="http://www.placekitten.com/65/65" alt="Kitteh" /></li>
<li><img src="http://www.placekitten.com/65/65" alt="Kitteh" /></li>
</ul>
</div>
</div>
<div class="yui3-prize">
<div class="yui3-prize-content">
<img src="http://www.placekitten.com/85/85" />
<h2>Earn 45 more credits to get:</h2>
<p>Bath and Body Works vanilla sugar gift set</p>
<p class="credits">570 Credits</p>
</div>
</div>
</div>
<div class="rewards-widget-bd">
<div class="yui3-carousel">
<div class="yui3-carousel-content">
<h2>Eligible For These Prizes</h2>
<ul class="carousel">
<li class="shadow-box">
<img src="http://www.placekitten.com/65/80" />
<p>The Rebound</p>
<p>200 Credits</p>
</li>
<li class="shadow-box">
<img src="http://www.placekitten.com/65/80" />
<p>The Rebound</p>
<p>200 Credits</p>
</li>
<li class="shadow-box">
<img src="http://www.placekitten.com/65/80" />
<p>The Rebound</p>
<p>200 Credits</p>
</li>
</ul>
</div>
</div>
<div class="yui3-newest-prize">
<div class="yui3-newest-prize-content">
<span class="newest-prize">Newest Prize</span>
<div class="shadow-box">
<img src="http://www.placekitten.com/190/125" />
<h2>You are only <strong>45 Credits</strong> away from:</h2>
<p>Juicy perfume gift set</p>
<p>570 Credits</p>
</div>
</div>
</div>
<div class="yui3-recent-activity">
<div class="yui3-recent-activity-content">
<ul class="carousel">
<li><a href="#">You just earned 20pts for commenting</a></li>
<li><a href="#">You just earned 8pts for finding a keyword</a></li>
<li><a href="#">Like us on Facebook to earn 15 points</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
rewards-widget.less
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.5)) {
box-shadow:@shadow;
-webkit-box-shadow:@shadow;
-moz-box-shadow:@shadow;
-o-box-shadow:@shadow;
}
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
.hide-text {
text-indent:150%;
white-space:nowrap;
overflow:hidden;
}
.shadow-box {
.box-shadow();
background:#ffffff;
width:auto;
padding:5px;
}
.font-normal {
font-family:"Open Sans", Arial, sans-serif;
font-weight:normal;
}
.font-light {
font-family:"Open Sans Light", "Open Sans", Arial, sans-serif;
font-weight:300;
}
body {
width:1000px;
margin:100px auto;
font-family:Arial, sans-serif;
position:relative;
}
h1, h2, h3, h4, h5, h6 { font-weight:normal; margin:0; }
ul, ol { list-style: none; margin:0; padding:0; }
a, a:visited, a:hover, a:active { text-decoration:none; }
a.redeem {
background:#b6c317;
padding:2px 5px;
text-align:center;
color:#FFF;
text-transform:uppercase;
text-shadow:1px 1px #666;
display:block;
width:auto;
margin-left:90px;
margin-top:5px;
font-size:11px;
font-weight:bold;
.box-shadow();
}
a.rewards-shop-expand {
background:url('rewards-button.png') 0 0 no-repeat;
width:75px;
height:109px;
position:absolute;
top:-3px;
left:-53px;
.hide-text;
display:block;
}
.rewards-widget-hd {
margin:0;
height:102px;
overflow:hidden;
.clearfix;
background: #3a9ba3; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOWJhMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzUyYjJiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYTliYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #3a9ba3 0%, #52b2be 50%, #3a9ba3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a9ba3), color-stop(50%,#52b2be), color-stop(100%,#3a9ba3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* IE10+ */
background: linear-gradient(top, #3a9ba3 0%,#52b2be 50%,#3a9ba3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9ba3', endColorstr='#3a9ba3',GradientType=0 ); /* IE6-8 */
.rewards-logo {
float:left;
display:block;
width:248px;
margin:0 0 0 20px;
h1 {
display:block;
width:248px;
height:102px;
margin:0;
.hide-text;
background:url(rewards-logo.png) 0 0 no-repeat;
}
}
.yui3-profile .yui3-profile-content {
float:left;
display:block;
border-left:1px solid #99d3d6;
padding:0 20px;
margin:10px 0;
height:82px;
width:180px;
color:#FFF;
.font-normal;
img.gravatar { float:left; margin:0 5px 0 0; }
h2 {
font-size:20px;
line-height:20px;
.font-light;
}
}
.yui3-carousel .yui3-carousel-content {
float:left;
display:block;
border-left:1px solid #99d3d6;
padding:0 10px;
margin:10px 0;
height:82px;
width:235px;
color:#FFF;
.font-normal;
h2 {
font-size:17px;
line-height:17px;
text-transform:uppercase;
.font-light;
}
ul {
margin:5px 0 0 0;
li {
float:left;
display:block;
margin:0 0 0 5px;
}
}
}
.yui3-prize .yui3-prize-content {
float:left;
display:block;
border-left:1px solid #99d3d6;
padding:0 20px;
margin:10px 0;
height:82px;
width:210px;
color:#FFF;
.font-normal;
img { float:left; margin:0 5px 0 0; }
h2 {
font-size:15px;
line-height:15px;
}
p {
font-style:italic;
font-family:Georgia, serif;
font-size:12px;
margin:2px 0;
line-height:15px;
&.credits { text-transform:uppercase; font-size:16px; .font-normal; font-style:normal; }
}
}
}
.rewards-widget-bd {
margin:0;
background:#e2e2e2;
border:1px solid #9b9ea3;
border-top:none;
.box-shadow();
.clearfix;
height:195px;
.yui3-carousel .yui3-carousel-content {
float:left;
width:320px;
display:block;
margin:10px 0;
padding:0 20px;
color:#3d3d3d;
text-align:center;
height:175px;
.font-normal;
h2 {
font-size:22px;
line-height:22px;
text-transform:uppercase;
.font-light;
}
ul {
margin:5px auto;
width:300px;
.clearfix;
li {
float:left;
margin:0 0 0 10px;
text-align:center;
p {
margin:3px 0;
font-size:12px;
}
}
}
}
.yui3-newest-prize .yui3-newest-prize-content {
margin:10px 0;
padding:25px 20px 0 20px;
float:left;
width:340px;
border-left:1px solid #8f8f8f;
position:relative;
color:#3d3d3d;
height:150px;
.font-normal;
.newest-prize {
display:block;
.hide-text();
position:absolute;
top:20px;
right:25px;
background:url('newest-prize.png') 0 0 no-repeat;
width:79px;
height:77px;
}
.shadow-box { width:280px; .clearfix; }
img { float:right; }
h2 {
font-size:14px;
line-height:18px;
margin-bottom:15px;
.font-light;
strong { font-size:16px; .font-normal; }
}
p {
margin:0;
padding:0;
font-size:11px;
}
}
.yui3-recent-activity .yui3-recent-activity-content {
margin:10px 0;
padding:0 20px;
float:left;
width:215px;
height:175px;
border-left:1px solid #8f8f8f;
.font-light;
ul li {
background:#FFF;
padding:5px 10px;
margin:5px 0;
a {
color:#3d3d3d;
font-size:15px;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment